I wrote (what i thought would be) a simple function : get (x, y)-point's color values :

function getPix(_x, _y) { loadPixels(); let off = (_x + _y * width) * pixelDensity() * 4; let result = [ pixels[off], pixels[off + 1], pixels[off + 2], pixels[off + 3] ]; return result; }

The function seems to work fine : console.log(off) sends back the right index, according to the "_x" & "_y" values, and i get the background's RGBA values.

Now, in Draw, i have an object displaying something. (say a blue square at 0, 0)

var col = color(0, 0, 255, 255); obj.show() { fill(col); rect(0, 0, 10, 10); }

But if i am to call getPix(0, 0); again, i still get my background's color as a result : how comes ? My guess is : loadPixels() loads before my object is shown, but since i'm using this function for the first time, i surely have some misconceptions about the way it works.

The original code is slightly more complex, and i may give it if needed, but this exemple is still pretty much alike.

Thanks for any answer to come :)

Been trying to understand this for some time now. I'm doing some effects on a webCam feed with p5 but the pixel array keeps resetting. Added a picture so you can understand.

Have I missed something about the pixel array? You can see where I log in the upper right and how the array changes. The array changes back to the original image.

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 have a bouncing ball displaying over an image of the hit 90's R&B group, Boyz II Men (eh, I needed an image of anything).

To my ball class, there are several functions assigned. The ball collection array allows for many objects to be loaded as desired. Here, I chose 4 balls... one for each Boyz II Men singers (sure, why not?)

However, when I add in the brightness function to the update display, I only see one object, even though there is more than one object printing coordinates in the console.

//int n = 1000;
PImage img;


//DECALRE
Ball [] ballCollection = new Ball [4];



void setup ()  {
  size(600,600);
  frameRate(30);
  img = loadImage("/assets/Boyz2Men.jpg");
  img.loadPixels();
  loadPixels();
  smooth();

  //INITIALIZE
  for (int i = 0; i < ballCollection.length; i++)  {
  ballCollection[i] =new Ball(random(0,width), random(0,200));
  }


}

void draw()  {
  background(0);
  image(img, 0, 0);
  //CALL FUNCTIONALITY
  for (int i = 0; i < ballCollection.length; i ++)  {
  ballCollection[i].run();
  print(i, "\n");
  //updatePixels();
  }


}



class Ball {
  //GLOBAL VARIABLES
  float x = 0;
  float y = 0;
  float speedX = 4;
  float speedY = 0.5;

  //CONSTRUCTOR - INITIALIZE VARIABLES
  Ball(float _x, float _y) {
    x = _x;
    y = _y;
  }

  //FUNCTIONS - 
  void run() {
    display();
    move();
    bounce();
    gravity();
  }

  void move() {
    x += speedX; 
    y += speedY;
  }

  void bounce() {
    if (x > width) {
      speedX = speedX * -1;
    }
    if (x < 0) {
      speedX = speedX * -1;
    }
    if (y > height) {
      speedY = speedY * -1;
    }
    if (y < 0) {
      speedY = speedY * -1;
    }
  }

  void gravity() {
    speedY += 0.2;
  }


  void display() {
    print("X is ", x, " ", "Y is ", y, "\n");
    for (int x2 = 0; x2 < img.width; x2++) {
      for (int y2 = 0; y2 < img.height; y2++ ) {
        // Calculate the 1D location from a 2D grid
        int loc = x2 + y2*img.width;
        // Get the R,G,B values from image
        float r, g, b;
        r = red (img.pixels[loc]);
        //g = green (img.pixels[loc]);
        //b = blue (img.pixels[loc]);
        // Calculate an amount to change brightness based on proximity to the mouse
        float maxdist = 50;//dist(0,0,width,height);
        float d = dist(x, y, x2, y2);
        //print(d, "\n");
        float adjustbrightness = 255*(maxdist-d)/maxdist;
        r += adjustbrightness;
        //g += adjustbrightness;
        //b += adjustbrightness;
        // Constrain RGB to make sure they are within 0-255 color range
        r = constrain(r, 0, 255);
        //g = constrain(g, 0, 255);
        //b = constrain(b, 0, 255);
        // Make a new color and set pixel in the window
        //color c = color(r, g, b);
        color c = color(r);
        pixels[y2*width + x2] = c;

      }
    }
    updatePixels();
    ellipse(x, y, 20, 20);
  }
}

What is the reason as to why only one ball shows up? If I comment out the last for loop, I can see the picture clearly. Do I need to make another function called void bright()?

Thanks for any suggestions, I am stumped.

-Aaron

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!

Some code like this works fine in v2.2.1.

PGraphics pg;

public void setup() {
  size(800, 600);
  pg = createGraphics(width, height); 

  pg.loadPixels();
  for (int i=0; i < pg.width*pg.height; i++) 
    pg.pixels[i] = i % 255;
  pg.updatePixels();

  background(pg);
}

But in version 3.0 returns me that:

Exception in thread "Animation Thread" java.lang.NullPointerException
    at processing.awt.PGraphicsJava2D.getRaster(PGraphicsJava2D.java:2710)
    at processing.awt.PGraphicsJava2D.loadPixels(PGraphicsJava2D.java:2734)
    at myTemplate.setup(myTemplate.java:23)
    at processing.core.PApplet.handleDraw(PApplet.java:2373)
    at processing.awt.PSurfaceAWT$12.callDraw(PSurfaceAWT.java:1523)
    at processing.core.PSurfaceNone$AnimationThread.run(PSurfaceNone.java:316)

I don't understand why my P3 version is calling any AWT code: processing.awt.PGraphicsJava2D.loadPixels

Any idea?

I'm not a computer engineer (yet), it's a hobby, because I'm learning.

My PC:

-Core 2 Quad 2,4GHz (4 cores)

-4GB RAM

-Windows 7 64 bit

-Processing 2.2.1

In the last three years I have worked in an allRGB algorithm, and I want to improve that, just for learn:

http://allrgb.com/abner

http://elrincondeabner.blogspot.com.es/2015/05/allrgb.html

http://elrincondeabner.blogspot.com.es/2015/08/allrgb-mediante-algoritmo-genetico.html

I recently managed to apply dithering to my code, and works great!

But until today I have not managed to multithread my code. The code is VERY VERY long, so for simplicity I prefer to work whith a very simpler one. It is the problem:

How to multithread this code and use all of the 4 cores my PC have?

println("Start");
int a=0,b=0,c=0,d=0;
loadPixels();
for (int i=0; i<100000; i++){
  a=a+1;  //Thread 1
  b=b+2;  //Thread 2
  c=c+3;  //Thread 3
  d=d+4;  //Thread 4
}
updatePixels();
exit();
println("END");

I need the code, please.

Each inner square color takes the color of a corresponding pixel from a webcam feed. The outer square color was basically what the inner square color was last frame.

I use loadPixels() on the webcam to get the array and loop through each square object. It contains an x,y coordinate to take from the webcam feed.

I attempt to parse pixels correctly but for some reason I end up with only half of my image. I've tried many different values for pixel density but none seem to get everything. I don't even know the pixel density of the web cam feed definitely. 1. How do you determine this? 2. What am I doing wrong?

Here is the retrieval code:

function updateAndDisplaySquares() {
    var d = 4; // not sure if that number is correct...
    var w = capture.width;
    capture.loadPixels();
    for (var i = 0; i < squares.length; i++) {
        var x = squares[i].xCoordToGetFromCam;
        var y = squares[i].yCoordToGetFromCam;
        var c = [capture.pixels[(y*w*d+x)*d],
                 capture.pixels[(y*w*d+x)*d+1],
                 capture.pixels[(y*w*d+x)*d+2],
                 capture.pixels[(y*w*d+x)*d+3]];
        squares[i].update(c);
        squares[i].display();
    }
}

The full code...

EDIT: deleted bugged line

var capture;
var innerSquareSizePercent = 0.50;
var transparancyOfInnerSquare = 0.75;
var camWidth;
var camHeight;
var arrayOfDivisibles;
var currentDivisibleIndex; // which item in the array
var squares; // contains many Square class objects

function setup() {
    createCanvas(windowWidth, windowHeight);
    frameRate(30);
    console.log("window height is: " + windowHeight)

    capture = createCapture(VIDEO);
    capture.size(320, 240); // 320, 240
    capture.hide();
    camWidth = capture.width;
    camHeight = capture.height;

    arrayOfDivisibles = getDivisibleIntegers(camWidth, camHeight);
    currentDivisibleIndex = arrayOfDivisibles.length - 1;

    reconfigure();
}

function draw() {
    background(255);

    updateAndDisplaySquares();

    displayFrameRate();
}

function displayFrameRate() {
    var fr = Math.round(frameRate());
    fill(127, 80);
    textSize(20);
    text(fr, 20, 20);
}

function updateAndDisplaySquares() {
    var d = 4;
    var w = capture.width;
    capture.loadPixels();
    for (var i = 0; i < squares.length; i++) {
        var x = squares[i].xCoordToGetFromCam;
        var y = squares[i].yCoordToGetFromCam;
        var c = [capture.pixels[(y*w*d+x)*d],
                 capture.pixels[(y*w*d+x)*d+1],
                 capture.pixels[(y*w*d+x)*d+2],
                 capture.pixels[(y*w*d+x)*d+3]];
        // basically, we pass in the array, which is a slice of the giant pixels array.
        // This slice contains the desired pixel color in the form of an array.
        squares[i].update(c);
        squares[i].display();
    }
}

// square class
function Square(iSL, iX, iY) {
    this.sideLength = iSL;
    this.x = iX;
    this.y = iY;
    this.innerSideLength = this.sideLength * innerSquareSizePercent;
    this.offset = (this.sideLength - this.innerSideLength) / 2;
    this.innerX = this.offset + this.x;
    this.innerY = this.offset + this.y;
    this.squareCenterX = this.x + (this.sideLength / 2);
    this.squareCenterY = this.y + (this.sideLength / 2);
    this.xCoordToGetFromCam = Math.round((this.x * camWidth) / width);
    this.yCoordToGetFromCam = Math.round((this.y * camHeight) / height);
    this.c = color(255, 255, 255);
    this.previousColor = (255, 255, 255);

    this.update = function(col) {
        this.previousColor = this.c;
        this.c = col;
    }

    this.display = function() {
        noStroke();

        // outer
        fill(this.previousColor);
        rect(this.x, this.y, this.sideLength, this.sideLength);

        // inner
        fill(this.c, transparancyOfInnerSquare);
        rect(this.innerX, this.innerY, this.innerSideLength, this.innerSideLength);
    }
}

// gets divisible integers of the width and height
function getDivisibleIntegers(int1, int2) {
    var arr = [];
    var i;
    if (int1 > int2) {
        for (i = 3; i < int1; i++) {
            if (int1 % i === 0) {
                if (int2 % i === 0) {
                    arr.push(i);
                }
            }
        }
    }

    if (int2 > int1) {
        for (i = 3; i < int2; i++) {
            if (int2 % i === 0) {
                if (int1 % i === 0) {
                    arr.push(i);
                }
            }
        }
    }
    return arr;
}

function reconfigure() {
    squares = []; //# should this be  [] or {}?
    var squareSize = arrayOfDivisibles[currentDivisibleIndex];
    var numXSquares = Math.round(width / squareSize);
    var numYSquares = Math.round(height / squareSize);
    var numberOfSquares = numXSquares * numYSquares;

    console.log("num x squares is: " + numXSquares)
    console.log("num y squares is: " + numYSquares);

    for (var i = 0; i < numXSquares; i++) {
        for (var j = 0; j < numYSquares; j++) {
            var squareTopLeftX = i * squareSize;
            var squareTopLeftY = j * squareSize;
            var square = new Square(squareSize, squareTopLeftX, squareTopLeftY);
            squares.push(square);
        }
    }

    console.log("number of squares is: " + squares.length)
    console.log(squares)

}

get null pointer error on first line that tries to set rd to red pixel value.

 location=rr*width+cc;  
 println(rr,cc,location);
 rd=red(pixels[location]);
 grn=green(pixels[location]);
 blu=blue(pixels[location]);
 println("RED="+rd,"GREEN+"+grn,"BLUE+"+blu);

PGraphics3D pgOK = (PGraphics3D) createGraphics(width,height,OPENGL); pgOK.beginDraw(); pgOK.background(255); pgOK.endDraw(); println(pgOK.pixels == null); //false pgOK.dispose(); }

void draw(){ PGraphics3D pgErr = (PGraphics3D) createGraphics(width,height,OPENGL); pgErr.beginDraw(); pgErr.background(255); pgErr.endDraw(); println(pgErr.pixels == null); //true pgErr.dispose(); noLoop(); }

when save to an image file, it always get a totally black image, when convert to BufferedImage it's the same result!

I'm quite new in Programming. English is not my native language (and programming-language neither :P), but I will try to explain my question the best I can.

My main-question is: Where can I find the code of the methods loadPixels() and updatePixels()? I searched for the source code at GitHub but those two methods were not written there.

I want to write a program where many different pictures can be stored and drawn again; loadPixels und updatePixels store an image in an array called pixels[]. I want to modify those two methods, so I can store pictures in more than one array.

I would be glad if you guys can help me :)

xzap