SOURCE

let circles = []
let img;
let imgPath = 'https://i.loli.net/2018/10/19/5bc9db906f615.jpg'

function preload() {
	img = loadImage(imgPath)
}

function setup() {
	createCanvas(img.width, img.height)
	img.loadPixels();
}

function draw() {
	background(0)

	for (let i = 0; i < 10; i++) {
		let newC = newCircle()
		if (newC !== null) {
			circles.push(newC)
		}
	}

	for (let c of circles) {
		if (c.growing) {
			if (c.edges()) {
				c.growing = false;
			} else {
				for (let other of circles) {
					if (c === other) continue;
					let d = dist(c.x, c.y, other.x, other.y)
					if (d - 2 < c.r + other.r) {
						c.growing = false;
						break;
					}
				}
			}
		}
		c.run();
	}

	if( circles.length > 6000){
		noLoop()
	}
}


function newCircle() {

	let x = random(width)
	let y = random(height)

	let valid = true;
	for (let c of circles) {
		let d = dist(x, y, c.x, c.y)
		if (d < c.r) {
			valid = false;
			break;
		}
	}
	if (valid) {
		let c = img.get(x, y)
		return new Circle(x, y, c)
	} else {
		return null
	}
}

class Circle {
	constructor(x, y,  c) {
		this.x = x
		this.y = y
		this.r = 1
		this.c = c

		this.growing = true;
	}

	run() {
		this.grow()
		this.show()
	}

	show() {
		fill(this.c)
		noStroke()
		ellipse(this.x, this.y, this.r * 2)
	}

	grow() {
		if (this.growing) {
			this.r += 1;
		}
	}

	edges() {
		// this.r > 12 是后面填上去的
		return (this.x + this.r > width || this.x - this.r < 0 || this.y + this.r > height || this.y - this.r < 0 || this.r > 8 )
	}
}