ZIM BITS TUTORIAL
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>ZIM BITS - Skew and Skewing</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;
// 1. load assets and path with Frame
const assets = "reach.png";
const path = "assets/";
new Frame(scaling, width, height, color, outerColor, ready, assets, path);
function ready() {
// given F (Frame), S (Stage), W (width), H (height)
// ZIM BITS - Skew and Skewing (2016 - updated 2022)
// skewing can be applied with the skewX and skewY properties given by CreateJS
// they are part of the basic transform properties along with x, y, scaleX, scaleY and rotation
// skewing can give a slanted effect which can help an flat object look three dimensional
// in this case, we use skewing to make an image of a man stretch towards an object
// STEPS
// 1. load assets and path with Frame
// 2. center the asset on the stage
// 3. create a ball of collors for the man to reach towards
// 4. create zim.ProportionDamp() objects to damp movement relative to the mouse movement
// 5. in a Ticker function skew the man relative to the mouse x position
// 6. also flip the man so he reaches right and left
const backing = new Rectangle(W, 500, silver).center();
const floor = new Rectangle(W, 80, grey)
.pos(0,0,RIGHT,BOTTOM,backing)
// 2. when the asset is loaded center the asset on the stage
const man = F.asset("reach.png");
man // restart chain because we need man's height
.reg(man.width/2, man.height)
.center()
.mov(0, 50)
.sha("rgba(0,0,0,.3)", 10, 10, 20);
// man.animate({obj:{scaleX:-1}, time:1000, loop:true, rewind:true});
// man.animate({obj:{skewX:10}, time:1000, loop:true, rewind:true, override:false});
// 3. create a ball of collors for the man to reach towards
const ball = F.makeCircles(50)
.center()
.loc(null, 180)
.setMask(backing)
.cache()
.sha("rgba(0,0,0,.2)", 10, 10, 20);
// 4. create zim.ProportionDamp() objects to damp movement relative to the mouse movement
// baseMin, baseMax, targetMin, targetMax, damp, factor, targetRound
const proportionSkew = new ProportionDamp(0, W, -10, 10);
const proportionScale = new ProportionDamp(W/2-50, W/2+50, 1, -1);
const damp = new Damp(ball.x);
// 5. in a Ticker function skew the man relative to the mouse x position
// 6. also flip the man so he reaches right and left
Ticker.add(function() {
man.ske(proportionSkew.convert(F.mouseX), 1); // or use skewX
man.sca(proportionScale.convert(F.mouseX), 1); // or use scaleX
ball.x = damp.convert(F.mouseX);
});
const title = "Skew and Skewing";
new Label(title, 30, null, "#666")
.pos(70, 70);
const docItems = "Frame,Rectangle,Label,animate,sha,pos,mov,ske,reg,sca,center,setMask,Damp,ProportionDamp,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>