Frage

I have been working on learning processing and now feel fairly comfortable drawing shapes and editing color etc. I have tried to take the step towards animating one of my prior works, but I just seem to keep running into dead ends or I can't get the unit to move cohesively. Essentially I am trying to move this entire guitar around the screen in any manner whatsoever as long as it stays intact. If you have a recommendation I would greatly appreciate it!

Current code is as follows:

void setup() {

size(600,600);

smooth();

noLoop();

}

void draw() {   
  //pegs
  strokeJoin(SQUARE);
  fill(255,255,255);
  rect(530,105,20,20);
  rect(565,70,20,20);
  rect(473,50,20,20);
  rect(505,18,20,20);

  //neck and head
  strokeWeight(60);
  strokeCap(SQUARE);
  strokeJoin(ROUND);
  stroke(165,42,42);
  line(490,110,560,40);
  fill(255,255,255);
  strokeWeight(45);
  strokeCap(SQUARE);
  strokeJoin(ROUND);
  line(300,295,500,105);



  //guitar body
  noStroke();
  fill(222,184,135);
  ellipse(200,400,200,200);
  ellipse(280,310,150,150);

  //Sound Hole
  fill(255,140,0);
  ellipse(235,360,110,110);  
  fill(0,0,0);
  ellipse(235,360,100,100);

  //strings
  stroke(255,255,255);
  strokeWeight(3);
  line(170,390,540,40);
  line(180,400,550,45);
  line(195,410,560,50);
  line(207,420,570,55);

 //string attatchment bottom
 strokeWeight(6);
 strokeCap(SQUARE);
 stroke(165,42,42);
 line(210,425,170,385);


} 
War es hilfreich?

Lösung

The following code will animate your guitar so that it will move along the positive x-axis. This is just an example to give you an idea how "animation" really works:

// this will be used to move the guitar along x

int alongX = 0;

void setup() {

  background(128);

  size(600, 600);

  smooth();

  //noLoop();
}

void draw() { 
  background(128);  
  //pegs
  strokeJoin(SQUARE);
  fill(255, 255, 255);
  rect(530+alongX, 105, 20, 20);
  rect(565+alongX, 70, 20, 20);
  rect(473+alongX, 50, 20, 20);
  rect(505+alongX, 18, 20, 20);

  //neck and head
  strokeWeight(60);
  strokeCap(SQUARE);
  strokeJoin(ROUND);
  stroke(165, 42, 42);
  line(490+alongX, 110, 560+alongX, 40);
  fill(255, 255, 255);
  strokeWeight(45);
  strokeCap(SQUARE);
  strokeJoin(ROUND);
  line(300+alongX, 295, 500+alongX, 105);



  //guitar body
  noStroke();
  fill(222, 184, 135);
  ellipse(200+alongX, 400, 200, 200);
  ellipse(280+alongX, 310, 150, 150);

  //Sound Hole
  fill(255, 140, 0);
  ellipse(235+alongX, 360, 110, 110);  
  fill(0, 0, 0);
  ellipse(235+alongX, 360, 100, 100);

  //strings
  stroke(255, 255, 255);
  strokeWeight(3);
  line(170+alongX, 390, 540+alongX, 40);
  line(180+alongX, 400, 550+alongX, 45);
  line(195+alongX, 410, 560+alongX, 50);
  line(207+alongX, 420, 570+alongX, 55);

  //string attatchment bottom
  strokeWeight(6);
  strokeCap(SQUARE);
  stroke(165, 42, 42);
  line(210+alongX, 425, 170+alongX, 385);

  // incrementing alongX to move it along +x, decrement it to move it along -x
  alongX++;
}

The idea is very simple. Animation is basically an illusion of movement. Objects appear such that they're moving but the effect is achieved very simply by drawing and redrawing (at a certain speed: frameRate) the objects on the screen in different locations in such a way that they appear to the viewer as though they're moving when in reality they're not.

For this effect to be effective, you have to have certain things in your sketch (or any other animation package):

  • You need to have variables that control the position of the object so when you want to move the object, you can easily change the values of the variables controlling the position in such a way that it would give the illusion of movement.

  • You also, in this case, need to keep redrawing the background. That is why I added the background(128); line in your draw() method. If you comment that line out, you will see that the effect is different and the guitar leaves a trail (maybe that's what you want...a trail that later fades away? Its up to you!).

  • Another thing you need to consider in your sketch is that while rects and ellipses only need to have one variable changed in order for them to move from left to right (in the case of this sketch), lines need to have both x values manipulated by your variable.

  • noLoop() in setup() is specifically designed so you can stop draw() from its infinite loop or game loop but stopping draw() means no animation effects. You can have noLoop(), for example, to stop the animation upon pressing a key but then you'd also want to provide loop() to get the animation going upon pressing a key. These are some things and decisions for you to think about and play with.

  • Finally, I just changed your sketch a little to show you how animation may work. You can add a ton of things to it to make it awesome.

PS: Cool guitar!

UPDATE

After getting comfortable with the idea of moving objects around, I would look at vectors and how they can be used to set the direction, and velocity of objects. Take a look at PVector in Processing. This tutorial would be sufficient to get you going with PVectors. But I would do this on objects. For example, a full Guitar object. Not on individual lines and rects.

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top