StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POStrange javascript instantiation
primarykey
Id
20447607
data
AcceptedAnswerId
0
AnswerCount
0
ClosedDate
CommentCount
4
CommunityOwnedDate
CreationDate
2013-12-07T22:41:23.400
FavoriteCount
0
LastActivityDate
2013-12-08T10:09:17.033
LastEditDate
2013-12-08T10:09:17.033
LastEditorUserId
502381
OwnerUserId
1042567
ParentId
0
PostTypeId
1
Score
0
ViewCount
154
LastEditorDisplayName
text
Body
I'm trying to implement Stemkoskis excellent particle engine (<a href="http://stemkoski.github.io/Three.js/Particle-Engine.html" rel="nofollow">http://stemkoski.github.io/Three.js/Particle-Engine.html</a>) but with multiple instances of his "class". But the problem is that when adding multiple instances, all other instances gets the last added instances properties regarding tween size (sizeTween) Here is his source: <a href="http://stemkoski.github.io/Three.js/js/ParticleEngine.js" rel="nofollow">http://stemkoski.github.io/Three.js/js/ParticleEngine.js</a> And instantiation: <a href="http://stemkoski.github.io/Three.js/js/ParticleEngineExamples.js" rel="nofollow">http://stemkoski.github.io/Three.js/js/ParticleEngineExamples.js</a> I've tried to google up my knowledge about so called "classes" in javascript and all seems to make sense with the Tween instantiation class and all "classes" are using the 'this' pointer. But still it doesn't make sense that I cannot instantiate two different objects. I wonder if it has something to do with the shaders, but that doesn't make sense either since I can instantiate two different types of particles but it seems to be the Tween that stays the same. I just wonder if someone can give me a hint if there are some issues with his code that makes multiple instances fail to be unique? (I've tried with Fireball and Snow (in the demo). Any hint would be great. Spent 8 hours today and I still don't get it. Here is my code where I use the code from ParticleEngine.js file. <pre><code>// Clouds var cloud = new Cloud(); cloud.Create(0,0,0, 4, scene); objects.push(cloud); // this makes the Draw function gets called in each instance // Sun var sun = new Sun(); sun.Create(0,200,0, scene); objects.push(sun); // this makes the Draw function gets called in each instance // My own classes // Baseclass function Object3D() { this.mesh; Object3D.prototype.GetObject = function() { return this.mesh; }; Object3D.prototype.Draw = function() { //draw object }; } // Class that creates the snow function Cloud() { Object3D.call(this); Cloud.prototype.Create = function(x ,y ,z, s, scene) { var engine = new ParticleEngine(); engine.setValues( {positionStyle : Type.CUBE, positionBase : new THREE.Vector3( 0, 0, 0 ), positionSpread : new THREE.Vector3( 200, 0, 200 ), positionRadius : 0.1, velocityStyle : Type.CUBE, velocityBase : new THREE.Vector3( 0, -300, 0 ), velocitySpread : new THREE.Vector3( 150, 20, 150 ), accelerationBase : new THREE.Vector3( 0, -5,0 ), sizeTween : new Tween( [0, 0.25], [1, 10] ), colorBase : new THREE.Vector3(0.66, 1.0, 0.9), // H,S,L opacityTween : new Tween( [2, 3], [0.8, 0] ), blendStyle : THREE.AdditiveBlending, angleBase : 0, angleSpread : 720, angleVelocityBase : 0, angleVelocitySpread : 60, particleTexture : THREE.ImageUtils.loadTexture( 'textures/snowflake.png' ), particlesPerSecond : Math.random()*50+100, particleDeathAge : 10.5, // emitterDeathAge : 60 }); engine.initialize(); this.engine = engine; }; Cloud.prototype.Draw = function(time) { this.engine.update(time * 0.00005); }; } Cloud.prototype = new Object3D(); Cloud.prototype.constructor = Cloud; // Class that creates the fireball effect function Sun() { Object3D.call(this); Sun.prototype.Create = function(x, y, z, scene) { var sunEngine = new ParticleEngine(); sunEngine.setValues( { positionStyle : Type.SPHERE, positionBase : new THREE.Vector3(0, 200, 0), positionRadius : 2, sizeTween : new Tween( [0, 0.4], [1, 150] ), opacityTween : new Tween( [0.7, 1], [1, 0] ), colorBase : new THREE.Vector3(0.02, 1, 0.4), blendStyle : THREE.AdditiveBlending, velocityStyle : Type.SPHERE, speedBase : 40, speedSpread : 8, particleTexture : THREE.ImageUtils.loadTexture( 'textures/smokeparticle.png' ), particlesPerSecond : 60, particleDeathAge: 1.5, //emitterDeathAge : 60 }); sunEngine.initialize(); this.sunEngine = sunEngine; }; Sun.prototype.Draw = function(time) { this.sunEngine.update(time * 0.00005 ); }; } Sun.prototype = new Object3D(); Sun.prototype.constructor = Sun; </code></pre> In the first instance (Cloud/Snow) I set: <pre><code>sizeTween : new Tween( [0, 0.25], [1, 10] ), </code></pre> And then I initiate the "Sun" class with this property: <pre><code>sizeTween : new Tween( [0, 0.4], [1, 150] ), </code></pre> And the clouds, initiated first, gets the same values for sizeTween as the last added one. And this is the core problem I've got.
Tags
<javascript><webgl><instantiation>
Title
Strange javascript instantiation
singulars
PostAcceptedAnswerId
1. This table or related slice is empty.
PostParentId
1. This table or related slice is empty.
PostTypePostTypeId
1. PTQuestion
UserLastEditorUserId
1. USJJJ
UserOwnerUserId
1. USNergal Dimitri
plurals
PostLinksPostIdRelatedPostId
1. This table or related slice is empty.
PostLinksRelatedPostIdPostId
1. This table or related slice is empty.
PostsAcceptedAnswerId
1. This table or related slice is empty.
PostsParentIdCreationDate
1. This table or related slice is empty.
VotesPostIdCreationDate
1. This table or related slice is empty.
CommentsPostId

Querying!

Guidance

A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.