# Pictures, pixelated, grids, flow.

**URL:** <https://discourse.processing.org/t/pictures-pixelated-grids-flow/40194>\
**Category:** Coding Questions\
**Created:** [December 17, 2022, 4:17pm UTC](https://discourse.processing.org/t/pictures-pixelated-grids-flow/40194 "2022-12-17T16:17:38Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![Jiang](https://avatars.discourse-cdn.com/v4/letter/j/3e96dc/32.png) [@Jiang](https://discourse.processing.org/u/Jiang)\
**Post date:** [December 17, 2022, 4:17pm UTC](https://discourse.processing.org/t/pictures-pixelated-grids-flow/40194/1 "2022-12-17T16:17:38Z")

</div>

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.

[![](https://img.youtube.com/vi/gc1Oq0FGVUk/maxresdefault.jpg "pixel") ](https://www.youtube.com/watch?v=gc1Oq0FGVUk)

---

<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:** [December 17, 2022, 5:33pm UTC](https://discourse.processing.org/t/pictures-pixelated-grids-flow/40194/2 "2022-12-17T17:33:31Z")

</div>

Hello @Jiang,

This is a good place to start:

- [Tutorials / Processing.org](https://processing.org/tutorials)

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:

```auto
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](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/9/1/91cb03554a76a0891db63b9a4b77fd3a955806b1.jpeg)

Start working in steps and build on that.

This was my next step:

```auto
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](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/a/e/aed2f1f6ec2b5ebeea5b5a54a95a27b75de2d4cf.gif)

I leave the rest to you.

Have fun!

`:)`

---

<div class="post-metadata">

**Author:** ![Jiang](https://avatars.discourse-cdn.com/v4/letter/j/3e96dc/32.png) [@Jiang](https://discourse.processing.org/u/Jiang)\
**Post date:** [December 28, 2022, 6:04am UTC](https://discourse.processing.org/t/pictures-pixelated-grids-flow/40194/3 "2022-12-28T06:04:20Z")

</div>

Thank you a lot. it really helps me.