MENU CLOSE

Roots and things

I’m still making generative drawing with p5.js (which I am calling “drawgramming”). This sketch generates random (and rather lovely) roots that have grown from a very slow snail. Try it out here >>> https://www.beccarose.co.uk/code/rootz/

I didn’t manage to figure out how to add a button to this to generate new snail-root-growing-formations (well, I did add a button but it broke the code!). Instead you have to refresh to make new snail-root-growing-formations.

Code:

// using transformations
// make 1 branch at a time. (so you don't have to go back and draw branches)
// computer keeps track using push and pop
// push forward and pop back

//define angle
var angle;
var imgW;
var imgH;
var img;
var rootButton;

var rootleng = 100;
var rootlengLeft = 130;
var rootlenRight = 105;

function preload() {
img = loadImage(“18.png”);
println(“errr yup should be loaded”);
}

function setup() {
createCanvas(900, 700);
stroke(0);
// branchButton = createButton(‘root me up’);
//branchButton.position(40, 20);

noLoop();

imageMode(CENTER);
}

function draw() {
angle = random(PI / 16, PI / 2);

//nf(num, left unit, right unit)
println(“angle = ” + nf(angle, 1, 3));

//start from the bottom, center of the canvas (using translate as not to complicate things by using X, Y coordinates
//this will be a global translates to all function as it is in the draw and called before the function

background(19, 200, 60);
translate((width / 2)+100, height / 4);

strokeWeight(3);
//call function
push();
roots(rootleng);
translate(-rootleng, -rootleng);
rootsLeft(rootlengLeft);
translate(-rootlengLeft, -rootlengLeft);
rootsRight(rootlenRight);
// branchButton.mousePressed(branch(100));
pop();

noStroke();
fill(19, 200, 60);
rect(-250, -270, 400, 400);
tint(125);
image(img, 0, 0, imgW, imgH);
}

//this will draw an individual branch
//generation changes the thickness of line each time
function roots(length) {

//draw a single line

line(0, 0, 0, length);
// move line to end of the single line
translate(0, length);
//shrink the line
length *= random(0.4, 0.9);

//now for getting fractal
if (length > 6) {
//get a random number to make n branches
//floor function makes intergers only

var n = floor(random(1, 4));
for (var i = 0; i < n; i++) { //log where you push the whole thing push(); rotate(random(-PI / 3, PI / 3)); roots(length) //pop out of the log pop(); } } } function rootsLeft(lengthLeft) { //draw a single line //RED //stroke(200, 40, 20); line(0, 0, 0, lengthLeft); // move line to end of the single line translate(0, lengthLeft); //shrink the line lengthLeft *= random(0.4, 0.9); //now for getting fractal if (lengthLeft > 4) {

//get a random number to make n branches
//floor function makes intergers only

var n = floor(random(1, 4));
for (var i = 0; i < n; i++) { //log where you push the whole thing push(); rotate(random(-PI / 3, PI / 3)); roots(lengthLeft) //pop out of the log pop(); } } } function rootsRight(length) { //draw a single line //BLUE //stroke(49, 69, 200); line(0, 0, 0, length); // move line to end of the single line translate(0, length); //shrink the line length *= random(0.4, 0.9); //now for getting fractal if (length > 6) {

//get a random number to make n branches
//floor function makes integers only

var n = floor(random(1, 4));
for (var i = 0; i < n; i++) {
//log where you push the whole thing
push();
rotate(random(-PI / 3, PI / 3));
roots(length)
//pop out of the log
pop();
}

}
}