Skip to content

Instantly share code, notes, and snippets.

@hcastillaq

hcastillaq/heart.html

Created December 20, 2017 15:33
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save hcastillaq/564b24cc724f31116cb4af74256634ae to your computer and use it in GitHub Desktop.
Save hcastillaq/564b24cc724f31116cb4af74256634ae to your computer and use it in GitHub Desktop.
Download ZIP
heart drawing with p5js
Raw
heart.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
body{
overflow: hidden;
margin: 0px;
padding: 0px;
}
</style>
</head>
<body>
</body>
</html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.16/p5.min.js"></script>
<script>
var sca = -5;
var start = -2;
var step = 0.009;
var num = 0;
var colors = ['#ffff00', '#76ff03', '#00e5ff ', '#1976d2', '#e91e63'];
var color = null;
var color2 = null;
function setup()
{
createCanvas(windowWidth, windowHeight);
background('black');
setFrameRate(200);
color = random(colors);
color2 = random(colors);
}
function draw()
{
translate(width/2, height/2 - 100);
scale(70 + sca);
noFill();
stroke(color);
strokeWeight(0.009);
if( start < 2)
{
var y = sqrt( 1 - pow( abs(start) - 1, 2) );
ellipse(start, -y, 0.001);
stroke(color2);
var y2 = acos(1-abs(start))-PI
ellipse(start, -y2, 0.001);
start += step;
}else{
if(num < 3)
{
start = -2;
sca += sca;
num += 1;
color = random(colors);
color2 = random(colors);
}
}
}
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment