Skip to content

Commit

Permalink
Added lots of comments.
Browse files Browse the repository at this point in the history 
Removed old 'Fields' code.
Implemented the insect simulation.
  • Loading branch information
@owmasch
owmasch committed Nov 5, 2016
1 parent eeb4c25 commit 5b62a59
Show file tree
Hide file tree
Showing 6 changed files with 178 additions and 101 deletions.
55 changes: 46 additions & 9 deletions Buttons.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ var rateBool = true, particlesBool = true, particleSizeBool = true;
// Maximums for the input fields.
var maxEmissionRate = 2500;
var maxParticleSize = 25;
var maxParticlesNumber = 2500;
var maxParticlesNumber = 10000;

// Selector for the alert dialog.
var alert = $('#alert');
Expand All @@ -21,34 +21,37 @@ var particlesInput = $('#particlesInput');
var particleSizeButton = $('#particleSizeButton');
var particleSizeInput = $('#particleSizeInput');

//var canvasMinInput = $('#canvasMinInput');

// This is the functino that pauses and plays the simulation.
function playPause() {
play = !play;
if(play) {
loop();
}
else {

}
}

// Intro snow button should start the snow simulation and disable to snow button.
$('#startSnowButton').on('click', function() {
toggleIntro(snow());
rainButton.removeAttr('disabled');
snowButton.prop('disabled','true');
setDefaults();
});

// Intro rain button should start the rain simulation and disable to rain button.
$('#startRainButton').on('click', function() {
toggleIntro(rain());
snowButton.removeAttr('disabled');
rainButton.prop('disabled','true');
setDefaults();
});

// Intro rain button should start the rain simulation and disable to rain button.
// Also disable the wind button because the insect simulation has no wind.
$('#startInsectButton').on('click', function() {
toggleIntro(insect());
insectButton.prop('disabled','true');
windToggleButton.prop('disabled','true');
setDefaults();
});


