Rysowanie linii w javascript

0

Witam,

Mógłby ktoś zerknąć czemu poniższy algorytm nie rysuje linii? Korzystam z biblioteki p5. Metody loadPixels(), updatePixels() są w oddzielnej funkcji.
Chodzi o to żeby użytkownik zaznaczył myszką dwa punkty(x0, y0; x1, y1), między którymi powstanie linia prosta, nie mogę użyć metody line().

function draw_line() {

var black = color(0);
dx = x1 - x0;
dy = y1 - y0;

for( x = x0; x<x1; x++){

y = y2 + dy * (x - x0) / dx ;
set(x, y, black);

}
}

0

1.Dodałeś Canvas?
2.Masz plik HTML?

#####Polecam tobie ten poradnik:


Podałeś trochę mało informacji dlatego pytam o to czy dodałeś Canvas, czy masz plik HTML.

0
dx = x1 - x0;

Albo używasz niezadeklarowanej zmiennej (powinno być jakieś var albo jeszcze lepiej let czy const), albo nie dałeś nam całego kodu (gdzie jest deklarowana i używana zmienna dx?). Nikt tu nie posiada szklanej kuli. Tak samo inne używane zmienne. x0, y0. Skąd to się wzięło?

Chodzi o to żeby użytkownik zaznaczył myszką dwa punkty

No i gdzie ta myszka(w sensie obsługa zdarzeń).

czemu poniższy algorytm nie rysuje linii?

skąd wiesz, że to akurat algorytm jest zły? Co pokazuje konsola błędów? Jak wygląda strona?

0
function setup() {

    createCanvas(512,512);

    background(255);

}

var x0=-1;

var y0=-1;

var x1=-1;

var y1=-1;

function mousePressed() {

    x0=mouseX;

    y0=mouseY;

}
function mouseDragged() {  

    x1=mouseX;

    y1=mouseY;  

    background(255);

    noStroke();

    fill('red');

    ellipse(x0-3,y0-3,6);

    fill('green');  

    ellipse(x1-3,y1-3,6);

}

function mouseReleased() {

  background(255);

  loadPixels();
   
  draw_line();
set_pixel();
  updatePixels();

}

//y = ax+b

//a = dy/dx

//b = y0 - a * x0

function draw_line(){
	
var black = color(0);
dx = x1 - x0;
dy = y1 - y0;
a = dy/dx
b = y0 - a * x0
for(i = 0; i<dx; i++){

x = Math.round(x0+i);
y = Math.round(y0 + (a *i));

set(x, y, black);

}
}

function set_pixel(c) 
{

    idx=(y*512+x)*4;

    pixels[idx]=c;

    pixels[idx+1]=c;

    pixels[idx+2]=c;

    pixels[idx+3]=255;


}

Przesyłam cały kod z js. Linia jest rysowana tylko gdy (x0, y0) jest bliżej osi X niż ( x1, y1) .

1 użytkowników online, w tym zalogowanych: 0, gości: 1