const scaling = "fit"; // this will resize to fit inside the screen dimensions
const width = 1024;
const height = 768;
const color = dark; // ZIM has colors but you can use any HTML color "yellow", "#333", etc.
const outerColor = darker;
const assets = "createjs.png";
const path = "https://s3-us-west-2.amazonaws.com/s.cdpn.io/2104200/"
const frame = new Frame(scaling, width, height, color, outerColor, assets, path);
frame.on("ready", ()=>{ // ES6 Arrow Function - similar to function(){}
zog("ready from ZIM Frame"); // logs in console (F12 - choose console)
// often need below - so consider it part of the template
let stage = frame.stage;
let stageW = frame.width;
let stageH = frame.height;
// REFERENCES for ZIM at http://zimjs.com
// see http://zimjs.com/learn.html for video and code tutorials
// see http://zimjs.com/docs.html for documentation
// see https://www.youtube.com/watch?v=pUjHFptXspM for INTRO to ZIM
// see https://www.youtube.com/watch?v=v7OT0YrDWiY for INTRO to CODE
// CODE HERE
// We are going to animate one Squiggle to match another Squiggle
// and then control these animations with a slider
// this will probably be integrated into ZIM animate over the next few releases...
// but it interesting to see what is under the hood.
// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
// NOTE - since this was coded, ZIM has formalized Shape Tweens in ZIM 10.2.0
// see https://zimjs.com/animation/shapetween.html
// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
// made letter code here: http://zimjs.com/nio/paths.html
// we have letters for G R A N T and L A N N Y
// make sure each matching letter has the same number of points
// to make them morph into the other
// the type of point does not matter
// This looks like a lot of work but only took 5 minutes a letter
// and it is just cut and paste for the code - you never have to make the numbers
const grant = [
[[130.3,-10.5,0,0,19.3,49.8,-19.3,-49.8],[22.6,35.5,0,0,-6,-94.5,6,94.5],[135.9,38.5,0,0,-3,82.5,0,0,"free"],[79.2,38.2,0,0,0,0,0,0,"none"]],
[[41.8,105.8,0,0,-0.6,30,0.6,-30],[41.5,-39.2,0,0,-6,4,6,-4],[130.9,-8.3,0,0,-1,-42.8,1,42.8],[42.5,28.5,0,0,0,0,0,0,"none"],[98.2,35.5,0,0,-14.9,-8,14.9,8],[138.9,104.8,0,0,0,0,0,0,"none"]],
[[39.8,105.8,0,0,-0.6,30,0.6,-30],[78.3,-39.2,0,0,-39.8,0,39.8,0],[129.9,27.5,0,0,-1,-42.8,-30.8,1,"free"],[46.4,28.5,0,0,0,0,0,0,"none"],[130,27.5,0,0,0,0,0,0,"none"],[136.9,104.8,0,0,0,0,0,0,"none"]],
[[50.8,105.8,0,0,-0.6,30,0.6,-30],[56.5,-34.2,0,0,-16.9,1,16.9,-1],[128,96.2,0,0,-13.9,0,13.9,0],[134,-44.5,0,0,0,0,0,0,"none"]],
[[32.8,-31.4,0,0,0,0,0,0,"none"],[85.2,-31.2,0,0,0,0,0,0,"none"],[149.9,-33.2,0,0,0,0,0,0,"none"],[85.1,-31.2,0,0,0,0,0,0,"none"],[88.2,107.8,0,0,0,0,0,0,"none"]]
]; // expand this to see data
const lanny = [
[[54.8,-48.4,0,0,1.4,-17.8,-1.4,17.8],[54.5,11.5,0,0,0,-29.9,0,29.9],[55.4,93.1,0,0,0,-35.8,0,0,"free"],[156.9,93.8,0,0,0,0,0,0,"none"]],
[[38.8,105.8,0,0,-0.6,30,0.6,-30],[77.3,-39.2,0,0,-39.8,0,39.8,0],[128.9,27.5,0,0,-1,-42.8,-30.8,1,"free"],[45.4,28.5,0,0,0,0,0,0,"none"],[129,27.5,0,0,0,0,0,0,"none"],[135.9,104.8,0,0,0,0,0,0,"none"]],
[[48.8,105.8,0,0,-0.6,30,0.6,-30],[54.5,-34.2,0,0,-16.9,1,16.9,-1],[93.1,37.4,0,0,0,0,0,0,"none"],[127,93.2,0,0,-13.9,0,13.9,0],[136,15.6,0,0,0,0,0,0,"none"],[135,-46.4,0,0,0,0,0,0,"none"]],
[[51.8,-44.3,0,0,0.4,-29.7,-0.4,29.7],[62.5,93.2,0,0,-12.9,0,12.9,0],[130,-36.2,0,0,-13.9,0,13.9,0],[138,105.8,0,0,0,0,0,0,"none"]],
[[32.8,-31.4,0,0,0,0,0,0,"none"],[86.2,21.5,0,0,0,0,0,0,"none"],[149.9,-33.2,0,0,0,0,0,0,"none"],[87.1,20.5,0,0,0,0,0,0,"none"],[88.2,107.8,0,0,0,0,0,0,"none"]]
];
// We will make a Squiggle for each letter
// we will only animate the GRANT Squiggles
// and we animate each point and the two control handles
// to the location of the LANNY point and control handles
// so we will add both in the same position but hide the LANNY
// lines will be an array of Squiggles to animate (GRANT)
// points will be an array of all control points and handles
// that we are animating in the Squiggles
const lines = [];
const points = [];
// Could loop through the grant array and easily get each letter:
// loop(grant, (letter, i)=>{});
// but we need to get the matching lanny letter anyway
// so looping with the length and i seems a little more consistent
// as we get to apply i to grant and lanny the same way
// note that we are hiding lanny with an alpha of 0
loop(grant.length, i=>{
// tile each letter across the stage
let g = new Squiggle({interactive:false, points:grant[i], thickness:30}).loc(120+i*155, stageH/2-100);
let l = new Squiggle({interactive:false, points:lanny[i], thickness:30}).loc(120+i*155, stageH/2-100).alp(0);
// store the grant Squiggles in the lines array for later
lines.push(g);
// loop through each pointObject
// this is an array of parts of the points
loop(g.pointObjects, function (controls, i) {
// record a reference the matching pointObject of the lanny data
let target = l.pointObjects[i];
// loop through the first four elements of the points array
// the first element is the point container
// the second is the circle inside (we leave this alone)
// the third and forth are the two control rectangles
loop(4, (n) => {
// skip the circle
if (n==1) return;
// add the control to the points array for later
points.push(controls[n]);
// animate the control to the location of the lanny control
// this will animate the whole control container when n=0
// and the two rectangle control handles when n=2 and n=3
controls[n].animate({
props:{
x:target[n].x,
y:target[n].y
}
});
});
});
// throw in an extra color animation on each squiggle
g.animate({
props:{color:pink}
});
});
// pause the animations to let the slider control them
// this pauses all animations
pauseAnimate();
// circle.pauseAnimate() would pause animations on the circle
// pauseAnimate(true, "id"); would pause all animations with id of id
// circle.pauseAnimate(true, "id"); well... you get the idea
// we will set the percentComplete of the objects being animated
// to the slider's currentValue
// these are all the objects added to the points array
// and all the Squiggles in the lines array
// the Squiggles also need to be updated to show any manual changes
// note how nice ZIM loop is to work with
Ticker.add(function () {
loop(points, point=>{
point.percentComplete = slider.currentValue;
});
loop(lines, line=>{
line.percentComplete = slider.currentValue;
line.update();
});
});
// create the Slider with custom Button
const slider = new Slider({
min:0,
max:100,
barWidth:40,
button:new Button({
label:"",
backing:frame.asset("createjs.png").sca(.8).centerReg()
})
})
.center()
.mov(85,200)
// animate the slider's currentValue property
// this then is read in the Ticker
// to change the various animations
.animate({
props:{currentValue:100},
loop:true,
rewind:true,
time:2500,
rewindWait:500,
loopWait:500
});
// stop the Slider from being used when animating
// normally just slider.enabled=false would be fine
// seems to be a delay when adding cursor during slider creation
// so enabled false works but cursor still shows
// adding a timeout lets it work properly - sorry!
timeout(100, ()=>{slider.enabled = false});
// add a Button to toggle the Slider from manual to auto
// note the ZIM Button has toggle built in (plus lots more!)
new Button({
label:"MANUAL",
toggle:"AUTO",
corner:0,
backgroundColor:blue,
rollBackgroundColor:pink,
shadowBlur:4
})
.centerReg()
.sca(.7)
.loc(slider.x-150, slider.y)
.tap(e=>{
// could use an on("click", ()=>{})
// but tap is chainable so we don't even need a button var
slider.pauseAnimate(e.target.toggled);
slider.enabled = e.target.toggled;
// need to sync up animation with slider
// when we go back to auto...
// this is tricky with rewind and waits
// to set animation percent to current slider
// and I am brain dead!
// So just start at the beginning...
if (!e.target.toggled) slider.currentValue = slider.percentComplete = 0;
});
new Label({text:"ZIM - CreateJS Dedication - Grant, Lanny and Team!", color:"white"}).alp(.5).sca(.7).pos(30,30);
stage.update(); // this is needed to show any changes
// DOCS FOR ITEMS USED
// https://zimjs.com/docs.html?item=Frame
// https://zimjs.com/docs.html?item=Squiggle
// https://zimjs.com/docs.html?item=Label
// https://zimjs.com/docs.html?item=Button
// https://zimjs.com/docs.html?item=Slider
// https://zimjs.com/docs.html?item=tap
// https://zimjs.com/docs.html?item=animate
// https://zimjs.com/docs.html?item=pauseAnimate
// https://zimjs.com/docs.html?item=loop
// https://zimjs.com/docs.html?item=pos
// https://zimjs.com/docs.html?item=mov
// https://zimjs.com/docs.html?item=alp
// https://zimjs.com/docs.html?item=sca
// https://zimjs.com/docs.html?item=centerReg
// https://zimjs.com/docs.html?item=center
// https://zimjs.com/docs.html?item=loop
// https://zimjs.com/docs.html?item=timeout
// https://zimjs.com/docs.html?item=zog
// https://zimjs.com/docs.html?item=Ticker
// FOOTER
// call remote script to make ZIM Foundation for Creative Coding icon
createIcon(frame);
}); // end of ready
!
