Magic

new Circle(80, pink); // 80 is the size and pink is the color

new Circle(80, pink).center().mov(-200);

var button = new Button().center();
button.enabled = false;  // turn off the button

// Class names start with a capital letter
// Variable names should start with lower case
// They can't have spaces so we can use camelCase ;-)
var myHat = new Pic("hat01").center().mov(200);

// In JavaScript 6 we now use const and let
// Imagine that pink Circle with the Hat is Dr Abstract
// const is for things that will not change
const name = "Dr Abstract";
// let is for things that will (unfortunately) change!
let age = 50; 

// Here is a Label DisplayObject that can show text!
// There is no need to store this label in a variable
// because we do not need it later in our code.
// The parameters are the text, the size, the font, the color...
new Label("Dr Abstract", 100, "gf_Anton", purple).center();

// Or we could have used the variables from above.
// We join the name and the age with + sign 
// and center the label 100 pixels up from the bottom.
new Label(name + " is " + age).pos(0,100,CENTER,BOTTOM);

// Here are some very magical Display Objects.
// A Blob and a Squiggle.  You can change their shape.
// We store them in a const even though they change
// because they still are the same Blob and Squiggle.
const blob = new Blob().loc(200,200); // locate x and y
const squiggle = new Squiggle().loc(500, 200);
			

const myBuilding = new Container(500,300).center();
    
// Containers are invisible and are used to hold other objects. 
// Here we tell the container to be 500 in width and 300 in height.

new Rectangle(100, 50, blue, green, 10, 20)
    .center(myBuilding); // a new line is fine for dots

// 100 and 50 are arguments for the width and height parameters
// blue and green are the color and borderColor
// 10 and 20 are the borderWidth and corner 
// we tell the center() method to center the rectangle in myBuilding
    

new Rectangle(100, 50, blue, null, null, 20)
    .center(myBuilding);

// do not provide a borderColor and borderWidth instead put null
    

new Rectangle({
    width:100, height:50, color:blue, corner:20
}).center(myBuilding);

// {parameter:value, parameter:value, etc.}
// ** the order does not matter
// ** can be on one line or lots of lines
    

new Rectangle(100,100,green)
    .centerReg() // will now animate around middle
    .animate({
        props:{scale:2}, // can animate more than one property
        time:1,          // one second ***
        rewind:true,     // get bigger then smaller
        loop:true        // keep doing animation
    });
    

function greet(message, location) {
    new Label("hi").pos(rand(200,800), 500);
    // put as many statements as you want here!
    // the { } are called a "block of code"
    // they are like a box that holds the code to run
    // we indent to easily see what is in the function
}
    
// a function must be called to run
greet(); // call (run) the function - a label gets added
greet(); // call the function again - another label gets added

// rand() is a function to get a random number
// pos() is a special function - a method - stored on the object
// note that pos() is dotted to the object and rand() is not
    

function greet(message, location) {
    new Label(message).pos(location, 500);
}
greet("hello", 200); // Label says hello at x=200
greet("goodbye", 600); // second Label says goodbye at x=600
    

var button = new Button().center();
button.on("click", go);
function go() {
    zgo("https://zimjs.com"); // short ZIM function to go to URL
}

// ARROW FUNCTION
const button = new Button().center();
button.on("click", ()=>{ // an arrow function
    zgo("https://zimjs.com");
}); // note the closing round bracket

// We use const because colors holds only this array object 
// even though the order changes later with shuffle
const colors = [pink, orange, red, green, blue];

// we use let so that myColor can hold a different color object 
// later when we assign a new color with pluck() 
let myColor = colors[0]; // gets the first color, pink

new Circle(90, myColor).center(); // a pink circle
new Circle(50, colors[2]).center(); // with a red circle on top

// we can use the length property of an array too
new Circle(20, colors[colors.length-1]).center(); // blue on top

// we can change colors, add colors, sort, shuffle and more!
colors[1] = brown; // the second color is now brown
colors.push(grey); // grey has been added to the end
colors.sort(); // alphabetical order using sort() method
shuffle(colors); // ZIM function to randomize array
myColor = pluck(colors); // ZIM function to pick randomly
    

loop(10, ()=>{ 
    new Triangle().center().drag(); // 10 draggable black triangles!
});

loop(10, i=>{ // a single argument does not need () for the arrow function
    // i increases each loop - 0, 1, 2, 3, 4, 5, 6, 7, 8, 9
    new Triangle().loc(100+i*100, 500);
    // 10 triangles spaced by 100 pixels across the stage
});

const colors = [red, orange, yellow, green, blue, pink];
loop(colors, (color, i)=>{ // two arguments need () for the arrow function
    // color will be red, then orange, then yellow, etc.
    new Rectangle(50, 50, color).pos(20+i*60, 20);
});

// the rectangles are now on the stage which is a container
loop(S, object=>{
    object.sca(.5); // makes each rectangle half as big
});

if (circle.color == blue) {
    circle.alp(.5);
}

// this compares the colors and if equal (==) then
// sets the alpha (transparency) of the circle to half
    

if (circle.color == blue) {
    circle.alp(.5);
} else {
    circle.alp(0); // hide the circle
}

if (circle.color == blue) {
    circle.color = black; // change color to black
} else if (circle.color = red) {
    circle.color = white; // change color to white
} // could add another else if () {} or an else {}
    

const circle = new Circle(50, red).center();
new MotionController(circle);

// the circle will move to where you press on stage
// add ,"mousemove" to make the circle follow your mouse
// or use "keydown", "gamebutton", "gamestick", or "swipe"
    

const rectangle = new Rectangle().pos(100, 100);
Ticker.add(()=>{
    // assuming we are controlling the circle from above
    if (circle.hitTestCircleRect(rectangle)) {
        rectangle.removeFrom();
    }
});

const rectangles = new Container().addTo();

// Every second add a new Rectangle randomly to the container
// Note - this is a ZIM interval with seconds first then the function.
// The JavaScript version is like this: setInterval(function, milliseconds).
interval(1, ()=>{
    // W and H are the width and height of the stage (S)
    new Rectangle().addTo(rectangles).pos(rand(W-100), rand(H-100));
});

// in a Ticker, loop through all the rectangles
Ticker.add(()=>{
    loop(rectangles, function(rectangle) {
        if (circle.hitTestRect(rectangle)) {
            rectangle.removeFrom();
        }
    }, true); // loop backwards when removing
});

// EMITTER 1 
const particles = new Emitter().center();
// Lets make the emitter go to where we mousedown.
new MotionController(emitter, "mousedown");

// EMITTER 2
// Start the Emitter paused if you want to make only a few particles 
const reward = new Emitter({startPaused:true});
// then make the emitter give a reward when pressing on the stage.
// We get where we pressed by asking the Frame (F) 
// for mouseX and mouseY and then we use the spurt(number) method
reward.loc(F.mouseX, F.mouseY).spurt(10);
    

// parameters are (size, color, penType) and more
const pen = new Pen().center();
new MotionController(pen, "pressmove");

// try these instead!  (Do one at a time)

const pen = new Pen({penType:"kitetail"}).center();
new MotionController(pen, "pressmove");
// or "barbwire", "grass", "hair", "city", or "splatter"

const pen = new Pen(20, series(red, purple)).center();
new MotionController(pen, "pressmove");

const pen = new Pen([20,80,160], dark).center();
new MotionController(pen, "pressmove");

const pen = new Pen(series(30,100), series(orange,blue)).center();
new MotionController(pen, "pressmove");