ProfAndreaPollini/index.html

## index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/p5@1.1.9/lib/p5.js"></script>
    <script src="https://unpkg.com/js-quadtree"></script>
</head>
<body>
    <script src="sketch.js"></script>
</body>
</html>

## sketch.js

class Tile {
    constructor(x,y, size) {
        this.x = x
        this.y = y
        this.size = size
        this.c  = color(random(255),random(255),random(255),random(100))
    }

    Draw() {
        square(this.x, this.y, this.size);
    }

    Enclosed(other) {
        return (this.x > other.x && this.x + this.size < other.x + other.size) &&
        (this.y > other.y && this.y + this.size < other.y + other.size)
    }

    Overlaps(other){
       const thisbottom = {
        x: this.x + this.size +10,
        y: this.y + this.size + 10
       }
       const otherbottom = {
        x: other.x + other.size+10 ,
        y: other.y + other.size+10
       }
       //Not (B.Bottom < A.Top || B.Top > A.Bottom || B.Right < A.Left || B.Left > A.Right)

       return ! (other.y + other.size< this.y  || other.y > thisbottom.y || otherbottom.x  < this.x  || other.x > thisbottom.x  )

    }
}


let test;
let target;
let squares;
let points;

function setup() {
    createCanvas(800,800)
    test = new Tile(50,50,30)
    target = new Tile(200,200,50)
    squares = []
    points = []
    //frameRate(20)

    /*for(let i = 0; i < 100; i++ )
     {

         let x = random(400)
         let y = random(400)
         let size = 400
         const tile = new Tile(x,y,size)
         while(size > 0 ) {

            if (squares.filter(sq => sq.Overlaps(tile) && !sq.Enclosed(tile)).length === 0) {
               squares.push(tile)
            } else {
                size *= 0.95
            }
        }

    }*/
}

function mouseMoved() {
    test.x = mouseX -  test.size/2
    test.y = mouseY -  test.size/2
}

function mousePressed() {
    console.log("click")

         let size = 400

         while(size > 4 ) {
            let x = mouseX
            let y = mouseY
            const tile = new Tile(x,y,size)
            if (squares.filter(sq => tile.Overlaps(sq) && !tile.Enclosed(sq)).length === 0) {
               squares.push(tile)
               return;
            } else {
                tile.Draw()
                size -= 2
            }
            console.log(size)
        }
}

function draw() {
    background(78)
    //fill(255)

    let size = 800
    //const c = color(random(255),random(255),random(255),60)

    squares.sort((a,b) => b.size > a.size).forEach(square => {
        //fill(255,0,0,20)
        fill(square.c)
        stroke(255)

        square.Draw()
    });
    //strokeWeight(4);
    points.forEach(p => point(p.x,p.y))

    let x = random(800)
    let y = random(800)
    points.push({x,y})
    colorMode(HSB, 100);
    const tile = new Tile(x,y,size)
    let from = color(random(100), random(100), random(100),random(100));
    let to = color(random(100),  random(100), random(100),random(100));
    //colorMode(RGB); // Try changing to HSB.

    tile.c = lerpColor(from, to, random())
    while(size > 2 ) {

        tile.size= size

       if (squares.filter(sq => tile.Overlaps(sq) && !tile.Enclosed(sq)).length === 0) {
          squares.push(tile)
          return;
       } else {
            //noStroke()
            //tile.Draw()

           size -= 2
       }
    //}

   }


}
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<script src="https://cdn.jsdelivr.net/npm/p5@1.1.9/lib/p5.js"></script>
	<script src="https://unpkg.com/js-quadtree"></script>
	</head>
	<body>
	<script src="sketch.js"></script>
	</body>
	</html>

	class Tile {
	constructor(x,y, size) {
	this.x = x
	this.y = y
	this.size = size
	this.c = color(random(255),random(255),random(255),random(100))
	}

	Draw() {
	square(this.x, this.y, this.size);
	}

	Enclosed(other) {
	return (this.x > other.x && this.x + this.size < other.x + other.size) &&
	(this.y > other.y && this.y + this.size < other.y + other.size)
	}

	Overlaps(other){
	const thisbottom = {
	x: this.x + this.size +10,
	y: this.y + this.size + 10
	}
	const otherbottom = {
	x: other.x + other.size+10 ,
	y: other.y + other.size+10
	}
	//Not (B.Bottom < A.Top \|\| B.Top > A.Bottom \|\| B.Right < A.Left \|\| B.Left > A.Right)

	return ! (other.y + other.size< this.y \|\| other.y > thisbottom.y \|\| otherbottom.x < this.x \|\| other.x > thisbottom.x )

	}
	}



	let test;
	let target;
	let squares;
	let points;

	function setup() {
	createCanvas(800,800)
	test = new Tile(50,50,30)
	target = new Tile(200,200,50)
	squares = []
	points = []
	//frameRate(20)

	/*for(let i = 0; i < 100; i++ )
	{

	let x = random(400)
	let y = random(400)
	let size = 400
	const tile = new Tile(x,y,size)
	while(size > 0 ) {

	if (squares.filter(sq => sq.Overlaps(tile) && !sq.Enclosed(tile)).length === 0) {
	squares.push(tile)
	} else {
	size *= 0.95
	}
	}

	}*/
	}

	function mouseMoved() {
	test.x = mouseX - test.size/2
	test.y = mouseY - test.size/2
	}

	function mousePressed() {
	console.log("click")

	let size = 400

	while(size > 4 ) {
	let x = mouseX
	let y = mouseY
	const tile = new Tile(x,y,size)
	if (squares.filter(sq => tile.Overlaps(sq) && !tile.Enclosed(sq)).length === 0) {
	squares.push(tile)
	return;
	} else {
	tile.Draw()
	size -= 2
	}
	console.log(size)
	}
	}

	function draw() {
	background(78)
	//fill(255)

	let size = 800
	//const c = color(random(255),random(255),random(255),60)

	squares.sort((a,b) => b.size > a.size).forEach(square => {
	//fill(255,0,0,20)
	fill(square.c)
	stroke(255)

	square.Draw()
	});
	//strokeWeight(4);
	points.forEach(p => point(p.x,p.y))

	let x = random(800)
	let y = random(800)
	points.push({x,y})
	colorMode(HSB, 100);
	const tile = new Tile(x,y,size)
	let from = color(random(100), random(100), random(100),random(100));
	let to = color(random(100), random(100), random(100),random(100));
	//colorMode(RGB); // Try changing to HSB.

	tile.c = lerpColor(from, to, random())
	while(size > 2 ) {

	tile.size= size

	if (squares.filter(sq => tile.Overlaps(sq) && !tile.Enclosed(sq)).length === 0) {
	squares.push(tile)
	return;
	} else {
	//noStroke()
	//tile.Draw()

	size -= 2
	}
	//}

	}




	}