P5.js Radial Art Sketch

This sketch was a lot of fun. I used looping to create a piece of radial art that includes creating a function to draw a line with parameters and then create a loop that rotates the canvas and executes the line. I also added a simple mouseClick function that stops the loop from continuing.

I also explored the text function for the first time during this sketch. It was pretty straight forward but allowed for a lot of customization. Things like textSize and stroke were both customizable via the P5.js library.

Colorwise, I came across a new color palette generator that serves up color combinations that are safe color combinations for contrast values based on WCAG accessibility guidelines.

Here’s a peek at the raw Javascript code to make this sketch work.

let rotateBy = 6;

function setup() {
	createCanvas(800, 600);
  background('#a0ffa5');
  angleMode(DEGREES);
}

function draw(){
  translate(150, 150);
  rotate(rotateBy);
  noFill();
  strokeWeight(2);
  rotateBy += 12;

  for (var i = 10; i < 100; i += 10) {
    stroke('#a0ffa5');
    line(i + 10, i * 20 , i + 7, 80); //x y x y
    stroke('#c850ae');
    textSize(100);
    text('music', i * 11, 200 - (i*2) ); //string, x, y
    stroke('#81cad3');
    point(0 + i, 1.25 * i);
  }
}
function mouseClicked(){
  noLoop();
}

Here’s a link to the Github repository for this P5.js Radial Art sketch.

P5.js Radial Art Sketch

Submit a Comment