CODE PAGE

Loop and Ticker

A traditional loop looks like this: for (var i=0; i<total; i++) {}

A ZIM loop looks like this: loop(total, function(i){});

A ZIM loop more easily loops through Arrays and Containers. In each case, the loop will run the code in the { } and increase i each time until it reaches the total.

A ZIM Ticker runs code at the framerate: Ticker.add(function(){});

// Put this in a template - see https://zimjs.com/code.html

// For the rectangles art piece we will use noise.
// ZIM Noise() has an equation (OpenSimplex) that looks random but is actually a weirdly wiggly line, or plane or structure.
// In this case, we have a number of tall rectangles that we animate with noise.
// We use 2D noise and set the height of the rectangles to the result of the noise.
// We pass in the rectangle number (adjusted) as the first parameter of the noise.
// We animate the second parameter of the noise inside a ZIM Ticker().
// We will use two Slider() objects to control properties of the noise.

// When we have a number of things that are the same, it is usually a good idea to put them in a Container
const rectangles = new Container(stageW, stageH)
	.addTo()
	.alp(.8);

// Noise() will give us random wiggly data
const noise = new Noise();
const greys = [light, lighter, dark, darker, silver, tin, grey];
let rect;
const margin = 100;

// or use: for (var i=0; i<=20; i++) {} // a traditional JavaScript loop
loop(20, (i, total) => {
	let width = (stageW-margin*2)/total;
	let height = stageH/2;
	rect = new Rectangle(width, height, shuffle(greys)[0], black, 1, width/2)
		.reg(0, height/2)
		.loc(margin+i*width, stageH/2-50, rectangles);
});

// Here we will use Ticker.add() to animate the rectangles.
// We will keep track of an increasing number, num, to animate the noise value.
// Each time we will increase num by a small amount, speed.
// And we will apply a factor, zoom, to the first parameter of noise to say how close we are zooming in on the noise equation.
// A higher zoom makes smaller steps and therefore a smaller difference in the rectangle heights.

let num = 0;
let speed = .05;
let zoom = 20;
var ticker = Ticker.add(function() {
	num += speed;
	loop(rectangles, function(rect, i) {
		rect.heightOnly = stageH/2 + noise.simplex2D(i/zoom, num)*200;
	});
});

const nav = new Container(stageW, 100)
	.loc(0, stageH-100, stage);
const backing = new Rectangle(nav.width, nav.height)
	.addTo(nav)
	.alp(.5);

// set up controls for the speed and zoom values using a Slider().
// These will range from .001 to .1 and from 30 to 1.
// Sliders can use bigger numbers as their min (left) and smaller numbers as their max (right).

const slider = new Slider({
	min:.001,
	max:.1,
	barColor:silver,
	currentValue:speed
})
	.center(nav)
	.mov(-250);
slider.button.alpha = .5;
slider.on("change", () => {
	speed = slider.currentValue;
});

const slider2 = new Slider({
	min:30,
	max:1,
	barColor:silver,
	currentValue:zoom
})
	.center(nav)
	.mov(150);
slider2.button.alpha = .5;
slider2.on("change", () => {
	zoom = slider2.currentValue;
});

stage.update(); // update the stage to see any changes

Making digital environments in which people cancreate, communicate and play