I though I could load it then duplicate it as img2 and only apply the mask to the first img object.

Is that possible or is there a different way to do it?

function preload() {
  img = loadImage("assets/moonwalk.jpg");
  imgMask = loadImage("assets/mask.png");
  img2 = ? ? ? ? ? ?; // how do i clone the first img?
}

function setup() {
  createCanvas(720, 400);
  img.mask(imgMask);
  imageMode(CENTER);
}

function draw() {
  background(250, 255, 3);
  image(img2, width/2, height/2);
  image(img, mouseX, mouseY);
}

loadPixels();
      for (int y = 0; y <pic.height; y++) {
        for (int x = 0; x <pic.width; x ++) {
          int index = x + height*y;
          float r = red(pic.pixels[index]);
          float g = green(pic.pixels[index]);
          float b = blue(pic.pixels[index]);
          pixels[index] = color(r, g, b);
        }
      }
      updatePixels();

saveFrame() saves the entire screen, including my user interface. And that's not what I want. I only want the image portion to be saved.

I think PImage.save is the way to go. But I don't know how to save changes to an image object and then it can save.

How do you save store changes so you can go back if you make a mistake?

My code can be found on my Github https://github.com/Finaros/Pixcell Thank you very much!

import processing.video.*;
    Capture cam;    
    PImage uno;
    PImage dos;
    PImage img;
    PImage circulo;
    final int anchoCam = 1024;
    final int altoCam = 768;
    final int anchoLienzo = 1024;
    final int altoLienzo = 768;
    final int anchoImagen = anchoLienzo/2;
    final int altoImagen =altoLienzo/2;
    final int anchoDelta = (anchoCam-anchoImagen)/2;
    final int altoDelta = (altoCam-altoImagen)/2;
    void setup() {

          size (anchoLienzo, altoLienzo);
          cam = new Capture(this, anchoCam, altoCam, 30);

          cam.crop(anchoDelta, altoDelta, anchoImagen, altoImagen);

          cam.read();
          uno = cam.get();


          circulo = loadImage("circulo.jpg");
          res = 0.0;
        }

PImage updateImg(Capture cam, PImage lado) {
  cam.read();
  lado = cam.get();

     if ( img = loadImage(int(random(26, 50)) + ".jpg"));     //y aquí el 26 y el 50
 {
  lado.blend(img, 0, 0, anchoImagen, altoImagen, 0, 0, anchoImagen, altoImagen, SCREEN);
  lado.blend(circulo, 0, 0, anchoImagen, altoImagen, 0, 0, anchoImagen, altoImagen, MULTIPLY); //Se puede cambiar el modo de fusión de las fotos cambiando MULTIPLY por otro, como BLEND, ADD, SUBTRACT, DARKEST, LIGHTEST, DIFFERENCE, EXCLUSION, MULTIPLY, SCREEN, OVERLAY, HARD_LIGHT, SOFT_LIGHT, DODGE o BURN.
  lado.filter(GRAY);
  return lado;}
}

void draw() {

  background (0);
  if (keyPressed) {

   if (key == 'a' || key == 'A') {

     uno = updateImg(cam, uno);
}

    else if (keyCode == DOWN) {

    }
  }
  image(uno, 300, 0, anchoImagen, altoImagen);
 }

I tried without success: -myPort.stop() -myVideo.stop() -noLoop() -using a PImage arrayList instead of Capture object arrayList -use different ways to trigger/stop acquisition.

It doesn't make any sense to me... why when I write mySnapshotAL.get(i) do I get the current camera view and not the content of the arrayList which is populated properly (I checked the size) ???

Many thanks!!!

import processing.video.*;
import processing.serial.*;

Capture myVideo;                     // declaring a Capture object
Serial myPort;                       // declaring a  serial port
ArrayList<String> myDataAL;          // declaring an ArrayList of String (serial data)
ArrayList<Capture> mySnapshotAL;     // declaring an ArrayList of Capture objects
String myFileName;
String myDataString;
String myDate;
int startTime;
String myTime;
int i=0;
boolean saving=false;

void setup() {  
  frameRate(1000);
  size(1000, 700);
  background(0);
  mySnapshotAL= new ArrayList<Capture>();            // initialising the ArrayList of Capture objets
  myDataAL= new ArrayList<String>();                 // initialising the ArrayList of String
  myVideo = new Capture(this, 320, 240,30);          // initialising the Capture object
  myVideo.start();
  myPort = new Serial(this, Serial.list()[1], 9600); // initialising the port dev/cu.usbmodem1411
  myPort.bufferUntil(10); // char(10) = line feed
}

void serialEvent(Serial myPort) {   // myPort receives data every ms
  i++; 
    if (i==50){
      myVideo.read(); // only acquire every 50 ms
      i=0;
    } 
  myDataString = trim(myPort.readString());
  myTime=nf(millis()-startTime,6,1).substring(0,5);
  myDataString=myTime + "," + myDataString;
  if (saving){
  mySnapshotAL.add(myVideo);
  myDataAL.add(myDataString);
  }
}

void draw() {  
image(myVideo, 600, 40);
}

void keyPressed(){
        if (!saving) {
          saving=true;
          startTime=millis();
          }
        else {
          saving=false;
          myDate= nf(hour(),2,1).substring(0,2) + "h" + nf(minute(),2,1).substring(0,2);
          for (int i =0; i<mySnapshotAL.size(); i++){
              myFileName="VideoFiles/Capture" + i + "@" +myDate+ "-" +myDataAL.get(i)+".png";
              mySnapshotAL.get(i).save(myFileName); 
              if (i==300) break;  // safety, until code is failproof
          }
        }
}

I'm now trying to use a P3D offscreen buffer and then using image(), draw that to the 2D sketch... but I'm stuck with an error asking for size(). But I have no idea where/how I should be supplying this size() value, if I put it in settings() it applies to the main 2D sketch which I don't want. Can anyone help please?!

simple version code :

    PGraphics p3d;

    DBox myBox;
    void settings() {
      //size(400,400,P3D);
    }

    void setup() {
      size(800, 800);

      p3d = createGraphics(400, 400, P3D);
      p3d.beginDraw();
      p3d.noStroke();
      myBox = new DBox();
      p3d.background(128);
      myBox.render(this.g);
      p3d.endDraw();
    }

    void draw() {
      background(100);
      fill(255, 0, 0);
      ellipse(400, 400, 650, 650);
      image(p3d, 200, 200);
    }

    class DBox {

      DBox() {
      }

      void render(PGraphics pg) {
        pg.fill(0, 0, 255);
        pg.box(40);
      }
    }

I am trying to make a light field renderer based on this Nvidia research https://research.nvidia.com/sites/default/files/publications/Slim near-eye display using pinhole aperture arrays.pdf

Long story short - "int o = 1;" needs to be 0.75 but get() doesn't support floats.. any ideas?

This is my code so far:

int N = height/3;
int o = 1;
void setup() {
  size(400, 300);
}
void draw() {
  PImage myImage = loadImage("fox.jpg");
  image(myImage, 0, 0);
  for (int i = 0; i < myImage.width; i = i+1) {
    for (int j = 0; j < myImage.height; j = j+1) {
      PImage c = get(i*N*o, j*N*o, N, N);
      tint(0, 200, 255); //just for checking it works
      image(c, i*N*o, j*N*o);
    }
  }
}

Can anyone tell me why this sketch runs so slow? The line with the "Get()" is the problem...

I tried different renderer (P2D, P3D...) but without success..

float  Angle = 0;

void setup() 
{
  size(600, 600,P3D ); 
  noSmooth();
}

void draw() {
  background(0);

  Angle += 0.8;

  // Draw something in the upper left corner (
  colorMode(HSB, 100);  
  pushMatrix();
  translate(7, 7);
  rotate(radians(Angle*34));
  Star5(0, 0, 9.5, 9.5, color(0, 100, 100), color(20, 100, 100), color(40, 100, 100), color(60, 100, 100), color(80, 100, 100), 100);
  popMatrix();


  colorMode(RGB, 255);
  noFill();

  // draw a rect (Pixel scan area)
  strokeWeight(1);
  stroke(255, 255);
  rect(-1, -1, 15, 15);



  int OffsetX = 50;
  int OffsetY = 50;
  int CellSize = 30;
  int GridWidth = 33;
  int CellRadius = 2;

  noStroke();

  // Scan Pixels in the upper left corner and draw matrix
  for (int yy = 0; yy < 13; yy++)
  {
    for (int xx = 0; xx < 13; xx++)
    {      
      color c = get(xx, yy); // THIS LINE MAKES THE WHOLE SKETCH VERY SLOW 
      //color c = color(xx*20,yy*20,0); // TO SEE THE DIFFERENCE... USE THIS LINE INSTEAD
      fill(c);
      rect(OffsetX + (xx * GridWidth), OffsetY + (yy * GridWidth),CellSize,CellSize,CellRadius);
    }
  } 
}


