<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>ZIM Line</title>
<!-- Welcome to ZIM at http://zimjs.com - Code Interactive Media Pizzazz! -->
<!-- ZIM runs on the HTML Canvas powered by JavaScript and CreateJS http://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.2.3/createjs_min.js"></script>
<script src="https://zimjs.org/cdn/10.7.1/zim.js"></script>
<!-- use zimjs.com/distill for minified individual functions! -->
<script src="https://zimjs.org/cdn/pizzazz_03.js"></script>
<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
// "outside" 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 = "banner"; // target the banner tag
const width = 1000;
const height = 150;
const color = dark;
const outerColor = dark;
// as of ZIM 5.5.0 you do not need to put zim before ZIM functions and classes
var frame = new Frame(scaling, width, height, color, outerColor);
frame.on("ready", ()=>{
zog("ready from ZIM Frame"); // logs in console (F12 - choose console)
const stage = frame.stage;
const stageW = frame.width;
const stageH = frame.height;
// the general idea is we have two ZIM Frame objects each with their own canvas and stage
// the first we see to start and it is scaled to fit in the div with id=banner
// this frame is interactive
// the second is a full window frame and it is not interactive
// this allows us to interact with the HTML
// we made it not interactive by turning off the canvas pointerEvents
// we hide and show the content when we press anywhere on the banner
// we could have made a button, etc.
// BTW - we can certainly make objects travel along paths see https://zimjs.com/nio/
// here we wanted to give the illusion of a continuous path so used ZIM Noise.
// make the animated backing lines with ZIM Pizzazz - see imported js file for details
pizzazz.makePattern({
type:"stripes",
size:50,
cols:20,
colors:series([pink, purple]),
interval:700
})
.sca(-1,1) // goes in other direction normally
.alp(.5)
.cur() // pass in any css cursor - default "pointer"
.center();
const icon = frame.makeIcon(null, "#222").pos(20,0,LEFT,CENTER);
// used the icon size and position but want the backing behind the icon so ord(-1)
// will animate this in later
const backing = new Rectangle(icon.width, icon.height, pink).loc(icon).mov(6,6).ord(-1).alp(0);
new Label("FOLLOW", 100, "impact", white).alp(.5).noMouse().pos(icon.width+45,16,LEFT,CENTER);
// constants for animated line
const bumps = 7; // number of bumps
const curve = 60; // "radius" of Bezier handle
const size = 75; // height from center - so max is roughly twice this
const step = .01; // bigger for faster speed
// we make lots of times eventually so make a class
// in the first case it gets a grey fill in the other cases it does not
// segments is what line segment to put the triangle arrow at
// and we are creating this from two different frames with different stages
// if we want the Ticker inside to update the second stage we need the stage
class Line extends Container {
constructor(w, h, fill=true, segment=4, stage) {
super(w, h); // make the ZIM Container
// the shape object
// this.shape if we want to reference it outside (we do not need to in this case)
// this is a reference to the container we have extended
// which will also hold all the stuff we add here and be the object made from this class
const shape = this.shape = new Shape(w, h).addTo(this);
// the noise object
const noise = this.noise = new Noise();
let j = 0; // second parameter for simplex2D
let count = 0; // ticker count
const arrow = this.arrow = new Triangle(40,40,40,white,pink,3).rot(-90).addTo(this);
// we will wiggle the arrow between two points
// this dist will give us a ratio moving at least .2 and no more than .5 from the .5 start
// in a time of at least 1000 and no more than 5000 ms
// store a custom property on the arrow to wiggle
arrow.dist = .5;
arrow.wiggle("dist", .5, .2, .5, 1000, 5000);
// Ticker runs fast
Ticker.add(function() {
// see https://zimjs.com/noise/ for a bunch of noise examples
count++;
j += step; // increase second parameter by just a little to animate the line
var lastX = -5; // just off stage so can't see pink border
var lastY = h/2;
// zim provides tiny graphics API on the Shape
// To use full names like clear(), beginStroke(), setStrokeStyle(), beginFill(),
// moveTo(), lineTo(), bezierCurveTo(), etc.
// put these on the graphics property of the shape
// for instance shape.graphics.moveTo(), etc. blah
// The fill still has the pink stroke which we do not want to see
// so make this go off stage to the left, right and bottom
if (fill) shape.c().s(pink).ss(3).f(dark).mt(-5,w+5).lt(lastX, lastY);
else shape.c().s(pink).ss(3).lt(lastX, lastY); // no fill
loop(bumps, function(i) {
var x = (i+1)*w/bumps+5; // +5 just makes sure the last one is off the stage
var y = h/2 + noise.simplex2D(i,j)*size;
shape.bt(lastX+curve, lastY, x-curve, y, x, y);
if (i==segment) {
var points = [{x:lastX, y:lastY}, {x:lastX+curve,y:lastY}, {x:x-curve,y:y}, {x:x,y:y}];
var data = pointAlongCurve(points, arrow.dist, true);
arrow.loc(data.x,data.y).rot(data.angle-90)
}
lastX = x;
lastY = y;
});
if (fill) shape.lt(w+5,h+5); // finish the fill versions
}, stage);
}
}
// the shape for the line with fill - we see this to start
new Line(stageW, stageH, true, 4, stage).addTo().bot().ord(1);
// toggle the other lines on the second stage - see below
stage.on("stagemousedown", ()=>{
if (lines.getChildAt(0).alpha == 0) { // we can't see the lines so show them
lines.animate({
props:{alpha:{min:.2, max:1}},
sequence:100
});
backing.animate({alpha:1}, 1000);
} else { // we can see the lines so hide them
lines.animate({
props:{alpha:0},
sequence:100,
call:() => {
lines.loop(line=>{ // randomize the line angles for next time
line.rot(rand(10,70));
});
}
});
backing.animate({props:{alpha:0}, time:700, wait:1200});
}
});
// the second frame which is full window (Frame defaults to full)
const frame2 = new Frame();
let lines = null; // declare outside as we use this above
frame2.on("ready", function () {
// make the canvas not interactive
// otherwise would not be able to select html text or click links, etc.
frame2.canvas.style.pointerEvents = "none";
const stage = frame2.stage;
lines = new Container(frame2.width, frame2.height).addTo(stage);
loop(10, ()=>{
// false is no fill and 2-5 is which segment to put the arrow
new Line(stageW, stageH, false, rand(2,5), stage)
.centerReg(lines)
.reg(0) // move the regX back to 0
.alp(0) // we will animate them in
.loc(0,0) // move lines to corner
.rot(rand(10,70)); // rotate randomly
});
frame2.on("resize", () => {
// the full mode does not scale
// so we need to position manually to match the scaling of the banner
// note, because ZIM Retina, there is actually a scale to the second frame
lines.loc(
(icon.x+icon.width+4)*frame.scale/frame2.scale,
(icon.y+icon.height+4)*frame.scale/frame2.scale
);
stage.update();
});
});
}); // end of ready
// docs for items used:
// https://zimjs.com/docs.html?item=Frame
// https://zimjs.com/docs.html?item=Container
// https://zimjs.com/docs.html?item=Shape
// https://zimjs.com/docs.html?item=Rectangle
// https://zimjs.com/docs.html?item=Triangle
// https://zimjs.com/docs.html?item=Label
// https://zimjs.com/docs.html?item=noMouse
// https://zimjs.com/docs.html?item=animate
// https://zimjs.com/docs.html?item=wiggle
// https://zimjs.com/docs.html?item=loop
// https://zimjs.com/docs.html?item=cur
// https://zimjs.com/docs.html?item=pos
// https://zimjs.com/docs.html?item=loc
// https://zimjs.com/docs.html?item=mov
// https://zimjs.com/docs.html?item=bot
// https://zimjs.com/docs.html?item=ord
// https://zimjs.com/docs.html?item=alp
// https://zimjs.com/docs.html?item=rot
// https://zimjs.com/docs.html?item=reg
// https://zimjs.com/docs.html?item=sca
// https://zimjs.com/docs.html?item=addTo
// https://zimjs.com/docs.html?item=centerReg
// https://zimjs.com/docs.html?item=center
// https://zimjs.com/docs.html?item=rand
// https://zimjs.com/docs.html?item=Noise
// https://zimjs.com/docs.html?item=pointAlongCurve
// https://zimjs.com/docs.html?item=zog
// https://zimjs.com/docs.html?item=Ticker
</script>
<style>
body {margin:0px;}
#bannerCanvas {
width:100% !important; /* not sure what is going on with codepen! */
height:100% !important; /* should only need width:100% */
min-width:360px;
}
main {
font-family:verdana;
size:40px;
color:white;
margin:20px;
border-radius:50px;
background-color:#222;
padding:30px;
line-height: 25px;
}
main a {
background-color:#555555;
padding:1px 4px;
display:inline-block;
color:#eeeeee;
text-decoration: none;
}
main a:hover {
color:#222;
background-color: yellow;
}
main img {height:120px;}
</style>
<meta name="viewport" content="width=device-width, user-scalable=no" />
</head>
<body>
<div id="banner"></div>
<main>
Content!
<p>This is normal HTML content. Click the banner to toggle a surprise!</p>
<p>
ZIM is having a contest with $2020 prizes - for real.
Come on over to <a href="https://zimjs.com/zapp/" target="_blank">https://zimjs.com/zapp/</a> and check it out!
There are ten $202 prizes for the best Zapp! each month.
A Zapp! is a quick game, puzzle, art, app, etc. made with ZIM.
You can make interactive works so easily!
Please visit the CodePen Topics page at <a href="https://codepen.io/topic/zim" target="_blank">https://codepen.io/topic/zim</a>
</p>
<img src="https://d309knd7es5f10.cloudfront.net/ten/drabstract.png" alt="Dr Abstract from ZIM">
</main>
</body>
</html>
!
