The following is an exploration of the following line of BASIC.

10 PRINT CHR$(205.5+RND(1)); : GOTO 10

Basic

Grey and boring.

This is basic 10 PRINT. It randomly prints forwards and backwards slashes to the screen, column by column, row by row. Incredibly simple code but surprisingly nice looking results.

RGB

Ahhhh colour! That’s better….

The first thing we wanted to look at was adding colour into the mix! This could have been quite a simple change if we hadn’t gone about it the hard way. Instead we decided to make a custom function for this like the one described below. Then we select a random colour by using the random function while passing in an array:

return p.random([p.color(0,0,255), p.color(0,255,0), p.color(255,0,0)]);

This worked and of course we are now too stubborn to replace it with the much simpler method of just changing the p5 colour and still using line. Instead we stuck with our own solution which can be seen below:

RGB Overlap

If Jackson Pollock was a robot.

We then wanted to explore what would happen if the different colour channels had the ability to overlap and combine. Because of the way p5js works, we had to write our own function in order to achieve this effect. Pixel density was the main enemy here with there being a difference between screen pixels and pixels in the canvas.

The first step was differentiating between ‘forward’ and ‘backward’ slashes. This was done using the code below to find the centerline of the slash as i is increasing:

let x, y;
if(direction == FORWARD) {
	x = x0 + w - i - 1;
	y = y0 + i;
} else {
	x = x0 + i;
	y = y0 + i;
}

Once the centerline had been found, the strokewidth can be applied to catch all the pixels close enough to the centerline. This took a while to get the right form and gave some funky looking patterns while being constructed.

x -= Math.floor(stroke_width / 2);
for(let j = 0; j < stroke_width; j++) {
	if(x + j >= x0 && x + j < x0 + w) {
		const index = (y * p.width * d + x + j) * 4;
		p.pixels[index] += p.red(colour);
		p.pixels[index + 1] += p.green(colour);
		p.pixels[index + 2] += p.blue(colour);
		p.pixels[index + 3] += p.alpha(colour);
	}
}

This resulted in the images looking similar to the one below:

Filled Areas

This next exploration is as an alternative to the different coloured lines. This is mostly because I dont think they’ll look too good combined, but hopefully we’ll get around to adding some interactivity, so you can explore that yourself.

The algorithm here relies on each region formed by the slashes being a continuous ‘line’, made of triangles with at most two neighbours. This means that, for any given triangle, filling its region is only a matter of finding its two neighbours and following their ‘paths’ of neighbours. Since each triangle has at most two neighbours and one of those is its predecessor, this process never branches.

This effect was done with grayscale by setting all RGB values equal to the same randomised value:

and RGB by randomising which channel to fill in for each section:

And to fit the Fency theme of the different RGB colours we decided to make one with each channel coming from a corner. Just for funsies!