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

Posted on

EcmaScript 3 VS EcmaScript 5

When we speak of EcmaScript, not many people know what it is. But everyone is familiar with JavaScript. So what is EcmaScript and what’s the relationship between JavaScript and EcmaScript?

What is EcmaScript?

EcmaScript is the scripting language standardized by Ecma International in the ECMA-262 specification and ISO/IEC 16262. The language is widely used for client-side scripting on the web, in the form of several well-known implementations such as JavaScript, JScript and ActionScript.

Javascript = EcmaScript + DOM + BOM

EcmaScript is not the only part of JavaScript. Actually, a complete JavaScript is consist of three parts. The core is EcmaScript, it describes the grammar and objects. The remaining parts are DOM and BOM.

History of EcmaScript

The First edition of EcmaScript was published in June 1997. Then the second edition was published one year later and it changed to keep the specification fully aligned with international standard. In December 1999, the third edition, which added regular expressions, better string handling, new control statements, try/catch exception handling, tighter definition of errors, formatting for numeric output and other enhancements, has become the standard of JavaScript and has been supported widely by the browsers.

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.
Implementation

This chart from EcmaScript Wikipedia shows the application implementation in ES3 and ES5.

implementation

Properties and Attributes

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.

attributes

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:

defineProperty

Modify property attributes:

modifyProperty

These are other object meta methods:
• Object.defineProperties(obj, propName, descriptorSet)
• Object.create(protoObj, descriptorSet)
• Object.getOwnPropertyNames(obj)
• Object.Prototype
• Object.getPrototypeOf(obj)
• Object.getOwnPropertyDescriptor
• Object.getOwnPropertyNames
• Object.preventExtensions
• Object.isExtensible(obj)
• Object.seal
• Object.isSealed(obj)
• Object.freeze
• Object.isFrozen(obj)
• Object.keys

Function

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.

function

Array

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:
• Array.prototype.indexOf
• Array.prototype.lastIndexOf
• Array.prototype.every
• Array.prototype.some
• Array.prototype.forEach
• Array.prototype.map
• Array.prototype.filter
• Array.prototype.reduce
• Array.prototype.reduceRight

array

JSON

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

stringify

JSON.parse() → value

parse

Strict Mode

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:

strict

Conclusions

On the basis of ES3, ES5 assimilates some features of the popular frameworks and enhances its capability. It’s better for real programs.

 

References:

EcmaScript From Wikipedia
http://en.wikipedia.org/wiki/EcmaScript

Intensive Study of EcmaScript 5
http://www.ibm.com/developerworks/cn/web/1305_chengfu_ecmascript5/#ibm-pcon

EcmaScript 3.1 Object model
http://ppt.tax5.net/e/ecmascript-31-object-model—secure-ecmascript-workshop-w11846-ppt.ppt

Changes to JavaScript, Part 1: EcmaScript 5
http://google-caja.googlecode.com/svn/trunk/doc/html/es5-talk/img0.html