# Using Pixels[] Array over Points • trying to move Pixels(XY) off screen like Points

Hello there,

A beginner here trying desperately to understand the pixels array but feeling a bit lost / confused still. I have done a sketch using many `point()`, and was able to do what seems like a melting image successfully. However the `frameRate` I noticed dropped drastically.

I found this this tutorial online which makes a good comparison / case for using `pixels` over `point()`: processing-using-pixels-array-over-point

Using this tutorial I have tried to adapt my initial sketch using points, to plotting using `pixels` instead, but I am not able to move the pixels around or off the screen like I am able to in my initial sketch. Feel very unsure and confused about this code, even as is and the way I adapted it. Thank you for taking the time to read this.

Both sketches need a `PImage` , 200 x 200, I used the sunflower.jpg from Learning Processing, Dan Shiffman book. I would like to apply this to multiple images, but I am not there yet in terms of understanding, so just using one (1), for the moment… I feel I have to paste both codes (find below) to be able to address my question.

INITIAL SKETCH USING POINTS

``````// Flower_Photosynthesis_v3B
// v3B
// Gus Fermin 2020-09-22

PImage img;
PGraphics imgPoints;
int imageScale = 2;

void setup() {
size(500, 500, P3D);
frameRate(30);
imgPoints = createGraphics(width, height, P3D);
imgPoints.smooth(8);
}

void draw() {
lights();
imgPoints.beginDraw();
imgPoints.fill(0, 25);
imgPoints.noStroke();
imgPoints.rect(0, 0, width, height);

for ( int i = 0; i < img.width; i++ ) {
for ( int j = 0; j < img.height; j++ ) {

// Pixel location and color
int x = i * imageScale;
int y = j * imageScale;

int loc = (img.width - i - 1) + j*img.width;

color c = img.pixels[loc];
float sz = (brightness(c)/255)*(millis()/1000.0)/10.4;// 10.4 9.4 14.4  0.25 1.10 imageScale;

imgPoints.stroke(255, 100);
imgPoints.point((float)x*sz, (float)y*sz); // melting imgage coming from corner, intensity determined by 'sz' value
imgPoints.stroke(255);
imgPoints.point((int)x*sz+y, (int)y*sz+x, (int)x+millis()/1000.0); // melting image coming from top / center.
}
}
imgPoints.updatePixels();
imgPoints.endDraw();   /*For some reason I do not understand, the points look VERY different If this endDraw(), is INSIDE the `for` loop, vs where it is now OUTSIDE*/
translate(width/2, height/2);
imageMode(CENTER);
image(imgPoints, 0, 0);
println(frameRate);
}

``````

SKETCH USING PIXELS ARRAY INSTEAD OF POINTS

``````final int THOUSAND = 1000;
final int C_POINT_COUNT = 200 *THOUSAND;
final color C_PIXEL_COLOR = #FFFFFF;
PImage img;

RandomPoints2[] pointSets = new RandomPoints2[2];
int curPointsetIndex = 0;

void setup(){
size(displayWidth, displayHeight);
pointSets[0] = new RandomPoints2(img, C_POINT_COUNT);
pointSets[1] = new RandomPoints2(img, C_POINT_COUNT);
}

void draw(){
background(0);
// we choose different point sets

RandomPoints2 pointsToDraw = pointSets[curPointsetIndex];
curPointsetIndex++;
curPointsetIndex %= pointSets.length;

echoFrameRate("Drawing points with pixel array. ");
drawAllPointsViaPixelArray(pointsToDraw);  // this will be fast
}

