Dissolve Grid

A grid that appears to dissolve as you mouse over it.

Source Code for this Sketch

// Size of each grid space
let size = 20

// Range of mouse influence
let influence = 7

// Background color
let bgcolor

function pickColor() {
	return color(random(0, 360), random(50, 100), 50)
}

function setup() {
	createCanvas(800, 400, P2D, canvas)
	rectMode(CENTER)
	colorMode(HSL)
	noStroke()

	bgcolor = pickColor()
}

// dissolve takes a grid position (not a coordinate) and calculates
// its current multiplier (0.0 to 1.0) based on the mouse position.
function dissolve(x, y) {
	let xf = mouseX/size
	let yf = mouseY/size

	let distance = sqrt(pow(xf-x, 2) + pow(yf-y, 2))
	return min(influence, distance) / influence
}

function mouseClicked() {
	bgcolor = pickColor()
}

function draw() {
	background(bgcolor)

	for (let i = 0; i <= width/size; i++) {
		for(let j = 0; j <= height/size; j++) {
			let factor = dissolve(i, j)
			fill(100)
			circle(i*size, j*size, (size*1.3)*factor)
		}
	}
}

You may use all or part of the p5 code seen on this page for your own creations, without restriction. Attribution is appreciated but not required.

This sketch also includes the following sources: p5common.js . Sources are available under their respective licenses.

See all p5.js sketches