irem.apaydin.final

let primaryColors = [

  { name: "Red", color: [255, 0, 0] },

  { name: "Yellow", color: [255, 255, 0] },

  { name: "Blue", color: [0, 0, 255] }

];

​

let colorMixMap = {

  "Red+Yellow": { color: [255, 165, 0], name: "Orange" },

  "Yellow+Blue": { color: [0, 255, 0], name: "Green" },

  "Red+Blue": { color: [128, 0, 128], name: "Purple" }

};

​

let selectedColors = [];

let mixedColor = null;

let mixedColorName = "";

let bgImage;

let brushImage;

let paletteImage; // Palette image

​

function preload() {

  bgImage = loadImage('background.jpg'); // Load background image

  brushImage = loadImage('brush.png'); // Load brush image

  paletteImage = loadImage('palette.png'); // Load palette image

}

​

function setup() {

  createCanvas(800, 400);

  textAlign(CENTER, CENTER);

  noCursor(); // Hide the default cursor

}

​

function draw() {

  background(bgImage); // Draw the background image

  noStroke(); // Remove strokes from shapes

​

  // Draw the palette

  let paletteX = 100;

  let paletteY = 100;

  let paletteWidth = 300;

  let paletteHeight = 200;

  image(paletteImage, paletteX, paletteY, paletteWidth, paletteHeight);

​

  // Position the color circles on the palette

  let colorPositions = [

    { x: paletteX + 140, y: paletteY + 150 }, // Red (moved below yellow and blue)

    { x: paletteX + 140, y: paletteY + 60 },  // Yellow

    { x: paletteX + 210, y: paletteY + 80 }   // Blue

  ];

​

  for (let i = 0; i < primaryColors.length; i++) {

    fill(primaryColors[i].color);

    ellipse(colorPositions[i].x, colorPositions[i].y, 60, 60); // Increase the size of the circles to 60x60

  }

​

  // Display instructions

  fill(0);

  textSize(16);

  text("Click two colors to mix!", 400, 80); // Adjust the text position slightly lower

​

  // Show selected colors

  if (selectedColors.length > 0) {

    for (let i = 0; i < selectedColors.length; i++) {

      fill(selectedColors[i].color);

      ellipse(300 + i * 100, 250, 50, 50);

    }

  }

​

  // Display the mixed color and its name

  if (mixedColor) {

    fill(mixedColor);

    rect(450, 150, 100, 100); // Move the mixed color square next to the palette

    fill(0);

    textSize(16);

    text("Mixed Color", 500, 220);

    text(mixedColorName, 500, 240);

  }

​

  // Draw the brush image at the mouse position

  let brushSize = 50; // Set brush size

  image(brushImage, mouseX - brushSize / 2, mouseY - brushSize / 2, brushSize, brushSize);

}

​

function mousePressed() {

  let colorPositions = [

    { x: 240, y: 250, radius: 30 }, // Red (new position below)

    { x: 240, y: 160, radius: 30 }, // Yellow

    { x: 310, y: 180, radius: 30 }  // Blue

  ];

​

  for (let i = 0; i < primaryColors.length; i++) {

    let dx = mouseX - colorPositions[i].x;

    let dy = mouseY - colorPositions[i].y;

    let distance = sqrt(dx * dx + dy * dy);

​

    if (distance <= colorPositions[i].radius) {

      // Add the color if not already selected

      if (!selectedColors.some(color => color.name === primaryColors[i].name)) {

        selectedColors.push(primaryColors[i]);

      }

​

      // Mix colors if two are selected

      if (selectedColors.length === 2) {

        let colorKey = `${selectedColors[0].name}+${selectedColors[1].name}`;

        let reverseKey = `${selectedColors[1].name}+${selectedColors[0].name}`;

​

        if (colorMixMap[colorKey]) {

          mixedColor = colorMixMap[colorKey].color;

          mixedColorName = colorMixMap[colorKey].name;

        } else if (colorMixMap[reverseKey]) {

          mixedColor = colorMixMap[reverseKey].color;

          mixedColorName = colorMixMap[reverseKey].name;

        } else {

          mixedColor = [128, 128, 128]; // Default gray color for unknown combinations

          mixedColorName = "Unknown Mix";

        }

​

        // Reset the selected colors for the next mix

        selectedColors = [];

        break; // Exit the loop

      }

    }

  }

}

​

​