hapticdata / toxiclibsjs

Toxiclibsjs is a library for computational design tasks with JavaScript. This library is a port of http://toxiclibs.org for java and processing.
http://haptic-data.com/toxiclibsjs
GNU Lesser General Public License v2.1
810 stars 107 forks source link

simple question about extending a class #33

Closed Dazzid closed 9 years ago

Dazzid commented 9 years ago

Hi! I'm wondering how to extend a taxi class. My reference is something like this: How can I replicate this on processing.js? (I know is a very basic question) Thanks

David

class Particle extends VerletParticle2D {

float r = 40; String name = new String("name"); String myText = new String("no text"); String geo = "none";

String nCat = new String(" "); String nCas= new String(" "); String nEng= new String(" "); String tCat= new String(" "); String tCas= new String(" "); String tEng= new String(" "); String iCat= new String("Empty"); String iCas= new String("Empty"); String iEng= new String("Empty");

int id; int subId; int myGroup; Boolean on = true; float thisAlpha = 255; Boolean hide = false; Boolean dragged = false; PVector min; PVector max; Vec2D velChange; float easing = 0.25; float change; float w; float h; Boolean active = true; Boolean hub = false; color myColor = color(0, 183, 234); color hubColor = color(250, 150, 50); ArrayList myNodes;

Particle (Vec2D loc) { super(loc); change = 0.5; myNodes = new ArrayList(); }

void display() { textAlign(CENTER); if (lenguages == 1) { name = nEng; myText = tEng; } if (lenguages == 2) { name = nCat; myText = tCat; } if (lenguages == 3) { name = nCas; myText = tCas; } float ch = (hide)? 0:255.0; thisAlpha += (ch-thisAlpha)_easing; r = map(thisAlpha, 0.0, 255, 1, 37); textFont(myFont, 23); if (thisAlpha > 0.01) { pushMatrix(); translate(x, y, 0); noStroke(); //fill(200, 50); //rect(-name.length()_4-14, -h/2, w, h, 10); color paiting = ((hub)? hubColor:myColor); fill(red(paiting), green(paiting), blue(paiting), thisAlpha*0.85); ellipse(0, 0, r, r); fill(255, thisAlpha); text(name, 0, 7); //text(id, 0, -26); popMatrix(); } }

void setName(String inName) { name = inName; w = name.length()*10+5; h = 18; }

void setText(String inText) { myText = inText; }

void setGeo(String inGeo) { geo = inGeo; } void move() { velChange = new Vec2D(random(-0.15, 0.15), random(-0.15, 0.15)); this.addVelocity(velChange); stroke(255, 150, 0, thisAlpha); pushMatrix(); translate(x, y, 0); noFill(); //rect(-name.length()*4-14, -h/2, w, h, 10); popMatrix(); }

void contact(Particle b) { if (active) { // Calculate the bottom-right corners of the boxes. float myX2 = x + w; float myY2 = y + h; float otherX2 = b.x + b.w; float otherY2 = b.y + b.h; // If this box is entirely to the left of box b, then there is no collision.
if (x < b.x && myX2 < b.x) return; // If this box is entirely to the right of box b, then there is no collision. if (x > otherX2 && myX2 > otherX2) return; // If this box is entirely above box b, then there is no collision. if (y < b.y && myY2 < b.y) return; // If this box is entirely below box b, then there is no collision. if (y > otherY2 && myY2 > otherY2) return; // If we reach this point, the boxes haven't missed each other. // Therefore, there must be a collision. move(); } }

void setName(float inName) { String oneName = nf(inName, 2, 2); name = oneName; }

void setRadio(float myRadio) { r = myRadio; }

void setColor(color inColor) { myColor = inColor; } void isClicked() { on =! on; }

int getId() { return id; } }

GoToLoop commented 9 years ago

AFAIK we can't! In order for extends to work, we need its source code available at transpile time.

hapticdata commented 9 years ago

If you are using Processing.js and writing your code in the java-syntax style you can't extend classes correctly. Processing.js internally mishandles the this context of the object in a way that makes it not possible.

If you write your code in javascript you can extend anything in toxiclibsjs with standard javascript object-oriented inheritance

If you do this you may also be interested in having a look at p5.js

Dazzid commented 9 years ago

Thanks Hapticdata! Yes I'm starting the project in p5.js indeed