void echoFrameRate(String s){
fill(#FF0000);
text(s + "Framerate: " + frameRate , 10, 10);
}

void drawAllPointsViaPixelArray(RandomPoints2 rp){
for(int i = 0;  i < rp.pointsX.length ; i++){
nirclePoint(rp.pointsX[i], rp.pointsY[i], width, pixels, C_PIXEL_COLOR); // we need those extra parameters
}
updatePixels();
}

/*** Plots ***/
void nirclePoint(float xx, float yy, int mWidth, color[] pixelz , color pixelColor){
int ixx = (int) xx;
int iyy = (int) yy+50;
int pixelIndex = iyy * mWidth + ixx;
if ( pixelIndex < 0  || pixelIndex >= pixelz.length ){
// we just don't plot pixels outside of range
//println("Pixel index is out of bounds: " + pixelIndex + " pixel array size: " + mPixelz.length);
}
else{
pixelz[pixelIndex] = pixelColor;
}

}

//This is just array of point X & Y coordinates wrapped into a class.

class RandomPoints2 {

float[] pointsX;
float[] pointsY;
PImage img;
int imageScale = 2;

RandomPoints2(PImage img, int qty) {
this.img = img;
initPoints(qty);
}

void initPoints(int pointCount) {
pointsX = new float[pointCount];
pointsY = new float[pointCount];

for (int i = 0; i < img.width; i++) {
for (int j = 0; j < img.height; j++) {
int x = i * imageScale;
int y = j * imageScale;

int loc = (img.width -i -1) + j * img.width;

color c = img.pixels[loc];
float sz = (brightness(c)/255)*(millis()/1000.0)/10.4;

pointsX[loc] =  (float)x*sz+y;
pointsY[loc] = (float)y*sz+x;
}
}
}
}
``````

Hello,

Cool stuff!

I feel like that with every new topic I learn.

I was inspired and sharing my initial exploration of this:

Code here
``````// Pixel Exploration
// v1.0.0
// GLV 2020-10-05
// Inspired by topic:
// https://discourse.processing.org/t/using-pixels-array-over-points-trying-to-moving-pixels-xy-off-screen-like-points/24309

PImage img, img2, img3;
float mod;
int counter;
int choice = 1;

void setup()
{
size(500, 500, P3D);
frameRate(60);
background(0);

img2 = createImage(400, 400, ARGB);
for (int i = 0; i < img2.width*img2.height ; i++)
{
img2.pixels[i] = color(0, 255);
}
//img2.updatePixels();
}

void draw()
{
//Sinusoidal modulation from 0 to 2
mod = 1+1*sin(counter*TAU/500-TAU/4);
counter++;

switch(choice)
{
case 1:
println("Plot 1");
plot1();
break;
case 2:
println("Plot 2");
plot2();
break;
case 3:
println("Plot 3");
plot3();
break;
case 4:
println("Plot 4");
plot4();
break;
default:
println("Woops!");
break;
}

surface.setTitle(str(frameRate));
}

//**********************************************************************************

void plot1()
{
fill(0, 5);
noStroke();
rect(0, 0, width, height);

for (int x = 0; x < img.width; x++ )
{
for (int y = 0; y < img.height; y++ )
{
// Pixel location and color
color c = img.get(x, y);
float sz = (brightness(c)/255)*mod;
set(int(x*sz), int(y*sz), c);
}
}
}

//**********************************************************************************

void plot2()
{
fill(0, 5);
noStroke();
rect(0, 0, width, height);

for (int x = 0; x < img.width; x++ )
{
for (int y = 0; y < img.height; y++ )
{
// Pixel location and color
color c = img.pixels[x+img.width*y];
float sz = (brightness(c)/255)*mod;
set(int(x*sz), int(y*sz), c);
}
}
}

//**********************************************************************************

void plot3()
{
fill(0, 5);
noStroke();
rect(0, 0, width, height);

for (int x = 0; x < img.width; x++ )
{
for (int y = 0; y < img.height; y++ )
{
// Pixel location and color
color c = img.pixels[x+img.width*y];
float sz = (brightness(c)/255)*mod;
//sz = 1; // Try this to see original image.
img2.pixels[int(x*sz)+int(y*sz)*400] = c;
}
}
img2.updatePixels();
image(img2, 0, 0);
}

//**********************************************************************************

void plot4()
{
// Sets pixel array to a fixed color with transparency
for (int i = 0; i < img2.width*img2.height ; i++)
{
img2.pixels[i] = color(0, 5);
}

for (int x = 0; x < img.width; x++ )
{
for (int y = 0; y < img.height; y++ )
{
// Pixel location and color
color c = img.pixels[x+img.width*y];
float sz = brightness(c)/255*mod;
//sz = 1; // Try this to see original image.
//c = color(255, 255, 0); //Test with fixed color
img2.pixels[int(x*sz)+int(y*sz)*400] = c;
}
}
img2.updatePixels();
image(img2, 0, 0);
}

void keyPressed()
{
counter = 0;
choice++;
if (choice >4)
choice = 1;
}
``````

I did not scrutinize your code and instead did an exploration of this.

`:)`

1 Like