Genuary 3: Glitch Art - OpenProcessing

mySketch
xxxxxxxxxx
 
var gB, fullRes, windowRes, droppedImage, droppedImageSizeX, droppedImageSizeY, mainCanvas;
var requiredFrames = 120;
var imageDropped = false;
​
function setup() {
  pixelDensity(1);
  windowRes = min(windowWidth, windowHeight);
  mainCanvas = createCanvas(windowRes, windowRes);
  imageMode(CENTER);
  gB = createGraphics(fullRes = 256, fullRes);
  gB.colorMode(HSB, 360);
  gB.imageMode(CENTER);
  gB.noSmooth();
}
​
function draw() {
  gB.resetMatrix();
  gB.translate(fullRes * 0.5, fullRes * 0.5);
​
  if (!imageDropped) {
    background(360);
    noStroke();
    fill(0);
    textAlign(CENTER);
    textSize(windowRes * 0.05);
    text("Drag and drop\nimage here.", windowRes * 0.5, windowRes * 0.5);
    noFill();
    stroke(0);
    var animationProgress = (frameCount / requiredFrames) % 1;
    ellipse(windowRes * 0.5, windowRes * 0.5, map(cos(animationProgress * TAU), -1, 1, windowRes * 0.4, windowRes * 0.6));
  }
​
  if (imageDropped) {
    gB.loadPixels();
    for (var i = 0; i < 256; i += 1) {
      var xPos = random(gB.width);
      var yPos = random(gB.height);
      var distance = 1 + fullRes * 0.05 * random() * random() * random() * random();
      switch (floor(random(5) * random())) {
        case 0:
          for (var j = 0; j < distance; j += 1) {
            gB.set(xPos + j, yPos, gB.get(xPos, yPos));
          }
          break;
        case 1:
          for (var j = 0; j < distance; j += 1) {
            gB.set(xPos - j, yPos, gB.get(xPos, yPos));
          }
          break;
        case 2:
          for (var j = 0; j < distance; j += 1) {
            gB.set(xPos, yPos + j, gB.get(xPos, yPos));
          }
          break;
        case 3:
          for (var j = 0; j < distance; j += 1) {
            gB.set(xPos, yPos - j, gB.get(xPos, yPos));
          }
          break;
        case 4:
          for (var j = 0; j < 1 + distance * 0.5; j += 1) {
            for (var k = 0; k < 1 + distance * 0.5; k += 1) {
              if (random() < 0.5) {
                gB.set(xPos + j, yPos + k, gB.get(xPos, yPos));
              }
            }
          }
          break;
      }
    }
    gB.updatePixels();
    clear();
    displayBuffer(gB);
  }
​
  mainCanvas.drop(function(file) {
    droppedImage = loadImage(file.data, function() {
      imageDropped = true;
      var ratio = droppedImage.width / droppedImage.height;
      if (droppedImage.width > droppedImage.height) {
        droppedImageSizeX = fullRes;
        droppedImageSizeY = fullRes * droppedImage.height / droppedImage.width;
      } else {
        droppedImageSizeY = fullRes;
        droppedImageSizeX = fullRes * droppedImage.width / droppedImage.height;
      }
      gB.clear();
      gB.image(droppedImage, 0, 0, droppedImageSizeX, droppedImageSizeY);
    });
  });
​
​
}
​
function keyPressed() {
  if (key === "g") {
    saveGif('export', requiredFrames, {
      delay: 0,
      units: "frames"
    });
  }
}
​
function displayBuffer(buffer) {
  image(buffer, windowRes / 2, windowRes / 2, windowRes, windowRes);
}
​
function windowResized() {
  windowRes = min(windowWidth, windowHeight);
  resizeCanvas(windowRes, windowRes);
}