Trying to turn static collage image into animation

Hi there, I am new to processing and trying to figure out an assignment for class. I am currently trying to figure out how to incorporate millis() into this code, to scale/descale the images I have and to add a colored stroke around each image. Does anyone know how I can do this?

PImage p0, p1, p2, p3, p4, p5, p6;

PImage [] picArray = new PImage [7];
void setup () {
  size(1000, 1000);
  p0 = loadImage("0.png");
  p1 = loadImage("1.png");
  p2 = loadImage("2.png");
  p3 = loadImage("3.png");
  p4 = loadImage("4.png");
  p5 = loadImage("5.png");
  p6 = loadImage("6.png");
  picArray[0] = p0;
  picArray[1] = p1;
  picArray[2] = p2;
  picArray[3] = p3;
  picArray[4] = p4;
  picArray[5] = p5;
  picArray[6] = p6;
void draw(){
    int m= millis();
    stroke (25);
    fill (m %255);
    picArray [p0, p1, p2, p3, p4, p5, p6];

void mouseMoved(){
  for(int b=0; b<100; b++){
  image(picArray[int(random(picArray.length))], random(width), random(height));

void keyPressed() {

if (keyCode == ENTER) {

saveFrame("####.tif"); }


You can do so by using the value you get from millis() within a method to resize you images. So something like img.resize(millis(), millis()); But don’t execute this! millis() returns 1000 for 1 second, so it will be at 10000 in 10 seconds, and so will be the size of your image. Do something like millis() / 100 or so. You can make different things by just having fun with it and trying out different formulae.
Same for the stroke. Just add a stroke(millis()); where you want it :wink:

1 Like