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

**URL:** <https://discourse.processing.org/t/using-pixels-array-over-points-trying-to-move-pixels-xy-off-screen-like-points/24309>\
**Category:** Coding Questions\
**Created:** [October 3, 2020, 4:26pm UTC](https://discourse.processing.org/t/using-pixels-array-over-points-trying-to-move-pixels-xy-off-screen-like-points/24309 "2020-10-03T16:26:04Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![Gus\_Fermin](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gus_fermin/32/5851_2.png) [@Gus\_Fermin](https://discourse.processing.org/u/Gus_Fermin)\
**Post date:** [October 3, 2020, 4:26pm UTC](https://discourse.processing.org/t/using-pixels-array-over-points-trying-to-move-pixels-xy-off-screen-like-points/24309/1 "2020-10-03T16:26:04Z")

</div>

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](https://languagekings.wordpress.com/2013/07/24/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](http://learningprocessing.com/code/assets/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**

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

PImage img;
PGraphics imgPoints;
int imageScale = 2;

void setup() {
  size(500, 500, P3D);
  frameRate(30);
  img = loadImage("http://learningprocessing.com/code/assets/sunflower.jpg");
  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);

  img.loadPixels();
  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**

```auto
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);
   img = loadImage("http://learningprocessing.com/code/assets/sunflower.jpg");
   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){
  loadPixels();
    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];

    this.img.loadPixels();
    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;         
      }
    }   
  }
}

```

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [October 5, 2020, 10:28am UTC](https://discourse.processing.org/t/using-pixels-array-over-points-trying-to-move-pixels-xy-off-screen-like-points/24309/2 "2020-10-05T10:28:16Z")

</div>

Hello,

Cool stuff!

> [@Gus\_Fermin](#):
>
> A beginner here

I feel like that with every new topic I learn.

I was inspired and sharing my initial exploration of this:

> **Code here**
>
> ```auto
> // 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);
> img = loadImage("http://learningprocessing.com/code/assets/sunflower.jpg");
> //img.loadPixels();
> background(0);
>   
> img2 = createImage(400, 400, ARGB);
> //img2.loadPixels();
> 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.

`:)`

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/8/8001d4e5fb6f6d0a8b4462af184689d8b1a01b14.jpeg)