timothycarambat/dots.js

## dots.js
// This is just a slight re-work of the particle emitter example found in P5.js docs.

var system;

function setup() {
  createCanvas(720, 400);
  system = new ParticleSystem(createVector(width/2, 20));
}

function draw() {
  background(51);
  system.addParticle();
  system.run();
}

// A simple Particle class
var Particle = function(position) {
  this.acceleration = createVector(0, 0.05);
  this.velocity = createVector(random(-1, 1), random(-1, 0));
  this.position = position.copy();
  this.lifespan = 255;
};

Particle.prototype.run = function() {
  this.update();
  this.display();
};

// Method to update position
Particle.prototype.update = function(){
  this.velocity.add(this.acceleration);
  this.position.add(this.velocity);
  this.lifespan -= 2;
};

// Method to display
Particle.prototype.display = function() {
  stroke(200, this.lifespan);
  strokeWeight(2);
  fill(127, this.lifespan);
  ellipse(this.position.x, this.position.y, 10, 10);
};

// Is the particle still useful?
Particle.prototype.isDead = function(){
  return this.lifespan < 0;
};

var ParticleSystem = function(position) {
  this.origin = position.copy();
  this.particles = [];
};

ParticleSystem.prototype.addParticle = function() {
  this.particles.push(new Particle( createVector(mouseX, mouseY, 0) ));
};

ParticleSystem.prototype.run = function() {
  for (var i = this.particles.length-1; i >= 0; i--) {
    var p = this.particles[i];
    p.run();
    if (p.isDead()) {
      this.particles.splice(i, 1);
    }
  }
};

## index.html
<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Example</title>
  </head>
  <body>

    <script src='https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.2/p5.min.js'></script>
    <script src='dots.js'></script>
    <!-- <script src='wave.js'></script> -->
  </body>
</html>

## wave.js
// This is just a slight re-work of the sine wave example found in P5.js docs.

var xspacing = 30;    // Distance between each horizontal location
var w;                // Width of entire wave
var theta = 0.0;      // Start angle at 0
var amplitude = 35.0; // Height of wave
var period = 500.0;   // How many pixels before the wave repeats
var dx;               // Value for incrementing x
var yvalues;  // Using an array to store height values for the wave
var fillColor;

function setup() {
  createCanvas(710, 400);
  w = width+16;
  dx = (TWO_PI / period) * xspacing;
  yvalues = new Array(floor(w/xspacing));
  colors = [
    'red',
    'yellow',
    'green',
  ]
  fillColor = color[0];
}

function draw() {
  background(0);
  calcWave();
  getColor()
  renderWave();
}

function calcWave() {
  // Increment theta (try different values for
  // 'angular velocity' here)
  theta += 0.02;

  // For every x value, calculate a y value with sine function
  var x = theta;
  for (var i = 0; i < yvalues.length; i++) {
    yvalues[i] = sin(x)*amplitude;
    x+=dx;
  }
}

function getColor() {
  var segment = height/3; //3 is # of divisions and colors to go through
  if(mouseY <= segment ){
    fillColor = colors[2]
  } else if (mouseY <= segment*2) {
    fillColor = colors[1]
  }else{
    fillColor = colors[0]
  }

}

function renderWave() {
  // A simple way to draw the wave with an ellipse at each location
  var count = 0;
  for (var x = 0; x < yvalues.length; x++) {
      if(x%2 && count < 3){
        fill(fillColor)
        rect(width/3+x*xspacing,  100+yvalues[x], 40, 120);
        count++
      }
  }
}
	// This is just a slight re-work of the particle emitter example found in P5.js docs.

	var system;

	function setup() {
	createCanvas(720, 400);
	system = new ParticleSystem(createVector(width/2, 20));
	}

	function draw() {
	background(51);
	system.addParticle();
	system.run();
	}

	// A simple Particle class
	var Particle = function(position) {
	this.acceleration = createVector(0, 0.05);
	this.velocity = createVector(random(-1, 1), random(-1, 0));
	this.position = position.copy();
	this.lifespan = 255;
	};

	Particle.prototype.run = function() {
	this.update();
	this.display();
	};

	// Method to update position
	Particle.prototype.update = function(){
	this.velocity.add(this.acceleration);
	this.position.add(this.velocity);
	this.lifespan -= 2;
	};

	// Method to display
	Particle.prototype.display = function() {
	stroke(200, this.lifespan);
	strokeWeight(2);
	fill(127, this.lifespan);
	ellipse(this.position.x, this.position.y, 10, 10);
	};

	// Is the particle still useful?
	Particle.prototype.isDead = function(){
	return this.lifespan < 0;
	};

	var ParticleSystem = function(position) {
	this.origin = position.copy();
	this.particles = [];
	};

	ParticleSystem.prototype.addParticle = function() {
	this.particles.push(new Particle( createVector(mouseX, mouseY, 0) ));
	};

	ParticleSystem.prototype.run = function() {
	for (var i = this.particles.length-1; i >= 0; i--) {
	var p = this.particles[i];
	p.run();
	if (p.isDead()) {
	this.particles.splice(i, 1);
	}
	}
	};
	<!DOCTYPE html>
	<html lang="en" dir="ltr">
	<head>
	<meta charset="utf-8">
	<title>Example</title>
	</head>
	<body>

	<script src='https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.2/p5.min.js'></script>
	<script src='dots.js'></script>
	<!-- <script src='wave.js'></script> -->
	</body>
	</html>
	// This is just a slight re-work of the sine wave example found in P5.js docs.

	var xspacing = 30; // Distance between each horizontal location
	var w; // Width of entire wave
	var theta = 0.0; // Start angle at 0
	var amplitude = 35.0; // Height of wave
	var period = 500.0; // How many pixels before the wave repeats
	var dx; // Value for incrementing x
	var yvalues; // Using an array to store height values for the wave
	var fillColor;

	function setup() {
	createCanvas(710, 400);
	w = width+16;
	dx = (TWO_PI / period) * xspacing;
	yvalues = new Array(floor(w/xspacing));
	colors = [
	'red',
	'yellow',
	'green',
	]
	fillColor = color[0];
	}

	function draw() {
	background(0);
	calcWave();
	getColor()
	renderWave();
	}

	function calcWave() {
	// Increment theta (try different values for
	// 'angular velocity' here)
	theta += 0.02;

	// For every x value, calculate a y value with sine function
	var x = theta;
	for (var i = 0; i < yvalues.length; i++) {
	yvalues[i] = sin(x)*amplitude;
	x+=dx;
	}
	}

	function getColor() {
	var segment = height/3; //3 is # of divisions and colors to go through
	if(mouseY <= segment ){
	fillColor = colors[2]
	} else if (mouseY <= segment*2) {
	fillColor = colors[1]
	}else{
	fillColor = colors[0]
	}

	}

	function renderWave() {
	// A simple way to draw the wave with an ellipse at each location
	var count = 0;
	for (var x = 0; x < yvalues.length; x++) {
	if(x%2 && count < 3){
	fill(fillColor)
	rect(width/3+x*xspacing, 100+yvalues[x], 40, 120);
	count++
	}
	}
	}