가공으로 빗변을 따라 타원을 애니메이션하기

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

방법 이미 lerp()으로 처리에 inplemented되는 선형 intepolation (약 :

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>