Skip to content

Instantly share code, notes, and snippets.

@XiaohanYa

XiaohanYa/flower.js

Created March 21, 2017 06:43
Show Gist options
  • Save XiaohanYa/5320056593a14f829b164260a05251e1 to your computer and use it in GitHub Desktop.
Save XiaohanYa/5320056593a14f829b164260a05251e1 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
flower.js
function setup() {
createCanvas(500, 600);
background(255);
}
function draw() {
//background(0);
// freq = frameCount * 0.02;
// amp = 100;
// freqValue = sin(freq) * amp;
// freq1 = frameCount * 0.005;
// freq2 = frameCount * 0.002;
// amp = 100;
// noiseValue1 = noise(freqValue) * amp;
// noiseValue2 = noise(freq2) * amp;
var freq = frameCount * 0.02;
var amp = frameCount /3;
var value = noise(freq) * amp;
var angle = radians(frameCount);
var pos = p5.Vector.fromAngle(angle);
pos.mult(value);
for (var a = 0; a < 360; a += 72) {
push();
translate(width / 2, height / 2);
rotate(radians(a));
fill(50, 0, 255, 40);
noStroke();
ellipse(pos.x, pos.y, 3, 3);
stroke(255, 0, 255, 10);
strokeWeight(1);
line(0, 0, pos.x, pos.y);
pop();
}
// angle = 23;
// for (var i = 0; i < 360; i += 43) {
// push();
// translate(width / 2, height / 2);
// rotate(frameCount * 0.003);
// ellipse(0, 0, noiseValue1, noiseValue2)
// pop();
// }
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>flower</title>
<script src="libraries/p5.js" type="text/javascript"></script>
<script src="libraries/p5.dom.js" type="text/javascript"></script>
<script src="libraries/p5.sound.js" type="text/javascript"></script>
<script src="sketch.js" type="text/javascript"></script>
<style> body {padding: 0; margin: 0;} canvas {vertical-align: top;} </style>
</head>
<body>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment