XiaohanYa/noc_lab2_GlassBreaking.js

## noc_lab2_GlassBreaking.js
var circles = [];
var gravity;
var mouseForce;


function setup() {
  createCanvas(500, 600);
  background(0);

  for (var i = 0; i < 10; i++) {
    circles.push(new Circle(width / 2, height / 2, 255));
  }
  gravity = 1.0;

}


function Circle(x, y, c) {
  this.x = x;
  this.y = y;
  this.c = c;
  this.dia = random(5, 30);
  this.xspeed = random(-5, 5);
  this.yspeed = random(-5, 5);

  this.move = function() {
    this.x += this.xspeed;
    this.y += this.yspeed;
  }

  this.checkboundaries = function() {
    if (this.x < 0 || this.x > width) {
      this.xspeed *= -1;
    }
    if (this.y < 0 || this.y > height) {
      this.yspeed *= -1;
    }
  }
  this.applyGravity = function(g) {
    this.yspeed += g;
  }
  this.applykeyForce = function(f) {
    this.x += random(1, 10);
    this.y += random(1, 10);
  }
  this.fillColor = function() {
    c = random(0, 255);
  }
  this.display = function() {
    push();
    fill(c, c, c);
    noStroke();
    ellipse(this.x, this.y, this.dia, this.dia);
    pop();
  }
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>assingment2</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="Circle.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 circles = [];
	var gravity;
	var mouseForce;


	function setup() {
	createCanvas(500, 600);
	background(0);

	for (var i = 0; i < 10; i++) {
	circles.push(new Circle(width / 2, height / 2, 255));
	}
	gravity = 1.0;

	}


	function Circle(x, y, c) {
	this.x = x;
	this.y = y;
	this.c = c;
	this.dia = random(5, 30);
	this.xspeed = random(-5, 5);
	this.yspeed = random(-5, 5);

	this.move = function() {
	this.x += this.xspeed;
	this.y += this.yspeed;
	}

	this.checkboundaries = function() {
	if (this.x < 0 \|\| this.x > width) {
	this.xspeed *= -1;
	}
	if (this.y < 0 \|\| this.y > height) {
	this.yspeed *= -1;
	}
	}
	this.applyGravity = function(g) {
	this.yspeed += g;
	}
	this.applykeyForce = function(f) {
	this.x += random(1, 10);
	this.y += random(1, 10);
	}
	this.fillColor = function() {
	c = random(0, 255);
	}
	this.display = function() {
	push();
	fill(c, c, c);
	noStroke();
	ellipse(this.x, this.y, this.dia, this.dia);
	pop();
	}
	}

	<!DOCTYPE html>
	<html>

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