Processing 3.0에서 여유있는 마우스로 그리기

Question

나는 부드러운 그림 도구를 만들려고 노력하고 있습니다. 예를 들어, this과 같은 선을 사용합니다. 기본 사항을 완료했지만 코드에 몇 가지 문제가 있습니다. 그냥 부드럽게 그릴 수 탄성 마찰을 제공하도록

Spring2D s1; 

float gravity = 0; 
float mass = 4.0; 

void setup() { 
    frameRate(60); 
    size(640, 360); 
    fill(255, 126); 
    // Inputs: x, y, mass, gravity 
    s1 = new Spring2D(0.0, width/2, mass, gravity); 
    } 

void draw() { 
    s1.display(mouseX, mouseY); 
    s1.update(mouseX, mouseY); 
    } 

class Spring2D { 
    float vx, vy; // The x- and y-axis velocities 
    float x, y; // The x- and y-coordinates 
    float gravity; 
    float mass; 
    float radius = 10; 
    float stiffness = 0.7; 
    float damping = 0.5; 

    Spring2D(float xpos, float ypos, float m, float g) { 
    x = xpos; 
    y = ypos; 
    mass = m; 
    gravity = g; 
    } 

    void update(float targetX, float targetY) { 
    float forceX = (targetX - x) * stiffness; 
    float ax = forceX/mass; 
    vx = damping * (vx + ax); 
    x += vx; 
    float forceY = (targetY - y) * stiffness; 
    forceY += gravity; 
    float ay = forceY/mass; 
    vy = damping * (vy + ay); 
    y += vy; 
    } 

    void display(float nx, float ny) { 
    if (mousePressed == true) { 

    background(0); 

    stroke(40, 255, 150); 
    line(x, y, nx, ny); 


    noStroke(); 
    fill(255, 130, 40); 
    ellipse(x, y, 5, 5); 

    } else { 
    background(0); 
    } 
    } 
} 

내가 가이드로 녹색 문자열 (라인)을 사용

는 여기에 내가 일하고 있어요 스케치의 코드입니다. 캔버스를 클릭 할 때만 나타나고 마우스를 놓으면 사라집니다. 주황색 점이 내 마우스 좌표가 아닌 도면 (x, y, nx, ny)을 수행하기를 원합니다. (이 경우에는 구체가 아니라 제안 된대로 연속 선으로 표시).

배경을 특정 색 (여기서는 검정색)으로 설정하지 않으면 가이드 문자열 (녹색 선과 주황색 점)이 캔버스에 그려집니다. 그러나 저는 그것들을 도우미로서 가이드로 만 사용하기를 좋아합니다. 문자열 라인을 그리지 않고 오렌지색 점에 따라 선을 그리려면 어떻게해야합니까?

Answer 1

프레임 율이 매우 높더라도 마우스가 실제로 화면의 모든 픽셀을 통과하지는 않습니다. 마우스를 움직이는 속도에 따라 한 번에 여러 픽셀 씩 이동합니다. 따라서 프레임 사이에서 마우스는 두 위치 사이의 모든 위치를 이동하지 않고 한 위치에서 다른 위치로 이동할 수 있습니다.

이 문제를 해결하려면 현재 위치에서 타원을 그리는 대신 이전 위치에서 현재 위치까지 선을 그릴 수 있습니다. 당신의 Spring2D 클래스에서

, 당신은 이전 위치를 추적해야합니다. 당신은 당신의 update() 기능에 이러한 변수를 업데이트해야

float previousX; 
float previousY; 

: 당신은 두 개의 변수를 사용할 수 있습니다.

strokeWeight(radius*2); 
line(previousX, previousY, x, y); 

이것은 당신이보고있는 점 사이의 공백을 방지 할 수 있습니다 :

previousX = x; 
previousY = y; 

는 그런 다음 display() 기능, 당신은 현재의 지점으로 이전 지점에서 선을 그립니다 이러한 변수를 사용할 필요가 . 다른 문의 사항이 있으시면

, 자신의 게시물에 별도의 문제로 게시하시기 바랍니다. 문제의 범위를 코드의 특정 줄 또는 가능한 한 적은 수의 줄에 대한 특정 질문으로 좁히십시오. 일반적인 "어떻게해야합니까?"라고 대답하는 것이 어렵습니다. 스택 오버플로는 "X를 시도했는데 Y가 예상되었지만 Z가 대신 입력되었습니다"라는 유형의 질문에 대해보다 구체적으로 설계되었습니다. 좀 더 구체적으로하려고하면 더 나은 운 (그리고 더 빠른 응답 시간)을 갖게됩니다. 행운을 빌어 요, 이것은 흥미로운 프로젝트처럼 보입니다.