Hi

I am trying a processing sketch in which a character is making a snow angel (basically moving his arms and legs up and down) when the mouse moves up and down. The legs and arms are going to be drawn with a line().

I can't figure out how to make that arms / legs movement.

Here is a basic sketch I've been working on for one arm (it doesn't work though). Basically, I want to make the last two coordinates of the line move along with the mouse. When mouseY is in the upper part of the screen, the arm should be up, when it's at the bottom, the arm should be down. I want it to flow continually, and go back up when the mouse moves back up.

Could anybody give me any pointers as to how to make this happen? I'm really stuck...


void setup()  {
 size(1000,400);
 smooth();
 strokeWeight(5);
 strokeJoin(ROUND);
}

void draw()  {
 background(255);
 
 stroke(0);
 fill(0);

 
 if (mouseY < 20)  {
    line(200,200,200,150);
   
}
if (mouseY > 20 && mouseY < 40) {
  line(200,200,220,170);

}
if (mouseY > 40 && mouseY < 60) {
  line(200,200,190,240);

}
}

Hi!

Not sure i get correctly what you're after but here's my attempt at helping you. It basically interpolates between 0 and PI/2 the angle the arm shall be making compared to the horizontal so that it gradually moves from fully up (aka vertical facing upwards) to fully down (aka vertical facing downwards) depending on whether the mouse is above or below the middle of the screen (as compared to an horizontal axis).

Quote:


Hopefully, that can give you some idea as to how to go about it.

Hmm, that's something I've not done before.

But what about using an off-screen image buffer?  I was kind of lazy in making this, but this might be a step in the right direction.  Unfortunately, smoothing is not supported with this method.  And "snowflaky" look is an artifact (change line thickness to correct for it).


(code removed: please see below for improved version of the same code)

Here's the new code to allow antialiasing. Java2D seems to support smoothing, so it looks nicer.

Sorry, I just couldn't leave it alone - other people's problems are always more interesting ;)

// More Note: this code doesn't work properly (Does anyone know why?).  I've reposted the working code in the post below.
// Note: I modified the code to be shorter
float diam;
float x;  
float y;
PGraphics pg, pg2;
void setup()  {
 size (1000,400);
 background(255);
 frameRate(60);
 smooth();

/* layer1: snow */
 pg = createGraphics(1000, 400, JAVA2D);
/* layer2: angel */
 pg2 =  createGraphics(1000, 400, JAVA2D);
 
}

void draw()  {
diam = random(20);
 x = random(width);
 y = random(height);
 pg2.beginDraw();
 pg2.background(255,255);
 
 pg.stroke(0);
 pg.fill(255);
 pg.beginDraw();
 pg.smooth();
 pg.ellipse(x,y,diam,diam);
 
 pg.endDraw();
 
 ///uncomment the line below (remove "//") to allow gray trail)
 //drawAnAngel(pg, 130);
 //////  

 drawAnAngel(pg2, 0);
 pg2.endDraw();
 
 image(pg2, 0, 0);
  image(pg, 0, 0);
}  

void drawAnAngel(PGraphics pa, color c){
 pa.strokeWeight(5);
 pa.strokeJoin(ROUND);
 pa.stroke(c);
 pa.fill(0);

/* an arm */
pa.pushMatrix();
pa.translate(200, 200);

float xx = map(mouseY, 0, height, 0, TWO_PI);
pa.rotate(xx);
pa.line(0, 50, 0, 0);

pa.popMatrix();

 /* another arm (make these two a function!) */
pa.pushMatrix();
pa.translate(150, 200);

float xx2 = map(mouseY, 0, height, 0, TWO_PI);
pa.rotate(-xx2);
pa.line(0, 50, 0, 0);
pa.popMatrix();
}

Please note that I have modified the code posted above for conciseness (I hope that's ok).  FYI, I had a duplicate code for SnowAngels: one for PApplet, and another for PGraphics.  I realized I can just do two "layers" using two Pgraphics objects.

The Angel portion is wiped in one of the PGraphics object with transparent background

pg2.background(255, 255);

this allows pg object to be seen once pg2 object is drawn.


< PhiLho: Indeed

I noticed that the code above doesn't work properly. I'm reposting the original code, with a little cleanup:


float diam;
float x;  
float y;
PGraphics pg;
void setup()  {
 size (1000,400);
 background(255);
 frameRate(60);
 smooth();
 pg = createGraphics(1000, 400, JAVA2D);
 
}

void draw()  {
diam = random(20);
 x = random(width);
 y = random(height);

 background(255);
 
 pg.stroke(0);
 pg.fill(255);
 pg.beginDraw();
 pg.smooth();
 pg.ellipse(x,y,diam,diam);
 
 pg.endDraw();
 //drawAnAngel2(pg, 130);
 
 image(pg, 0, 0);
 
 drawAnAngel(this, 0);
}  

void drawAnAngel2(PGraphics pa, color c){
 pa.strokeWeight(5);
 pa.strokeJoin(ROUND);
 pa.stroke(c);
 pa.fill(0);

/* an arm */
pa.pushMatrix();
pa.translate(200, 200);

float xx = map(mouseY, 0, height, 0, TWO_PI);
pa.rotate(xx);
pa.line(0, 50, 0, 0);

pa.popMatrix();

 /* another arm (make these two a function!) */
pa.pushMatrix();
pa.translate(150, 200);

float xx2 = map(mouseY, 0, height, 0, TWO_PI);
pa.rotate(-xx2);
pa.line(0, 50, 0, 0);
pa.popMatrix();
}

void drawAnAngel(PApplet pa, color c){
  pa.strokeWeight(5);
 pa.strokeJoin(ROUND);
 pa.stroke(c);
 pa.fill(0);

/* an arm */
pa.pushMatrix();
pa.translate(200, 200);

float xx = map(mouseY, 0, height, 0, TWO_PI);
pa.rotate(xx);
pa.line(0, 50, 0, 0);

pa.popMatrix();

 /* another arm (make these two a function!) */
pa.pushMatrix();
pa.translate(150, 200);

float xx2 = map(mouseY, 0, height, 0, TWO_PI);
pa.rotate(-xx2);
pa.line(0, 50, 0, 0);
pa.popMatrix();
}