boxes

by tomonari takahashi

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/p5.js/0.3.3/p5.min.js"></script>

JavaScript

var WIDTH = 500;
var RECT_WIDTH = 100

function setup() {
    createCanvas(WIDTH, WIDTH);
    frameRate(60);
    rectMode(CENTER);
}

function draw() {
    background(33, 34, 61);
    
    // Normal
    push();
    translate(WIDTH*(1/3),  WIDTH*0.5); 
    var normal = makeRandom(-10,10);
	rotate(radians(normal));
	fill(46, 211, 179);
	rect(0, 0, RECT_WIDTH, RECT_WIDTH);
    pop();
    
    // Koku
    push();
   	translate(WIDTH*(2/3), WIDTH/2); 
    var koku = makeKokuRandom(-10,10)
	rotate(radians(koku));
	fill(46, 211, 179);
	rect(0, 0, RECT_WIDTH, RECT_WIDTH);
    pop();
}

function makeRandom(from, to) {
	return random(from, to);
}

function makeKokuRandom(from, to) {
	return (random(from, to) + random(from, to) + random(from, to) + random(from, to) +  random(from, to))/5;
}