ZIM - Code and Learn Coding with ZIM for JavaScript and HTML Canvas with CreateJS

INTRO


Welcome to ZIM - we aim to provide the most creative, colorful, concise, consistent and complete JavaScript framework in the world! Below is an INTRO FILE with a few ZIM features - check out the code too!

intro image to ZIM JavaScript Canvas Framework - click for live example
VIEW CODE TEMPLATE
CLOSE
// INTRO CODE

// Simplified from the actual code
// VIEW the example and press CTRL U to see the full code
// try the parts in a TEMPLATE (or ZIM ZOO) to see them work


// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
// PART 1 - DRAGGING AND ANIMATION

new Circle(100, purple)
    .center()
    .alp(0) // start at 0 alpha - transparent
    .animate({alpha:1}, 700) // time is 700 ms
    .drag();


// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
// PART 2 - COMPONENTS AND EVENTS

// using an ES6 const and arrow function
// see https://zimjs.com/tips.html#JAVASCRIPT6

const dial = new Dial()
    .pos(50, 50)
    .change(()=>{
        slider.currentValue = dial.currentValue;
        stage.update();
    });

const slider = new Slider()
    .pos(0, 50, CENTER, BOTTOM)
    .change(()=>{
        dial.currentValue = slider.currentValue;
        stage.update();
    });

// can chain on one line too
new Button().center().tap(()=>{
    zgo("https://zimjs.com"); // in sample it opens a ColorPicker
});


// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
// PART 3 - SQUIGGLE AND PATH ANIMATION

const path = new Squiggle({
    onTop:false, // do not lift above triangle
    showControls:false // start with controls hidden
}).center();

new Triangle(40,40,40,purple)
    .rot(90) // aim along the path
    .addTo()
    // below is an alternative way to do parameters using the
    // ZIM DUO technique - a single configuration object
    // with properties matching parameter names
    .animate({
        props:{path:path},
        drag:true // pauses animation and lets user drag
        // pauseAnimate:false // could override to drag and animate
    });


// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
// PART 4 TILES, LOOP AND HIT TESTS

// ZIM VEE introduced a Pick class for dynamic parameters
// We can pick randomly from an array - like these colors
// or in a series from a series(red, green, blue), etc.
// or from a range like this {min:10, max:20}, etc.
const randomColors = [green, orange, pink, yellow];

// Tile Rectangles 8 cols, 4 rows and horizontal, vertical spacing of 5
const pixels = new Tile(new Rectangle(40,40,randomColors,dark),8,4,5,5)
    .center();

const eraser = new Rectangle(40,40,grey,darker)
    .sha() // shadow
    .pos(150,30,LEFT,BOTTOM)
    .drag();

// add an event to erase the pixels with the eraser
eraser.on("pressmove", ()=>{
    // ZIM loop gives each child when looping on a container
    pixels.loop(pixel=>{
        if (eraser.hitTestBounds(pixel)) {
            pixel.alp(0).animate({
                wait:2000,
                props:{alpha:1},
                time:500
            });
        }
    });
});


STARTING RESOURCES
INTRO TO SITE ZIM LEARN WHY ZIM ZIM SKOOL ZIM TIPS ZIM ZOO LEARN JAVASCRIPT CODE IN FIVE MINUTES DEMO TALK CODE ZERO


ZIM offers many conveniences, components and controls allowing you to focus on your creation! Please let me introduce the site: