Grafika

: Kategoria: Grafika; Opublikowano: 19 luty 2022

-----------------------------------------
Zadanie 3
-----------------------------------------
      var imgA;
      var imgB;
    function setup() {
        createCanvas(512, 512);
        background(255);
        imgA = createImage(512, 512);
        imgB = createImage(512, 512);
        imgA.loadPixels();
        imgB.loadPixels();
        var d = pixelDensity();
        for (var i = 0; i < 512 * 512 * 4 * d; i += 4) {
            imgA.pixels[i] = 240;
            imgA.pixels[i + 1] = 250;
            imgA.pixels[i + 2] = 240;
            imgA.pixels[i + 3] = 255;
            imgB.pixels[i] = 240;
            imgB.pixels[i + 1] = 240;
            imgB.pixels[i + 2] = 250;
            imgB.pixels[i + 3] = 255;
        }
        imgA.updatePixels();
        imgB.updatePixels();
    }
    function draw() {
        if (!keyIsDown(32)) {
            image(imgA, 0, 0);
            text('Image A', 10, 20);
        }
        else {
            image(imgB, 0, 0);
            text('Image B', 10, 20);
        }}
    function makeVector(x, y) {
        return [x, y, 1];
    }
    function drawVector(imgin, vecin) {
        imgin.loadPixels();
        imgin.set(vecin[0], vecin[1], 0);
        imgin.updatePixels();
    }
    function mouseDragged() {
        drawVector(imgA, makeVector(mouseX, mouseY));
    }
-----------------------------------------
Zadanie 3.5
-----------------------------------------
          var imgA;
      var imgB;
    function setup() {
        createCanvas(512, 512);
        background(255);
        imgA = createImage(512, 512);
        imgB = createImage(512, 512);
        imgA.loadPixels();
        imgB.loadPixels();
        var d = pixelDensity();
        for (var i = 0; i < 512 * 512 * 4 * d; i += 4) {
            imgA.pixels[i] = 240;
            imgA.pixels[i + 1] = 250;
            imgA.pixels[i + 2] = 240;
            imgA.pixels[i + 3] = 255;
            imgB.pixels[i] = 240;
            imgB.pixels[i + 1] = 240;
            imgB.pixels[i + 2] = 250;
            imgB.pixels[i + 3] = 255;
        }
        imgA.updatePixels();
        imgB.updatePixels();
    }
    function draw() {
        if (!keyIsDown(32)) {
            image(imgA, 0, 0);
            text('Image A', 10, 20);
        }
        else {
            image(imgB, 0, 0);
            text('Image B', 10, 20);
        }}
    function makeVector(x, y) {
        return [x, y, 1];
    }
    function drawVector(imgin, vecin) {
        imgin.loadPixels();
        imgin.set(vecin[0], vecin[1], 0);
        imgin.updatePixels();
    }
    function mouseDragged() {
        drawVector(imgA, makeVector(mouseX, mouseY));
    }
    function IdentityIt(){
      return [[1,0,0],[0,1,0],[0,0,1]];
    }
    function ShiftIt(tx,ty){
      return [[1,0,tx],[0,1,ty],[0,0,1]];
    }
    function ScaleIt(sx,sy){
      return [[sx,0,0],[0,sy,0],[0,0,1]];
    }
    function RotateIt(fi){
      return [[Math.cos(fi),-(Math.sin(fi)),0],[Math.sin(fi),-(Math.cos(fi)),0],[0,0,1]];
    }
    function ShearIt(shx,shy){
      return [[1,shx,0],[shy,1,0],[0,0,1]];
    }
    
    console.log(makeVector(8, 9));
    console.log(IdentityIt());
    console.log(ShiftIt(3, 5));
    console.log(ScaleIt(3, 2));
    console.log(RotateIt(60 / 180 * Math.PI));
    console.log(ShearIt(4, 4));