void Star5(float x1, float y1, float r1, float r2, color c1, color c2, color c3, color c4, color c5, int alpha) 
{
  // Draws a star
  noStroke();
  beginShape();
  fill(c1, alpha);
  vertex(x1+cos(radians(36*1))*r2, y1+sin(radians(36*1))*r2);
  vertex(x1+cos(radians(36*2))*r1, y1+sin(radians(36*2))*r1);
  fill(c2, alpha);
  vertex(x1+cos(radians(36*3))*r2, y1+sin(radians(36*3))*r2);
  vertex(x1+cos(radians(36*4))*r1, y1+sin(radians(36*4))*r1);
  fill(c3, alpha);
  vertex(x1+cos(radians(36*5))*r2, y1+sin(radians(36*5))*r2);
  vertex(x1+cos(radians(36*6))*r1, y1+sin(radians(36*6))*r1);
  fill(c4, alpha);
  vertex(x1+cos(radians(36*7))*r2, y1+sin(radians(36*7))*r2);
  vertex(x1+cos(radians(36*8))*r1, y1+sin(radians(36*8))*r1);
  fill(c5, alpha);
  vertex(x1+cos(radians(36*9))*r2, y1+sin(radians(36*9))*r2);
  vertex(x1+cos(radians(36*10))*r1, y1+sin(radians(36*10))*r1);
  endShape();
}

I am trying to switch to p5.js as much as I can, however I am fairly new at it.

The main problem I have is, when I do stuff with get() and double for loop, p5.js is incredibly slow.

When I run the following code with Processing (java mode) this runs pretty easy. When I do the same thing with p5.js, it is really really really slow.

        var img;


        function setup() {
          createCanvas(480, 640);
          img = loadImage("assets/Image2.jpg");
        }

        function draw() {
          image(img, 0, 0);


          var stepSize = 10;

          for (var y = 0; y < width; y+=stepSize) {
            for (var x = 0; x < height; x+=stepSize) {
              var c = get(y, x);
              fill(c);
              noStroke();
              rect(y, x, 5, 5);
            }
          }
        }

So what is the problem here? What am I doing wrong with p5.js?? If I use the get() command outside of the for loops, it is fairly ok... If I change the stepSize from 10 to 1 then again, p5.js just freezes... Is this normal? Do I have to change something?

originalCanvas = createCanvas(windowWidth/2, windowHeight);
originalCanvas.position(0, 0);
originalCanvas.background(0);

copiedCanvas = originalCanvas;
copiedCanvas.position(windowWidth/2, 0);

However, only the right half of the screen is black. The left part is white, which I find weird. If my approach didn't work, shouldn't at least the left part be black and the right part white?

When I put an ellipse with mouseX and mouseY in draw(), it only shows in the black/right canvas. The left canvas seems inactive.

I know about createGraphics, but then I would have to always draw things twice, right? For example "original.ellipse(...) and copy.ellipse(...)" - or am I missing something?

PImage[] lol;
PImage thing;

void setup() {
  size(500,300);

  thing = loadImage("c_0.png");
  loadImages(lol, 12);
}

void loadImages(PImage[] p1, int size) {
  p1 = new PImage[size];

  for(int i = 0; i < size; i++) {
    p1[i] = thing;
  }
}

void draw() {
  image(lol[3], 30, 40);
}

However, this gives me a NullPointerException. Why? Can't I initialize the PImages inside a method?

Thank you for any help :)

I'm trying to get the output of my canvas to perform blob detection on. How could I do this? I currently get the output of my cam, but I want to replace this with the output that is shown on the canvas (as I have performed some pixel editting on it)

Thanks

Is there a way to keep the original image after thresholding each time and display the scaled version without having to reload the original each time?

A non destructive resizing to a new smaller image without using brute force loops to create the new scaled image with a new name? if i do a img.resize the original img is gone.

I recently discovered a bug with get() and the functions red green and blue. When I was looking in to why my program wasn't working, I found out that on the api the function get returns a int (or PImage but doesn't matter here). While the functions red green and blue return a float. This is I think my program isn't working.

