center image rgba array

phantomtnt

Hello, i want to work with the pixels of an image that is dinamically centered into the canvas how could i achieve this?

I have this, i've been able to display the pixel array only if the canvas is the same size as the image

`

var wH = window.innerHeight;
var wW = window.innerWidth;
var img;

function preload() {
  img = loadImage('assets/img.png');  
}

function setup() {
  var heigthImg = img.width/img.height*height
  var widthImg = img.height/img.width*width  
  createCanvas(wW, wH);
  background(51); 
  image(img, width/2 - heigthImg/2, 0, heigthImg ,wH);  

  //img.loadPixels();  
}

function draw() {  

//Displays image only if canvas is the same size as the image
//
//  loadPixels();
//   for (var y = 0; y < logoImg.height; y++) {
//    for (var x = 0; x < logoImg.width; x++ ) {
//      //Value index [r, g, b, a] pixel array
//      var pix = (x + y * logoImg.width)*4;
//      var r = logoImg.pixels[pix+0];
//      var g = logoImg.pixels[pix+1];
//      var b = logoImg.pixels[pix+2];
//      var a = logoImg.pixels[pix+3];


//      //set pixels
//      pixels[pix+0] = r;
//      pixels[pix+1] = g;
//      pixels[pix+2] = b;
//      pixels[pix+3] = a;
//    }
//  }
//  updatePixels();
}

`

kfrajer

Please edit your post, select your code and hit ctrl+o to format your code. Make sure there is an empty line above and below your code

Also check the reference for imageMode() and the alternative versions of the image() function as that is what you need.

Kf

phantomtnt

Thanks kfrajer, im going to experiment!! :D

phantomtnt

Hello, im getting this from the pixel array, any idea how to make the pixel array in the center like the image behind. thanks

kfrajer

Can you post an updated version of your code?

Kf

phantomtnt

Hello this is the actual code

  var wH = window.innerHeight;
  var wW = window.innerWidth;
  var logoImg;

  function preload() {
      logoImg = loadImage('assets/logo.png');
  }

  function setup() {
      createCanvas(wW, wH);
      var heigthImg = logoImg.width / logoImg.height * height
      var widthImg = logoImg.height / logoImg.width * width
      background(51);
      image(logoImg, width / 2 - heigthImg / 2, 0, heigthImg, wH);
      logoImg.loadPixels();
  }

  function draw() {
      loadPixels();
      for (var y = 0; y < logoImg.height; y++) {
          for (var x = 0; x < logoImg.width; x++) {
              //Index of pixeles [r, g, b, a]
              var pix = (x + y * logoImg.width) * 4;
              var r = logoImg.pixels[pix + 0];
              var g = logoImg.pixels[pix + 1];
              var b = logoImg.pixels[pix + 2];
              var a = logoImg.pixels[pix + 3];

              //draw pixels
              pixels[pix + 0] = r;
              pixels[pix + 1] = g;
              pixels[pix + 2] = b;
              pixels[pix + 3] = a;
          }
      }
      updatePixels();
  }

kfrajer

Hello, i want to work with the pixels of an image that is dinamically centered into the canvas how could i achieve this?

In your first post you wrote this. What do you mean with dynamically centered? You can explain what you want to do. Also you can add extra comments of why you are multiplying and translating you image in lines 10,12 and 14.

Did you check imageMode? http://p5js.org/reference/#/p5/imageMode

Also this line smells trouble:

var pix = (x + y * logoImg.width) * 4;

How do you warranty your image and your canvas is in a proportion of 1 to 4. This next is specially troublesome:

var pix = (x + y * logoImg.width) * 4;
var r = logoImg.pixels[pix + 0];

as you are exceeding your image dimensions.

Kf

phantomtnt

Hello, yes i was kinda lost, now i got how to center the image and place in the canvas, i understand how the imagemode works. I will ask here let me know if i have to make another question in the forum.

So what i want to do is to use that canvas and take only the pixels that are black so i can get the image shape and do stuff for example change color.

now im confused how should i do that, what i should use for this, loadPixels() or get() ?? thanks!

i have this

var wH = window.innerHeight;
var wW = window.innerWidth;
var logoImg, gt;

function preload() {
    logoImg = loadImage('assets/logo.png');
}

function setup() {
    createCanvas(wW, wH);
    var heigthImg = logoImg.width / logoImg.height * height
    var widthImg = logoImg.height / logoImg.width * width
    background(100);    
    image(logoImg, width / 2 - heigthImg / 2, 0, heigthImg, wH);
    var gt = get();
    gt.loadPixels();
}

function draw() {
  loadPixels();
      for (var y = 0; y < height; y++){
        for (var x = 0; x < width; x++)
          var pix = (x + y * width)*4;
          var r = pixels[pix+0];
          var g = pixels[pix+1];
          var b = pixels[pix+2];
          var a = pixels[pix+3];


          //dibuja pixeles
          pixels[pix+0] = r;
          pixels[pix+1] = 255;
          pixels[pix+2] = b;
          pixels[pix+3] = a;             
      }
      updatePixels();  
}

kfrajer

I am not an expert in p5.js and I can't run any code right now to be able to test my code below. But this is what I will do:

var doneJob=false;
var thresh=25;   //0 is black. Anything close to zero is "technically" black  

var wH = window.innerHeight;
var wW = window.innerWidth;
var logoImg, gt;

function preload() {
    logoImg = loadImage('assets/logo.png');
}

function setup() {
  createCanvas(wW, wH);  
  image(logoImg, 0, 0, width, height);
  doneJob=false;
}

function draw() {

  //Just execute function once... I am doing it this way for clarity
  if (doneJob==true)
    return();


  loadPixels();
  for (var y = 0; y < height; y++) {
    for (var x = 0; x < width; x++) {
      var pix = (x + y * width);
      var r = red(pixels[pix]);
      var g = green(pixels[pix]);
      var b = blue(pixels[pix]);
      var a = alpha(pixels[pix]);
    }


    //If below threshold, change color.
    if (r+g+b < thresh) {
      pixels[pix] = color(r,255,b,a);
    }
  }
  updatePixels();
  jobDone=true;
}

I am using the variable jobDone but you are better of if you can use noLoop() in setup so draw only runs once a stops. Please check the p5js.org's reference (unable to do it right now)

I mention imageMode in the previous post addressing your question in your post's title. However, now that I know better what you want to do, then the previous code shall do what you want. Related to your question, you need to use pixels in tandem with loadPixels/updatePixels as you are modifying the image buffer. You could use get/set functions but I understand they are slower and pixels is what is recommended in your case.

For the threshold, I choose 25 instead of 0 (black). In your case, because each color field ranges from 0 to 255, your threshold range is from 0 to 3*256=768. Making it 25 allows darker pixels to also count as black.

Lastly, you can check the blend function in p5js's reference website and also check the provided examples in the example section of that website.

Kf