Skip to content

Instantly share code, notes, and snippets.

@XiaohanYa

XiaohanYa/flower_midterm.js

Created April 1, 2017 17:40
Show Gist options
  • Save XiaohanYa/f9b33040e7f75a06a3350a319ecdfecd to your computer and use it in GitHub Desktop.
Save XiaohanYa/f9b33040e7f75a06a3350a319ecdfecd to your computer and use it in GitHub Desktop.
Download ZIP
Raw
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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment