ICM - Wasif & Anh: A Maze Me

ICM - Wasif & Anh: A Maze Me

Titled a maze me, but not really a maze? mostly because we like puns. It's an alternate reality where you can interact, dissect, and have control (or no control?) over how you are presented, and you gotta work real hard to get to the reality you want. We would love to extend it to have two different webcam feeds (or video feeds) and create a mashed potato of reality (or surveillance if it's webcam).

Documentation
P5.js code & sketch
var video;
var vScale = 16;
var puzzleSize = 4;
let positions;
let puzzleState;


function setup() {
  frameRate(30);
  // colorMode(HSB, 100);
  a = createCanvas(640, 480);
  pixelDensity(1);
  video = createCapture(VIDEO);
  video.hide();

  // Set random positions
  positions = _.times(puzzleSize * puzzleSize).map(i => {
    return {
      order: random(0, 100),
      pos: [i % puzzleSize, Math.floor(i / puzzleSize)]
    }

  })
  positions = _.sortBy(positions, p => p.order)

  // Construct puzzle state based on random positions {
  puzzleState = _.times(puzzleSize * puzzleSize).map(i => {
    return {
      x: positions[i].pos[0],
      y: positions[i].pos[1],
      ox: i % puzzleSize,
      oy: Math.floor(i / puzzleSize),
      num: i + 1,
      isEmpty: false,
      order: _.random(0, (puzzleSize * puzzleSize) - 1)
    }
  })

  // Add empty block
  puzzleState.push({
    x: puzzleSize - 1,
    y: puzzleSize - 1,
    isEmpty: true
  });
}


function draw() {
  video.loadPixels();
  background(255);

  // Draw 15 Rectangles out of 16
  puzzleState.forEach(elem => {
    const sizeX = Math.floor(width / puzzleSize);
    const sizeY = Math.floor(height / puzzleSize);
    const ox = elem.ox * sizeX;
    const oy = elem.oy * sizeY;
    const x = elem.x * sizeX; // (i % 4)
    const y = elem.y * sizeY; // Math.floor(i / 4)

    // Draw Rectangle
    if (elem.isEmpty) {
      rect(x, y, sizeX, sizeY);
    } else {
      rect(x, y, sizeX, sizeY);

      // Camera code to copy
      copy(video, ox, oy, sizeX, sizeY, x, y, sizeX, sizeY);
    }

  })

}

function findEmptyBlock() {
  return puzzleState.filter(i => i.isEmpty)[0]; // Find the object that has isEmpty true
}

function blockToMove(target) {
  return puzzleState.filter(block => block.x === target.x && block.y === target.y)[0];
}

//there are 15 source blocks & 1 empty block
//each object has an x,y value location
//swapping x,y location
function swap(src) {
  let empty = [findEmptyBlock().x, findEmptyBlock().y];

  //16 blocks: 1 source, 1 empty, 14 regular

  //map takes value and gives new return value
  puzzleState = puzzleState.map(block => {
    //check if this is source block
    //swap value with empty
    if (block.x === src[0] && block.y === src[1]) {
      block.x = empty[0];
      block.y = empty[1];
      return block

      //check if this is empty
      //swap value with source
    } else if (block.x === empty[0] && block.y === empty[1]) {
      block.x = src[0];
      block.y = src[1];
      return block
    }
    return block
  })
}

//check which key has been pressed, then move empty block
function keyPressed() {
  //find empty block
  let currentEmptyState = findEmptyBlock();
  let legalMoves = findLegalMoves({
    x: currentEmptyState.x,
    y: currentEmptyState.y,
  });

  //checking what placement + direction the empty block can or cannot be moved into
  if (keyCode === RIGHT_ARROW && legalMoves.LEFT !== null) {
    swap(legalMoves.LEFT);
  } else if (keyCode === LEFT_ARROW && legalMoves.RIGHT !== null) {
    swap(legalMoves.RIGHT);
  } else if (keyCode === DOWN_ARROW && legalMoves.UP !== null) {
    swap(legalMoves.UP);
  } else if (keyCode === UP_ARROW && legalMoves.DOWN !== null) {
    swap(legalMoves.DOWN);
  }

}

//movement code
//make the values go
function findLegalMoves(pos) {
  RIGHT = (pos.x + 1) <= puzzleSize - 1 ? [pos.x + 1, pos.y] : null;
  LEFT = (pos.x - 1) >= 0 ? [pos.x - 1, pos.y] : null;
  UP = (pos.y - 1) >= 0 ? [pos.x, pos.y - 1] : null;
  DOWN = (pos.y + 1) <= puzzleSize - 1 ? [pos.x, pos.y + 1] : null;

  //controls
  return {
    LEFT: LEFT,
    RIGHT: RIGHT,
    UP: UP,
    DOWN: DOWN,
  }
}

Documentation

We started by playing with colour filters and distortion/slit-scan effect. We were intrigued by the concept of potentially playing with individual pixels by moving them or layering them, exquisite corpse-style. Playing with the idea of pairing and duality/multiplicity was also something we were intrigued in.

image
image
image

Then we remembered about this ~~cursed~~ puzzle game.

image
image

Titled a maze me, but not really a maze? mostly because we like puns. It's an alternate reality where you can interact, dissect, and have control (or no control?) over how you are presented, and you gotta work real hard to get to the reality you want. We would love to extend it to have two different webcam feeds (or video feeds) and create a mashed potato of reality (or surveillance if it's webcam).