My project in Creative Coding: Making Visuals with JavaScript course

Thoroughly enjoyable course Bruno and more importantly able to be done from home whilst I recover from workplace injuries. This course has opened my mind to options, but more importantly exercised my brain so that it doesn't become lumpy custard.

As Bruno mentioned early in the process mathematics plays a strong role in the development of creative visuals. One area that I wanted to use is fractals. Fractals are essentially a never-ending pattern. For those that read this I suggest having a look at this topic online.

As is everything with the Internet there are already those individuals who have created code for many things, including fractals. I simply utilised the basic coding that I found on the Internet, referenced that site in comments within the JavaScript code and played around with rgb randomising, placement randomising, and fiddling with shadow blur and colours. I added a GUI via Tweakpane to allow for some adjustments of the features. There are other parts of this code that could be tweaked such as the angles for the branches, but I've learnt enough for now to venture onto other experiments.

Code for this project is as follows with comments along the way. Feel free to use it.

//Final Project to Creative Coding: Making Visuals with JavaScript
//JavaScript code for creating the fractal tree came from the website:
//https://lautarolobo.xyz/blog/use-javascript-and-html5-to-code-a-fractal-tree/
//Reusing what is already established code saves reinventing the wheel, or
//in this case the fractal tree.

const canvasSketch = require('canvas-sketch');
const random = require('canvas-sketch-util/random');
const math = require('canvas-sketch-util/math');
const color = require('canvas-sketch-util/color');
const Tweakpane = require('tweakpane');

const settings = {
dimensions: [ 1080, 1080 ],
animate: true,
};

//parameter settings
const params = {
animate: false,
stars: 400,
len: 170,
angle: 0,
branchWidth: 10,
};

const sketch = () => {
return ({ context, width, height }) => {
context.fillStyle = 'black';
context.fillRect(0, 0, width, height);

// star value is simply a full stop
let star = '.';
// setting the star angle values placed here is only sets
// one star angle
let starAngle = random.range(0, 360);
// setting the number of stars initially
let numStars = params.stars;

// red, green and blue randomising
//placed here in the code the fractal tree is one colour per animated frame
const r = random.range(0, 255);
const g = random.range(0, 255);
const b = random.range(0, 255);

// looping through the total number of stars
for (let i = 0; i < numStars; i++) {
// if the star angle is set here then the angles are all randomised
// via the loop
// let starAngle = random.range(0, 360);

// setting the star colours can be achieved with these constants
// if you want multi-coloured stars
//const starR = random.range(0, 255);
//const starG = random.range(0, 255);
//const starB = random.range(0, 255);

context.beginPath();
context.save();
context.translate(0, 0);
context.rotate(i * starAngle * Math.PI / 180);
context.font = '' + random.range(10, 50) + 'px Serif';
context.fillStyle = 'white'; //color.style([starR, starG, starB]);
context.fillText(star, random.range(0, width), random.range(0, height));
context.restore();
};

// draw function
function draw(startX, startY, len, angle, branchWidth) {
// colour randomising here ensure that the tree is truly multi-coloured
// const r = random.range(0, 255);
// const g = random.range(0, 255);
// const b = random.range(0, 255);

context.beginPath();
context.save();

context.translate(startX, startY);
context.rotate(angle * Math.PI/180);
context.moveTo(0, 0);
context.lineTo(0, -len);
context.lineWidth = branchWidth
//context.strokeStyle = 'blue'
context.strokeStyle = color.style([r, g, b]);
context.shadowBlur = 20;
context.shadowColor = color.style([r, g, b]);
context.stroke();
// if the branch length is less than 10 then the routine stops
// despite fractals being never-ending, this routine breaks
// out of the drawing
if(len < 10) {
context.restore();
return;
}

// calling the drawing to repeat the branches
draw(0, -len, len*0.8, angle -20, branchWidth * 0.85);
draw(0, -len, len*0.8, angle +20, branchWidth * 0.85);

context.restore();
}
// initial call to draw the tree
draw(width * 0.5, height, params.len, params.angle, params.branchWidth);
};

};
// GUI via Tweakpane
const createPane = () => {
const pane = new Tweakpane.Pane();
let folder;
folder = pane.addFolder({ title: 'Fractal Tree '});
folder.addInput(params, 'stars', {min: 400, max: 10000, step: 1});
folder.addInput(params, 'branchWidth', {min: 1, max: 20, step: 1});
folder.addInput(params, 'len', {min: 1, max: 170, step: 1});
};

createPane();

canvasSketch(sketch, settings);