GRK TUT2 Task1

by linoskoczek

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.7/p5.js"></script>
<script type="text/javascript">
function preload() {
  img = loadImage("https://raw.githubusercontent.com/scikit-image/scikit-image/master/skimage/data/astronaut.png");
}
function setup() {
  createCanvas(512,512);
  img.resize(256,256);

  let img_r=createImage(256,256);
  let img_g=createImage(256,256);
  let img_b=createImage(256,256);
  let img_sum=createImage(256,256);
  
  img.loadPixels();
  img_r.loadPixels();
  img_g.loadPixels();
  img_b.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_r.pixels[pos] = img.pixels[pos];// R value
      img_g.pixels[pos+1] = img.pixels[pos+1];  // G value
      img_b.pixels[pos+2] = img.pixels[pos+2]; // B value
      img_r.pixels[pos+3] = 255;// A value
      img_g.pixels[pos+3] = 255;// A value
      img_b.pixels[pos+3] = 255;// A value
  	}
  }
  img_r.updatePixels();
  img_g.updatePixels();
  img_b.updatePixels();
  image(img_r, 0, 0);
  image(img_b, 0, 256);
  image(img_g, 256, 0);
  
  img_sum.blend(img_r,0,0,256,256,0,0,256,256,ADD);
  img_sum.blend(img_g,0,0,256,256,0,0,256,256,ADD);
  img_sum.blend(img_b,0,0,256,256,0,0,256,256,ADD);
  
  image(img_sum, 256, 256);  
}
</script>

CSS

<script src="//cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.7/p5.js"></script>
<script type="text/javascript">
function preload() {
  img = loadImage("https://raw.githubusercontent.com/scikit-image/scikit-image/master/skimage/data/astronaut.png");
}
function setup() {
  createCanvas(512,512);
  img.resize(256,256);

  let img_h=createImage(256,256);
  let img_s=createImage(256,256);
  let img_v=createImage(256,256);
  let img_sum=createImage(256,256);
  
  img.loadPixels();
  img_h.loadPixels();
  img_s.loadPixels();
  img_v.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_h.pixels[pos] = img.pixels[pos];// R value
      img_s.pixels[pos+1] = img.pixels[pos+1];  // G value
      img_v.pixels[pos+2] = img.pixels[pos+2]; // B value
      img_h.pixels[pos+3] = 255;// A value
      img_s.pixels[pos+3] = 255;// A value
      img_v.pixels[pos+3] = 255;// A value
  	}
  }
  img_h.updatePixels();
  img_s.updatePixels();
  img_v.updatePixels();
  image(img_h, 0, 0);
  image(img_s, 0, 256);
  image(img_v, 256, 0);
  
  img_sum.blend(img_h,0,0,256,256,0,0,256,256,ADD);
  img_sum.blend(img_s,0,0,256,256,0,0,256,256,ADD);
  img_sum.blend(img_v,0,0,256,256,0,0,256,256,ADD);
  
  image(img_sum, 256, 256);  
}
</script>