Tech Support

Lonce Wyse

Communication & New Media

lonce.wyse@cnm.nus.sg

Method Chaining

Ah, the elegance!

var rect1 = paper.rect(100, 100, 100, 100);
rect1.attr({ fill: '#0F6' });           

function that returns a rectangle

method on the rectangle object

var rect1 = paper.rect(100, 100, 100, 100).attr({ fill: '#0F6' });           

Math object 

Math.PI
Math.SQRT2
 
Math.abs(x)    -  |x|
Math.pow(x, y) -  x^y


Math.cos(x)   - Returns the cosine of a number.
Math.sin(x)   - Returns the sine of a number.


Math.ceil(x)  - Returns the smallest integer greater than or equal to a number.
Math.floor(x) - Returns the largest integer less than or equal to a number.
Math.round(x) - Returns the value of a number rounded to the nearest integer.

Math.max(x,y, ...)  -  Returns the largest of zero or more numbers.
Math.min(x,y, ...)  -  Returns the smallest of zero or more numbers.

Math.random() - Returns a pseudo-random number between 0 and 1.

Built in for your convenience

Function Scope 

Variables are scoped within the function where they are defined.

require(
	[],
	function () {
            var bar = 10;  // accessible everywhere
    
            var myFunc = function(){
                var foo = 3;      // accessible on inside myFunc
                console.log( "foo is " + foo);
                console.log( "bar is " + bar);
            }
    
            console.log("foo says " + foo);   // always returns undefined.
        }
);

Real-life example 

require(
  [],
  function () {
    var mousePushed = false; // accessible to all, "remembered" across function calls

    document.addEventListener("mousedown", function(){
        var foo = "mouse is down";
        console.log("foo says " + foo);
        mousePushed = true;    
    });

    document.addEventListener("mouseup", function(){
        var foo = "mouse is up";
        console.log("foo says " + foo);
        mousePushed = false;    
    });

    document.addEventListener("mousemove", function(){
        if (mousePushed){ 
            console.log("mouse is being dragged");
        }    
    });

    console.log("foo says " + foo);   // always returns undefined.
  }
);

Timer (Event Generators)

• Bullet One
•  

// structure: 
setTimeout( function, milliseconds);

//example
setTimeout( function(e){ alert("Yo time!");}, 1000); // 1000ms = 1 second

What can we do with this?

Animation!