Interactive Self Portrait 09/09/2024

​

Instructions:

Press and drag the mouse on my picture draw.

Change the colour of the elipses by pressing 1 till 4.

Press d to make my picture disapear.

Press r to make my picture reapear.

Press s to save your awsome creation (browser might need permission).

​

Made by Ko de Beer for the Creative Coding classes at I/M/D.

*/

​

let img;

let colors = ["pink", "black", "brown", "aqua", "white"];

let value = 0;

​

// Array to store ellipse data

let ellipses = [];

​

// Boolean to track image visibility

let imageVisible = true;

​

// Load the image.

function preload() {

  img = loadImage("Pasfoto.jpg");

}

​

function setup() {

  createCanvas(300, 400);

  background(0);

}

​

function draw() {

  if (imageVisible) {

    background(img, [100]);

  } else {

    background("grey"); // Clear the canvas or use any background color when the image is hidden

  }

​

  // Draw all saved ellipses

  noStroke();

  for (let e of ellipses) {

    fill(e.color);

    ellipse(e.x, e.y, e.size);

  }

}

​

// Toggle the background color when the user presses a key.

function keyPressed() {

  if (key == "1") {

    value = 0; //pink

    //imageVisible = false; // Hide the image

  } else if (key == "2") {

    value = 1; //black

  } else if (key == "3") {

    value = 2; //brown

  } else if (key == "4") {

    value = 3; //aqua

  } else if (key == "5") {

    value = 4; //white

  } else if (key == "d") {

    imageVisible = false; // Hide the image

  } else if (key == "r") {

    imageVisible = true; // Show the image

  } else if (key == "p") {

    print(ellipses); // print the array

  } else if (key == "s") {

    saveCanvas("myDrawing", "png"); // Save the canvas as a PNG file

  }

}

​

//when the mouse button is pressed and dragged, draw an ellipse and save it to the array

​

function mouseDragged() {

  // Create an object to represent the ellipse

  let ellipseData = {

    x: mouseX,

    y: mouseY,

    size: 10,

    color: colors[value],

  };

​

  // Add the new ellipse data to the array

  ellipses.push(ellipseData);

}

​