Skip to content

Instantly share code, notes, and snippets.

@ndrhzn

ndrhzn/index.html

Last active January 5, 2019 23:10
Show Gist options
  • Save ndrhzn/339ee277f7e862c22397baff5d9a3c3a to your computer and use it in GitHub Desktop.
Save ndrhzn/339ee277f7e862c22397baff5d9a3c3a to your computer and use it in GitHub Desktop.
Download ZIP
P5 - Rotating Squares
Raw
index.html
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.2/p5.js"></script>
<title>Rotating Squares</title>
</head>
<style media="screen">
body {
margin: 0;
padding: 0;
overflow: hidden;
}
</style>
<body>
</body>
<script type="text/javascript">
function setup() {
createCanvas(windowWidth, windowHeight);
frameRate(2.5);
};
function draw() {
background('#FFFFFD');
noStroke();
rectMode(CENTER);
let angle = 0;
for(let i = (windowWidth/10)/1.5; i < windowWidth - (windowWidth/10)/1.5; i += (windowWidth/10)/1.5) {
for(let l = (windowHeight/5)/1.5; l < windowHeight - (windowHeight/5)/1.5; l+= (windowHeight/5)/1.5) {
push();
translate(i, l);
let jitter = random(-0.05, 0.05);
angle = angle + jitter;
let cos_a = cos(angle);
let sin_a = sin(angle);
applyMatrix(cos_a, sin_a, -sin_a, cos_a, 0, 0);
fill('#D6D1CD');
rect(0, 0, (windowWidth/10)/2, (windowHeight/5)/2, 5);
fill('#F1F1F1');
rect(-3, -3, (windowWidth/10)/2, (windowHeight/5)/2, 5);
pop();
}
}
}
</script>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment