We closed this forum 18 June 2010. It has served us well since 2005 as the ALPHA forum did before it from 2002 to 2005. New discussions are ongoing at the new URL http://forum.processing.org. You'll need to sign up and get a new user account. We're sorry about that inconvenience, but we think it's better in the long run. The content on this forum will remain online.
Index › Programming Questions & Help › Syntax Questions › converting array of colors into an image
‹ Previous Topic | Next Topic ›
Page Index Toggle Pages: 1
converting array of colors into an image (Read 388 times)
mateooo
converting array of colors into an image
Feb 28th, 2009, 11:38am  
hello, ive made a program that analizes an imagen and separate s it into 3 new images  depending on the luminosity of the pixels. i made something like this: first it iterates over all of the pixels of the image and based on the luminosity of each pixel it store the values of each pixel  on  3 diferent array, so i got 3 new arrays , each one storing the color of a segment of luminosity of my image. For drawing each one of the 3 new images i need to iterate all over the array in each frame in order to draw the image , but this consumes a lot of my cpu, and its very slow if i want to make animations, so my question is : is there is a way of converting each of the arrays containin the values of each imagen into a pic? or graphic?  so i do not need to iterate all over the pixels in order to draw it? any idea?

here is the code:

PImage img;

color [] imageColors ;
float [] colorRojo;
float [] colorVerde;
float [] colorAzul;
float [] colorRojo_separadouno;
float [] colorVerde_separadouno;
float []colorAzul_separadouno;

float []cambiauno;
float cambia ;

float []cambiados;
float [] colorRojo_separadodos;
float [] colorVerde_separadodos;
float []colorAzul_separadodos;

float []cambiatres;
float [] colorRojo_separadotres;
float [] colorVerde_separadotres;
float []colorAzul_separadotres;
float luminosidad_total;

color  luminosidad;

float sube = 1;
//colorMode(HSB, 255);

void setup () {
 noStroke() ;
 size (400, 400) ;
 //colorMode(HSB, 255);

   img = loadImage("glitch.jpg");
   colorRojo = new float[img.width * img.height];
 colorVerde = new float[img.width * img.height];
 colorAzul = new float[img.width * img.height];

  colorRojo_separadouno = new float[img.width * img.height];
 colorVerde_separadouno = new float[img.width * img.height];
 colorAzul_separadouno = new float[img.width * img.height];
   cambiauno = new float[img.width * img.height];
 
 colorRojo_separadodos = new float[img.width * img.height];
 colorVerde_separadodos = new float[img.width * img.height];
 colorAzul_separadodos = new float[img.width * img.height];
   cambiados = new float[img.width * img.height];
 
 colorRojo_separadotres = new float[img.width * img.height];
 colorVerde_separadotres = new float[img.width * img.height];
 colorAzul_separadotres = new float[img.width * img.height];
 cambiatres = new float[img.width * img.height];
 
 //aca abajo genero un array con un numero de casillas igual que el numero de pixeles de mi imagen
 imageColors = new color[img.width * img.height];
 

  for (int y = 0; y<img.height;y++){
  for (int x = 0; x<img.width;x++) {
 
 imageColors[y*img.height + x]= img.get(x,y);  
 colorRojo[y*img.height + x] = (imageColors[y*img.height + x]>>16)&255;    
 colorVerde[y*img.height + x] = (imageColors[y*img.height + x]>>8)&255;  
   colorAzul[y*img.height + x] = imageColors[y*img.height + x]&255;  

luminosidad = img.get(x,y);

//  red(luminosidad)+  green(luminosidad) +  blue(luminosidad)
luminosidad_total =( (red(luminosidad)) + (green(luminosidad)) + (blue(luminosidad))/3);
// println( luminosidad);
 if(luminosidad_total>374){
   cambiauno[y*img.height + x] = 250;
 colorRojo_separadouno[y*img.height + x] = (imageColors[y*img.height + x]>>16)&255;    
 colorVerde_separadouno[y*img.height + x] = (imageColors[y*img.height + x]>>8)&255;  
 colorAzul_separadouno[y*img.height + x] = imageColors[y*img.height + x]&255;  
 
 }
 else {
  // cambia = 0;
    cambiauno[y*img.height + x] = 0;
   //esto de aca le pone los huecos de un color, pero como podria hacer para que sean transparaentes?
  colorRojo_separadouno[y*img.height + x] = 122 ;
colorVerde_separadouno[y*img.height + x] = 188;
   colorAzul_separadouno[y*img.height + x]  = 177;
 }
 
   if(luminosidad_total<374){

   cambiados[y*img.height + x] = 250;
 colorRojo_separadodos[y*img.height + x] = (imageColors[y*img.height + x]>>16)&255;    
 colorVerde_separadodos[y*img.height + x] = (imageColors[y*img.height + x]>>8)&255;  
 colorAzul_separadodos[y*img.height + x] = imageColors[y*img.height + x]&255;  
 
 }
 else {
   cambiados[y*img.height + x] = 0;
 }
 

     if(luminosidad_total<124){
     cambiatres[y*img.height + x] = 250;
 colorRojo_separadotres[y*img.height + x] = (imageColors[y*img.height + x]>>16)&255;    
 colorVerde_separadotres[y*img.height + x] = (imageColors[y*img.height + x]>>8)&255;  
 colorAzul_separadotres[y*img.height + x] = imageColors[y*img.height + x]&255;  
 
 }
 else {
       cambiatres[y*img.height + x] = 0;


 }
 
  }


}}
void draw()
{
 background(233) ;
sube = sube + 1;
  for (int y = 0; y<img.height;y++){
  for (int x = 0; x<img.width;x++) {

   
    fill( colorRojo_separadouno[y*img.height + x],  colorVerde_separadouno[y*img.height + x], colorAzul_separadouno[y*img.height + x] , cambiauno[y*img.height + x] );
    ellipse(x + sube  + 88, y , 7, 3);
   
    fill( colorRojo_separadodos[y*img.height + x],  colorVerde_separadodos[y*img.height + x], colorAzul_separadodos[y*img.height + x],cambiados[y*img.height + x]);
    ellipse(x + 2+ sube  + 88, y + 100,1,1);
   
    fill( colorRojo_separadotres[y*img.height + x],  colorVerde_separadotres[y*img.height + x], colorAzul_separadotres[y*img.height + x],cambiatres[y*img.height + x]);
    ellipse(x + 2+ sube  + 88, y + 200,1,1);
 }}
 }
Back to top
 
 
PhiLho 
Re: converting array of colors into an image
Reply #1 - Feb 28th, 2009, 1:05pm  
Wow, complex!
I didn't looked how you make separation, but you might be interested to know there is a point() function. Might be faster than your use of ellipse(), perhaps.
Back to top
 
WWW  
mateooo
Re: converting array of colors into an image
Reply #2 - Feb 28th, 2009, 1:55pm  
PhiLho  wrote on Feb 28th, 2009, 1:05pm:
Wow, complex!
I didn't looked how you make separation, but you might be interested to know there is a point() function. Might be faster than your use of ellipse(), perhaps.

hi, i know point ,but is there any way to convert an array to an image so i dont need to make the iteration for drawing the pixels
Back to top
 
 
koogy
Re: converting array of colors into an image
Reply #3 - Feb 28th, 2009, 3:20pm  
that's all a PImage is, an array of colours:

Code:

public class PImage implements PConstants, Cloneable {
  /**
   * Format for this image, one of RGB, ARGB or ALPHA.
   * note that RGB images still require 0xff in the high byte
   * because of how they'll be manipulated by other functions
   */
  public int format;
  public int[] pixels;
  public int width, height;
...


and as the pixels are public you should be able to set pixels (and height, width) to your array. and then just use image() to draw them on screen. (you'll have to pack your red, green, blue and alpha into an int array rather than having them as 4 separate arrays)

i don't know how you're going to be able to replace every pixel with a 7x3 ellipse like you do for your first array but...

(and why does everyone hate local variables? calculating (y*img.height + x) once for each loop and storing it in a local variable has to be better (and less typing) than re-calculating it 12 times. (you could even just i++ it given that the arrays are all single dimensional anyway))
Back to top
 
 
mateooo
Re: converting array of colors into an image
Reply #4 - Mar 1st, 2009, 9:11am  
hello, as i understand i need to have 3 duplicated images and then change the color of the pixel of each image depending of its luminosity, but is there is a way of converting an array of color to a image? for example in the following code, is it possible to convert the array my_image that store the values of all my image pixel , to an image?or pimage ? is that possible? thanks


  my_image [y*img.height + x] =  color((imageColors[y*img.height + x]>>16)&255, (imageColors[y*img.height + x]>>8)&255, imageColors[y*img.height + x]&255, 250);
Back to top
 
 
PhiLho 
Re: converting array of colors into an image
Reply #5 - Mar 1st, 2009, 11:18am  
You can use System.arraycopy to copy lot of data between two arrays.

Now, as koogs points out, you should actually use the natural pixels[] array to store and manipulate your color data: then there will be no need to copy the information, let Processing do it with image() or friends.
Back to top
 
WWW  
mateooo
Re: converting array of colors into an image
Reply #6 - Mar 1st, 2009, 12:43pm  
hello i made a new version with pixels here it is:
int x;

PImage img;
PImage imgdos;
PImage imgtres;

color luminosidad;
float luminosidad_total;

color [] imagenn ;

float sube = 1;

void setup () {
 noStroke() ;
 strokeWeight(2) ;
 size (400, 400) ;
 img = loadImage("glitch.jpg");
 imgdos = loadImage("glitch.jpg");    
 imgtres = loadImage("glitch.jpg");
 
 loadPixels();
       
  for (int y = 0; y<img.height * img.width ;y++){
 luminosidad =  img.pixels[y];
 luminosidad_total =( ((red(luminosidad)) + (green(luminosidad)) + (blue(luminosidad)))/3);
       if(luminosidad_total<214){
             img.pixels[y] = color(0, 70, 0, 250);
       }
   
    if(luminosidad_total>124){
         imgdos.pixels[y] = color(80, 30, 0, 0);
        }
       
      if(luminosidad_total<184){
            imgtres.pixels[y] = color(0, 0, 0, 0);
           }
           }
updatePixels();

}
void draw()
{
 background(233) ;
 
x = x+ 1;
   image(img, 20, 10);
image(imgdos, x, 90);  
image(imgtres, 80, 180);
}


it works faster but alpha channels doesnt work, do anybody know why cant i apply a alpha or make some pixels transparent?

im using color, with 4 variables , why does it doesnt work?

imgtres.pixels[y] = color(0, 0, 0, 0);
Back to top
 
 
PhiLho 
Re: converting array of colors into an image
Reply #7 - Mar 1st, 2009, 1:36pm  
What doesn't work with alpha? You can see that a pixel has an alpha component only if the image with alpha is over some background/image, so they blend together.
Note that with alpha of 0, you have fully transparent pixel, so you can't see the color.

Also you should avoid duplicating questions, it makes hard keep answers/information consistent.
Back to top
 
WWW  
mateooo
Re: converting array of colors into an image
Reply #8 - Mar 1st, 2009, 2:38pm  
hello, sorry for duplicating . Alpha doesnt work with images, if i draw directly the pixels it works fine, for example in the following example it works:

for (int i = 0; i < (width*height/2)-width/2; i++) {
 pixels[i] = color(33,220,22,0);
}

but if i do:

     if(luminosity<214){
       
             img.pixels[i] = color(0, 0, 0, 0);
             
       }

it doenst work the alpha, the idea is that the luminosity of the pixels of an image is less than 214 it change the pixels to transparent i dont know why the alpha doesnt work,  it changes the colors of the image , but the alpha doesnt work, do you have any idea?
Back to top
 
 
PhiLho 
Re: converting array of colors into an image
Reply #9 - Mar 2nd, 2009, 11:27am  
I did a test and it worked:
Code:
void setup()
{
  size(700, 500);
  background(255);
  PImage tpi1 = loadImage("list.gif");
  PImage tpi2 = loadImage("list.gif");
  tpi1.loadPixels();
  stroke(#FF0000);
  strokeWeight(3);
  for (int i = 0; i < height; i += 10)
  {
    line(0, i, width, i);
  }
  for (int i = 0; i < tpi1.pixels.length; i++)
  {
    if ((tpi2.pixels[i] & 0xFF) > 192)
    {
	tpi2.pixels[i] = color(0, 0, 0, 0);  // Make transparent
    }
    else if ((tpi2.pixels[i] & 0xFF0000) > 192)
    {
	tpi2.pixels[i] = (tpi2.pixels[i] & 0xFFFFFF) | 0x80000000;  // Make  half transparent
    }
  }
  tpi2.updatePixels();
  image(tpi1, 10, 10);
  image(tpi2, 70, 10);
  image(tpi1, 10, 70, 256, 256);
  image(tpi2, 300, 70, 256, 256);
}

Perhaps the problem is elsewhere (threshold value?)
Back to top
 
WWW  
Page Index Toggle Pages: 1
‹ Previous Topic | Next Topic ›