ZIM BITS TUTORIAL
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>ZIM BITS - Lines and Animated Lines</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 - Lines and Animated Lines (2016 - updated 2022)
// Now can animate() a ZIM Pen() - see https://zimjs.com/docs.html?item=pen
// AS OF ZIM CAT - we have new Line() with nice features - see https://zimjs.com/cat/line.html
// Shape will make lines (as well as various custom shapes)
// if you use createjs.Shape you may need to setBounds for each shape you make
// Shape sets bounds to 0,0,width,height where width and height are the parameters of Shape
// note that if a horizontal line starts at 0, 0 then the thickness of the line goes half above and half below 0
// in this example, we move the horizontal line half its thickness down, etc.
// to animate a line we animate its scaleX or scaleY property
// we start with the scaleX or scaleY = 0 and then use animate
// remember that this will animate from the registration point out
// for an angled line we still animate the scaleX or scaleY but not both!
// so we put the line in a Container and rotate the container
// we animate the line inside the container - do not animate the container
const thickness = 5;
// 1. make a horizontal line
const line = new Shape(300, thickness).ss(thickness).s(green).mt(0,thickness/2).lt(300,thickness/2);
line
.center()
// 2. set the scaleX of the line to 0
.sca(0,1)
// 3. animate the scaleX of the line back to its full scale
.animate({scaleX:1}, 1);
// 4. make a vertical line
const line2 = new Shape(thickness, 150).ss(thickness).s(blue).mt(-thickness/2,0).lt(-thickness/2,-150);
line2
// 5. position the vertical line at the end of the horizontal line
.pos(line.x + line.getBounds().width, line.y) // note that line.width is 0 as it is scaled to 0
// 6. set the scaleY of the line to 0
.sca(1,0)
// 7. animate the scaleY of the line back to its full scale
.animate({props:{scaleY:1}, time:1, wait:1});
// 8. calculate the length and angle of the line from the second line to the first line
const length = Math.sqrt(Math.pow(line.getBounds().width, 2) + Math.pow(line2.getBounds().height, 2));
const angle = Math.atan2(line2.getBounds().height + line.getBounds().height, -line.getBounds().width)*180/Math.PI;
// 9. make a third line the horizontal length of the calculated length
const line3 = new Shape().ss(thickness).s(pink).mt(0, thickness/2).lt(length, thickness/2);
// 10. make a container to hold the line that is animated on an angle
const line3Container = new Container()
// 11. position the container at the end of the second line
.pos(line2.x, line.y - line2.getBounds().height)
// 12. rotate the container the calculated angle
.rot(angle);
line3
.addTo(line3Container)
// 13. set the scaleX of the third line to 0
.sca(0,1)
// 14. animate the third line inside the container back to its full scaleX
.animate({props:{scaleX:1}, time:1, wait:2});
// EXTRA
// here we animate a curve by masking the curve and animating the mask
const curve = new Shape(300, 100)
.center()
.mov(0, 200)
.ss(thickness).s(orange).mt(0,thickness/2).qt(150, 100, 300, thickness/2);
const mask = new Rectangle(300+thickness, 100)
.center()
.alp(0)
.sca(0,1)
.pos(null, curve.y)
curve.setMask(mask);
mask.animate({props:{scaleX:1}, time:1, wait:3, call:makeEye});
// EXTRA
// here we animate an eye curve by actually redrawing the curve in a Ticker function
// controlY is a property we made and animate in an animate function
// then the Ticker function redraws the eye with the current value of controlY
// note since this is the second animate, we need to set the override props to false
// so that the second animation does not stop the first
function makeEye() {
const eye = new Shape(100, 50)
.pos(line.x, line3Container.y);
eye.controlY = -50;
eye
.animate({props:{controlY:50}, time:.8, wait:2.2, loop:true, rewind:true})
.alp(0)
.animate({props:{alpha:1}, time:1, override:false});
Ticker.add(function(){
// the c() clears the graphics
eye.c().ss(thickness).s(yellow).mt(0,thickness/2).qt(50, eye.controlY, 100, thickness/2);
});
}
const title = "Lines and Animated Lines";
new Label(title, 30, null, "#666")
.pos(40, 40);
const docItems = "Frame,Container,Shape,Rectangle,Label,animate,pos,mov,alp,rot,sca,addTo,center,setMask,zog,Ticker";
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>