処理 - 私は私のコードで</p> <p><img src="https://i.stack.imgur.com/vAst9.png" alt=""></p> <p>下の画像のような効果を実現しようとしています、マウスポインタ

Question

の方向のラインは、私はこの効果を作成するために管理が、エフェクトを繰り返す中で、掛けているようですそれ自体の内側に。誰でも私のコードが上記の画像で効果を出せるように助けてくれますか？

void setup(){ 
    size(500,500); 
    frameRate(60); 
    ellipseMode(CENTER); 
    smooth(); 
    loop(); 
} 

void draw() { 

    background(#ffffff); 

    //border 
    strokeWeight(3); 
    fill(255); 
    arc(50, 50, 50, 50, -PI, -PI/2); 
    fill(255); 
    arc(450, 450, 50, 50, 0, PI/2.0); 
    line(25, 50, 25, 475); 
    line(25, 475, 450, 475); 
    line(475, 450, 475, 25); 
    line(475, 25, 135, 25); 
    fill(0); 
    text("MAGNETS", 60, 30); 

    //Lines  
for(int i=0; i<3; i++){ 
    drawMagnet(); 
} 
} 

    float angle = 0; 
    int x = 75; 
    int y = 75; 
    float tAngle = 0; 
    float easing = 0.1f; 

void drawMagnet(){ 

    int l = 10; //length 

    angle = atan2(mouseY - y, mouseX - x); 

    float dir = (angle - tAngle)/TWO_PI; 
    dir -= round(dir); 
    dir *= TWO_PI; 

    tAngle += dir * easing; 

    stroke(0); 
    translate(x, y); 
    rotate(tAngle); 
    line(-l, 0, l, 0); 
} 

Answer 1

あなたの回転と平行移動が重なっているため、問題が発生しています。ここで

pushMatrix(); 
    translate(x, y); 
    rotate(tAngle); 
    line(-l, 0, l, 0); 
    popMatrix(); 

私はあなたの回転と翻訳が累積しないpushMatrix()とpopMatrix()機能を使用しています。これを修正するには、このような何かを行う可能性があります。

しかし、すべての行は同じx,yの場所にあります。だから彼らはすべて、マウスの位置に向かって同じ角度を持っています。

translate()関数を使用して別の場所に描画していますが、基になる「モデル」の位置は変わりません。 this questionへの私の答えと同様に

は、あなたが（screenX()とscreenY()機能を使用して）ラインの画面位置を離れてあなたの計算をベースにするのいずれかの必要がある、またはあなたの周りあなたのラインを移動するtranslate()に頼る停止し、彼らを計算する必要があります直接ポジション。