processing - Moving an objects while others stay static in a click controlled sketch -
so i'm trying build animation can step through mouse clicks. adding individual objects click click easy. sequence want follows: 1 object(a) drawn initially. first mouse click adds object(b). second mouse click adds object(c). third mouse click, object(c) should move across screen , disappear.
i'm having problem on last part of sequence. can't figure out how make object move , still maintain static part of sketch. normal way of doing movement change coordinates of object each loop through draw() function, , use background cover previous objects. can't in case because need object(a) , object(b) persistent.
code below. help!
var count = 0; function setup() { createcanvas(200, 200); = new object1(20, 40); b = new object1(20, 85); c = new object1(20, 130); } function draw() { background(200); a.display(); if (count == 1) { b.display(); } if (count == 2) { b.display(); c.display(); } if (count == 3) { //this have problem } if (count > 3) { count = 0; } } function object1(ix, iy, itext) { this.x = ix; this.y = iy; this.text = itext; this.display = function() { fill(160); rect(this.x, this.y, 40, 40); } } function mousepressed() { count++; }
generally how you'd drawing static part of scene off-screen buffer, can create using creategraphics() function. the reference:
var pg; function setup() { createcanvas(100, 100); pg = creategraphics(100, 100); } function draw() { background(200); pg.background(100); pg.nostroke(); pg.ellipse(pg.width/2, pg.height/2, 50, 50); image(pg, 50, 50); image(pg, 0, 0, 50, 50); } 
you'd draw static part buffer, draw buffer screen, draw dynamic stuff on top of each frame.
this has been discussed before, i'd recommend doing search stuff "processing pgraphics" , "p5.js buffer" find bunch more information.
Comments
Post a Comment