Posted on

Drag and drop stars to mix colors in EaselJS

In this tutorial we are going to create a demo that allows us to choose 3 colors, apply them to 3 drag and droppable stars separately, then mix the colors by combining the stars. We will use Shape and ColorFilter classes in EaselJS.

Preparation

Since we assume a basic understanding of EaselJS we are going to skip the setup code of HTML document and Canvas.

We are going to add 3 color selectors outside of the Stage first because there are 3 colors that can be chosen. After that, we will usedocument.getElementById().value to get the values of the chosen colors.

t1

 

Creating Stars

Next, we will create a star using Shape class and add it to the Stage.

t2

 

Line 20 creates a new Shape instance. EaselJS provides a drawPolyStar(x, y, radius, sides, pointSize, angle) method for us to draw a star easily. This star is going to be filled with the first color that we chose. So in this case, we are telling the graphics object to draw polyStar1 with radius 120, sides 5, pointSize 0.6, angle -30, centered at 0,0, and filled with confirmcolor1 that we got from the preparation part.

It is important to set the star centering at 0,0 first and reposition it afterwards, such as x & y on lines 23 & 24. This will reduce confusion in the later phases of coding. In order for a display object to be drawn, we need to add polyStar1 to the stage, as shown in line 25.

The remaining two stars will be created in the same way and filled with another 2 colors: confirmcolor2 and confirmcolor3.

t3

 

Drag and Drop the Stars

In order to drag and drop a star, we use a .addEventListener(type, listener, [useCapture]) method to connect a mouse event to a function. Then we will move the star by setting up its X and Y coordinate. stageX / stageY is the normalized x/y position on the Stage which will always be within the range 0 to stage width/height.

t4

 

Mix Colors by Combining the Stars

Let’s combine polyStar1 with polyStar2 and mix their colors first.

When combining the stars, we use a hitTest method to determine if a star is hitting another one.

t5

 

This is how we are going to achieve the effect of combining two stars into one: PolyStar1 will be invisible as soon as it hits polyStar2. Then the color ofpolyStar2 will be transformed to a mixed color(confirmcolor1 + confirmcolor2) by using createjs.colorFilter(redMultiplier, greenMultiplier, blueMultiplier, alphaMultiplier, redOffset, greenOffset, blueOffset, alphaOffset). In this case, the mixed color’s Red, Green, Blue value will be calculated by a formula and put into redOffset, greenOffset and blueOffset correspondingly. Also, the value of alphaMultiplier will be 1 as the color is fully opaque. The rest of the properties can be multiplied by 0 because all the properties of createjs.colorFilter() are optional.

t6

 

When the content of a object changes, we must manually update the cache by calling updateCache() or cache() again. We must specify the cache area via the x, y, width and height parameters. That’s why we mentioned that we should set the star centering at 0,0 first as it is much easier for us to calculate the cache parameters. In this case, because the radius of polyStar2 is 120 and the centre is 0,0, the coordinate of its cache will be (-120, -120) and both width and height will be 240.

Final

There we have 2 stars to combine and mix! We can also combine all the stars and mix all the colors, or combine any 2 of these stars in the same way. If you want to combine 2 stars first, then add it to the third star, you just need to put a hitTest function inside another hitTest function.

t7

 

t8

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>