-----------------------------------------
Zadanie 4
-----------------------------------------

      var imgA;
      var imgB;
    function setup() {
        createCanvas(512, 512);
        background(255);
        imgA = createImage(512, 512);
        imgB = createImage(512, 512);
        imgA.loadPixels();
        imgB.loadPixels();
        var d = pixelDensity();
        for (var i = 0; i < 512 * 512 * 4 * d; i += 4) {
            imgA.pixels[i] = 240;
            imgA.pixels[i + 1] = 250;
            imgA.pixels[i + 2] = 240;
            imgA.pixels[i + 3] = 255;
            imgB.pixels[i] = 240;
            imgB.pixels[i + 1] = 240;
            imgB.pixels[i + 2] = 250;
            imgB.pixels[i + 3] = 255;
        }
        imgA.updatePixels();
        imgB.updatePixels();
    }
    function draw() {
        if (!keyIsDown(32)) {
            image(imgA, 0, 0);
            text('Image A', 10, 20);
        }
        else {
            image(imgB, 0, 0);
            text('Image B', 10, 20);
        }}
    function makeVector(x, y) {
        return [x, y, 1];
    }
    function drawVector(imgin, vecin) {
        imgin.loadPixels();
        imgin.set(vecin[0], vecin[1], 0);
        imgin.updatePixels();
    }
    function IdentityIt(){
      return [[1,0,0],[0,1,0],[0,0,1]];
    }
    function ShiftIt(tx,ty){
      return [[1,0,tx],[0,1,ty],[0,0,1]];
    }
    function ScaleIt(sx,sy){
      return [[sx,0,0],[0,sy,0],[0,0,1]];
    }
    function RotateIt(fi){
      return [[Math.cos(fi),-(Math.sin(fi)),0],[Math.sin(fi),-(Math.cos(fi)),0],[0,0,1]];
    }
    function ShearIt(shx,shy){
      return [[1,shx,0],[shy,1,0],[0,0,1]];
    }
    function doIt(inVal,moveVec){
     out = [0,0,0];
      for (i = 0; i < 3; ++i) {
            for (j = 0; j < 3; ++j) {
              out[i] = (out[i] + (inVal[i][j] * moveVec[j]));
            }}
      return out;
    }
      function mouseDragged() {
        vecToDo =  makeVector(mouseX, mouseY);
        drawVector(imgA,vecToDo);
        drawVector(imgB,doIt(IdentityIt(),vecToDo));
        drawVector(imgB,doIt(ShiftIt(3, 5),vecToDo ));
        drawVector(imgB,doIt(ScaleIt(3, 2),vecToDo ));
        drawVector(imgB,doIt(RotateIt(60 / 180 * Math.PI),vecToDo) );
        drawVector(imgB,doIt(ShearIt(4, 4),vecToDo ));
    }
-----------------------------------------
Zadanie 4.5
-----------------------------------------
      var imgA;
      var imgB;
    function setup() {
        createCanvas(512, 512);
        background(255);
        imgA = createImage(512, 512);
        imgB = createImage(512, 512);
        imgA.loadPixels();
        imgB.loadPixels();
        var d = pixelDensity();
        for (var i = 0; i < 512 * 512 * 4 * d; i += 4) {
            imgA.pixels[i] = 240;
            imgA.pixels[i + 1] = 250;
            imgA.pixels[i + 2] = 240;
            imgA.pixels[i + 3] = 255;
            imgB.pixels[i] = 240;
            imgB.pixels[i + 1] = 240;
            imgB.pixels[i + 2] = 250;
            imgB.pixels[i + 3] = 255;
        }
        imgA.updatePixels();
        imgB.updatePixels();
    }
    function draw() {
        if (!keyIsDown(32)) {
            image(imgA, 0, 0);
            text('Image A', 10, 20);
        }
        else {
            image(imgB, 0, 0);
            text('Image B', 10, 20);
        }}
    function makeVector(x, y) {
        return [x, y, 1];
    }
    function drawVector(imgin, vecin) {
        imgin.loadPixels();
        imgin.set(vecin[0], vecin[1], 0);
        imgin.updatePixels();
    }
    function IdentityIt(){
      return [[1,0,0],[0,1,0],[0,0,1]];
    }
    function ShiftIt(tx,ty){
      return [[1,0,tx],[0,1,ty],[0,0,1]];
    }
    function ScaleIt(sx,sy){
      return [[sx,0,0],[0,sy,0],[0,0,1]];
    }
    function RotateIt(fi){
      return [[Math.cos(fi),-(Math.sin(fi)),0],[Math.sin(fi),-(Math.cos(fi)),0],[0,0,1]];
    }
    function ShearIt(shx,shy){
      return [[1,shx,0],[shy,1,0],[0,0,1]];
    }
    function doIt(inVal,moveVec){
     out = [0,0,0];
      for (i = 0; i < 3; ++i) {
            for (j = 0; j < 3; ++j) {
              out[i] = (out[i] + (inVal[i][j] * moveVec[j]));
            }}
      return out;
    }
    function doItTwice(inOne,inTwo){
     outTriple = [[0,0,0],[0,0,0],[0,0,0]];
      for (i = 0; i < 3; ++i) {
            for (j = 0; j < 3; ++j) {
              outTriple[i][j] = inOne[i][j]*inTwo[i][j];
            }}
      return outTriple;
    }
    
      function mouseDragged() {
        vecToDo =  makeVector(mouseX, mouseY);
        drawVector(imgA,vecToDo);
     //   drawVector(imgB,doIt(IdentityIt(),vecToDo));
     //  drawVector(imgB,doIt(doItTwice(ShiftIt(3, 5),ScaleIt(3, 2)),vecToDo ));
     //   drawVector(imgB,doIt(ScaleIt(3, 2),vecToDo ));
    drawVector(imgB,doIt(doItTwice(RotateIt(50 / 180 * Math.PI),ShearIt(2, 3)),vecToDo));
     //   drawVector(imgB,doIt(ShearIt(4, 4),vecToDo ));
    }