Could somebody please look into this.

I posted the code below:

PImage pic;

color c1, c2, c3;

int r1, r2, r3; int g1, g2, g3; int b1, b2, b3;

float alternation=2;

void setup() { size(500, 500); pic=loadImage("meme.jpg"); pic.resize(500, 500); image(pic, 0, 0); pic.loadPixels(); }

void draw() { for (int i=0; i<width-1; i++) { for (int j=0; j<height-1; j++) {

  c1=pic.get(i, j);
  r1=red(c1);
  g1=green(c1);
  b1=blue(c1);

  c2=pic.get(i+1, j);
  r2=red(c2);
  g2=green(c2);
  b2=blue(c2);

  c3=pic.get(i, j+1);
  r3=red(c3);
  g3=green(c3);
  b3=blue(c3);

  if ((sqrt(sq(r1-r2)+sq(g1-g2)+sq(b1-b2)))>=alternation 
    || (sqrt(sq(r1-r2)+sq(g1-g2)+sq(b1-b2)))>=alternation) {
    set(i, j, 255);
    println("#000000");
  } else {
    set(i, j, 0);
    println("#FFFFFF");
  }
}

} }

memimg = loadImage("c:dirtscan.png"); 
memimg.resize(480,480);              // scale to fit screen 480x480
sclimg=memimg;
image(sclimg,imgstartcol,imgstartrow);

So now memimage.height and memimage.width =480?

If I want to get back to the full scale raw image in memory to execute image processing on I have to reload the image each time after i resize it?

Is that correct?

I want to take the current canvas output and turn it into an image object so I can pass that into another image processing function that requires an image (rather than raw pixels).

I see can save a canvas as an image file, but thats not what I need.

Many thanks

Nothing is printing in my console and nothing is showing in my sketch, what am I doing wrong? Thanks in advance

void setup(){
  PImage myImage = loadImage("test.jpg");
  loadPixels();
  size(myImage.width,myImage.height);

}

void draw(){
  for (int i = 0; i < width; i++) {
    for (int j = 0; j < height; i++){
      color c = get(i,j);
      if (c == color(0)){
        point(i,j);
        print(i+","+j);
      }
    }
  }
}

PImage img = get();

to get a snapshot of the current look of the screen but 'var img = get()' does not seem to work with p5js & WEBGL?

Nor does: var img; img = createGraphics(100,100); img = get();

so if this can be done: how?

Thanks!

I'm looking for some help with a simple way of saving the frame of a sketch as a png with no background, other than the drawn lines from the script. The sketch essentially reproduces a given image through a series of generated traceur lines, I've included the sketch for reference and it's something I found so I don't fully understand how it works. I'm new to processing so I apologize if this is really basic or if I'm missing something but after looking around, it seems surprisingly more complicated than I initially thought to render with no background. I'm using the latest version of processing 3 by the way.

PGraphics alphaG;

PImage g;
traceur[] traceurs;

void setup(){
size(2500,800);


   alphaG = createGraphics(width,height, JAVA2D);

  g = loadImage("climate.png");

  traceurs = new traceur[0];
  background(255);
  stroke(126,24,175,20);
  for(int a=0;a<120;a++){
    traceurs = (traceur[]) append (traceurs, new traceur());
  }

}

void draw(){
  for(int a=0;a<traceurs.length;a++){
   traceurs[a].dessine(); 
  } 

 image(alphaG, 0,0);
}

class traceur{
    float x,y,an,v;
    float[] rang={-0.05,0.05};
  traceur(){
    x= random(width);y=random(height);
    an=random(TWO_PI);v=random(1.2,1.5);
   rang[0]=random(-0.1,-0.05);
   rang[1]=random(0.05, 0.1);
  }
  void dessine(){
   an+=random(rang[0],rang[1]);
   float newx=x+cos(an)*v;
   float newy=y+sin(an)*v;
   if(newx<0||newx>width||newy<0||newy>height){
     newx=constrain(newx,0,width);
     newy=constrain(newy,0,height);
     an+=random(-PI,PI);
   rang[0]=random(-0.1,-0.05);
   rang[1]=random(0.05, 0.1);
   }
   if(random(100)<1){ 
   rang[0]=random(-0.1,-0.05);
   rang[1]=random(0.05, 0.1);
   }
   float angleChoisi=an;

   float couleur=brightness(g.get(int(newx),int(newy)));
   for(float a=an-PI*0.3;a<an+PI*0.3;a+=PI*0.15){
      int ixe=int(newx+cos(a)*v);
      int igr=int(newy+sin(a)*v);
      float col=brightness(g.get(ixe,igr));
      if(col<couleur){
        couleur=col;
        angleChoisi=a;
      }
   } 
   an=angleChoisi;
   if(random(100)<1){an=an+random(-1,1);}
   line(x,y,newx,newy);
   x=newx;y=newy;

}
  }


 void keyReleased(){
  saveFrame("img#####.png");
}

