y+

let isDrawing = false;

let tool = "brush";

let emojis = ["😀", "🎨", "✨", "❤️", "🌟", "🎉"];

let randomEmoji = "";

let drawingLayer;

let bgColor = 255; // Variable for background color

let brushSize = 5; // starter brush size

​

function setup() {

  createCanvas(800, 600);

​

  // Create a separate drawing layer

  drawingLayer = createGraphics(width, height);

}

​

function draw() {

  // Redraw the background with the chosen color

  background(bgColor);

​

  // Draw the drawing layer

  image(drawingLayer, 0, 0);

​

  // Buttons

  drawButtons();

​

  // Check for drawing actions on the drawing layer

  if (isDrawing) {

    drawingLayer.stroke(currentColor);

    drawingLayer.strokeWeight(brushSize); // Use the current brush size

​

    if (tool == "brush") {

      drawingLayer.line(mouseX, mouseY, pmouseX, pmouseY);

    } else if (tool == "eraser") {

      drawingLayer.stroke(255); // Erases by drawing white

      drawingLayer.line(mouseX, mouseY, pmouseX, pmouseY);

    } else if (tool == "emoji") {

      drawingLayer.textSize(20);

      drawingLayer.text(randomEmoji, mouseX, mouseY);

    }

  }

}

​

function drawButtons() {

  let buttonY = height - 50; // Y position for all buttons

  let buttonWidth = 100; // Width for buttons

  let buttonHeight = 30; // Height for buttons

​

  // Brush Size Increase Button

  fill(180, 150, 80);

  rect(10, buttonY - 40, buttonWidth / 2, buttonHeight); // Position for Increase Size Button

  fill(0);

  text("+", 15, buttonY - 25);

​

  // Brush Size Decrease Button

  fill(80, 100, 180);

  rect(10 + buttonWidth / 2 + 10, buttonY - 40, buttonWidth / 2, buttonHeight);

  fill(0);

  text("-", 15 + buttonWidth / 2 + 10, buttonY - 25); // Text for Decrease Size Button

​

  // Button positions

  fill(160, 120, 90);

  rect(10, buttonY, buttonWidth, buttonHeight);

  fill(0);

  textSize(14);

  text("Brush", 40, buttonY + 20);

​

  fill(150, 100, 120);

  rect(120, buttonY, buttonWidth, buttonHeight);

  fill(0);

  text("Eraser", 150, buttonY + 20);

​

  fill(160, 150, 80);

  rect(230, buttonY, buttonWidth, buttonHeight);

  fill(0);

  text("Emoji Brush", 245, buttonY + 20);

​

  fill(100, 150, 150);

  rect(340, buttonY, buttonWidth, buttonHeight);

  fill(0);

  text("Clear", 375, buttonY + 20);

​

  fill(160, 130, 160);

  rect(450, buttonY, buttonWidth, buttonHeight);

  fill(0);

  text("Background", 465, buttonY + 20);

​

  fill(150, 120, 120);

  rect(560, buttonY, buttonWidth, buttonHeight);

  fill(0);

  text("Random", 580, buttonY + 20);

​

  // Save Button

  fill(120, 160, 150);

  rect(670, buttonY, buttonWidth, buttonHeight); // Position for Save Button

  fill(0);

  text("Save", 710, buttonY + 20);

}

​

function mousePressed() {

  let buttonY = height - 50;

  let buttonWidth = 100; // Width for buttons

  let buttonHeight = 30; // Height for buttons

​

  // Detect button presses based on mouse position

  if (

    mouseX > 10 &&

    mouseX < 10 + buttonWidth / 2 &&

    mouseY > buttonY - 40 &&

    mouseY < buttonY - 40 + buttonHeight

  ) {

    brushSize = constrain(brushSize + 2, 1, 50); // Increase brush size

  } else if (

    mouseX > 10 + buttonWidth / 2 + 10 &&

    mouseX < 10 + buttonWidth / 2 + 10 + buttonWidth / 2 &&

    mouseY > buttonY - 40 &&

    mouseY < buttonY - 40 + buttonHeight

  ) {

    brushSize = constrain(brushSize - 2, 1, 50); // Decrease brush size

  } else if (

    mouseX > 10 &&

    mouseX < 10 + buttonWidth &&

    mouseY > buttonY &&

    mouseY < buttonY + buttonHeight

  ) {

    tool = "brush";

  } else if (

    mouseX > 120 &&

    mouseX < 120 + buttonWidth &&

    mouseY > buttonY &&

    mouseY < buttonY + buttonHeight

  ) {

    tool = "eraser";

  } else if (

    mouseX > 230 &&

    mouseX < 230 + buttonWidth &&

    mouseY > buttonY &&

    mouseY < buttonY + buttonHeight

  ) {

    tool = "emoji";

    randomEmoji = random(emojis);

  } else if (

    mouseX > 340 &&

    mouseX < 340 + buttonWidth &&

    mouseY > buttonY &&

    mouseY < buttonY + buttonHeight

  ) {

    clearDrawingArea(); // Only clear the drawing area

  } else if (

    mouseX > 450 &&

    mouseX < 450 + buttonWidth &&

    mouseY > buttonY &&

    mouseY < buttonY + buttonHeight

  ) {

    changeBackgroundColor(); // Change background color

  } else if (

    mouseX > 560 &&

    mouseX < 560 + buttonWidth &&

    mouseY > buttonY &&

    mouseY < buttonY + buttonHeight

  ) {

    setRandomBrushColor(); // Change the brush color to a random one

  } else if (

    mouseX > 670 &&

    mouseX < 670 + buttonWidth &&

    mouseY > buttonY &&

    mouseY < buttonY + buttonHeight

  ) {

    saveArt(); // Save the art when Save button is pressed

  } else {

    isDrawing = true; // Start drawing on the canvas when clicking elsewhere

  }

}

​

function mouseReleased() {

  isDrawing = false;

}

​

// Clear only the drawing area

function clearDrawingArea() {

  drawingLayer.clear();

}

​

// change the background color to a random one

function changeBackgroundColor() {

  bgColor = color(random(255), random(255), random(255));

}

​

// set the brush color to a random color

function setRandomBrushColor() {

  currentColor = color(random(255), random(255), random(255)); // Set a random color

}

​

//  save the art as an image

function saveArt() {

  saveCanvas(drawingLayer, "Artwork", "png"); // Save the drawing layer as a PNG

}

​