XiaohanYa/Vine_midterm.js

## Vine_midterm.js
var vines = [];

function setup() {
  createCanvas(500, 600);
  background(0);
  vines.push(new Vine(width / 2, 500, 0.02, 5));

}

function draw() {
  background(0);
  push();
  blendMode(ADD);
  for (var i = 0; i < vines.length; i++) {
    var v = vines[i];
    v.display();
  }
  pop();
}

"use strict";

class Vine {
  constructor(x, l, freqAdj, maxDia) {
    this.pos = createVector(x, 0);
    this.vineLength = l;
    this.resolution = 3;
    this.freqAdj = freqAdj;
    this.maxDia = maxDia;
    this.sinAmp = 0;
    this.sinFreq = 0;
    this.sinValue = 0;
  }

  updateAmpValue() {
    var freq = frameCount * this.freqAdj;
    var amp = map(mouseY, 0, height, 0, 50);
    this.sinAmp = sin(freq) * amp;

  }

  updateFreqValue() {
    var freq = frameCount * this.freqAdj;
    var amp = 0.01;
    this.sinFreq = sin(freq) * amp;
  }

  updateMainValue(y) {
    var freq = y * this.sinFreq;
    this.sinValue = sin(freq) * this.sinAmp;
  }

  display() {
    push();
    translate(this.pos.x, 0);
    noStroke();
    fill(150, 255, 30, 60);
    for (var y = 0; y < this.vineLength; y += this.resolution) {
      this.updateAmpValue();
      this.updateFreqValue();
      this.updateMainValue(y);
      var dia = random(1, this.maxDia);
      ellipse(this.sinValue, y, dia, dia);
    }
    pop();
  }
}


//
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>midterm-vine</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="Vine.js" type="text/javascript"></script>

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

	function setup() {
	createCanvas(500, 600);
	background(0);
	vines.push(new Vine(width / 2, 500, 0.02, 5));

	}

	function draw() {
	background(0);
	push();
	blendMode(ADD);
	for (var i = 0; i < vines.length; i++) {
	var v = vines[i];
	v.display();
	}
	pop();
	}

	"use strict";

	class Vine {
	constructor(x, l, freqAdj, maxDia) {
	this.pos = createVector(x, 0);
	this.vineLength = l;
	this.resolution = 3;
	this.freqAdj = freqAdj;
	this.maxDia = maxDia;
	this.sinAmp = 0;
	this.sinFreq = 0;
	this.sinValue = 0;
	}

	updateAmpValue() {
	var freq = frameCount * this.freqAdj;
	var amp = map(mouseY, 0, height, 0, 50);
	this.sinAmp = sin(freq) * amp;

	}

	updateFreqValue() {
	var freq = frameCount * this.freqAdj;
	var amp = 0.01;
	this.sinFreq = sin(freq) * amp;
	}

	updateMainValue(y) {
	var freq = y * this.sinFreq;
	this.sinValue = sin(freq) * this.sinAmp;
	}

	display() {
	push();
	translate(this.pos.x, 0);
	noStroke();
	fill(150, 255, 30, 60);
	for (var y = 0; y < this.vineLength; y += this.resolution) {
	this.updateAmpValue();
	this.updateFreqValue();
	this.updateMainValue(y);
	var dia = random(1, this.maxDia);
	ellipse(this.sinValue, y, dia, dia);
	}
	pop();
	}
	}



	//
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8">
	<title>midterm-vine</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="Vine.js" type="text/javascript"></script>

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