2D Rubik's Cube - OpenProcessing

mySketch
xxxxxxxxxx
 
// Change these variables to change the appearance of the game:
var size = 600;
var numtiles = 4;
var edgesize = 3;
​
// Global variables. Don't change these!
var step = size/numtiles;
var cnv, buf;
var frame = 0;
var lastMouseX, lastMouseY;
var COL, ROW;
var dir = 'none'; // x, y, none (undetermined)
var mode = 'auto'; // mouse or auto
var amount;
​
function preload() {
  img = loadImage('myCanvas.png');
}
​
function setup() {
  cnv = createCanvas(size, size);
  buf = createGraphics(size, size);
  frameRate(30);
  background(100);
  init();
}
​
function moveRow(row, n) {
  copy(buf, 0, step*row, size, step, n, step*row, size, step);
  n = (n>=0)? n - size : size + n;
  copy(buf, 0, step*row, size, step, n, step*row, size, step);
}
​
function moveCol(col, n) {
  copy(buf, step*col, 0, step, size, step*col, n, step, size);
  n = (n>=0)? n - size : size + n;
  copy(buf, step*col, 0, step, size, step*col, n, step, size);
}
  
function startMove() {
  lastMouseX = mouseX;
  lastMouseY = mouseY;
  COL = parseInt(mouseX/step);
  ROW = parseInt(mouseY/step);
  buf.copy(cnv, 0, 0, size, size, 0, 0, size, size);
}
  
function endMove() {
  if (mode=='mouse') {
    if (dir=='x') {
      var n = step * (parseInt(mouseX/step) - COL);
      moveRow(ROW, n);
    }
    if (dir=='y') {
      var n = step * (parseInt(mouseY/step) - ROW);
      moveCol(COL, n);
    }
    dir = 'none';
  }
}
​
function shuffleboard(i) {
  if ((i%3)==0) buf.copy(cnv, 0, 0, size, size, 0, 0, size, size);
  switch (i%6) {
    case 0:
      ROW = parseInt(random(numtiles));
      amount = random([-1,1])*step;
      moveRow(ROW, amount/3);
      return;
    case 1:
      moveRow(ROW, 2*amount/3);
      return;
    case 2:
      moveRow(ROW, amount);
      return;
    case 3:
      COL = parseInt(random(numtiles));
      amount = random([-1,1])*step;
      moveCol(COL, amount/3);
      return;
    case 4:
      moveCol(COL, 2*amount/3);
      return;
    case 5:
      moveCol(COL, amount);
      return;
  }
}
​
function draw() {
  frame++;
  if (frame<=120) {
    if (frame>30) {
      // shuffle
      var i = frame - 31;
      shuffleboard(i);
    }
    if (frame==100) mode = 'mouse';
    return;
  }
  
  if (mode=='mouse' && mouseIsPressed) {
    var _dir = abs(mouseX - pmouseX) - abs(mouseY - pmouseY);
    if (_dir>0) {
      // move row in x dir
      if (dir=='none' || dir=='x') moveRow(ROW, mouseX - lastMouseX);
      if (dir=='y') {
        endMove();
        startMove();
      }
      dir = 'x';
    }
    if (_dir<0) {
      // move col in y dir
      if (dir=='none' || dir=='y') moveCol(COL, mouseY - lastMouseY);
      if (dir=='x') {
        endMove();
        startMove();
      }
      dir = 'y';
    }
  }
}
  
function mousePressed() {
  startMove();
}
  
function mouseReleased() {
  endMove();
}
​
​
// draws a default canvas
function init() {
  rectMode(RADIUS);
  ellipseMode(RADIUS);
  colorMode(HSB, 255);
  
  // black background
  var ctr = width/2;
  fill(40, 40, 40);
  rect(ctr, ctr, ctr, ctr);
  
  // image
  var ncircles = 6;
  for (var i=0; i<ncircles; ++i) {
    var rad = (size/2)*(1 - (i+1)/(ncircles+1));
    fill(random(150), 150, 150);
    ellipse(ctr, ctr, rad, rad);
  }
  
  // tiles
  fill(0, 0, 0);
  for (var i=0; i<numtiles+1; ++i) {
    rect(size/2, i*step, size/2, edgesize);
    rect(i*step, size/2, edgesize, size/2);
  }
}
​