Circles

A simple embellishment on the basic p5.js tutorial

Source Code for this Sketch

function setup() {
	createCanvas(600, 600, P2D, canvas)
	background(random(200, 255), random(200, 255), random(200, 255))
}

let x = 0
let y = 0

function draw() {
	if (!window.matchMedia("(pointer: coarse)").matches && mouseIsPressed === true) {
		fill(random(50, 255))
	} else {
		fill(random(50, 255), random(50, 255), random(50, 255))
	}

	// Only draw a new circle if the mouse has moved since the
	// last draw
	if (x !== mouseX || y !== mouseY) {
		circle(mouseX, mouseY, random(50, 100))
	}
	x = mouseX
	y = mouseY
}

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