Growing Seasons

See when things grow

This sketch borrows some data from Wilde grüne Smoothies and presents it in a radial graph. Hover over an herb to see its growing seasons.

Source Code for this Sketch

let dropdown
let active
let midpoint

const seasons = ["🌞","🍂","❄","🐇"]
const months = ["January","February","March","April","May","June","July","August","September","October","November","December"]

const herbs = [
	{
		Name: "Ehrenpreis",
		Leaves: [0, 0, 1, 1, 1, 0, 0, 0, 1, 1, 1, 1],
	},
	{
		Name: "Baldrian",
		Leaves: [0, 0, 0, 0, 1, 1, 1, 1, 1, 0, 0, 0],
		Flowers: [0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0],
	},
	{
		Name: "Dost",
		Leaves: [0, 0, 0, 0, 0, 1, 1, 1, 1],
		Flowers: [0, 0, 0, 0, 0, 0, 1, 1],
	},
	{
		Name: "Engelwurz",
		Leaves: [0, 0, 0, 1, 1, 1],
		Flowers: [0, 0, 0, 0, 0, 1, 1, 1, 1],
		Seeds: [0, 0, 0, 0, 0, 0, 0, 1, 1],
	},
]

function radialpoint(r, deg) {
	let x = cos(deg-90)*r
	let y = sin(deg-90)*r

	return {x: x+midpoint.x, y: y+midpoint.y}
}


function setup() {
	createCanvas(600, 400, P2D, canvas)

	chrisDefaults()

	midpoint = {x: width-height/2, y:height/2}

	active = herbs[0]
	noStroke()
	frameRate(12)
}

function draw() {
	background(200, 100, 50)
	fill(100)

	// Herb selector
	textAlign(LEFT, TOP)
	const size = 16
	textSize(size)
	herbs.forEach((herb, index) => {
		if(active === herb) {
			fill(200, 100, 30)
			rect(8, index*(size+2)+size-2, textWidth(herb.Name)+4, size+4)
			fill(100)
		}
		if (UI.inRect(10, index*(size+2)+size, textWidth(herb.Name), size+2)) {
			active = herb
		}
		text(herb.Name, 10, index*(size+2)+size)
	})

	// Season Icons
	textSize(30)
	textAlign(CENTER, CENTER)
	seasons.forEach((season, index) => {
		let p = radialpoint(170, index*90)
		text(season, p.x, p.y)
	})

	// Month names
	textAlign(CENTER, CENTER)
	textSize(10)
	months.forEach((month, index) => {
		let degrees = (index+6)*30+15
		let p = radialpoint(160, degrees)
		push()
		translate(p.x, p.y)
		rotate(degrees)
		text(month, 0, 0)
		pop()
	})

	if (active) {
		// greenish
		fill(90, 70, 47)
		if("Leaves" in active) {
			active.Leaves.forEach((season, index) => {
				if(season) {
					// Normally 0 degrees is facing east. Our January is index 0.
					// In order to get January to point south we need to add 90
					// degrees (or 3 "seasons") to our index value.
					arc(midpoint.x, midpoint.y, 275, 275, (index+3)*30, (index+3)*30+28)
				}
			})
		}

		// blank the middle of the "dial" graph
		fill(200, 100, 50)
		circle(midpoint.x, midpoint.y, 225)

		// reddish
		fill(343, 69, 43)
		if("Flowers" in active) {
			active.Flowers.forEach((season, index) => {
				if(season) {
					arc(midpoint.x, midpoint.y, 220, 220, (index+3)*30, (index+3)*30+28)
				}
			})
		}

		// blank the middle of the "dial" graph
		fill(200, 100, 50)
		circle(midpoint.x, midpoint.y, 170)

		// yellow-orangish
		fill(42, 87, 48)
		if("Seeds" in active) {
			active.Seeds.forEach((season, index) => {
				if(season) {
					arc(midpoint.x, midpoint.y, 165, 165, (index+3)*30, (index+3)*30+28)
				}
			})
		}

		// blank the middle of the "dial" graph
		fill(200, 100, 50)
		circle(midpoint.x, midpoint.y, 115)

		fill(100)
		textAlign(CENTER, CENTER)
		textSize(20)
		text(active.Name, midpoint.x, midpoint.y)
	}
}

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