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
ColorFilter classes in EaselJS.
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 use
document.getElementById().value to get the values of the chosen colors.
Next, we will create a star using
Shape class and add it to the
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
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:
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.
stageY is the normalized x/y position on the
Stage which will always be within the range 0 to stage width/height.
Mix Colors by Combining the Stars
polyStar2 and mix their colors first.
When combining the stars, we use a
hitTest method to determine if a star is hitting another one.
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 of
polyStar2 will be transformed to a mixed color(
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
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.
When the content of a object changes, we must manually update the cache by calling
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.
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