沿着斜邊動畫處理一個橢圓加工

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

如何線性intepolation（其在處理中已經inplemented作爲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>