Script Things I Must Remember

In no particular order, here is a list of tricks/ tips that I can never recall:

Get and Set in JS

var log = [‘test’];
var obj = {
get latest () {
return log;
},
set latest (s) {
log = s;
}
}
obj.latest = ‘appleberry’;
console.log (obj.latest); // Will return "test".

Array, Map and Fat Arrow

//Convert an HTML Collection to an array with [].slice.call()
//.map fires a function for each item
//Use a fat arrow function to create a parameter e and change the style of e
([].slice.call(document.getElementsByTagName("div"))).map(e => e.style.background = "blue");

Rotated Gradient Mesh

Rotating gradient meshes in as3 is deceptively difficult. I often forget to convert from degrees to rads.

import flash.display.MovieClip;
import flash.geom.Matrix;

var mc:MovieClip = new MovieClip();
addChild(mc);
var _width:Number = 400;
var _height:Number = 300;
var _rotationRad:Number = 90*Math.PI/180;
var gm:Matrix = new Matrix();
gm.createGradientBox(_width,_height,_rotationRad);
mc.graphics.beginGradientFill("linear", [0xFFFFFF, 0xFF0000], [1,1], [0,255], gm);
mc.graphics.drawRect(0,0,_width,_height);
mc.graphics.endFill();

?: – Conditional Expression

A fun to write alternative to the IF statement is the ternary operator – ?:. I understand the term to describe any type of operator that has three arguments. I have almost literally written this thousands of times and can rarely remember the structure. In the case of the Conditional Expression, the arguments take the form condition ? trueValue : falseValue; as illustrated below.

var n:Number = 5;
var msg:String = (n <5)? "Less than 5": "5 or more!";
trace(msg);

Math.abs

Get the distance from zero of a number using Math.abs – you always get a positive number. “Doing the math” inline is often faster than calling a method, but I feel the improvement is insignificant for repetitions less than those in the order of millions – I can see where lookup tables become handy.

//This is faster than calling Math.abs(n)
//by my less than scientific tests, I’m getting about 2.4x faster with doing this inline over 5 million repetitions
trace((n < 0)? -n : n) ;

//This is slower, but easier to remember
trace(Math.abs(n));

Draw a Circle – basic Trig

Draw a circle using a radius and starting point. This gives me the ability to place a point at any angle given a starting point.

//starting x and y position for the circle
var xStart:Number=200;
var yStart:Number=200;

//radius of the circle
var r:Number=50;

graphics.lineStyle (0.5,0xFF9999,1);
graphics.moveTo(xStart,yStart);

//theta is the angle to draw at
for (var theta = 0; theta<=360;theta+=10){
//Convert theta angle to degrees
var rads = (Math.PI)/180 * theta;

//Opposite and Adjacent correspond to two sides of a right angled triangle
//and give us the x and y position for the next point on the circumference of our circle
var opposite = r*(Math.sin(rads));
var adjacent = r*(Math.cos(rads));

var xNext = xStart + opposite;
var yNext = yStart + adjacent;

graphics.lineTo(xNext,yNext);
}

graphics.moveTo(xStart,yStart);

Closure and Passing Parameters Through a Handler

As an alternative to declaring global variables you can pass them directly to an event handler without extending it. The variables DON’T GET COLLECTED as long as the aHandler exists – beware of memory leaks!

var aHandler:Function = aFunction(Math.random()*10, Math.random()*10);

mc_btn.addEventListener(MouseEvent.CLICK, aHandler);

function aFunction(aParam, bParam):Function{
var clickHandler:Function = function (e:MouseEvent):void{
trace(aParam, bParam);
}
return clickHandler;
}

Radians and Degrees

Convert from degrees to radians

var rads = degrees *(Math.PI/180);
var degrees = rads /(Math.PI/180);

↑Back to Top