I found another code which I tried incorporating that is pretty helpful in rendering with no background, with some pretty clear instructions for beginners, it utilizes pgraphics to render, but since I don't fully understand how the initial code works, I've been having a hard time incorporating the various drawing steps. I've included the original file here for reference.

PGraphics alphaG;

void setup() {
size(1250,800); 
// create an extra pgraphics object for rendering on a transparent background 
 alphaG = createGraphics(width,height, JAVA2D);

// background will be transparent in the png-file 
background(255);
}

void draw() {

  // draw into the pgraphics object
  alphaG.beginDraw();
    alphaG.fill(255,100);
    alphaG.rect(random(width), random(height), 30,30); 
  alphaG.endDraw();

  // draw the second renderer into the window, so we can see something 
  image(alphaG, 0,0);
}

void keyPressed() {
   alphaG.save("alphatest.png"); 
   println("alphatest.png saved.");
}

Anyways, I hope what I'm asking makes some sense, and I would really appreciate anyone's help on this, thanks.

Best,
David

it'd be nice if one could simply say something like clone(x,y,w,h,newImage);

import processing.video.*;

Capture cam;

PImage camR;
PImage camG;
PImage camB;

void setup() {
  size(640, 480);
  colorMode(RGB,255);
  frameRate(1);
  String[] cameras = Capture.list();

  if (cameras == null) {
    println("Failed to retrieve the list of available cameras, will try the default...");
    cam = new Capture(this, 640, 480);
  } if (cameras.length == 0) {
    println("There are no cameras available for capture.");
    exit();
  } else {
    println("Available cameras:");
    for (int i = 0; i < cameras.length; i++) {
      println(cameras[i]);
    }

    // The camera can be initialized directly using an element
    // from the array returned by list():
    cam = new Capture(this, cameras[0]);
    // Or, the settings can be defined based on the text in the list
    //cam = new Capture(this, 640, 480, "Built-in iSight", 30);

    // Start capturing the images from the camera
    cam.start();
  }
}

void draw() {
  if (cam.available() == true) {
    cam.read();
  }
  camR = cam;
  camG = cam;
  camB = cam;
  cam.loadPixels();
  camR.loadPixels();
  camG.loadPixels();
  camB.loadPixels();

  for (int i = 0; i < cam.width*cam.height; i++){

    camR.pixels[i] = color(red(cam.pixels[i]));
    camG.pixels[i] = color(green(cam.pixels[i]));
    camB.pixels[i] = color(blue(cam.pixels[i]));
  }
  cam.updatePixels();
  camR.updatePixels();
  camG.updatePixels();
  camB.updatePixels();
  image(cam,0,0,200,150);
  image(camR,200,0,200,150);
  image(camG,200,150,200,150);
  image(camB,200,300,200,150);

}

I'm expecting to see the full RGB image when I run image(cam...), but I end up just getting the greyscale RED channel. The "camG" and "camB" are also displaying the red channel.

