Рисование с помощью мыши в обработке 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), а не координаты мыши. (В этом случае не с шарами, а с непрерывными линиями, как было предложено).

Проблема заключается в том, что когда я не устанавливаю фон на определенный цвет (здесь 0, а черный), направляющая строка (зеленая линия и оранжевая точка) также нарисована на холсте. Тем не менее, я люблю использовать их только в качестве руководства, как помощника. Итак, что мне делать, чтобы получить линии в соответствии с оранжевой точкой без рисования строки?

Answer 1

Даже если у вас очень высокая частота кадров, ваша мышь фактически не проходит через каждый пиксель на экране. Он перемещается на несколько пикселей за раз, в зависимости от того, насколько быстро вы двигаете мышью. Таким образом, между кадрами мышь может перемещаться из одной позиции в другую, не перемещаясь по каждой позиции между этими двумя позициями.

Чтобы обойти это, вместо того, чтобы рисовать эллипс в текущем положении, вы могли бы нарисовать линии из предыдущей позиции в текущую позицию.

В вашем классе Spring2D вы должны следить за состоянием , предшествующим. Вы можете использовать только две переменные:

float previousX; 
float previousY; 

Вам необходимо обновить эти переменные в update() функции.

previousX = x; 
previousY = y; 

Затем в display() функции, вы должны использовать эти переменные, чтобы нарисовать линию от предыдущей точки до текущей точки:

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

Это позволит предотвратить пробелы между точками вы видите ,

Если у вас есть какие-либо другие вопросы, пожалуйста, напишите их как отдельные вопросы в своих постах. Попробуйте сузить проблему до конкретного вопроса о конкретной строке кода или как можно меньше строк. Трудно ответить на общие вопросы «как это сделать»? Stack Overflow предназначен для более конкретных «Я попробовал X, ожидал Y, но получил Z вместо» типа вопросов. У вас будет гораздо больше удачи (и более быстрое время отклика), если вы попытаетесь быть более конкретными. Удачи, это похоже на интересный проект.