Creative Coding with p5js

Matt Pantaleone,p5jscodegeneratorcreativejavascript

p5.js is a JavaScript library for creative coding. The code sample below generates an interesting visual pattern using nested loops and randomization.

Anyone can play with p5js at https://editor.p5js.org/ (opens in a new tab)

p5js output 1

javaScript
function setup() {
createCanvas(600, 600);
//noFill(0);
angleMode(DEGREES);
rectMode(CENTER);
frameRate(4);
//noLoop(); //before turning this off, try turning off lines 23 & or 26
//the choice of colors were inspired by the risograph
}
function draw() 
background(0, 1);
for (let x = 0; x < 12; x++) {
for (let y = 0; y < 12; y++) {
push();
translate(25 + x * 50, 25 + y * 50);
let b = int(random(3));
if (b == 0){
  blendMode(OVERLAY);
}
if (b == 1){
  blendMode(MULTIPLY);
}
if (b == 1){
  blendMode(EXCLUSION);
}
let r = int(random(4));
if (r == 0){
  rotate(45);
}
if (r == 1){
  rotate(-45);
}
if (r == 2){
  rotate(90);
}
if (r == 3){
  rotate(180);
}
let d = int(random(4));
if (d == 0){
  d = 40;
}
if (d == 1){
  d = 40;
}
if (d == 2){
  d = 60;
}
if (d == 3){
  d = 80;
}
let c = int(random(3));
if (c == 0){
  fill(255, 255, 0, 120);
}
if (c == 1){
  fill(255, 0, 255, 120);
}
if (c == 2){
  fill(0, 255, 255, 120);
}
let s = int(random(12));
if (s == 0){
  rect(0, 0, d, d, d/4); //replace argument 3 with 100 for a more interesting look
}
if (s == 1){
  rect(0, 0, d, d, d/4); //replace argument 3 with 80 for a cleaner look
}
if (s == 2){
  rect(0, 0, d, d, d/4); //replace argument 3 with 60 for a cleaner look
}
if (s == 3){
  //circle(0, 0, 25);
}
if (s == 4){
  //circle(0, 0, 50);
}
if (s == 5){
  //circle(0, 0, 100);
}
if (s == 6 || s == 7 || s == 8 || s == 9 || s == 10 || s == 11){ //i liked having a lot of open space, feel free to mute this section & change line 65's
}
}
if (frameCount == 2){ //adjust max framecount to your liking. I like 2 because it has fun 
noLoop();
}
}

p5js output 1

p5js output 1

© Pantaleone.net, All rights reserved.Tech & AI Article RSS Feed

Pantaleone @ X
Pantaleone @ Facebook
Pantaleone @ Instagram
Pantaleone NFT Art on OpenSea