XiaohanYa/flower_midterm.js

## flower_midterm.js
var flowers;

function setup() {
  createCanvas(500, 600);
  background(255);
  flowers = new Flower(width / 2, height / 2, 255, 100, 400);

}

function draw() {
  //background(0);
  for (var a = 0; a < 360; a += 72) {
    flowers.updateAngle();
    flowers.updatePosition();
    flowers.display(a);
  }
}

"use strict";

class Flower {
  constructor(x, y, r, b, ampMax) {
    this.pos = createVector(x, y);
    this.fillColor = color(r, 0, b, 100);
    this.lineColor = color(r, 0, b, 60);
    this.freq;
    this.ampMax = ampMax;
    this.amp = 0;
    this.angle;
    this.value;
    this.penPos = 0;
  }
  updateAngle() {
    this.amp = lerp(this.amp, this.ampMax, 0.001);
    this.freq = frameCount * 0.01;
    this.angle = radians(frameCount);
    this.value = noise(this.freq) * this.amp;
  }
  updatePosition() {
    this.penPos = p5.Vector.fromAngle(this.angle);
    this.penPos.mult(this.value);
  }
  display(a) {
    push();
    translate(this.pos.x, this.pos.y);
    rotate(radians(a));
    fill(this.fillColor);
    noStroke();
    ellipse(this.penPos.x, this.penPos.y, 3, 3);
    stroke(this.lineColor);
    strokeWeight(1);
    line(0, 0, this.penPos.x, this.penPos.y);
    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>
    <script src="Flower.js" type="text/javascript"></script>

    <style> body {padding: 0; margin: 0;} canvas {vertical-align: top;} </style>
  </head>
  <body>
  </body>
</html>
	var flowers;

	function setup() {
	createCanvas(500, 600);
	background(255);
	flowers = new Flower(width / 2, height / 2, 255, 100, 400);

	}

	function draw() {
	//background(0);
	for (var a = 0; a < 360; a += 72) {
	flowers.updateAngle();
	flowers.updatePosition();
	flowers.display(a);
	}
	}

	"use strict";

	class Flower {
	constructor(x, y, r, b, ampMax) {
	this.pos = createVector(x, y);
	this.fillColor = color(r, 0, b, 100);
	this.lineColor = color(r, 0, b, 60);
	this.freq;
	this.ampMax = ampMax;
	this.amp = 0;
	this.angle;
	this.value;
	this.penPos = 0;
	}
	updateAngle() {
	this.amp = lerp(this.amp, this.ampMax, 0.001);
	this.freq = frameCount * 0.01;
	this.angle = radians(frameCount);
	this.value = noise(this.freq) * this.amp;
	}
	updatePosition() {
	this.penPos = p5.Vector.fromAngle(this.angle);
	this.penPos.mult(this.value);
	}
	display(a) {
	push();
	translate(this.pos.x, this.pos.y);
	rotate(radians(a));
	fill(this.fillColor);
	noStroke();
	ellipse(this.penPos.x, this.penPos.y, 3, 3);
	stroke(this.lineColor);
	strokeWeight(1);
	line(0, 0, this.penPos.x, this.penPos.y);
	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>
	<script src="Flower.js" type="text/javascript"></script>

	<style> body {padding: 0; margin: 0;} canvas {vertical-align: top;} </style>
	</head>
	<body>
	</body>
	</html>