alert("Controls:\nDrag with the click to select.\nClick (without dragging) to deselect."); var world; function setup() { createCanvas(windowWidth,windowHeight); world = new World(); world.selector(new Selector()); for(var i = 0; i < 30; i++) world.add(new Shape( Math.random() * windowWidth, Math.random() * windowHeight, 20, 20)); } function draw() { world.step(); background(255); world.draw(); } // Word class function World () { // I don't use Layers in this code, it is for other proyect 😁😁 I love the spoiler var layers = new Array(3).fill([]); var selector; this.selector = function(_selector) { var moved = false; var clicked = false; selector = _selector; var c = document.querySelector("canvas"); c.addEventListener("mousedown", function(e) { clicked = true; moved = false; }); c.addEventListener("touchstart", function(e) { clicked = true; moved = false; }); c.addEventListener("touchmove", function(e) { if(clicked) { selector.move(touches[0].x, touches[0].y); moved = true; } }); c.addEventListener("mousemove", function(e) { if(clicked) { selector.move(mouseX, mouseY); moved = true; } }); c.addEventListener("touchend", function() { selector.end(); if(!moved) { for(var i = 0; i < layers.length; i++) { for(var l = 0; l < layers[i].length; l++) { layers[i][l].selector(selector.area); } } moved = false; } clicked = false; }); c.addEventListener("mouseup", function() { selector.end(); if(!moved) { for(var i = 0; i < layers.length; i++) { for(var l = 0; l < layers[i].length; l++) { layers[i][l].selector(selector.area); } } moved = false; } clicked = false; }); c.addEventListener("mouseout", function() { selector.end(); clicked = false; }); c.addEventListener("touchcancel", function() { selector.end(); }); } this.add = function(shape, _layer) { var layer = _layer?_layer:0; layers[layer].push(shape); } this.step = function() { for(var i = 0; i < layers.length; i++) { for(var l = 0; l < layers[i].length; l++) { layers[i][l].step(); if(selector&&selector.selected) layers[i][l].selector(selector.area); } } } this.draw = function() { for(var i = 0; i < layers.length; i++) { for(var l = 0; l < layers[i].length; l++) { layers[i][l].draw(); } } if(selector!=undefined) selector.draw(); } } // Shape class function Shape (x, y, _width, _height, _type) { var type = _type?_type:"rect"; this.x = x; this.y = y; this.width = _width; this.height = _height; var col = color( Math.floor(Math.random() * 256), Math.floor(Math.random() * 256), Math.floor(Math.random() * 256) ); this.selected = false; this.selector = function(area) { var xs = area.xsxs&&this.y>ys&&this.xmaxx?maxx:xmaxy?maxy:x

Selection test