My goal is to put all of the images on the same png (they're 32x32, so it shouldn't be too large), and have a method that sets the item variable in each point of the map (each is an object that has data pertaining to it's location, whether or not the player or items are on that node, etc.) to a 32x32 square of pixels on the larger image containing all items. Is there a way to do this?

As main window will be projected in a wall, and I want to take ride of the mouse cursor, I wonder if there's a way to reproduce the first window content in a little area of the second window, and control mouse events from there. Event's handling would be quite simple, but I'm not sure on how to render content from one window to another.

I've been trying to solve this for days now, and it's not working. So I'm trying to translate a sketch from Processing to p5.js, and in the sketch, I need to loop through the pixels of an image. Here's the code:

<

script> var img;

function preload() { img = loadImage("img/wa.jpg"); } function setup() { createCanvas(1900, 700); imageMode(); background(255); image(img,0,0); img.loadPixels(); }

function draw() {

stroke(255,0,0); /* for (var j=0; j<img.height; j++){ for (var i=0; i<img.width; i++){ var pixcol = img.get(i,j); } }*/ }

The part that's commented out, the loop, is not working. The image size is 1600x800, so it is inside the canvas entirely. When I try to run the loop, the browser crashes. If I just ask img.get(x,y) for a particular pixel, let's say img.get(500,500), it works just fine. I can't possibly guess what's wrong, I'm new to p5, please help?

Thank you!

One solution may be to display the webcam feed (img or whatever) offscreen and use those offscreen pixel values to retrieve what you want. It seems kind of silly though. Am I missing something

I'm running p5.js: https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.4.8/p5.min.js

Image.get now seems to be returning null color values?!

See Dan Shiffman's Pointilism example: http://p5js.org/examples/examples/Image_Pointillism.php

Add println(pix); and you get [null,null,null,null]

Thanks

Mike

This is a beginning to a generative art program. I plan to have it so that rows of pixels are moved left and right based upon their "color distances" from the averages of their top and bottom neighbor rows. The part I am concentrating on is the moveRow function. The programmer can provide it a row to move and how many pixels to move it to the left (negative numbers) or the right (positive numbers) as parameters. Note that moved row wraps around the screen. I try the program and nothing moves! I think it may have to do with the background image "neon-smoke" not being updated somehow. Note that the set() function is supposed to do that, in my opinion. Threw in img.updatePixels() for good measure.

PImage img;

void setup()
{
    size(500,500);
    img = loadImage("neon-smoke.jpg");
    img.resize(width,height);
    image(img,0,0);
}

void draw() {
  image(img,0,0);
  moveRow(10,1);
}

void moveRow(int row, int offset) {
   
   color[] c = new color[width];
   int targetPos = 0;
   for (int i = 0; i < width; i++) {
     if ((i+offset) > width)
       targetPos = (i+offset)-width;
     else if ((i+offset) < 0)
       targetPos = width+offset+i;
     else
       targetPos = i+offset;
      c[i] = img.get(row,targetPos);
      //println(i,offset,i+offset,targetPos,img.get(row,targetPos),c[i]);
   }
   
   for (int i = 0; i < width; i++)
     img.set(row,i,c[i]);
   img.updatePixels();
}

Here is my code you can see it show the same 2 video in window

import processing.video.*;

Capture cam;

void setup(){
  size(1280,480);
  String[] cameras = Capture.list();
  cam = new Capture(this,640,480,cameras[1],30);
  cam.start();
}

void draw(){
  if(cam.available()){
    cam.read();
  }
  image(cam,0,0);
  image(cam,640,0);
}

Thank you!

I need to drawn a series of shapes depending on some external data. For how is structured that data, some shapes would be drawn multiple times, but what I actually want is to change their color. So, for example, if a square would be drawn once on the same area, I'd want to fill it with some greenish color, while if it would be drawn 5 times, I'd want to fill it with something yellowish.

I tried to check if blendMode() can accomplish that, but from what I've seen it can only increase\decrease the value of each channel, while I need to switch at some point to a different tonality (like from green to yellow and so on).

I've also check if I could directly manipulate the pixels of the sketch but that doesn't seem very efficient, and moreover I can't understand how work with the values I get: e.g. unless I'm wrong, with get(x,y) or pixels[], I can obtain a single int (with weird values, at lest for me)- not the color array I could work with.

(that's one simple code example I used to try get(x,y) or pixels[] command):

PGraphics pg;
void setup() {

  size(60, 60); 
  background(255);

  pg = createGraphics(40, 40);
  pg.beginDraw();
  noStroke();
  fill(255, 0, 0, 100);
  strokeWeight(1);
  ellipse(40, 40, 20, 20);
  pg.endDraw();

  color c = get(38,40);
   println(c);

}

void draw() {
}

So, could anyone help me, explaining if that's some way to work with blending, or what I'm doing wrong with get\pixels or if there's some other good way around? Obliviously, I'm trying to work with a solution like that because I would avoid to manipulate the data after reading it - in other words, avoiding to manually check what shapes are drawn more than once, and manually setting their colors to what I want.