there are 2 ways generally to draw in Cocos2d. One is taking advantage of the ‘draw’ function that every instance of CCNode, CCSprite and CCLayer inherit. it’s taking advantage of the openGL engine, but for most cases the result is a bit rough looking… you can draw lines, basic shapes and fills. It’s really fast and it saves you a lot of the hassle of getting the graphic context and all that. here’s how you draw a simple line — “draw” is overriding a function that gets called every single frame — you you are essentially redrawing all the time.

The other way of drawing in Cocos2D is using whats called Render Texture. The general idea is that you take an image and burn it’s texture in a certain position. it’s really straight forward and it lets you control the type of brush/shape with the image you’re using. The basic implementation is something like this:

When I was playing around with these methods my first instinct was to create a bunch of sprites and draw on the at the same time to get a cool effect with rotation/scale etc. That proved to be a very bad idea with RenderTexture. Sprites are extremely expensive, memory-wise, and especially when they’re big. Very quickly I brought the FPS down to 12 (from 60). What I had to do is create more complex math and keep the sprite count at 1 which works really well.

Here are some early findings:

how to create a sprite and add it to the display list:

how to add an enterFrame Event:

and how the enterFrame function looks like:

Here is a small app I ported from flash. The cool thing is that you don’t need to change any of your code, expect for accounting for the small screen. Of course there are the new multitouch functions that you can take advantage of, but that’s like an added bonus. Check it out. make some apps!

Fun with Flash on Android from Itai Asseo on Vimeo.

I had the basic principles in place: create a circle, and create a beginSwipe andgle and an endSwipe angle. done:

the code looks something like this:

Next, I needed to place the scroll handlebar at the top of the sweep (top of green line in picture), and have it be draggable to the bottom of the sweep. To do that, I calculated the X,Y position of the top and bottom (which I already have in the code), and upon click, I created a rectangle that represented the bounding box for the drag operation. Then, I calculated the percentage point of the handle inside that bounding box to get the 0-1 result, and using the Y position, extracted what the X position would be:

The only problem is that now, when I remove the guides (the circle and angles), I am left with only the slider… and I need the arc so the slider has some visual representation. There are 2 solutions for that. Simple solution: mask the circle… easy to do. here’s the result:

A solution that’s a bit more complex is to DRAW the arc.. that’s where I was happy to find this nice post by the algorythmist. So, using this code, you can then create a nice circular slider:

now all that’s left to do is output the percentage from the slider and you got yourself a nice circular slider!

here’s the final code:

The first thing I want to go over is the creation of the drawing application. The architecture of it is pretty simple, but crucial to making it work well, and having it be extendable and modular. My first step was to create the canvas. since a snowflake has an ice crystal formation, it has to have 6 sides.  So my first step is to draw 6 triangles that form a hexagon:

The code for this is pretty simple, looks like this:

Now, even though this is my canvas which I’m using to capture the mouse events, I’m going to draw the actual shapes on a separate Sprite, so I can have better control. In order to do that, I’m going to place 6 empty Sprites in the center of the hexagon, each one rotated, just like the triangles I drew. I’ll add a new function – createShapeHolders() – to the constructor (notice that I’m disabling all MouseEvents for these ’shapes’, because I want to control them from the canvas I drew earlier). For each of the triangles (which are separate Sprites), I’m going to add a MouseEvent, which will trigger the drawing application. I’m going to add that to the ‘for loop’ in the createFlakeStage() function, and I’m also adding 3 MouseEvent functions: beginShape, renderShape and endShape.

When I click on any of the triangles now, beginShape() will save the slice I clicked on as _slice (added as a private var to the class), and trigger a MOUSE_MOVE event. Then, as I move the mouse, the renderShape() function will draw on all 6 sides of the hexagon:

CLICK TO SEE THIS IN ACTION

Now the only problem is that it doesn’t look like a symmetrical drawing… it basically copies the shape you’re drawing and places it in a circle. Now we need to add a reflection to the shape. So, to do that, we’ll have to add 2 Sprites to each of the ’shapes’ we created in the createShapeHolders() function. One of those shapes we’ll flip horizontally (scaleX = -1) and then, each time we trigger beginShape and renderShape, we’ll use the FP10 copyFrom() function to create a reflection effect. All we have left to do now is to hide the canvases, and start drawing! here is the result:

CLICK HERE TO SEE IT IN ACTION – CLICK AND DRAG NEAR THE CENTER OF THE STAGE

and here is the final code:

The site has done MUCH better than expected — over 23,000 snowflakes were made (in less than 2 weeks), and almost $7,000 donated to UNICEF. The site is pretty small at 200kb, but so far we’ve served over 600GB of data to users (most of it is probably the snowflakes that are being saved as PNGs on the server).

To create this application I had to do an extensive brush-up on my flash drawing API skills.  I’m using some of the new features from FP10 like IGraphicsPath and the 3D rotations (as well as Papervision3D). That graphics data is being saved in Vector arrays, and is stored on the database.  When you view a snowflake, that data is being passed back to flash, and then get’s drawn again with the same API.

In the next few posts I’ll talk about some of the techniques I used to create the application.  some of the highlights in my opinion are: saving and recreating vector data, creating smooth lines, and creating the circular slidres.  Creating the snowflake generative drawing I think was the least challenging thing in the site…

-itai

here’s what it looks like (click to watch animation):

here is the code involved with using the effect:

It is based on my previous work that I posted here.

the following effect is achieved simply by typing the following:

but the fun part is animating the effect with a simple API. I’m using the new TweenLite v11, but any tween engine or really any other way (like controlling the swipe with the position of the mouse). here’s how I’m creating the different swipes in the example below:

Special thanks to Joe Ferrari for helping me through the diagonal array math (still working on the BottomLeft to TopRight swipe)

In this version the 2 boxes next to the selected box and the 2 above and below grow as well, and the response and alignment is much better.

here’s what it looks like now:

here is the source