ZIM BITS TUTORIAL
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>ZIM BITS - Pass Parameters or Object</title>
<!-- Welcome to ZIM at https://zimjs.com - Code Creativity! -->
<!-- ZIM runs on the HTML Canvas powered by JavaScript and CreateJS https://createjs.com -->
<!-- Founded by Inventor Dan Zen - http://danzen.com - Canadian New Media Award Winner -->
<!-- ZIM is free to use. You can donate to help improve ZIM at http://zimjs.com/donate -->
<script src="https://zimjs.org/cdn/1.3.4/createjs.js"></script>
<script src="https://zimjs.org/cdn/01/zim_min.js"></script>
<!-- use zimjs.com/distill for minified individual functions! -->
<script src="https://zimjs.com/bits/footer10.js"></script><!-- you will not need this -->
<script>
// SCALING OPTIONS
// scaling can have values as follows with full being the default
// FIT sets canvas and stage to dimensions and scales to fit inside window size
// FILL sets canvas and stage to dimensions and scales to fit outside window size
// FULL sets stage to window size with no scaling
// "tagID" add canvas to HTML tag of ID - set to dimensions if provided - no scaling
const scaling = FIT; // this will resize to fit inside the screen dimensions
const width = 1000;
const height = 800;
const color = dark; // or any HTML color such as "violet" or "#333333"
const outerColor = light;
new Frame(scaling, width, height, color, outerColor, ready);
function ready() {
// given F (Frame), S (Stage), W (width), H (height)
// ZIM BITS - Pass Parameters or Object (2016 - updated 2022)
// Sometimes we have functions or Classes with lots of parameters
// these may be optional and it is annoying to pass nulls to get to the last parameter
// ZIM gives us zob() a global function and a technique to perhaps make this easier
// zob() makes it so you can alternatively pass a single object
// the object can have properties that match the parameter names
// STEPS
// 1. make the function with parameters
// 2. add a special second line that will rerun the function if a single object is passed
// 3. call the function with parameters - OR
// 4. call the function with a single object with property names of the parameters
// 1. make the function with parameters
function test(a,b,c,d,e,f) {
// 2. add a special second line that will rerun the function if a single object is passed
// here we assume we are not minifying the code
// and we assume that we are not running the function with the new keyword
let duo; if (duo = zob(test, arguments)) {return duo;}
zog(f);
}
// now we can call the function two ways:
// 3. call the function with parameters
test(null,null,null,null,null,"parameters");
// 4. or call the function with a single object with property names of the parameters
test({f:"object"});
class Person extends Container {
constructor(hair=black, eyes=black) {
super(160,340);
// if ZIM DUO is desired would call this line - no real need for only two parameters
let duo; if (duo = zob(Person, arguments, "hair,eyes", this)) {return duo;}
new Rectangle(100,170,green)
.pos(0,0,CENTER,BOTTOM,this);
this.dress = new Rectangle(120,60,grey)
.pos(0,60,CENTER,BOTTOM,this)
.sha("rgba(0,0,0,.2)", 5, 5, 10);
new Circle(80,hair)
.pos(0,0,CENTER,TOP,this)
.sha("rgba(0,0,0,.2)", 5, 5, 10);
new Circle(60,brown)
.pos(0,50,CENTER,TOP,this);
new Circle(14,eyes)
.pos(-20,100,CENTER,TOP,this);
new Circle(14,eyes)
.pos(20,100,CENTER,TOP,this);
this
.centerReg()
.drag({all:true});
}
}
// now we can call the class in two ways:
const p1 = new Person("darkgoldenrod", "steelblue")
.loc(350, 330);
// or
const p2 = new Person({eyes:"olive"}) // with hair being default black
.loc(700, 330);
// their labels
const label1 = new Label('new Person("darkgoldenrod", "steelblue");', null, null, "#ccc")
.loc(40, 570);
const label2 = new Label('new Person({eyes:"olive"});', null, null, "#ccc")
.loc(480, 70);
// EXTRA
// if zob() detects a object as the first and only parameter
// then it turns the object properties into parameters and reruns the function
// it uses the JavaScript apply() function to do so - it is quite the function!
const docItems = "Frame,Container,Circle,Rectangle,Label,drag,pos,mov,sca,addTo,centerReg,center,zog";
makeFooter(S, W, H, null, docItems); // ZIM BITS footer - you will not need this
} // end of ready
</script>
<meta name="viewport" content="width=device-width, user-scalable=no" />
</head>
<body>
<!-- canvas with id="myCanvas" is made by zim Frame -->
</body>
</html>