Question

我一直致力于学习处理，现在感觉相当舒服地绘制形状和编辑颜色等。我试图向我的先前作品中的一个动画迈出一步，但我似乎只是陷入死胡同或者我可以＆＃39;让单位紧密地移动。基本上我试图以任何方式将整个吉他以任何方式移动到屏幕上，只要它保持完整。如果您有推荐我会非常感激！

目前的代码如下：

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);


}

Answer 1

以下代码将为您的吉他设置动画，使其沿正x轴移动。这只是一个例子，可以让您了解“动画”是如何运作的：

// 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++;
}

这个想法非常简单。动画基本上是一种运动的幻觉。对象看起来像是在移动，但是通过在不同位置绘制和重绘（以特定速度：frameRate）屏幕上的对象，使得它们对于观看者看起来像是非常简单虽然他们在实际中移动但他们不是。

要使此效果有效，您必须在草图（或任何其他动画包）中包含某些内容：

您需要拥有控制对象位置的变量当您想移动对象时，您可以轻松更改值以这样的方式控制位置的变量给出运动的幻觉。
在这种情况下，您还需要不断重新绘制背景。那这就是我在background(128);方法中添加draw()行的原因。如果你评论该行，你会看到效果是不同，吉他留下了痕迹（也许这就是你的意思想要......后来逐渐消失的踪迹？由你决定！）。
你需要在草图中考虑的另一件事是 rect和ellipse只需要更改一个变量命令他们从左向右移动（在这种情况下）草图），line需要同时操纵两个x值变量

noLoop()

setup()是专门设计的，因此您可以停止来自draw()或infinite loop的{{1}}但停止了 game loop表示没有动画效果。你可以拥有draw() 例如，在按下一个键时停止动画但是你会也希望提供noLoop()来动画制作按一个键。这些是你要思考的一些事情和决定关于和玩。
最后，我稍稍改变了你的草图，向你展示如何动画可能有效。你可以添加大量的东西来制作它真棒。

PS：酷吉他！

<强>更新

在熟悉移动物体的想法之后，我会看一下矢量以及如何使用它们来设置物体的方向和速度。在Processing中查看PVector。 This tutorial足以让您使用PVectors。但我会在对象上做这件事。例如，一个完整的loop()对象。不在个别Guitar和line s。

在处理过程中为形状集合设置动画的最简单方法是什么？

1 个答案: