3. Algorytmy rysowania

: Kategoria: Grafika; Opublikowano: 19 luty 2022

Zadania:

Prosty" algorytm do rysowania linii
Algorytm Bresenhama

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>repl.it</title>
    <link href="/index.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <style> body { background-color:#ccc; } </style>

<script src="//cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.7/p5.js"></script>

<script type="text/javascript">



var x0=-1;
var y0=-1;
var x1=-1;
var y1=-1;



function setup() {

    createCanvas(512,512);

    background(255);

   
    

}




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 set_pixel(x,y,c) {

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

    pixels[idx]=c;

    pixels[idx+1]=c;

    pixels[idx+2]=c;

    pixels[idx+3]=255;

}


  function mousePressed() {

    x0=mouseX;

    y0=mouseY;

}

function mouseReleased() {

  background(255);

  loadPixels();

  draw_line();

  //updatePixels();

}

 
function draw_line() {  
  stroke(0);
  
  //line(x0, y0, x1, y1);
  
  var dx = x1 - x0;
  var dy = y1 - y0;
  var a = dy / dx;
  var b = y0 - a * x0;
  
  
  for(i = x0 ; i < x1; i++){
    
    var y = a * i + b;
    set_pixel(i, Math.round(y), 0);
    
  }
    updatePixels();
    
  
  
}
</script>
  </body>
</html>

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>repl.it</title>
    <link href="/index.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <style> body { background-color:#ccc; } </style>

<script src="//cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.7/p5.js"></script>

<script type="text/javascript">



var x0=-1;
var y0=-1;
var x1=-1;
var y1=-1;



function setup() {

    createCanvas(512,512);

    background(255);

 
    

}




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 set_pixel(x,y,c) {

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

    pixels[idx]=-c;

    pixels[idx+1]=c;

    pixels[idx+2]=0;

    pixels[idx+3]=255;

}



  function mousePressed() {

    x0=mouseX;

    y0=mouseY;

}



function mouseReleased() {

  background(255);

  loadPixels();

  draw_line();

  //updatePixels();

}


function draw_line() {  
  stroke(0);
  
  //line(x0, y0, x1, y1);
  
  var dx = x1 - x0;
  var dy = y1 - y0;
  var a = dy / dx;
  var b = y0 - a * x0;
  
  
  
  for(i = 0 ; i < 512; i++){
    for(j = 0; j < 512; j++){
    
    // var y = a * i + b;
    var y = j;
    var dxy = (dy / dx) * (i - x0) - (y - y0)
    set_pixel(j, i, dxy);
    
  }
    updatePixels();
    
  
  }
}

</script>
  </body>
</html>

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>repl.it</title>
    <link href="/index.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <style> body { background-color:#ccc; } </style>

<script src="//cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.7/p5.js"></script>

<script type="text/javascript">



var x0=-1;
var y0=-1;
var x1=-1;
var y1=-1;



function setup() {

    createCanvas(512,512);

    background(255);

   
    

}




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 set_pixel(x,y,c) {

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

    pixels[idx]=-c;

    pixels[idx+1]=c;

    pixels[idx+2]=0;

    pixels[idx+3]=255;

}



  function mousePressed() {

    x0=mouseX;

    y0=mouseY;

}



function mouseReleased() {

  background(255);

  loadPixels();

  draw_line();

  //updatePixels();

}


function draw_line() {  
  stroke(0);
  
  //line(x0, y0, x1, y1);
  
  var dx = x1 - x0;
  var dy = y1 - y0;
  var a = dy / dx;
  var b = y0 - a * x0;
  
  
  
  for(i = 0 ; i < 512; i++){
    for(j = 0; j < 512; j++){
    
    // var y = a * i + b;
    var y = j;
    var dxy = (dy / dx) * (i - x0) - (y - y0)
    var dzxy = dxy * 2 * dx// (dy / dx) * (i - x0) - (y - y0)
    set_pixel(j, i, dzxy);
    
  }
    updatePixels();
    
  
  }
}

</script>
  </body>
</html>

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>repl.it</title>
    <link href="/index.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <style> body { background-color:#ccc; } </style>

<script src="//cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.7/p5.js"></script>

<script type="text/javascript">



var x0=-1;
var y0=-1;
var x1=-1;
var y1=-1;



function setup() {

    createCanvas(512,512);

    background(255);



}




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 set_pixel(x,y,c) {

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

    pixels[idx]=c;

    pixels[idx+1]=c;

    pixels[idx+2]=c;

    pixels[idx+3]=255;

}



  function mousePressed() {

    x0=mouseX;

    y0=mouseY;

}



function mouseReleased() {

  background(255);

  loadPixels();

  draw_line();

  updatePixels();

}


function draw_line() {  
  stroke(0);
  
  
  
  var dx = x1 - x0;
  var dy = y1 - y0;
  // var a = dy / dx;
  // var b = y0 - a * x0;
  
  var Dp = 2 * dy - dx;
  var Deq = 2 * dy;
  var Dinc = (2 * dy) - (2 * dx);
  var y = y0;
  
  for(i = x0 ; i < x1; i++){
    // var y = a * i + b;
    // var dos = (dy / dx) - (1 / 2);
    // var dzos = 2 * dy - dx;
    
    
    
    
    set_pixel(i, y, Dp);
    
  
    
    
    if(Dp < 0){
      Dp = Dp + Deq
    }else{
       Dp = Dp + Dinc;
       y = y + 1;
    }
    
  
  updatePixels();
  
  
  
  }
  
}

</script>
  </body>
</html>

<style> body { background-color:#ccc; } </style>

<script src="//cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.7/p5.js"></script>


<script language="JavaScript" type="text/javascript" src="/js/jquery-1.2.6.min.js"></script>
<script language="JavaScript" type="text/javascript" src="/js/jquery-ui-personalized-1.5.2.packed.js"></script>
<script language="JavaScript" type="text/javascript" src="/js/sprinkle.js"></script>

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>




<body oncontextmenu="return false;">

<script type="text/javascript">

function setup() {

    createCanvas(512,512);

    background(255);
    
    
}
 
var last_x=-1;

var last_y=-1;

function mouseDragged() {  

  if(mouseButton != LEFT) return;

  if(last_x>0) {

    line(last_x,last_y,mouseX,mouseY);
    
  
  
    
    
  }

  last_x=mouseX;

  last_y=mouseY;

}

function mouseReleased() {

  last_x=last_y=-1;

  if(mouseButton == RIGHT) {

    loadPixels();

    flood_fill(mouseX,mouseY);

    updatePixels();

  }

}

function set_pixel(x,y,c) {

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

    pixels[idx]=c;

    pixels[idx+1]=c;

    pixels[idx+2]=c;

    pixels[idx+3]=255;

}

   

function get_pixel(x,y) {

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

 return pixels[idx];

}

function mousePressed() {

    x0=mouseX;

    y0=mouseY;

}



   

  

//właściwa funkcja do wypełniania

function flood_fill(x,y) {
  
   
    stos = [];
    
    stos.push([x, y]);
    
    
    while(stos.length>0){
      
      [x,y]=stos.pop();
      
      if(x > 512 || y > 512){
        continue;
      }
      
      if(get_pixel(x, y) != 255){
          continue;
      }
        
      set(x, y, color(0, 102, 255));  
      
      stos.push([x, y - 1]);
      stos.push([x, y + 1]);
      stos.push([x - 1, y]);
      stos.push([x + 1, y]);
      
      
        
      
    }
    

  

}

</script>

</body>

<a href="/index.html">.</a></br>
</br>

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.7/p5.js"></script>

<script>
    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();
        drawLine();
        updatePixels();
    }

    function drawLine() {
        dx = Math.abs(x1 - x0);
        dy = Math.abs(y1 - y0);

        flag = false;
        if (dx < dy) {
            flag = true;
            tmp = x0;
            x0 = y0;
            y0 = tmp;
            tmp = x1;
            x1 = y1;
            y1 = tmp;
            tmp = dx;
            dx = dy;
            dy = tmp;
        }

        deq = 2 * dy;
        d = deq - dx;
        dinc = d - dx;
        y = y0;

        stepX = 0;
        if (x0 < x1) {
            stepX = 1;
        }
        else if (x1 < x0) {
            stepX = -1;
        }
        else {
            return;
        }

        stepY = 0;
        if (y0 < y1) {
            stepY = 1;
        }
        else if (y1 < y0) {
            stepY = -1;
        }
        else {
            return;
        }

        for (x = x0; x != x1; x += stepX) {
            if (flag) {
                setPixelColor(y, x, 0);
            }
            else {
                setPixelColor(x, y, 0);
            }

            if (d < 0) {
                d += deq;
            }
            else {
                d += dinc;
                y += stepY;
            }
        }
    }

    function setPixelColor(x, y, color) {
        idx = (y * width + x) * 4;
        pixels[idx] = color;
        pixels[idx + 1] = color;
        pixels[idx + 2] = color;
        pixels[idx + 3] = 255;
    }
</script>