CODEWITHSUNDEEP
processingpixelinterlacing
Paul
Paul

Reputation: 31

Pixelating an image over time and looping in Processing

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++; 
}

Upvotes: 2

Views: 167

Answers (1)

apodidae
apodidae

Reputation: 2713

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++;
}

Upvotes: 2

Related Questions