Types of Random

Coloring grids using different types of random number generation. noise is re-seeded when the page is reloaded.

Source Code for this Sketch

class NoiseBox {
	static offset = 0
	static blockSize = 3
	static height = 50

	constructor(noisef) {
		this.noisef = noisef
		this.y = NoiseBox.offset

		// Place the next NoiseBox below this one
		NoiseBox.offset += NoiseBox.height + 10
	}

	label() {
		return this.noisef.toString().
			replace("function () {", "").
			replace("function (x, y) {", "").
			replace("\t\treturn color(", "").
			// remove trailing ) and }, trim whitespace
			slice(0, -1).trim().slice(0, -1)
	}

	draw() {
		// default noise detail
		noiseDetail(4, .5)
		for (let x = 0; x < width; x += NoiseBox.blockSize) {
			for (let y = this.y; y < this.y + NoiseBox.height; y += NoiseBox.blockSize) {
				fill(this.noisef(x, y))
				rect(x, y, NoiseBox.blockSize, NoiseBox.blockSize)
			}
		}

		let textGrow = this.label().includes("\n") ? 14 : 0

		fill(0, 0, 100, .9)
		rect(3, this.y + 3, 150, 15+textGrow)

		fill(280, 80, 50)
		text(this.label(), 8, this.y + 14)
	}
}

let boxes = []

function setup() {
	createCanvas(400, 1020, P2D, canvas)
	colorMode(HSL)
	noStroke()

	// Reduce framerate so "static" effect is less distracting
	frameRate(1)

	boxes.push(new NoiseBox(function () {
		return color(random(0, 100))
	}))

	boxes.push(new NoiseBox(function () {
		return color(randomGaussian(50, 40))
	}))

	boxes.push(new NoiseBox(function () {
		return color(random(30, 70))
	}))

	boxes.push(new NoiseBox(function () {
		return color(randomGaussian(50, 10))
	}))

	boxes.push(new NoiseBox(function () {
		return color(randomGaussian(20, 10))
	}))

	boxes.push(new NoiseBox(function () {
		return color(randomGaussian(70, 15))
	}))

	boxes.push(new NoiseBox(function (x, y) {
		return color(noise(x, y) * 100)
	}))

	boxes.push(new NoiseBox(function (x, y) {
		return color(noise(x / 20, y / 20) * 100)
	}))

	boxes.push(new NoiseBox(function (x, y) {
		return color(noise(x / 50, y / 50) * 100)
	}))

	boxes.push(new NoiseBox(function (x, y) {
		noiseDetail(3, .25)
		return color(noise(x / 20, y / 20) * 100)
	}))

	boxes.push(new NoiseBox(function (x, y) {
		noiseDetail(4, .25)
		return color(noise(x / 20, y / 20) * 100)
	}))

	boxes.push(new NoiseBox(function (x, y) {
		noiseDetail(5, .25)
		return color(noise(x / 20, y / 20) * 100)
	}))

	boxes.push(new NoiseBox(function (x, y) {
		noiseDetail(3, .7)
		return color(noise(x / 20, y / 20) * 100)
	}))

	boxes.push(new NoiseBox(function (x, y) {
		noiseDetail(4, .7)
		return color(noise(x / 20, y / 20) * 100)
	}))

	boxes.push(new NoiseBox(function (x, y) {
		noiseDetail(5, .7)
		return color(noise(x / 20, y / 20) * 100)
	}))

	boxes.push(new NoiseBox(function (x, y) {
		return color(noise(x, y / 30) * 100)
	}))

	boxes.push(new NoiseBox(function (x, y) {
		return color(noise(x / 30, y) * 100)
	}))

	// At 1 FPS there's a 1 second delay before
	// the first draw() call, so we should
	// draw during setup() also
	boxes.map((box) => { box.draw() })
}

function draw() {
	boxes.map((box) => { box.draw() })
}

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