Skip to content

Commit

Permalink
Picked some parameters, fixed some bugs. Also now restarting engine i…
Browse files Browse the repository at this point in the history 
…s not required while changing number of particles.
  • Loading branch information
@cwiertniamichal
cwiertniamichal committed May 27, 2017
1 parent b4985c0 commit 330cf8b
Show file tree
Hide file tree
Showing 7 changed files with 24,705 additions and 58 deletions.
150 changes: 102 additions & 48 deletions RainyScene.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,18 @@
<head>
<title>Rainy scene</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0, initial-scale=1">
<style type="text/css">
body {
/* Set the background color of the HTML page to black */
background-color: #000000;

/* Hide oversized content. This prevents the scroll bars. */
overflow: hidden;
}
</style>


</head>
<body>

Expand All @@ -19,13 +30,18 @@
<script src="js/Shaders.js"></script>
<script src="js/Particle.js"></script>

<script src="js/jquery-1.9.1.js"></script>
<script src="js/jquery-ui.js"></script>

<script type='text/javascript' src='js/DAT.GUI.min.js'></script>

<div id="ThreeJS" style="position: absolute; left:0px; top:0px"></div>

<script>

var scene, camera, renderer, container;
var rainEngines = [];
var cloudEngines = [];
var clock = new THREE.Clock();

init()
Expand Down Expand Up @@ -92,76 +108,112 @@
floor.rotation.x = Math.PI / 2;
scene.add(floor);

this.cloudEngine = new ParticlesEngine();
rainEngines = new Array();
cloudEngines = [];

var cloudEngine = new ParticlesEngine();
cloudEngine.setParameters(Examples.clouds);
cloudEngine.initialize();
cloudEngines.push(cloudEngine);

this.engine = new ParticlesEngine();
var engine = new ParticlesEngine();
engine.setParameters(Examples.rain);
engine.initialize();
rainEngines.push(engine);

gui = new dat.GUI();

if(!Array.prototype.last){
Array.prototype.last = function(){
return this[this.length - 1];
}
}

parameters = {
rainParticlesNumber: 50,
rainSize: 8.0,
rainVelocity: -400,
rainVelocity: 400,
cloudsParticlesNumber: 100,
cloudSize: 80.0,
cloudVelocity: 40,
windSpeedX: 40.0,
cloudVelocityX: 40,
cloudVelocityZ: 0,
windSpeedX: 0.0,
windSpeedZ: 0.0
};

var dir1 = gui.addFolder('Rain');
var rainParticlesNumber = dir1.add(parameters, 'rainParticlesNumber').min(1).max(100).step(1).name('Particles').listen();
var rainSize = dir1.add(parameters, 'rainSize').min(4.0).max(12.0).step(0.5).name('Size').listen();
var rainVelocity = dir1.add(parameters, 'rainVelocity').min(-600).max(-200).step(-50).name('Velocity').listen();
var rainParticlesNumber = dir1.add(parameters, 'rainParticlesNumber').min(1).max(300).step(1).name('Particles').listen();
var rainSize = dir1.add(parameters, 'rainSize').min(4.0).max(16.0).step(1.0).name('Size').listen();
var rainVelocity = dir1.add(parameters, 'rainVelocity').min(100).max(800).step(50).name('Velocity').listen();

rainParticlesNumber.onChange(function (value) {
Examples.rain.particlesPerSecond = value;
restartRainEngine(Examples.rain);
rainEngines.last().emitterAlive = false;
var newEngine = new ParticlesEngine();
newEngine.setParameters(Examples.rain);
newEngine.initialize();
rainEngines.push(newEngine);
});

