xxxxxxxxxx
82
let elemente = [];
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();
});