A music box for playing drums, chords, and solos.
A music box for playing drums, chords, and solos.
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:
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.
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
What is EcmaScript?
History of EcmaScript
But, EcmaScript stuck at ES3 since 1999. Because Fourth Edition was abandoned, due to political differences concerning language complexity. Many features proposed for the Fourth Edition have been completely dropped.
In December 2009, the fifth edition was published. On the basis of ES3, ES5 assimilates some features of the popular frameworks.
EcmaScript 3 VS EcmaScript 5
There are 6 main differences between ES3 and ES5 – Implementation, properties and attributes, function, array, JSON and strict mode.
This chart from EcmaScript Wikipedia shows the application implementation in ES3 and ES5.
ES3 code can only create properties that are writable, enumerable, and deletable. There’re only 3 property attributes in ES3 – ReadOnly, DontEnum and DontDelete. Also, ES3 can’t create properties which compute on assignment or reading.
In ES5, attributes are changed into Writable(does assignment work?), Enumerable(does for-in see it?) and Configurable(can its shape change?) and they are controllable. Attribute values are programmatically settable and testable. Also, Accessor Properties (getter/setter) was added to ES5. Property attribute control and accessor properties means it is able to emulate DOM API in ES code now.
We can manipulate properties and attributes by using ES5 methods. For example, we can use Object.defineProperty(obj, propName, propDescriptor) to define a property as well as modify property attributes.
Define a property:
Modify property attributes:
These are other object meta methods:
• Object.defineProperties(obj, propName, descriptorSet)
• Object.create(protoObj, descriptorSet)
The function in ES5 has 4 features:
1. the value of ‘this’ will not be changed when calling ‘.call()’ or ‘.apply()’
2. ‘null’ and ‘undefined’ will not be returned to global
3. a non-object will not be switched to an object
4. new method Bind. This bind method allows the user to set up the value of this and apply the value to the function.
In ES3, there’re not many methods can be used to manipulate the array. ES5 enhances this, now all these methods are all can be used directly.
These are array meta methods:
There is no normative technology of translating JSON data in ES3. In ES5, two main libraries were added to support for JSON. JSON.stringify() will return the value to JSON String, JSON.parse() will do the opposite.
JSON.stringify() → string
JSON.parse() → value
In ES3 or ES5-nonstrict, Failure is silent. Execution will proceed assuming success. And we can’t check after every assignment to see if it succeeded. In ES5, Failed assignments throw. A subset intended to provide more thorough error checking and avoid error-prone constructs.
This is how we use strict mode:
On the basis of ES3, ES5 assimilates some features of the popular frameworks and enhances its capability. It’s better for real programs.
EcmaScript From Wikipedia
Intensive Study of EcmaScript 5
EcmaScript 3.1 Object model