: 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>

: Kategoria: Grafika; Opublikowano: 19 luty 2022

Zadania:

Model kolorów RGB
Model kolorów HSV
Value/Brightness/Lightness
Hue
Histogram

function preload() {
  img = loadImage("https://raw.githubusercontent.com/scikit-image/scikit-image/master/skimage/data/astronaut.png");
  img_r = createImage(256,256);
  img_b = createImage(256,256);
  img_g = createImage(256,256); 
  img_sum =createImage(256,256);
 
}
function setup() {
  createCanvas(512,512);
  img.resize(256,256);
  img.loadPixels();
  img_g.loadPixels();
  img_b.loadPixels();
  img_r.loadPixels();
  img_sum.loadPixels();
  for(x=0;x<img.width;x++){
    for(y=0;y<img.height;y++) {      
      pos=4*(y*img.width+x);
    //  img.pixels[pos] //to jest wartość dla R
     // img.pixels[pos+1] //to jest wartość dla G
     // img.pixels[pos+2] //to jest wartość dla B
     // img.pixels[pos+3] //to jest wartość dla A
      
      img_r.pixels[pos]=img.pixels[pos];
      img_r.pixels[pos+1]=0; 
      img_r.pixels[pos+2]=0; 
      img_r.pixels[pos+3]=255;
      
       img_g.pixels[pos]=0; 
      img_g.pixels[pos+1] = img.pixels[pos+1];
      img_g.pixels[pos+2]=0; 
      img_g.pixels[pos+3]=255;
      
      img_b.pixels[pos]=0; 
      img_b.pixels[pos+1]=0; 
      img_b.pixels[pos+2]=img.pixels[pos+2];
      img_b.pixels[pos+3]=255;
      
   //  img_sum.pixels[pos]=0; 
   //   img_sum.pixels[pos+1]=0; 
  //   img_sum.pixels[pos+2]=0;
   //   img_sum.pixels[pos+3]=255;
  }
  }
  img_r.updatePixels();
  img_g.updatePixels();
  img_b.updatePixels();
  img_sum.updatePixels();

 img_sum.blend(img_r,0,0,256,256,0,0,256,256,ADD);
 img_sum.blend(img_b,0,0,256,256,0,0,256,256,ADD);
 img_sum.blend(img_g,0,0,256,256,0,0,256,256,ADD);
 
}


function draw() {
 noLoop();
 image(img_r, 0, 0);
  image(img_g, 256, 0);
  image(img_b, 0, 256);
  image(img_sum, 256, 256);
  updatePixels();
}

