Pixelating an image over time and looping in Processing

Question

I'm trying to load an image and pixelate it over time.

I have downloaded some code which enables me to pixelate the image depending on the location of the mouse.

I would like to slowly pixelate and loop back round similar to how interlacing works without any user input. (see gif for example)

I have tried with the (millis) function but i'm unable to do this.

interlacing example

PImage img;
int pixls=5;
color average;
int x,y,yinc;
void setup()
{
  size(710,710);
  background(255);
  noStroke();
  img = loadImage("p.jpg");
  img.resize(710,710);
}
void draw()
{
  background(0);
  loadPixels();
  pixls=int(map(mouseY,0,height,5,100));
  for(int i=0;i<pixls;i++)
  { 
    for(int j=0;j<pixls;j++)
    {
      float r = red(img.pixels[((height/pixls)*(j))*(width)+(width/pixls*(i))]);
      float g = green(img.pixels[((height/pixls)*(j))*(width)+(width/pixls*(i))]);
      float b = blue(img.pixels[((height/pixls)*(j))*(width)+(width/pixls*(i))]);
      fill(r,g,b);
      rect((width/pixls*(i)),(height/pixls)*(j),width/pixls,height/pixls);
      yinc=(height/pixls)*j;
    }
  }
}

UPDATED CODE

import java.awt.Robot;
PImage img;
int pixls = 0;
int x, y, yinc;
int XOffset = 0;
int YOffset = 30;
int counter = YOffset;
Robot robot;

void setup() {
  size(900, 900);
  //noCursor();
  noStroke();
  img = loadImage("p.jpg");
  img.resize(900, 900);
  //surface.setLocation(XOffset, YOffset);
}

void draw() {
  //loadPixels();
  frameRate(14);
  pixls = (int)map(mouseY, height, 20, 250, 20); //pixellation 
  for (int i = 0; i < pixls; i++) {
    for (int j = 0; j < pixls; j++) {
      float r = red(img.pixels[(height/pixls)*j*width+(width/pixls)*i]);
      float g = green(img.pixels[(height/pixls)*j*width+(width/pixls)*i]);
      float b = blue(img.pixels[(height/pixls)*j*width+(width/pixls)*i]);
      fill(r, g, b);
      rect((width/pixls)*i, (height/pixls)*j, width/pixls, height/pixls);
      yinc = (height/pixls)*j;
    }
} 
  try {
    robot = new Robot();
    robot.mouseMove(XOffset, counter); //counter is start of mouse
    if (counter > height + YOffset)   
   {
     // counter = YOffset + 30; // +30 for menubar
    }
  }
  catch (Exception e) {
    //println("error = ", e);
  }
  counter++; 
}

apodidae · Answer 1 · 2022-07-25T04:12:57.810

2

You can use robot.mouseMove() to move the mouse automatically and then have it loop back to the top of the image to repeat. Only downside is that the user loses control of the mouse while the app runs. On a Mac you have to use command-Q to quit.

import java.awt.Robot;

PImage img;
int pixls = 0;
int x, y, yinc;
int XOffset = 100;
int YOffset = 50;
int counter = YOffset;
Robot robot;

void setup() {
  size(710, 710);
  noStroke();
  img = loadImage("myImage.jpg");
  img.resize(710, 710);
  surface.setLocation(XOffset, YOffset);
}

void draw() {
  pixls = (int)map(mouseY, 0, height, 5, 350);
  for (int i = 0; i < pixls; i++) {
    for (int j = 0; j < pixls; j++) {
      float r = red(img.pixels[(height/pixls)*j*width+(width/pixls)*i]);
      float g = green(img.pixels[(height/pixls)*j*width+(width/pixls)*i]);
      float b = blue(img.pixels[(height/pixls)*j*width+(width/pixls)*i]);
      fill(r, g, b);
      rect((width/pixls)*i, (height/pixls)*j, width/pixls, height/pixls);
      yinc = (height/pixls)*j;
    }
  }
  try {
    robot = new Robot();
    robot.mouseMove(XOffset + 10, counter);
    if (counter > height + YOffset + 30) {
      counter = YOffset + 30; // + 30 for menubar
    }
  }
  catch (Exception e) {
    println("error = ", e);
  }
  counter++;
}

edited Jul 25 '22 at 04:12

answered Jul 22 '22 at 07:04

apodidae

1,988
2
5
9

I have used and modified your code to get it looking great visually, however I am having trouble either Getting the sketch to start again or looping the mouse position function (not sure which would be the best option) Thankyou – Paul Jul 22 '22 at 23:15
Hi, I have updated the code above – Paul Jul 23 '22 at 00:47
It's ok to slow the frameRate(), but the window has to be under the mouse, therefore you need to use surface.setLocation() and counter = YOffset +30. – apodidae Jul 23 '22 at 02:06
surface.setLocation(XOffset, YOffset); throws up an error (I am using processing ver 2.2.1) The program seems to do exactly what I want and the mouse is in the perfect position without that part of the code. Do you know how to restart or loop the mouse movement – Paul Jul 23 '22 at 07:14
When the robot has moved the mouse the length of the window reset the counter to YOffset so that it can start all over. Runs ok in ver 3.5.4. – apodidae Jul 23 '22 at 15:20
Do you mind providing the code, i'm a beginner. I appreciate the help – Paul Jul 23 '22 at 19:09
It's the same code that I posted in my answer. I'm not sure what the problem is. You may have to upgrade to version 3.5.4 if you are unable to run it in 2.2.1. – apodidae Jul 23 '22 at 19:55
With version 3.5.4 gives the error ArrayIndexOutOfBoundsException: 518400 at float r = red(img.pixels[(height/pixls)*j*width+(width/pixls)*i]); – Paul Jul 24 '22 at 20:17
Which example gives this error? My answer runs without error on my Mac BigSur. – apodidae Jul 25 '22 at 01:14

Pixelating an image over time and looping in Processing

1 Answers1

Linked