0

私は最近、処理とアニメーションに手を出し始めたばかりです...とても新しいです! また...私のトリガーは最悪です。

私はこのコードを持っています:

    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 から始まる多数の楕円を隣り合わせに配置し、同じ方法を使用してすべての楕円を長方形に収束させることです。

これが理にかなっていることを願っています！どんな助けでも大歓迎です！

4

1 に答える 1

0

線形補間はどうですか（すでに 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>

于 2012-06-21T14:33:51.667 に答える