Skip to content

Instantly share code, notes, and snippets.

@ndrhzn
Last active March 8, 2019 10:52
Show Gist options
  • Save ndrhzn/9ebdac03912348ab621812469283849c to your computer and use it in GitHub Desktop.
Save ndrhzn/9ebdac03912348ab621812469283849c to your computer and use it in GitHub Desktop.
P5 - Arcs With Interaction
<!DOCTYPE html>
<html>
<head>
<title>Arcs</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.3/p5.min.js"></script>
<meta charset="utf-8" />
<style media="screen">
html, body {
margin: 0;
padding: 0;
}
canvas {
display: block;
}
</style>
</head>
<body>
</body>
<script type="text/javascript">
function setup() {
createCanvas(windowWidth, windowHeight);
frameRate(3);
}
function draw() {
background('#FFFFFF');
stroke('#D04A73');
noFill();
for(let i = 1; i < 150; i++) {
strokeWeight(i/30);
arc(windowWidth/2, windowHeight/2, i * windowHeight/50, i * windowHeight/50, -i*mouseX, PI + HALF_PI + -i*mouseY);
}
}
function windowResized() {
resizeCanvas(windowWidth, windowHeight);
}
function keyPressed() {
noLoop();
save('canvas.png');
}
function keyReleased() {
loop();
}
</script>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment