Skip to content

Instantly share code, notes, and snippets.

@ndrhzn

ndrhzn/index.html

Last active January 7, 2019 15:30
Show Gist options
  • Save ndrhzn/6d21776e73bed623a5de13571cbe372d to your computer and use it in GitHub Desktop.
Save ndrhzn/6d21776e73bed623a5de13571cbe372d to your computer and use it in GitHub Desktop.
Download ZIP
P5 - Pulsing Circles
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>Pulsing Circles</title>
</head>
<style media="screen">
body {
margin: 0;
padding: 0;
overflow: hidden;
}
</style>
<body>
</body>
<script type="text/javascript">
let x = 0;
function setup() {
createCanvas(windowWidth, windowHeight);
frameRate(30);
stroke(random(0, 256), random(0, 256), random(0, 256));
};
function draw() {
background(256);
for(i = 0; i < 5; i++) {
x += 1;
strokeWeight(random(0.1, 0.5));
ellipse(windowWidth/2 + random(-0.5, 0.5), windowHeight/2 + random(-0.5, 0.5), x*1.2, x*1.2)
strokeWeight(1);
ellipse(windowWidth/2 + random(-0.5, 0.5), windowHeight/2 + random(-0.5, 0.5), x, x)
;
strokeWeight(0.25);
ellipse(windowWidth/2 + random(-0.5, 0.5), windowHeight/2 + random(-0.5, 0.5), x*0.9, x*0.9)
strokeWeight(random(0.1, 0.25));
ellipse(windowWidth/2 + random(-0.5, 0.5), windowHeight/2 + random(-0.5, 0.5), x*0.8, x*0.8)
strokeWeight(random(0.025, 0.09));
ellipse(windowWidth/2 + random(-0.5, 0.5), windowHeight/2 + random(-0.5, 0.5), x*0.7, x*0.7)
strokeWeight(random(0.025, 0.09));
ellipse(windowWidth/2 + random(-0.5, 0.5), windowHeight/2 + random(-0.5, 0.5), x*0.6, x*0.6)
strokeWeight(random(0.025, 0.09));
ellipse(windowWidth/2 + random(-0.5, 0.5), windowHeight/2 + random(-0.5, 0.5), x*0.5, x*0.5)
strokeWeight(random(0.025, 0.075));
ellipse(windowWidth/2 + random(-0.5, 0.5), windowHeight/2 + random(-0.5, 0.5), x*0.4, x*0.4)
strokeWeight(random(0.025, 0.05));
ellipse(windowWidth/2 + random(-0.5, 0.5), windowHeight/2 + random(-0.5, 0.5), x*0.3, x*0.3)
strokeWeight(0.1, 0.25);
ellipse(windowWidth/2 + random(-0.5, 0.5), windowHeight/2 + random(-0.5, 0.5), x*0.2, x*0.2)
if (x > windowWidth*0.9) {
x = 0;
stroke(random(0, 256), random(0, 256), random(0, 256));
}
}
}
</script>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment