Question

我最近才开始涉足加工和动画......所以对此非常新！还有...我的三角很糟糕。

我有这段代码：

    float ballPosX = 10;
    float ballPosY = 10;

    float boxPosX = 400;
    float boxPosY = 500;

    void setup() {
      size(800,600);
      background(0);
    }

    void draw() {
      fill(0, 20);
      rect(0, 0, width, height);

      fill(0, 240, 0);
      rect(boxPosX, boxPosY, 50, 50);

      fill(240, 0, 0);
      smooth();
      ellipse(ballPosX, ballPosY, 15, 15);

    //  stroke(0,0,240);
    //  line(ballPosX, ballPosY, boxPosX, boxPosY);
    //  line(ballPosX, ballPosY, 10, boxPosY);
    //  line(10, boxPosY, boxPosX, boxPosY);
      noStroke();

      //work out a2 + b2 = c2 - Pythagoras
      float a = boxPosX - ballPosX;
      float b = boxPosY - ballPosY;
      float c = sqrt(sq(a) + sq(b));
      println("a: " + a + " b: " + b + " c: " + c);

      //now get the angles
      float C = radians(90.0);
      float B = asin(a/c);
      float A = radians(180) - C - B;
      println("A: " + degrees(A));
      println("B: " + degrees(B));
      println("C: " + degrees(C));

      //lets say b is 10, work out a
      //we have the angles...
      b = 10;
      float sinA = sin(A);
      float sinB = sin(B);
      a = sinA/(sinB/b);
      fill(240, 0, 0);
      smooth();
      ellipse(b, a, 15, 15);

      for(int i = 0; i < 160; i++) {
       b += 5;
       sinA = sin(A);
       sinB = sin(B);
       a = sinA/(sinB/b);
       println("new a:" + a);

       fill(240, 0, 0);
       smooth();
       ellipse(b, a, 15, 15);
     }
   }

基本上我在点x1，y1处有一个椭圆，在点x2，y2处有一个矩形。使用直角三角形我沿着c线绘制椭圆。上面的代码可以...或多或少。

我们的想法是让许多椭圆从彼此相邻的x = 0开始，并使用相同的方法将它们全部收敛在矩形上。

希望这是有道理的！任何帮助都非常感谢！

Answer 1

线性插值（已在Processing lerp()中已经补充：

）

float startX,startY,endX,endY;

void setup(){
  size(400,400,P2D);
  smooth();
  noStroke();
  rectMode(CENTER);

  startX = random(10,50);
  startY = random(10,50);
  endX   = height - random(10,50);
  endY   = width  - random(10,50);
}
void draw(){
  background(0);
  //compute our values
  float t = map(mouseX,0,width,0,1);//a value between 0.0 and 1.0 - where on the line we want to be
  float x = lerp(startX,endX,t);//lerp with take care of linear interpolation for us
  float y = lerp(startY,endY,t);
  //draw
  for(float d = 0 ; d <= 1; d+= .05) 
    ellipse(lerp(startX,endX,d),lerp(startY,endY,d),5,5);                                           
  rect(x,y,10,10);
}
void mousePressed(){   setup(); }

var startX,startY,endX,endY;

function setup(){
  createCanvas(400,400);
  smooth();
  noStroke();
  rectMode(CENTER);

  startX = random(10,50);
  startY = random(10,50);
  endX   = height - random(10,50);
  endY   = width  - random(10,50);
}
function draw(){
  background(0);
  //compute our values
  var t = constrain(map(mouseX,0,width,0,1),0,1);//a value between 0.0 and 1.0 - where on the line we want to be
  var x = lerp(startX,endX,t);//lerp with take care of linear interpolation for us
  var y = lerp(startY,endY,t);
  //draw
  for(var d = 0 ; d <= 1; d+= .05) 
    ellipse(lerp(startX,endX,d),lerp(startY,endY,d),5,5);                                           
  rect(x,y,10,10);
}
function mousePressed(){   setup(); }

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.4.4/p5.min.js"></script>

使用Processing在斜边上设置椭圆动画

1 个答案: