XiaohanYa/noc_lab3_beautifulWave.js

## noc_lab3_beautifulWave.js
var particles = [];

function setup() {
  createCanvas(1000, 600);
  background(0);
  for (var i = 0; i < 80; i++) {
    particles.push(new Particle(width / 2, height / 2));
  }
}

function draw() {
  background(0, 10);
  //ellipse(width/2,height/2,30,30);
  for (var i = 0; i < particles.length; i++) {
    particles[i].upload();
    particles[i].dissolve();
    particles[i].display();

  }

  if (keyIsPressed) {
    for (var i = 0; i < 10; i++) {
      particles.push(new Particle(mouseX,0));

      particles[i].blow();
    }
  }
}


//
"use strict"


class Particle {
  constructor(x, y) {
    this.pos = createVector(x, y);
    this.vel = createVector(0, 0);
    this.acc = createVector(0, 0);
    this.windVec = createVector(random(-1, 1), random(-1, 1));

    this.velAdj = random(0.1, 0.98);
    this.accAdj = random(0.01, 0.98);
    this.diaX = random(5);
    this.diaY = random(5);
    this.g = random(255);
    this.b = random(255);
    this.a = random(220, 255);


  }

  blow() {

    this.windVec.mult(300);
    this.pos.add(this.windVec);

  }

  upload() {

    var mouseVec = createVector(mouseX, mouseY);

    this.acc = p5.Vector.sub(mouseVec, this.pos);
    this.acc.mult(this.accAdj);
    this.vel.add(this.acc);
    this.vel.mult(this.velAdj);
    this.pos.add(this.vel);

  }

  dissolve() {
    if (mouseIsPressed) {

      var autoVec = createVector(random(-width, width), random(-height, height));

      this.acc = p5.Vector.sub(autoVec, this.pos);
      this.acc.mult(this.accAdj);

      this.vel.add(this.acc);
      this.vel.mult(this.velAdj);
      this.pos.add(this.vel);
      this.g--;
      this.b--;

    }
  }


  display() {
    push();
    translate(this.pos.x, this.pos.y);
    noStroke(0);
    fill(0, this.g, this.b, this.a);
    rotate(0.3 * PI);
    ellipse(0, 0, this.diaX, this.diaY);
    pop();


  }


}


//
<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>assignment3</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="Particle.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 particles = [];

	function setup() {
	createCanvas(1000, 600);
	background(0);
	for (var i = 0; i < 80; i++) {
	particles.push(new Particle(width / 2, height / 2));
	}
	}

	function draw() {
	background(0, 10);
	//ellipse(width/2,height/2,30,30);
	for (var i = 0; i < particles.length; i++) {
	particles[i].upload();
	particles[i].dissolve();
	particles[i].display();

	}

	if (keyIsPressed) {
	for (var i = 0; i < 10; i++) {
	particles.push(new Particle(mouseX,0));

	particles[i].blow();
	}
	}
	}




	//
	"use strict"



	class Particle {
	constructor(x, y) {
	this.pos = createVector(x, y);
	this.vel = createVector(0, 0);
	this.acc = createVector(0, 0);
	this.windVec = createVector(random(-1, 1), random(-1, 1));

	this.velAdj = random(0.1, 0.98);
	this.accAdj = random(0.01, 0.98);
	this.diaX = random(5);
	this.diaY = random(5);
	this.g = random(255);
	this.b = random(255);
	this.a = random(220, 255);


	}

	blow() {

	this.windVec.mult(300);
	this.pos.add(this.windVec);

	}

	upload() {

	var mouseVec = createVector(mouseX, mouseY);

	this.acc = p5.Vector.sub(mouseVec, this.pos);
	this.acc.mult(this.accAdj);
	this.vel.add(this.acc);
	this.vel.mult(this.velAdj);
	this.pos.add(this.vel);

	}

	dissolve() {
	if (mouseIsPressed) {

	var autoVec = createVector(random(-width, width), random(-height, height));

	this.acc = p5.Vector.sub(autoVec, this.pos);
	this.acc.mult(this.accAdj);

	this.vel.add(this.acc);
	this.vel.mult(this.velAdj);
	this.pos.add(this.vel);
	this.g--;
	this.b--;

	}
	}



	display() {
	push();
	translate(this.pos.x, this.pos.y);
	noStroke(0);
	fill(0, this.g, this.b, this.a);
	rotate(0.3 * PI);
	ellipse(0, 0, this.diaX, this.diaY);
	pop();


	}







	}




	//
	<!DOCTYPE html>
	<html>

	<head>
	<meta charset="UTF-8">
	<title>assignment3</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="Particle.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>