function preload() {
  img = loadImage("https://raw.githubusercontent.com/scikit-image/scikit-image/master/skimage/data/astronaut.png");
  img_h = createImage(256,256);
  img_s = createImage(256,256);
  img_v = createImage(256,256); 

 
}
function setup() {
  createCanvas(512,512);
  img.resize(256,256);
  img.loadPixels();
  img_h.loadPixels();
  img_s.loadPixels();
  img_v.loadPixels();
 
  for(x=0;x<img.width;x++){
    for(y=0;y<img.height;y++) {      
      pos=4*(y*img.width+x);
      r=img.pixels[pos]/255;
      g=img.pixels[pos+1]/255;
      b=img.pixels[pos+2]/255;
      cmax = Math.max(r,g,b);
      cmin = Math.min(r,g,b);
      v=cmax;
    //  x=(i/4)%256;//indeks kolumny wewnątrz wiersza --
     // y=(i/4)/256;//indeks wiersza   
     img_v.set(x,y,255*v);
      
      
      
      

  }
  }
  img_h.updatePixels();
  img_s.updatePixels();
  img_v.updatePixels();

 
}


function draw() {
 noLoop();
 image(img_h, 0, 0);
  image(img_s, 256, 0);
  image(img_v, 0, 256);
  image(img, 256, 256);
  updatePixels();
}

function preload() {
  img = loadImage("https://raw.githubusercontent.com/scikit-image/scikit-image/master/skimage/data/astronaut.png");
  img_h = createImage(256,256);
  img_s = createImage(256,256);
  img_v = createImage(256,256); 

 
}
function setup() {
  createCanvas(512,512);
  img.resize(256,256);
  img.loadPixels();
  img_h.loadPixels();
  img_s.loadPixels();
  img_v.loadPixels();
 
  for(x=0;x<img.width;x++){
    for(y=0;y<img.height;y++) {      
      pos=4*(y*img.width+x);
      r=img.pixels[pos]/255;
      g=img.pixels[pos+1]/255;
      b=img.pixels[pos+2]/255;
      cmax = Math.max(r,g,b);
      cmin = Math.min(r,g,b);
      v=cmax;
    //  x=(i/4)%256;//indeks kolumny wewnątrz wiersza --
     // y=(i/4)/256;//indeks wiersza   
     img_v.set(x,y,255*v);
     c = cmax-cmin;
     if (cmax == 0){
     s=0;
     }
     else{
     s=c/cmax;
     }
     img_s.set(x,y,255*s); 
      

  }
  }
  img_h.updatePixels();
  img_s.updatePixels();
  img_v.updatePixels();

 
}


function draw() {
 noLoop();
 image(img_h, 0, 0);
  image(img_s, 256, 0);
  image(img_v, 0, 256);
  image(img, 256, 256);
  updatePixels();
}

function preload() {
  img = loadImage("https://raw.githubusercontent.com/scikit-image/scikit-image/master/skimage/data/astronaut.png");
  img_h = createImage(256,256);
  img_s = createImage(256,256);
  img_v = createImage(256,256); 

 
}
function setup() {
  createCanvas(512,512);
  img.resize(256,256);
  img.loadPixels();
  img_h.loadPixels();
  img_s.loadPixels();
  img_v.loadPixels();
 
  for(x=0;x<img.width;x++){
    for(y=0;y<img.height;y++) {      
      pos=4*(y*img.width+x);
      r=img.pixels[pos]/255;
      g=img.pixels[pos+1]/255;
      b=img.pixels[pos+2]/255;
      cmax = Math.max(r,g,b);
      cmin = Math.min(r,g,b);
      v=cmax;
    //  x=(i/4)%256;//indeks kolumny wewnątrz wiersza --
     // y=(i/4)/256;//indeks wiersza   
     img_v.set(x,y,255*v);
     c = cmax-cmin;
     if (cmax == 0){
     s=0;
     }
     else{
     s=c/cmax;
     }
     img_s.set(x,y,255*s); 
     if(c==0){
        h=0;
     }
      else if(v==r){
        h=((g-b)/c)%6;
      }
      else if(v==g){
        h=((b-r)/c)+2;
      }
        else /*v==b*/
        {
        h=((r-g)/c)+4; 
        }
       h/=6;
      if(h<0){
      h+=1;
      }
   img_h.set(x,y,255*h);
  }
  }
  img_h.updatePixels();
  img_s.updatePixels();
  img_v.updatePixels();

 
}


function draw() {
 noLoop();
 image(img_h, 0, 0);
  image(img_s, 256, 0);
  image(img_v, 0, 256);
  image(img, 256, 256);
  updatePixels();
}

function preload() {

  img = loadImage("https://raw.githubusercontent.com/scikit-image/scikit-image/master/skimage/data/astronaut.png");
  //img2 = loadImage("https://raw.githubusercontent.com/scikit-image/scikit-image/master/skimage/data/astronaut.png");
}

