ZIM BITS TUTORIAL
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>ZIM BITS - ZIM Shapes</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 - ZIM Shapes (2016 - updated 2022)
// CreateJS has a Shape class and drawRect(), drawCircle() methods
// but these require a few steps so ZIM wraps these steps for us
// STEPS
// 1. make the shape with Rectangle(), Circle(), Triangle()
// 2. add the shapes to the stage with S.addChild() - or add to some other container
// 3. position the shape with x and y properties, set alpha, etc.
// 4. Rectangles have their registration point at the top left - so maybe center the reg
const circle = new Circle(50, green, pink, 5) // radius, color, borderColor, borderWidth
.loc(200, 200);
const rectangle = new Rectangle(80, 80, blue) // width, height, color
.sca(2)
.centerReg();
// rectangle.center(); // centers and adds to container (stage in this case)
const triangle = new Triangle(100, 100, 100, red) // side lengths, color
.pos(150, 200, RIGHT, BOTTOM); // 150 from right and 200 from bottom
triangle.color = pink; // you can set color and border properties like so if you want
triangle.borderColor = green;
triangle.borderWidth = 5;
// EXTRA
// ZIM shapes are actually containers with a CreateJS Shape drawn inside them
// ZIM shapes have width and height properties but CreateJS shapes do not
// ZIM Circle has its registration point automatically in the middle
// ZIM Triangle has its registration point in a weighted middle
// NOTE: if you want no fill then set the color to "rgba(0,0,0,0)" or use the clear color
// these shapes can have their color property dynamically set
// of course other properties like alpha, scaleX, scaleY, rotation also work
// you can drag the shapes with circle.drag(), etc.
// circle.drag();
// use shape.centerReg() to center the registration point in the shape
// use circle.outline(), etc. to see bounds, internal origin and registration
// circle.outline(); // outline only outlines once when it is called
// rectangle.outline();
// triangle.outline();
// you can use ZIM Grid to help place shapes
// press the G to hide grid and use P to toggle pixels or percent
// new Grid(S, "#ddd", true); // container, color, pixels
// or use circle.place("circle") to drag and drop then see the position in the console
// you can animate properties of shapes animate();
// circle.animate({scale:1.5}, .7); // increase scale in .7 seconds
// you can let people transform shapes with circle.transform();
const docItems = "Frame,Circle,Rectangle,Triangle,drag,transform,animate,pos,sca,outline,centerReg,center,place,Grid,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>