Introduction to creative coding with p5.js

Let's go through the code line by line to understand what's happening:

var x = 0; // walker x position
var y = 0; // walker y position
var w = 0; // walker width
var hue = 0; // walker hue
var saturation = 0; // walker saturation
var brightness = 0; // walker brightness
var bgHue = 0; // background hue
var bgSaturation = 0; // background saturation
var bgBrightness = 0; // background brightness

These lines of code are declaring variables to store information about the walker and the background. For example, x and y store the position of the walker on the canvas, while hue, saturation, and brightness store the color of the walker. The variables starting with bg store information about the background color.

function setup() {
	createCanvas(1000, 1000);
	colorMode(HSB, 360, 100, 100, 100);


	// initialize background hue
	bgHue = random(0, 360);
	bgSaturation = random(5, 15);
	bgBrightness = random(90, 100);
	background(bgHue, bgSaturation, bgBrightness);


	// initialize walker hue as complementary color to background
	hue = (bgHue + 180) % 360;
	saturation = random(40, 70);
	brightness = random(20, 60);


	// initialize walker position to center of canvas
	x = width / 2;
	y = height / 2;
}

The setup function is called once at the start of the program. This is where we define the size of the canvas (1000 by 1000 pixels) and set the color mode to HSB (Hue, Saturation, Brightness).

Next, we set the background color by generating random values for the hue, saturation, and brightness within a certain range and calling the background function with those values. We then set the color of the walker to be a complementary color to the background by adding 180 to the background hue. The walker's saturation and brightness are also randomly generated within a certain range. Finally, we set the starting position of the walker to be in the center of the canvas by dividing the width and height by 2.

function draw() {
	moveWalker();
	drawWalker();
}

The draw function is called repeatedly, allowing us to create animations. In this code, moveWalker and drawWalker are two functions that are called in order, updating and rendering the walker on each iteration.

function drawWalker() {
	// change walker size with a random value between -2.1 and 2,
	//this will make the walker grow and shrink. there is a slight bias towards shrinking
	w = w + random(-2.1, 2);

	// Here we make sure the walker size is always between 0 and 100
	if (w < 0) {
		w = 0;
	} else if (w > 100) {
		w = 100;
	}

	// here we draw the walker as an ellipse with a stroke and fill
	// and we set the  fill to the walker's hue, saturation, and brightness
	strokeWeight(0.5);
	fill(hue, saturation, brightness, 100);
	stroke(bgHue, bgSaturation, bgBrightness, 100);
	ellipse(x, y, w, w);
}

The drawWalker() function is responsible for visualizing the walker on the canvas. The first thing this function does is to change the size of the walker by adding a random value between -2.1 and 2 to the w variable. This allows the walker to grow and shrink, but with a slight bias towards shrinking.

Next, there is a conditional statement that makes sure that the walker size remains between 0 and 100. If the w variable is less than 0, it sets it to 0. If it is greater than 100, it sets it to 100.

Finally, the function draws an ellipse using the ellipse() function, which takes in the x and y positions of the walker, as well as the width and height of the walker, w, and w. The strokeWeight() function is used to set the weight of the stroke around the ellipse to 0.5. The fill() function sets the fill color of the ellipse using the hue, saturation, and brightness variables, while the stroke() function sets the color of the stroke around the ellipse using the bgHue, bgSaturation, and bgBrightness variables.

function moveWalker() {
  // here we move the walker by a random amount between the width divided by 3. this will make the walker move in a random direction.
  x = x + random(-w / 3, w / 3);
  y = y + random(-w / 3, w / 3);


  if (x < -w / 2) {
    x = width + w / 2;
  } else if (x > width + w / 2) {
    x = -w / 2;
  }
  if (y < -w / 2) {
    y = height + w / 2;
  } else if (y > height + w / 2) {
    y = -w / 2;
  }
}

The moveWalker function is responsible for moving the walker around the canvas. The position of the walker is determined by its x and y values. The function first updates the x and y values by adding a random amount between -w/3 and w/3. This randomization makes the walker move in a random direction, creating a more organic movement. Then, the function checks if the walker has gone off the canvas and, if so, moves it back to the opposite side of the canvas.

This code provides a good starting point for exploring creative coding. You can modify the code to create different types of random walkers or to respond to different types of user input. With libraries like p5.js, the possibilities are endless, so dive in and start exploring the world of creative coding today!

Here is a couple of output from this simple program: