Matisse

let img;

var xp;

var yp;

​

var preX;

var preY;

​

var sz;

var cl;

​

var dice;

​

function preload() {

  img = loadImage("matisse.png"); // Load the uploaded image

}

​

function setup() {

  createCanvas(800, 800);

  background(10);

​

  xp = width / 2; // set initial x position

  yp = height / 2; // set initial y position

​

  sz = 20; // initial size of the image snippets

​

  stepSz = 20;

  frameRate(20);

}

​

function draw() {

  dice = floor(random(0, 4));

  // 0, 1, 2, 3 represent random directions

​

  preX = xp;

  preY = yp;

​

  if (dice == 0) {

    // go left

    xp = xp - stepSz;

  } else if (dice == 1) {

    // go right

    xp = xp + stepSz;

  } else if (dice == 2) {

    // go up

    yp = yp - stepSz;

  } else if (dice > 2) {

    // go down

    yp = yp + stepSz;

  }

​

  // check the agent position

  // if it goes out of the canvas

  // reset its position to the center

  if (xp < 0 || xp > width || yp < 0 || yp > height) {

    xp = width / 2;

    yp = height / 2;

    preX = xp;

    preY = yp;

​

    stepSz = random(5, 150); // randomize step size

  }

​

  // Generate randomness for image snippet size and rotation

  let snippetSize = random(10, 50); // random size for the image snippets

  let angle = random(0, TWO_PI); // random rotation angle

​

  push();

  translate(xp, yp);

  rotate(angle); // rotate the image snippet randomly

  imageMode(CENTER);

  image(img, 0, 0, snippetSize, snippetSize); // draw the image snippet

  pop();

}