XiaohanYa · March 21, 2017 07:05
diff --git a/vines.js b/vines.js
 var RESOLUTION = 3;

 function setup() {
  createCanvas(500, 600);
  background(0);
  noStroke();
  fill(150, 255, 30, 60); //the point is we need to give a very small amount of value to make it blend

 }

 function draw() {
  background(0);
  push();
  blendMode(ADD);

  drawWave(-30, 0.02, 5);
  drawWave(0, 0.01, 8);
  drawWave(40, 0.1, 10);
  pop();
 }

 function drawWave(xOffset, freqAdj, maxDia) {
  push();
  translate(xOffset, 0);
 
  var freq, amp;
  var length=random(height);
  for (var y = 0; y < length; y += RESOLUTION) {
    //sine for xoffset
    freq = frameCount * freqAdj;
    amp = mouseY;
    sinYoffset = sin(freq) * amp;

    //sine for amp
    freq = frameCount * freqAdj;
    //amp = random(80, 120);
    amp = map(mouseY,0,height,0,50);
    sinAmp = sin(freq) * amp;
    noiseAmp = noise(freq) * amp;

    //sine for freq
    freq = frameCount * freqAdj;
    amp = 0.01;
    sinFreq = sin(freq) * amp;

    // sine for main wave
    freq = (sinYoffset + y) * sinFreq;
    amp = 100;
    sinValue = sin(freq) * sinAmp;

    var x = width / 2 + sinValue;
    var dia = random(1, maxDia);
    ellipse(x, y, dia, dia);
    ellipse(x, y, dia / 2, dia / 2);
    ellipse(x, y, dia / 3, dia / 3);


  }
  pop();
 }
 <!DOCTYPE html>
 <html>
  <head>
    <meta charset="UTF-8">
    <title>midterm-vine1</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>




 //
	var RESOLUTION = 3;

	function setup() {
	createCanvas(500, 600);
	background(0);
	noStroke();
	fill(150, 255, 30, 60); //the point is we need to give a very small amount of value to make it blend

	}

	function draw() {
	background(0);
	push();
	blendMode(ADD);

	drawWave(-30, 0.02, 5);
	drawWave(0, 0.01, 8);
	drawWave(40, 0.1, 10);
	pop();
	}

	function drawWave(xOffset, freqAdj, maxDia) {
	push();
	translate(xOffset, 0);

	var freq, amp;
	var length=random(height);
	for (var y = 0; y < length; y += RESOLUTION) {
	//sine for xoffset
	freq = frameCount * freqAdj;
	amp = mouseY;
	sinYoffset = sin(freq) * amp;

	//sine for amp
	freq = frameCount * freqAdj;
	//amp = random(80, 120);
	amp = map(mouseY,0,height,0,50);
	sinAmp = sin(freq) * amp;
	noiseAmp = noise(freq) * amp;

	//sine for freq
	freq = frameCount * freqAdj;
	amp = 0.01;
	sinFreq = sin(freq) * amp;

	// sine for main wave
	freq = (sinYoffset + y) * sinFreq;
	amp = 100;
	sinValue = sin(freq) * sinAmp;

	var x = width / 2 + sinValue;
	var dia = random(1, maxDia);
	ellipse(x, y, dia, dia);
	ellipse(x, y, dia / 2, dia / 2);
	ellipse(x, y, dia / 3, dia / 3);


	}
	pop();
	}
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8">
	<title>midterm-vine1</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>




	//