function setup() {

  createCanvas(256,256);
  //img.resize(256,256);
  //img2.resize(256,256);
  img.filter('gray');
//  img2.filter('gray');
  var tablica = new Array(256);
  tablica.fill(0);
  img.loadPixels();
  for(x=0;x<img.width;x++){
    for(y=0;y<img.height;y++) {      
      pos=4*(y*img.width+x);
      t = img.pixels[pos];
      tablica[t]++;
  
    }
  }
  background(256);
 stroke(255, 204, 0);
   //line(1,256,1,150);
  for(i=0;i<tablica.length;i++){
   y2=256-(((tablica[i]/Math.max.apply(null, tablica))*256)*10);
   x1=i+1; 
   x2=i+1; 
   y1=256;
  line(x1,y1,x2,y2); 
  }
 
}


function draw() {
 noLoop();
 updatePixels();
}

: Kategoria: Grafika; Opublikowano: 19 luty 2022

https://p5js.org/

Zadania:

Piksele
Gradienty
Obrazek
Fraktale

//==========================================
//Zadanie 1.
//==========================================
function setup() {
  createCanvas(800, 600);
  noLoop();
}

function draw() {
  // noprotect
  background(0);
  for(y=0; y<height; y++){
     for(x=0; x<width; x++) {
       set(x, y, color(255,0,255));
       
  }}
  updatePixels();
}
//==========================================
//Zadanie 2.
//==========================================
function setup() {
  createCanvas(800, 600);
  noLoop();
}

function draw() {
  // noprotect
  background(0);
  for(y=0; y<height; y++){
     for(x=0; x<width; x++) {
       set(x, y, color((x/width)*256));
     
  }}
    updatePixels();
}
//==========================================
//Zadanie 3.
//==========================================
function setup() {
	createCanvas(800, 600);
	noLoop();
}

function draw() {
  // noprotect
  background(0);
  for(y=0; y<height; y++){
     for(x=0; x<width; x++) {
       var px = x-(width/2);
       var py = y-(height/2);
       var d =sqrt(((px)*(px))+((py)*(py)));
       set(x, y, color(255-d,d,(((x/width)*255)+((y/(height)*255)))));
      
  }}
   updatePixels();
}
//==========================================
//Zadanie 4.
//==========================================
function setup() {
  createCanvas(800, 600);
  noLoop();
}

function draw() {
  // noprotect
  background(0);
  for(y=0; y<400; y++){
     for(x=0; x<width; x++) {
       set(x, y, color(0,0,255));
      
  }}
   updatePixels();
  for(y=400; y<height; y++){
  for(x=0; x<width; x++) {
    set(x, y, color(0,128,0));
    
}}
updatePixels();
for(i=0; i<1000;i++){
set(floor(random(0,800)), floor(random(400,600)), color(floor(random(0,255)),floor(random(0,255)),floor(random(0,255))));

}
updatePixels();
for(y=200; y<400; y++){
  for(x=200; x<600; x++) {
    set(x, y, color(139,69,19));
    
}}
updatePixels();
for(var y=50,w=400,d=399; y<200; y++,w+=2,d-=2)
    for(x=d; x<w; x++){{
    set(x, y, color(255,99,71));
    
}}
updatePixels();

}
//==========================================
//Zadanie 5.
//==========================================

function setup() {
  createCanvas(800, 600);
   background(0);
}

function draw() {
  // noprotect
  
   x1 = 400;
   y1 = 100;
   x2 = 150;
   y2 = 500;
   x3 = 700;
   y3 = 500;
  stroke(255);
  point(x1,y1);
  point(x2,y2);
  point(x3,y3);
  cx = x1;
  cy = y1;

  for(i=0;i<30000;i++){
  t = floor(random(0,3));
  switch(t){
  case 0:
  cx=(cx+x1)/2;
  cy=(cy+y1)/2;
  point(cx, cy);
  break;
  case 1:
  cx=(cx+x2)/2;
  cy=(cy+y2)/2;
  point(cx, cy);
  break;
  default:
  cx=(cx+x3)/2;
  cy=(cy+y3)/2;
  point(cx, cy);
  break;
  }}
updatePixels();
}

Przekształcenia afiniczne

Algorytmy rysowania

Barwy i histogram

Wprowadzenie