// Stops and starts the animation.
$('#playPauseButton').on('click', function() {
Expand Down Expand Up @@ -185,7 +188,6 @@ function setMaxParticleSizePlaceholder() {
}

function setDefaults() {
console.log('set defaults');
// Sets the placeholder text of the inputs.
setRateInputPlaceholder();
setParticlesInputPlaceholder();
Expand All @@ -195,16 +197,34 @@ function setDefaults() {
rateInput.val(emissionRate);
particlesInput.val(maxParticles);
particleSizeInput.val(particleSize);

// Sets the default text for the wind dialog button.
if(windOn) {
windToggleButton.html('Wind: Enabled');
}
else {
windToggleButton.html('Wind: Disabled');
}
}

// Clears the simulation of old particles, emitters, and fields.
function clearArrays() {
particles = []; //Clears the particle Array.
emitters = []; //Clears the emitters Array.
fields = []; //Clears the fields Array.
}

var rainButton = $('#rainButton');// Selector for the rain button
var snowButton = $('#snowButton');// Selector for the snowButton
var insectButton = $('#insectButton');// Selector for the insectButton
// Changes the simulation to rain.
rainButton.on('click', function() {
playPause();// Stop all other simulations.
clearArrays();// Clear simulation.
snowButton.removeAttr('disabled');
rainButton.prop('disabled','true');
insectButton.removeAttr('disabled');
windToggleButton.removeAttr('disabled');
rain();// Start the rain simluation.
setDefaults();
});
Expand All @@ -214,13 +234,30 @@ snowButton.on('click', function() {
clearArrays();// Clear simulation.
snowButton.prop('disabled','true');
rainButton.removeAttr('disabled');
insectButton.removeAttr('disabled');
windToggleButton.removeAttr('disabled');
snow();// Start the snow simluation.
setDefaults();
});

insectButton.on('click', function() {
playPause();// Stop all other simulations.
clearArrays();// Clear simulation.
windToggleButton.prop('disabled','true');
insectButton.prop('disabled','true');// Make the insect button unclickable
rainButton.removeAttr('disabled');
snowButton.removeAttr('disabled');
insect();// Start the insect simluation.
setDefaults();
});

var windToggleButton = $('#windToggleButton');// Selector for the Wind toggle Button
// This toggles the wind and changes the button text whenever the button is clicked.
windToggleButton.on('click', function() {
if(insectButton.prop('disabled') === true) {
windToggleButton.prop('disabled','true');
return;
}
windOn = !windOn;
if(windOn) {
windToggleButton.html('Wind: Enabled');
Expand Down
82 changes: 47 additions & 35 deletions Particle.js
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
//Creates a new particle at a point with a velocity and accleration.
//Creates a new particle at a point with a velocity and acceleration.
function Particle(point, velocity, acceleration) {
this.position = point || new Vector(0, 0);
this.velocity = velocity || new Vector(0, 0);
Expand All @@ -14,66 +14,43 @@ Particle.prototype.move = function() {
this.position.add(this.velocity);
};

//Adjust the particles' accelerations due to fields.
//This was added to simulate gravity.
Particle.prototype.submitToFields = function() {
var totalAccelerationX = this.acceleration.x;
var totalAccelerationY = this.acceleration.y;

//for each field
for(var i = 0; i < fields.length; i++) {
var field = fields[i];

//Find the distance between the particle and the field.
var vectorX = field.position.x - this.position.x;
var vectorY = field.position.y - this.position.y;

//Calculate the force acting on the particle.
var force = field.mass / Math.pow(vectorX*vectorX+vectorY*vectorY,1.5);

// Add force to the totalAccelerationX scaled by distance.
totalAccelerationX += vectorX * force;
totalAccelerationY += vectorY * force;
}
// update our particle's acceleration
this.acceleration = new Vector(totalAccelerationX, totalAccelerationY);
};
/* Creates a Wind object.
* Magnitude: Strength of the wind.
* Direction: Direction of the wind.
* Spread: Variability in the wind direction.
*/


function Wind(magnitude, direction, spread) {
this.magnitude = magnitude;
this.direction = direction;
this.spread = spread;
}


/*
* This function does the math for the wind.
* The wind needs to ramp up and down over a bunch of frames.
* Before the particles position changes in each frame, this calculates the wind for that frame.
*/
var x = -2;
var increase = .01;// 4 iterations
var strengthFactor;
function calculateWind() {

if(x >= windiness) {
x = -2;
}
else {
strengthFactor = Math.pow(Math.E,- Math.pow(x, 2));

}
//console.log(strengthFactor);
x += increase;
}

// This changes all of the particles velocity depending on the wind speed.
Particle.prototype.blowWind = function(wind) {
var variability = getRandomArbitrary(-wind.spread, wind.spread);
windStrengthX = wind.magnitude * strengthFactor * Math.cos(wind.direction + variability);
windStrengthY = wind.magnitude * strengthFactor * Math.sin(wind.direction + variability);
var windStrengthX = wind.magnitude * strengthFactor * Math.cos(wind.direction + variability);
var windStrengthY = wind.magnitude * strengthFactor * Math.sin(wind.direction + variability);

windVector = new Vector(windStrengthX, windStrengthY);
var windVector = new Vector(windStrengthX, windStrengthY);

this.velocity.add(windVector);
};
Expand All @@ -99,8 +76,14 @@ Emitter.prototype.emitParticle = function() {
var magnitude = this.velocity.getMagnitude();

// The new particle's position is set to the emitter's position
//ADDS A RANDOM X VALUE TO THE POSITION TO MAKE THEM APPEAR IN A LINE ACROSS THE TOP
var position = new Vector(getRandomArbitrary(0, canvasWidth), this.position.y);
//ADDS A RANDOM X or Y VALUE TO THE POSITION TO MAKE THEM APPEAR IN A LINE ACROSS THE TOP or SIDE
var position;
if(emitFromTop) {
position = new Vector(getRandomArbitrary(0, canvasWidth), this.position.y);
}
else {
position = new Vector(this.position.x, getRandomArbitrary(0, canvasHeight));
}

var velocity = Vector.fromAngle(angle, magnitude * getRandomArbitrary(minimumSpeed, maximumSpeed));

Expand All @@ -122,4 +105,33 @@ function getRandomArbitrary(min, max) {
Particle.prototype.windEffect = function(wind) {
this.acceleration = new Vector(this.acceleration.x + wind.x/randomFactor,this.acceleration.y + wind.y/randomFactor);
}
*/


// No longer needed.
/*
//Adjust the particles' accelerations due to fields.
//This was added to simulate gravity.
Particle.prototype.submitToFields = function() {
var totalAccelerationX = this.acceleration.x;
var totalAccelerationY = this.acceleration.y;
//for each field
for(var i = 0; i < fields.length; i++) {
var field = fields[i];
//Find the distance between the particle and the field.
var vectorX = field.position.x - this.position.x;
var vectorY = field.position.y - this.position.y;
//Calculate the force acting on the particle.
var force = field.mass / Math.pow(vectorX*vectorX+vectorY*vectorY,1.5);
// Add force to the totalAccelerationX scaled by distance.
totalAccelerationX += vectorX * force;
totalAccelerationY += vectorY * force;
}
// update our particle's acceleration
this.acceleration = new Vector(totalAccelerationX, totalAccelerationY);
};
*/
14 changes: 5 additions & 9 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,21 +19,16 @@
integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
crossorigin="anonymous">

<!-- Optional theme -->
<!-- Optional theme that makes things look nicer. -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css"
integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp"
crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<!-- Latest compiled and minified Bootstrap Code -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"
integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
crossorigin="anonymous"></script>

<!-- Latest compiled and minifed jQuery UI. Used for the UI sliders. -->
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"
integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU="
crossorigin="anonymous"></script>

<!-- Custom styles for this template -->
<link href="jumbotron-narrow.css" rel="stylesheet">

Expand All @@ -45,7 +40,6 @@

<!-- Import canvas and basic buffer functions. -->
<script type="text/javascript" src="main.js"></script>

</head>
<body>
<div class="container">
Expand All @@ -66,6 +60,7 @@ <h1>2D GAME</h1>
<p class="lead">Which simulation would you like to start with first?</p>
<p><button id="startSnowButton" class="btn btn-sm btn-primary" type="button">Snow blowing and falling.</button></p>
<p><button id="startRainButton" class="btn btn-sm btn-primary" type="button">Rain falling.</button></p>
<p><button id="startInsectButton" class="btn btn-sm btn-primary" type="button">Insect Swarm.</button></p>
</div>
</div>
<!-- Don't display this until the simulation has started. -->
Expand All @@ -74,6 +69,7 @@ <h1>2D GAME</h1>
<h4>Advanced Options</h4>
<button id="rainButton" class="btn btn-sm btn-primary" type="button">Rain</button>
<button id="snowButton" class="btn btn-sm btn-primary" type="button">Snow</button>
<button id="insectButton" class="btn btn-sm btn-primary" type="button">Insect</button>
<button id="playPauseButton" class="btn btn-sm btn-primary" type="button">Play/Pause</button>
<button id="windToggleButton" class="btn btn-sm btn-primary" type="button">Wind: Enabled</button>

Expand All @@ -98,7 +94,7 @@ <h4>Advanced Options</h4>
<input id="particlesInput" type="text" class="form-control" placeholder="between 1 and 100 (inclusive)">
</div>

<!-- Input for maximum canvas Height -->
<!-- Input for particle size -->
<div class="input-group">
<span class="input-group-btn">
<button id="particleSizeButton" class="btn btn-default" type="button">Particle size</button>
Expand Down
8 changes: 7 additions & 1 deletion jumbotron-narrow.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -59,6 +59,11 @@ body {
.marketing p + h4 {
margin-top: 28px;
}
.col-lg-6 {
width: 90%;
margin-left: 2em;
margin-right: 2em;
}

/* Responsive: Portrait tablets and up */
@media screen and (min-width: 768px) {
Expand All @@ -71,10 +76,11 @@ body {
}
/* Space out the masthead */
.header {
margin-bottom: 30px;
margin-bottom: 2px;
}
/* Remove the bottom border on the jumbotron for visual effect */
.jumbotron {
border-bottom: 0;
margin-bottom: 0;
}
}
Loading

0 comments on commit 5b62a59

Please sign in to comment.