rainSize.onChange(function (value) {
Examples.rain.sizeBase = value;
engine.sizeBase = value;
for(var i = 0; i < engine.particleArray.length; i++){
if(engine.particleArray[i].alive == 0.0)
engine.particleArray[i].size = engine.randomValue(value, engine.sizeSpread);
rainEngines.last().sizeBase = value;
for(var i = 0; i < rainEngines.last().particleArray.length; i++){
if(rainEngines.last().particleArray[i].alive == 0.0)
rainEngines.last().particleArray[i].size = rainEngines.last().randomValue(value, rainEngines.last().sizeSpread);
}
});

rainVelocity.onChange(function (value) {
Examples.rain.velocityBase.y = value;
engine.velocityBase = new THREE.Vector3(0.0, value, 0.0);
for(var i = 0; i < engine.particleArray.length; i++){
if(engine.particleArray[i].alive == 0.0)
engine.particleArray[i].velocity = engine.randomVector3(new THREE.Vector3(0.0, value, 0.0), engine.velocitySpread);
Examples.rain.velocityBase.y = -value;
rainEngines.last().velocityBase = new THREE.Vector3(rainEngines.last().wind.x, -value, rainEngines.last().wind.z);
for(var i = 0; i < rainEngines.last().particleArray.length; i++){
if(rainEngines.last().particleArray[i].alive == 0.0)
rainEngines.last().particleArray[i].velocity = rainEngines.last().randomVector3(new THREE.Vector3(rainEngines.last().wind.x, -value, rainEngines.last().wind.z), rainEngines.last().velocitySpread);
}
});

var dir2 = gui.addFolder('Clouds');
var cloudsParticlesNumber = dir2.add(parameters, 'cloudsParticlesNumber').min(80).max(120).step(10).name('Particles').listen();
var cloudSize = dir2.add(parameters, 'cloudSize').min(60.0).max(100.0).step(5.0).name('Size').listen();
var cloudVelocity = dir2.add(parameters, 'cloudVelocity').min(20).max(60).step(5).name('Velocity').listen();
var cloudSize = dir2.add(parameters, 'cloudSize').min(40.0).max(120.0).step(10.0).name('Size').listen();
var cloudVelocityX = dir2.add(parameters, 'cloudVelocityX').min(20).max(80).step(5).name('Velocity X').listen();
var cloudVelocityZ = dir2.add(parameters, 'cloudVelocityZ').min(-80).max(80).step(10).name('Velocity Z').listen();

cloudsParticlesNumber.onChange(function (value) {
Examples.clouds.particlesPerSecond = value;
restartCloudEngine(Examples.clouds);
cloudEngines.last().emitterAlive = false;
// for(var i = 0; i < cloudEngines.last().particleArray.length; i++){
// if(cloudEngines.last().particleArray[i].alive == 0.0)
// cloudEngines.last().particleArray[i].size = cloudEngines.last().randomValue(value, cloudEngines.last().sizeSpread);
// }
var newEngine = new ParticlesEngine();
newEngine.setParameters(Examples.clouds);
newEngine.initialize();
cloudEngines.push(newEngine);
});

cloudSize.onChange(function (value) {
Examples.clouds.sizeBase = value;
cloudEngine.sizeBase = value;
for(var i = 0; i < cloudEngine.particleArray.length; i++){
if(cloudEngine.particleArray[i].alive == 0.0)
cloudEngine.particleArray[i].size = cloudEngine.randomValue(value, cloudEngine.sizeSpread);
cloudEngines.last().sizeBase = value;
for(var i = 0; i < cloudEngines.last().particleArray.length; i++){
if(cloudEngines.last().particleArray[i].alive == 0.0)
cloudEngines.last().particleArray[i].size = cloudEngines.last().randomValue(value, cloudEngines.last().sizeSpread);
}
});
cloudVelocity.onChange(function (value) {

cloudVelocityX.onChange(function (value) {
Examples.clouds.velocityBase.x = value;
cloudEngine.velocityBase = new THREE.Vector3(value, 0.0, 0.0);
for(var i = 0; i < cloudEngine.particleArray.length; i++){
if(cloudEngine.particleArray[i].alive == 0.0)
cloudEngine.particleArray[i].velocity = cloudEngine.randomVector3(new THREE.Vector3(value, 0.0, 0.0), cloudEngine.velocitySpread);
cloudEngines.last().velocityBase = new THREE.Vector3(value, cloudEngines.last().velocityBase.y, cloudEngines.last().velocityBase.z);
for(var i = 0; i < cloudEngines.last().particleArray.length; i++){
cloudEngines.last().particleArray[i].velocity = cloudEngines.last().randomVector3(new THREE.Vector3(value, cloudEngines.last().velocityBase.y, cloudEngines.last().velocityBase.z), cloudEngines.last().velocitySpread);
}
});

cloudVelocityZ.onChange(function (value) {
Examples.clouds.velocityBase.z = value;
cloudEngines.last().velocityBase = new THREE.Vector3(cloudEngines.last().velocityBase.x, cloudEngines.last().velocityBase.y, value);
for(var i = 0; i < cloudEngines.last().particleArray.length; i++){
cloudEngines.last().particleArray[i].velocity = cloudEngines.last().randomVector3(new THREE.Vector3(cloudEngines.last().velocityBase.x, cloudEngines.last().velocityBase.y, value), cloudEngines.last().velocitySpread);
}
});

Expand All @@ -171,25 +223,17 @@

windSpeedX.onChange(function (value) {
var wind = new THREE.Vector3(value, 0.0, 0.0);
engine.wind = new THREE.Vector3(wind.x, engine.wind.y, engine.wind.z);
cloudEngine.wind = new THREE.Vector3(wind.x/10, cloudEngine.wind.y, cloudEngine.wind.z);;
for(var i = 0; i < engine.particleArray.length; i++){
engine.particleArray[i].velocity = new THREE.Vector3(wind.x, engine.particleArray[i].velocity.y, engine.particleArray[i].velocity.z);
}
for(var i = 0; i < cloudEngine.particleArray.length; i++){
cloudEngine.particleArray[i].velocity = new THREE.Vector3(wind.x/10, cloudEngine.particleArray[i].velocity.y, cloudEngine.particleArray[i].velocity.z);
rainEngines.last().wind = new THREE.Vector3(wind.x, rainEngines.last().wind.y, rainEngines.last().wind.z);
for(var i = 0; i < rainEngines.last().particleArray.length; i++){
rainEngines.last().particleArray[i].velocity = new THREE.Vector3(wind.x, rainEngines.last().particleArray[i].velocity.y, rainEngines.last().particleArray[i].velocity.z);
}
});

windSpeedZ.onChange(function (value) {
var wind = new THREE.Vector3(0.0, 0.0, value);
engine.wind = new THREE.Vector3(engine.wind.x, engine.wind.y, wind.z);
cloudEngine.wind = new THREE.Vector3(cloudEngine.wind.x, cloudEngine.wind.y, wind.z/10);
for(var i = 0; i < engine.particleArray.length; i++){
engine.particleArray[i].velocity = new THREE.Vector3(engine.particleArray[i].velocity.x, engine.particleArray[i].velocity.y, wind.z);
}
for(var i = 0; i < cloudEngine.particleArray.length; i++){
cloudEngine.particleArray[i].velocity = new THREE.Vector3(cloudEngine.particleArray[i].velocity.x, cloudEngine.particleArray[i].velocity.y, wind.z/10);
rainEngines.last().wind = new THREE.Vector3(rainEngines.last().wind.x, rainEngines.last().wind.y, wind.z);
for(var i = 0; i < rainEngines.last().particleArray.length; i++){
rainEngines.last().particleArray[i].velocity = new THREE.Vector3(rainEngines.last().particleArray[i].velocity.x, rainEngines.last().particleArray[i].velocity.y, wind.z);
}
});
}
Expand All @@ -207,10 +251,20 @@
function update(){
controls.update();
stats.update();

var dt = clock.getDelta();
engine.update(dt * 0.5, cloudEngine);
cloudEngine.update(dt * 0.5, null);
//engine.update(dt * 0.5, cloudEngine);
for(var i = 0; i < rainEngines.length; i++){
//window.alert('here');
//window.alert(rainEngines.lenght);
rainEngines[i].update(dt * 0.5, cloudEngines.last());
}


for(var i = 0; i < cloudEngines.length; i++){
//window.alert('here');
cloudEngines[i].update(dt * 0.5, null);
}
}

function restartRainEngine(parameters){
Expand Down
Binary file added images/raindrop2flip.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added images/raindropflip.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
16 changes: 12 additions & 4 deletions js/ParticlesEngine.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -234,7 +234,7 @@ ParticlesEngine.prototype.destroy = function()
/******************************************************/
ParticlesEngine.prototype.update = function(dt, engine){
var recycleIndices = [];

// update particle data
for(var i = 0; i < this.particleCount; i++){
if(this.particleArray[i].alive){
Expand Down Expand Up @@ -295,9 +295,17 @@ ParticlesEngine.prototype.update = function(dt, engine){
// if any particles have died while the emitter is still running, we imediately recycle them
for(var j = 0; j < recycleIndices.length; j++){
var i = recycleIndices[j];
this.particleArray[i] = this.createParticle();
this.particleArray[i].alive = 1.0; // activate right away
this.particleGeometry.vertices[i] = this.particleArray[i].position;
if(engine != null){
this.particleArray[i] = this.createParticle();
this.particleArray[i].position = this.randomVector3(this.positionBase, new THREE.Vector3(0, 0, 0));
this.particleArray[i].alive = 1.0;
this.particleGeometry.vertices[i] = this.particleArray[i].position;
}
else{
this.particleArray[i] = this.createParticle();
this.particleArray[i].alive = 1.0; // activate right away
this.particleGeometry.vertices[i] = this.particleArray[i].position;
}
}

// stop emitter?
Expand Down
13 changes: 7 additions & 6 deletions js/ParticlesEngineExamples.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,21 +6,22 @@ Examples =
positionBase : new THREE.Vector3( -100, 200, 0 ),
positionSpread : new THREE.Vector3( 0, 0, 200 ),

velocityBase : new THREE.Vector3( 0, 0, 0 ),
velocityBase : new THREE.Vector3( 40, 0, 0 ),
velocitySpread : new THREE.Vector3( 0, 0, 0 ),

particleTexture : THREE.ImageUtils.loadTexture( 'images/smokeparticle.png'),

sizeBase : 80.0,
sizeSpread : 100.0,
colorBase : new THREE.Vector3(0.0, 0.0, 1.0), // H,S,L
opacityBase : 0.6,
//opacityTween : new Tween([0,1,4,5],[0,1,1,0]),

particlesPerSecond : 100,
particleDeathAge : 10.0,
emitterDeathAge : 60,

wind : new THREE.Vector3(40, 0, 0)
// wind : new THREE.Vector3(40, 0, 0)
},
rain :
{
Expand All @@ -31,19 +32,19 @@ Examples =
velocitySpread : new THREE.Vector3( 10, 50, 10 ),
accelerationBase : new THREE.Vector3( 0, -10,0 ),

particleTexture : THREE.ImageUtils.loadTexture( 'images/raindrop2.png' ),
particleTexture : THREE.ImageUtils.loadTexture( 'images/raindrop2flip.png' ),

sizeBase : 8.0,
sizeSpread : 4.0,
colorBase : new THREE.Vector3(0.66, 1.0, 0.7), // H,S,L
colorSpread : new THREE.Vector3(0.00, 0.0, 0.2),
opacityBase : 0.6,

particlesPerSecond : 10,
particleDeathAge : 10.0,
particlesPerSecond : 50,
particleDeathAge : 3.0,
emitterDeathAge : 60,

wind: new THREE.Vector3(400, 0, 0)
wind: new THREE.Vector3(0, 0, 0)
}

}
Loading

0 comments on commit 330cf8b

Please sign in to comment.