// www.digipool.info/pixelmachine

​

let fotoFileName = "foto.jpg";

let grain = 50;

let bgColor = 25; // Backgroundcolour: 0 - 255

​

let inPixelX = 0; // The position of a pixel

let inPixelY = 0;

let inPixelR = 0; // The color of a pixel

let inPixelG = 0;

let inPixelB = 0;

let g; // The width and height of a pixel

​

function pixelM() {

  // Here in the "pixelM" function you can 

  // change the code to create your own pixel design!

​

  fill(inPixelR, inPixelG, inPixelB);

  rect(inPixelX, inPixelY, g * 1, g * 0.5);

}

​

​

// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

// Please do not change the rest of the code!

​

let c;

let run = 0;

let f; 

let db;

let gx;

let gy;

let fx;

let fy;

let pColor;

let mode = 0;

let pColorR = [];

let pColorG = [];

let pColorB = [];

let pixelNr;

let buttonExMode = 0;

let buttonTimer = 0;

​

function preload() {

  f = loadImage(fotoFileName);

  db = loadImage("downloadbutton.png");

}

​

function setup() {

  c = createCanvas(windowWidth, windowHeight);

  c.drop(gotFile); // Event when a file is dropped onto the canvas

  imageMode(CENTER);

  ellipseMode(CENTER);

  rectMode(CENTER);

  noStroke();

}

​

function draw() {

  if (run == 0) {

    run = 1;

    background(bgColor);

    // image(f, width / 2, height / 2, width, height);

    image(

      f,

      width / 2,

      height / 2,

      width,

      height,

      0,

      0,

      f.width,

      f.height,

      CONTAIN,

      LEFT

    );

​

    gx = width / grain;

    gy = height / grain;

    if (gx > gy) {

      g = gy;

    } else {

      g = gx;

    }

    pColorR = [];

    pColorG = [];

    pColorB = [];

    for (fx = 0; fx < grain; fx = fx + 1) {

      for (fy = 0; fy < grain; fy = fy + 1) {

        inPixelX = fx * gx + gx / 2;

        inPixelY = fy * gy + gy / 2;

        pColor = get(inPixelX, inPixelY);

        pColorR.push(pColor[0]);

        pColorG.push(pColor[1]);

        pColorB.push(pColor[2]);

      }

    }

    if (mode < 2) {

      background(bgColor);

    }

​

    pixelNr = 0;

    for (fx = 0; fx < grain; fx = fx + 1) {

      for (fy = 0; fy < grain; fy = fy + 1) {

        inPixelX = fx * gx + gx / 2;

        inPixelY = fy * gy + gy / 2;

        inPixelR = pColorR[pixelNr];

        inPixelG = pColorG[pixelNr];

        inPixelB = pColorB[pixelNr];

        pixelNr = pixelNr + 1;

        if (mode < 3) {

          pixelM();

        }

      }

    }

  }

​

  // donwloadButton

  if (mode == 1) {

    fill(255);

    if (

      mouseX > width / 2 - 160 / 2 &&

      mouseX < width / 2 + 160 / 2 &&

      mouseY > height / 2 - 160 / 2 &&

      mouseY < height / 2 + 160 / 2

    ) {

      // mouse over

      if (buttonExMode != 3) {

        ellipse(width / 2, height / 2, 180, 180);

        fill(255, 0, 0);

        rect(width / 2, height / 2, 100, 100);

        image(db, width / 2, height / 2, 170, 170);

      }

      if (buttonExMode == 0) {

        buttonExMode = 1;

        run = 0;

      }

    } else {

      buttonExMode = 0;

      run = 0;

      ellipse(width / 2, height / 2, 160, 160);

      image(db, width / 2, height / 2, 150, 150);

    }

  }

​

  if (buttonExMode == 3) {

    saveCanvas(c, "PixelMachine", "jpg");

    buttonExMode = 0;

    run = 1;

  }

​

  // deBug infos

  /*

  fill(0);

  rect(0, 0, 300, 30);

  fill(255);

  text("buttonExMode=" + buttonExMode + " run=" + run, 10, 10);

  */

}

​

function mousePressed() {

  run = 0;

  if (buttonExMode != 1 && buttonExMode != 3) {

    mode = mode + 1;

  }

​

  if (mode > 3) {

    mode = 0;

  }

​

  if (buttonExMode == 1) {

    buttonExMode = 3;

  }

}

​

function gotFile(file) {

  run = 0;

  // If it's an image file

  if (file.type === "image") {

    f = createImg(file.data, "").hide();

  } else {

    console.log("Not an image file!");

  }

}

​