Pictures, pixelated, grids, flow.

Processing Coding Questions
1

I have seen an interesting effect and would like to ask you what it is called and what code is used. Thank you very much.

2 Likes
2

Hello @Jiang,

This is a good place to start:

There is a tutorial on Images and Pixels there!

Once you master the basics you can achieve the animation in the video.

A simple example of grabbing a section of an image and shifting it over:

int cols, rows;
PImage img, img2, ti;

void setup()
  {
  size(600, 600, P3D);  

  img = loadImage("http://learningprocessing.com/code/assets/sunflower.jpg");
  //img2 = img.copy();        // Not used here.
  //img2.resize(cols, rows);  // Not  used here.
  img.resize(width, height);
  
  println("img1: ", img.width, img.height);
  
  //println("img2: ", img2.width, img2.height); //Not used here.
  //noLoop();
  }
  
void draw()
  {
  background(0);  
  //println(frameRate);
  background(128);
  
  int xsz = 10;
  int ysz = 50;
  
  for (int y = 0, x = 0; y < img.height; y+=ysz, x+=xsz) 
    {
    ti = img.get(0, y, img.width, ysz);     // Get a row
    image(ti, x, y);                        // Display a row   
    }
  }

This is only an example to get you started.

image
image602×639 101 KB

Start working in steps and build on that.

This was my next step:

int cols, rows;
PImage img, ti;

public void settings() 
  { 
  size(300, 200, P2D);
  }

public void setup()
  {
  img = loadImage("http://learningprocessing.com/code/assets/sunflower.jpg");
  img.resize(width, height);
  println("img1: ", img.width, img.height);
  }
  
public void draw()
  {
  background(0);  
  println(frameRate);
  background(128);
  
  int xs = frameCount%width;          // modulo operator is useful for wrapping around

  // Shifting Right  
  ti = img.get(0, 100, xs, 100);      // Get a row
  image(ti, 0, 0);                    // Display a row      
  
  ti = img.get(xs, 100, width, 100);  // Get a row
  image(ti, xs, 100);                 // Display a row 
  }

flowers.gif.mov

I leave the rest to you.

Have fun!

:)

1 Like
3

Thank you a lot. it really helps me.

1 Like