jflw25

README.md

@@ -1,12 +1,32 @@
-# Durham p5 Library
-
-A library of reusable components for [p5js](https://p5js.org/). These are developed by the 1st Year Programming class at Durham University.
-
-## Instructions for adding components
-
-- Fork this repository
-- Create a subdirectory of the main repository named after your component containing
-   - A `.js` file containing the relevant class definition
-   - A `.html` file which uses the .js file and demonstrates its use
-   - A `README.md` file which contains the documentation for the class
-- Once everything is complete (including peer review) make a pull request from your forked repository to <https://github.com/stevenaeola/Durham-p5-lib>
+#ARRAYS OF OBJECTS MOD
+
+# Programming Summative Assignment 
+
+# Mingyue Liu 
+
+### Project Description 
+- Choose one sketch from openproessing(link:https://www.openprocessing.org/sketch/608665 and the licensehttp://creativecommons.org/licenses/by-sa/3.0/)
+- Adapt it into a reusable component using two JavaScript classes.(see class ball.js and class balls.js files)
+    - With lot of constructor
+    - Get and set methods for properties
+    - using p5 and `draw` method 
+- Build an example page(see indexx.html file) with properties controlled by form controls
+
+
+
+
+### Method
+- transform the original JS project into two class files
+- class balls.js contains the get_method and set_method of the parameters ,also setup and draw functions.
+- class ball.js constains the properties of particles with constructors and two functions about moving and display. 
+- With 5 parameters,and 4 of 5 are presented on the example web page(indexx.html),users can input values and make changes to the example.By using the JS DOM.
+- The HTML example page linked two class files and the indexx.js with the power of Bootstrap lib and p5 lib 
+- the indexx.js file with two functions of initial setup and draw, also the DOM.
+
+
+###Explanination of example page
+- see indexx.html file
+- can do the interaction by moving and touch using mouse
+- can change the parameters easily
+- linked with the other three files
+- using the p5 and bootstrap lib

class ball.js

@@ -0,0 +1,80 @@
+class ball{
+
+constructor(){
+  this.x = random(windowWidth);
+  this.y = random(windowHeight);
+  this.diameter = random(10, 30);
+	//var speed = 1;
+	//var dir = random(0, 2*PI);
+	this.Dir = random(0, 2*PI);
+     //this.speed = 1;
+     this.speed = 1;
+  this.speedx = this.speed*cos(this.Dir);
+  this.speedy = this.speed*sin(this.Dir);
+  this.fsumx = 0;
+  this.fsumy = 0;
+ this.mouseTouchRadius=65;
+ //this.mouseSpringRate = 0.5;
+ this.mouseSpringRate = 0.2;
+ this.springRate=0.25;
+
+ //
+ //this.numberOfBalls=500;
+
+   }
+    move() {
+		if(mouseIsPressed){
+			var distance = dist(this.x, this.y, mouseX, mouseY);
+			var touchDist = this.mouseTouchRadius;
+			//var touchDist = mouseTouchRadius;
+			if(distance<touchDist){
+				var dx = this.x - mouseX;
+				var dy = this.y - mouseY;
+				var force = this.mouseSpringRate*(touchDist-distance);
+				//var force = mouseSpringRate*(touchDist-distance);
+				dx /= distance;
+				dy /= distance;
+				var tfx = dx*force;
+				var tfy = dy*force;
+				this.fsumx += tfx;
+				this.fsumy += tfy;
+			}
+		}
+		if(this.x<this.diameter/2){this.fsumx-=(this.springRate*(this.x-this.diameter/2));}
+		if(this.y<this.diameter/2){this.fsumy-=(this.springRate*(this.y-this.diameter/2));}
+		if(this.x>(windowWidth-this.diameter/2)){this.fsumx-=(this.springRate*(this.x-(windowWidth-this.diameter/2)));}
+		if(this.y>(windowHeight-this.diameter/2)){
+			this.fsumy-=(this.springRate*(this.y-(windowHeight-this.diameter/2)));
+			this.fsumy-=this.speedy*0.01;
+			console.log(this.y>windowHeight-this.diameter/2);
+			console.log(this.fsumy);
+			//console.log(this.y);
+			//console.log(windowHeight);
+
+		}
+    this.speedx += this.fsumx;
+    this.speedy += this.fsumy;
+		this.fsumx = 0;
+		this.fsumy = 0.05;
+    this.x += this.speedx;
+    this.y += this.speedy;
+  }
+
+  display() {
+  	    //console.log(this.fsumx);
+  	    //console.log(this.fsumy);
+		//var colorShift = mag(this.fsumx, this.fsumy)*100;
+		var colorShift = mag(this.fsumx, this.fsumy)*100;
+
+		fill(255, 255-colorShift, 255-colorShift);
+    ellipse(this.x, this.y, this.diameter, this.diameter);
+  }
+
+ /*get x(){
+ 	return this.x;
+ }
+ get y(){
+ 	return this.y;
+ }*/
+
+}

class balls.js

@@ -0,0 +1,134 @@
+class balls{
+	constructor(numberOfBalls,springRate,dampingFactor,gravity,mouseTouchRadius){
+		this.numberOfBalls = numberOfBalls || 200;
+		this.springRate = springRate || 0.25;
+		this.dampingFactor = dampingFactor || 0.5;
+		this.gravity = gravity || 0.05;
+		//this.speed = speed;
+		//this.diameter = diameter;
+		this.mouseTouchRadius = mouseTouchRadius || 65;
+		this.mouseSpringRate = 0.05;
+		this.ballArray = new Array();
+	}
+
+//var numberOfBalls = 50;
+//var springRate = 0.25;
+//var dampingFactor = 0.5;
+//var gravity = 0.05;
+//var mouseTouchRadius = 65;
+//var mouseSpringRate = 0.05;
+
+//var ballArray = [];
+
+
+
+//get
+
+
+getnumber(){
+	return this.numberOfBalls;
+}
+
+getmouse(){
+	return this.mouseTouchRadius;
+}
+
+getgravity(){
+	return this.gravity;
+}
+
+getdamping(){
+	return this.dampingFactor;
+}
+
+
+
+
+//set parts
+
+ setNum(num){
+ 	this.numberOfBalls = num;
+ 	background(100);
+ 	this.ballArray = new Array();
+  for (var i=0; i<this.numberOfBalls; i++) {
+
+  	let b = new ball();
+    this.ballArray.push(b);
+  }
+ }
+
+
+
+ setGra(gra){
+ 	this.gravity = gra;
+
+ }
+
+ setDamp(damp){
+ 	this.dampingFactor = damp;
+ }
+
+setMou(mouse){
+	this.mouseTouchRadius = mouse;
+}
+
+
+
+
+
+
+//setup
+
+ balls_setup() {
+	//createCanvas(windowWidth, windowHeight);
+  background(100);
+  for (var i=0; i<this.numberOfBalls; i++) {
+
+  	let b = new ball();
+    this.ballArray.push(b);
+  }
+}
+
+ balls_draw() {
+  background(50, 89, 100);
+  for (var i=0; i<this.ballArray.length; i++) {
+		for (var j=0; j<i; j++) {
+			/*console.log(i);
+			console.log(j);*/
+      var distance = dist(this.ballArray[i].x, this.ballArray[i].y, this.ballArray[j].x, this.ballArray[j].y);
+			var touchDist = this.ballArray[i].diameter/2 + this.ballArray[j].diameter/2;
+			if(distance<touchDist){
+				var dx = this.ballArray[i].x - this.ballArray[j].x;
+				var dy = this.ballArray[i].y - this.ballArray[j].y;
+				var force = this.springRate*(touchDist-distance);
+				dx /= distance;
+				dy /= distance;
+				var tfx = dx*force;
+				var tfy = dy*force;
+				this.ballArray[i].fsumx += tfx;
+				//console.log(this.ballArray[i].fsumx);
+				this.ballArray[i].fsumy += tfy;
+				this.ballArray[j].fsumx -= tfx;
+				this.ballArray[j].fsumy -= tfy;
+				var dspeedx = this.ballArray[i].speedx - this.ballArray[j].speedx;
+				var dspeedy = this.ballArray[i].speedy - this.ballArray[j].speedy;
+				var dotProduct = dspeedx * dx + dspeedy * dy;
+				var damping = dotProduct*this.dampingFactor;
+				var sfx = dx*damping;
+				var sfy = dy*damping;
+				this.ballArray[i].fsumx -= sfx;
+				this.ballArray[i].fsumy -= sfy;
+				this.ballArray[j].fsumx += sfx;
+				this.ballArray[j].fsumy += sfy;
+			}
+		}
+ }
+  for (var i=1; i<this.ballArray.length; i++) {
+    this.ballArray[i].display();
+    this.ballArray[i].move();
+  }
+
+}
+
+
+}

indexx.HTML

@@ -0,0 +1,82 @@
+<!DOCTYPE HTML>
+<html>
+	<head>
+
+
+		<title>RITAs BACKyard</title>
+		<meta charset="utf-8">
+		<meta name="viewport" content="width=device-width, initial-scale=1">
+		<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.2/p5.js"></script>
+		<script src="class ball.js"></script>
+		<script src="class balls.js"></script>
+		<script src="indexx.js"></script>
+		<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
+		<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
+		<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
+		<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
+
+	</head>
+
+	<body>
+
+		<div class="pos-f-t">
+  <div class="collapse" id="navbarToggleExternalContent">
+    <div class="bg-dark p-4">
+
+      <h5 class="text-white h1">ARRAYS OF OBJECTS MOD</h5>
+      <h4>A Strong Physical Simulator Of Cute SnowBall. Just click the snowball to enjoy!</h4>
+
+
+
+
+      <span class="text-muted"><div class = "license">
+			<p><a rel="license" href="http://creativecommons.org/licenses/by-sa/3.0/"><img alt="Creative Commons License" style="border-width:0" src="https://i.creativecommons.org/l/by-sa/3.0/88x31.png" /></a><br />This work is licensed under a <a rel="license" href="http://creativecommons.org/licenses/by-sa/3.0/">Creative Commons Attribution-ShareAlike 3.0 Unported License</a></p>
+	</div></span>
+		<form  id = "Fchange">
+				<h5 class="text-white h6">Change Number Of SnowBalls!</h5>
+
+				<input type ="number" id = "numberOfBalls" value = 200>
+				<br>
+
+				<h5 class="text-white h6">Change Mouse Range!</h5>
+
+				<input type="number" id="mouseTouchRadius" value=65>
+				<br>
+
+				<h5 class="text-white h6">Change Gravity Like God!</h5>
+
+
+
+				<input type="number" id="gravity" value= 0.05>
+				<br>
+
+				<h5 class="text-white h6">Change Damping Factor!</h5>
+
+
+
+				<input type="number" id="dampingFactor" value=0.5>
+				<br>
+
+
+
+
+
+
+
+			</form>
+
+    </div>
+  </div>
+  <nav class="navbar navbar-dark bg-dark">
+    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">
+      <span class="navbar-toggler-icon"></span>
+    </button>
+  </nav>
+</div>
+
+
+
+
+	</body>
+
+</html>