XiaohanYa/flower.js

## 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>
	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>