Mona Lisa pixels - OpenProcessing

mySketch
xxxxxxxxxx
 
var myImage;
var size = 20; // Initial shape size 
var transparency = 150; // Initial transparancey value
var shapeType = 1; // 1 = Circle, 2 = Square, 3 = triangle 
​
function preload() {
    myImage = loadImage("monalisa.jpeg"); // Upload Mona Lisa jpg
}
​
function setup() {
    createCanvas(600, 750);
    background(255);
​
    // Create HTML scrollbar 
    var slider = createSlider(0, 255, 150);
    slider.position(10, 10);
    slider.style('width', '100px');
    slider.input(() => {
      transparency = slider.value();
    });
  
    // Create HTML buttons and enable changing shape type 
    var circleButton = createButton('Daire');
    circleButton.position(10, 40);
    circleButton.mousePressed(() => {
        shapeType = 1; // Choose circle
    });
​
    var squareButton = createButton('Kare');
    squareButton.position(10, 70);
    squareButton.mousePressed(() => {
        shapeType = 2; //Choose Square
    });
​
    var triangleButton = createButton('Üçgen');
    triangleButton.position(10, 100);
    triangleButton.mousePressed(() => {
        shapeType = 3; // Choose Triangle 
    });
}
​
function draw() {
    noStroke();
    var x = floor(random(0, myImage.width));
    var y = floor(random(0, myImage.height));
    var pix = myImage.get(x, y);
​
    fill(red(pix), green(pix), blue(pix), transparency); // Color and Tranceparancy 
​
    // Draw shapes with mouse left click 
    if (mouseIsPressed && mouseButton === LEFT) {
        if (shapeType === 1) {
            ellipse(x, y, size); // Draw circle 
        } else if (shapeType === 2) {
            rect(x, y, size, size); // Draw square 
        } else if (shapeType === 3) {
            triangle(x, y, x + size, y, x + size / 2, y - size); // Draw triangle
        }
    }
}
​
// Keybord Interactions 
function keyPressed() {
    if (keyCode === UP_ARROW) {
        size += 5; // Increase shape size with up arrow key
    } else if (keyCode === DOWN_ARROW) {
        size = max(5, size - 5); // Decrease shape size with down arrow key 
    } else if (key === 's' || key === 'S') {
        saveCanvas('mona_lisa_interactive', 'jpg'); // Save the template when pressed s key
    }
}
​