let xElements = [];

let yElements = [];

let rotationElements = [];

let scaleElements = [];

let offsetX, offsetY;

let draggedItem = null; 

let elementIndexes = [];

​

function preload() {

  for (let i = 0; i < 93; i++) {

    elemente[i] = loadImage("elemente/element" + i + ".png");

  }

}

​

function setup() {

  createCanvas(windowWidth, windowHeight);

  background(235, 230, 230);

  imageMode(CENTER);

  randomizePositionsAndImages();

}

​

function randomizePositionsAndImages() {

  xElements = [];

  yElements = [];

  rotationElements = [];

  scaleElements = [];

  elementIndexes = [];

​

  for (let i = 0; i < 5; i++) {

    xElements[i] = random(width);

    yElements[i] = random(height);

    rotationElements[i] = random(TWO_PI);

    scaleElements[i] = random(0.75, 1.25);

    elementIndexes[i] = int(random(elemente.length)) % elemente.length;

  }

}

​

function draw() {

  background(235, 230, 230);

  for (let i = 0; i < 5; i++) {

    drawElement(xElements[i], yElements[i], rotationElements[i], scaleElements[i], elementIndexes[i]);

  }

}

​

function drawElement(x, y, rotation, scaleVal, index) {

  push();

  translate(x, y);

  rotate(rotation);

  scale(scaleVal); 

  image(elemente[index], 0, 0, elemente[index].width / 2, elemente[index].height / 2);

  pop();

}

​

function mousePressed() {

  for (let i = 0; i < 5; i++) {

    if (dist(mouseX, mouseY, xElements[i], yElements[i]) < elemente[elementIndexes[i]].width / 4) {

      draggedItem = "element" + (i + 1);

      offsetX = mouseX - xElements[i];

      offsetY = mouseY - yElements[i];

      break;

    }

  }

}

​

function mouseDragged() {

  if (draggedItem !== null) {

    let index = int(draggedItem.slice(-1)) - 1;

    xElements[index] = mouseX - offsetX;

    yElements[index] = mouseY - offsetY;

  }

}

​

function mouseReleased() {

  draggedItem = null;

}

​

document.getElementById("randomizeButton").addEventListener("click", function() {

  randomizePositionsAndImages();

});

​