JavaScript
Want to learn some JavaScript?
Below is a tutorial for making some procedural art (art made with code) using p5.js, a really cool JavaScript graphics library that was created with the intention of being accessible for folks learning how to code!
One of the coolest things about p5.js is that te team behind it has also made a cool, free editor online where you can start writing sketches, which is what they call p5.js projects. Go to editor.p5js.org, and you can immediately start coding. You can even make a free account to save your sketches!
Make a piece of code art for your phone wallpaper!
For this tutorial, we will build a sketch piece by piece. You can follow along by copying the new lines for each step into the sketch.js file that's opened when you make a new sketch at editor.p5js.org.
1. Variables, setup(), and draw()
// This is a comment in JavaScript! The computer won't read these lines// We are defining variables here to use in setup() and draw()let w = 300;let h = 300; function setup() { createCanvas(w, h); frameRate(1);} function draw() { background(100);}
2. Looping and drawing
Next we will add noLoop() to setup() so draw() only runs once.
The lines that have been changed from the last step are highlighted in yellow,
while new lines that have been added are highlighted in green.
// This is a comment in JavaScript! The computer won't read these lines// We are defining variables here to use in setup() and draw()let w = 300;let h = 300;let tileSize = 25; function setup() { createCanvas(w, h); // Just like in Neocities, you can press 'Ctrl + /' to toggle a commented line // frameRate(1); // Adding will make the code inside draw() run only once noLoop();} function draw() { // background(100); background(random(255)); fill(255); // Draw a square with x, y, and width square(150, 200, tileSize);}
3. Draw a series of squares
Next we will add for loop to draw multiple squares.
// We are defining variables here to use in setup() and draw()let w = 300;let h = 300;let tileSize = 25;let nCols = w / tileSize;let nRows = h / tileSize; function setup() { createCanvas(w, h); // This means the code inside draw() will only be run once noLoop(); // frameRate(1);} function draw() { // background(random(255)); background(0); fill(255); // Iterate through a loop to draw the different rows for (let row = 0; row < nRows; row++) { // Draw a square with x, y, and width square(150, row * tileSize, tileSize); }}
4. Adding columns to our rows
Next we'll nest another for loop four our columns inside the for loop for our rows
// We are defining variables here to use in setup() and draw()let w = 300;let h = 300;let tileSize = 25;let nCols = w / tileSize;let nRows = h / tileSize; function setup() { createCanvas(w, h); // This means the code inside draw() will only be run once noLoop(); // frameRate(1);} function draw() { // background(random(255)); background(0); fill(255); // Iterate through a loop to draw the different rows for (let row = 0; row < nRows; row++) { // Iterate through a loop to draw the different columns for (let col = 0; col < nCols; col++) { // Draw a square with x, y, and width square(col * tileSize, row * tileSize, tileSize); } }}
5. Randomize the color of the squares
// We are defining variables here to use in setup() and draw()let w = 300;let h = 300;let tileSize = 25;let nCols = w / tileSize;let nRows = h / tileSize; function setup() { createCanvas(w, h); // This means the code inside draw() will only be run once noLoop(); // frameRate(1);} function draw() { // background(random(255)); background(0); // Iterate through a loop to draw the different rows for (let row = 0; row < nRows; row++) { // Iterate through a loop to draw the different columns for (let col = 0; col < nCols; col++) { let r = random(255); let g = random(255); let b = random(255); fill(r, g, b); // Draw a square with x, y, and width square(col * tileSize, row * tileSize, tileSize); } }}
6. Apply colors randomly from an array
Coolors.co is a great place to get colors! Find a palette, click the three dots > Export > Code, and copy the array into a JavaScript array.
// We are defining variables here to use in setup() and draw()let w = 300;let h = 300;let tileSize = 25;let nCols = w / tileSize;let nRows = h / tileSize;// Find a color palette here: https://coolors.co/palettes/trendinglet colorArray = ["#3d348b","#7678ed","#f7b801","#f18701","#f35b04"] function setup() { createCanvas(w, h); // This means the code inside draw() will only be run once noLoop(); // frameRate(1);} function draw() { // background(random(255)); background(0); // Iterate through a loop to draw the different rows for (let row = 0; row < nRows; row++) { // Iterate through a loop to draw the different columns for (let col = 0; col < nCols; col++) { // let r = random(255); // let g = random(255); // let b = random(255); // Pick a color for a tile randomly from the array of hex colors defined above let rgb = random(colorArray); fill(rgb); // Draw a square with x, y, and width square(col * tileSize, row * tileSize, tileSize); } }}
7. Make it phone-sized and add some different shapes
// We are defining variables here to use in setup() and draw()let w = 300;let h = 600;let tileSize = 25;let nCols = w / tileSize;let nRows = h / tileSize;// Find a color palette here: https://coolors.co/palettes/trendinglet colorArray = ["#3d348b","#7678ed","#f7b801","#f18701","#f35b04"] function setup() { createCanvas(w, h); // This means the code inside draw() will only be run once noLoop(); // frameRate(1);} function draw() { // background(random(255)); background(0); noStroke(); // Iterate through a loop to draw the different rows for (let row = 0; row < nRows; row++) { // Iterate through a loop to draw the different columns for (let col = 0; col < nCols; col++) { // Pick a color for a tile randomly from the array of hex colors defined above let rgb = random(255); fill(rgb); // Draw a square with x, y, and width square(col * tileSize, row * tileSize, tileSize); // Generate a random number between 0 and 1 to randomly choose a scenario let choiceVal = random(0, 1); // Scenario 1 if (choiceVal < 0.2) { fill(random(colorArray)); // Draw a circle with x, y of the center and the diameter circle(col * tileSize + tileSize/2, row * tileSize + tileSize/2, 0.8*tileSize); } // Scenario 2 else if (choiceVal < 0.3) { fill(random(colorArray)); // Draw a triangle with points x1, y1, x2, y2, x3, and y3 on the bounding tile triangle( col * tileSize, row * tileSize, (col+1) * tileSize, row * tileSize, col * tileSize, (row+1) * tileSize, ); } // Scenario 3 else if (choiceVal < 0.4) { fill(random(colorArray)); // Draw a triangle again, but this time with the last point on a different // point on the bounding tile triangle( col * tileSize, row * tileSize, (col+1) * tileSize, row * tileSize, (col+1) * tileSize, (row+1) * tileSize, ); } } }}
