Processing.js TypeError Troubles
in
Processing with Other Languages
•
3 months ago
I'm trying to do a few different animations with processing.js but some are buggy and I can't really figure out why; they both work in plain processing but not in processing.js.
The first is simply moving and scaling and rotating some PShapes loaded from .svg files, and throws the error
TypeError: Property 'transform' of object [object Object] is not a function
when I call shape();
The second takes a picture of the screen and displays it lots of times rotating around in 3d space, and throws
TypeError: Object #<WebGLRenderingContext> has no method 'save'
Here is the relevant code (the svgs are preloaded and other classes that implement Animable all work, but I can present the rest if you want it).
Thanks!
class Thoughts implements Animable { PShape head, think1, think2, thinkBig; float scale, bigThinkScale; boolean landscape; Thoughts() { head=loadShape("head.svg"); think1=loadShape("thought1.svg"); think2=loadShape("thought2.svg"); thinkBig=loadShape("thoughtmain.svg"); landscape=(w>h); if (landscape) { scale=.2*w/head.width; } else { scale=.4*h/head.height; } head.scale(scale); think1.scale(scale*.3); think2.scale(scale*.3); thinkBig.scale(w/thinkBig.width, h/thinkBig.height); thinkBig.scale(1.3492558); bigThinkScale=1.3492558; float theta=atan2(h/2-head.height*scale+20, -w*.1); think1.rotate(2+theta); think2.rotate(1.8+theta); //think1.disableStyle(); //think2.disableStyle(); } void animate(int aFrame) { background(255); aFrame%=470; if(aFrame==0)println(bigThinkScale); if (aFrame>170&&aFrame<370) { float interp=(aFrame<270)?.5-sqrt((270-aFrame)/100.0)*.5:.5+sqrt((aFrame-270)/100.0)*.5; translate(-w*interp, h*interp); } else if (aFrame>=370) { translate(-w, h); } if (aFrame<50) { } if (aFrame<120.0) { shape(head, w*.1, h-aFrame/120.0*head.height*scale+20); bigThinkScale*=1.003; thinkBig.scale(1.003); float rem=(bigThinkScale-1)/2; //shape(thinkBig,w,-h); shape(thinkBig, w*(1-rem)-w, -h*(1+rem)+h); } else { if (aFrame==120) { thinkBig.resetMatrix(); thinkBig.scale(w/thinkBig.width, h/thinkBig.height); bigThinkScale=1; } shape(head, w*.1, h-head.height*scale+20); if (aFrame>160) { shape(think1, w*.4, h/2); if (aFrame>175) { if (landscape) { shape(think2, w*.8, h*.3); } else { shape(think2, w*.8, h*.1); } if (aFrame<370) { shape(thinkBig, w, -h); } else { bigThinkScale*=1.003; thinkBig.scale(1.003); float rem=(bigThinkScale-1)/2; shape(thinkBig, w*(1-rem), -h*(1+rem)); } } } } } }
and
class Why implements Animable{ Whole[] holes; PImage tex; PShape q; Why(){ holes=new Whole[15]; tex=createImage(width,height,RGB); for(int i=0;i<holes.length;i++)holes[i]=new Whole(); } void animate(int aFrame){ background(0); perspective(); pushMatrix(); pushStyle(); stroke(255); noFill(); translate((mouseX-w/2)*.1,(mouseY-h/2)*.1,0); strokeWeight(3); for(int i=0;i<holes.length;i++){ holes[i].draw(tex); } loadPixels(); tex.loadPixels(); arrayCopy(pixels,tex.pixels); tex.updatePixels(); popStyle(); popMatrix(); } void resize(){ tex=createImage(width,height,RGB); } } class Whole{ PVector rot,loc,size,dRot; Whole(){ loc=new PVector(random(w),random(h)); rot=new PVector(random(TWO_PI),random(TWO_PI),random(TWO_PI)); dRot=new PVector(random(-.02,.02),random(-.02,.02),random(-.02,.02)); size=new PVector(random(30,400),random(30,400)); } void draw(PImage tex){ pushMatrix(); translate(loc.x,loc.y); rotateX(rot.x); rotateY(rot.y); rotateZ(rot.z); translate(-size.x/2,-size.y/2); rot.add(dRot); image(tex,0,0,size.x,size.y); rect(0,0,size.x,size.y); popMatrix(); } }
1
