Every programmer like seeing their code produce something visual. Instead of abstract programming concepts flying all over the place, sometimes we just want to code something that looks beautiful to our eye. That’s when p5.js joins the game. In this article, we’re going to take a look at a p5.js coding example.
Table of Contents
What is p5.js?
In summary, p5.js is a visual Javascript library that lets you create whatever your want on an HTML canvas. Additionally, you can also play around with the HTML elements. Anyway, here’s the official p5.js documentation, we’ll get to know what p5.js is in one of our future content.
What are we gonna create?
We’ll be creating a rain simulation. Actually, “simulation” might not be the appropriate word for this but trust me, you’ll be amazed after we achieved creating something that much beautiful yet easy to build.
After everything, it’ll seem like that:
Starting with HTML and CSS
Before we jump into the Javascript and p5.js code, let’s create a simple HTML page for our canvas. And of course, we shouldn’t forget to add the p5.js library, I’ll use a CDN for it.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.10.2/p5.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<script src="sketch.js"></script>
</body>
</html>You might have noticed we didn’t create a canvas element, that’s because p5.js creates it for us so we don’t have to create it through HTML code.
html, body {
margin: 0;
padding: 0;
}
canvas {
display: block;
}Javascript & p5.js Code
Since we’ve written HTML and CSS, we can start writing Javascript. It’s helpful to mention, there’re 2 main functions in p5.js. These are draw() and setup(). If you’re not familiar with this pleasant Javascript library, it’s kinda necessary to know about these 2 functions.
The whole Javascript code is like that:
let step = 5;
let color1 = 255,
color2 = 120,
color3 = 255;
let randomArray = [],
randomY = [],
rainLen = [];
function setup() {
createCanvas(400, 400);
for (let i = 0; i < 100; i++) {
randomArray[i] = random(0, width);
randomY[i] = random(-1000, -200);
rainLen[i] = random(6, 15);
}
}
function draw() {
background(0);
// Color modifaction
color1 -= 20;
if (color1 < 10) color1 = 255;
color2 -= 15;
if (color2 < 10) color2 = 255;
color2 -= 17;
if (color2 < 10) color2 = 255;
stroke(color1, color2, color3);
strokeWeight(2);
for (let i = 0; i < 100; i++) {
randomY[i] = randomY[i] + step;
if (randomY[i] > 400) {
randomY[i] = 0;
}
step = random(4, 15);
line(randomArray[i], randomY[i], randomArray[i], randomY[i] + rainLen[i]);
}
}What this code does is basically create multiple lines on multiple locations on the screen, then change the color of each line dynamically. To not cause any lag, instead of creating new lines, the code resets the position of the line (raindrop) when it goes beyond the screen boundary.
The whole code looks like this in a single file:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.10.2/p5.js"></script>
<style>
html, body {
margin: 0;
padding: 0;
}
canvas {
display: block;
}
</style>
</head>
<body>
<script>
let step = 5;
let color1 = 255,
color2 = 120,
color3 = 255;
let randomArray = [],
randomY = [],
rainLen = [];
function setup() {
createCanvas(400, 400);
for (let i = 0; i < 100; i++) {
randomArray[i] = random(0, width);
randomY[i] = random(-1000, -200);
rainLen[i] = random(6, 15);
}
}
function draw() {
background(0);
// Color modifaction
color1 -= 20;
if (color1 < 10) color1 = 255;
color2 -= 15;
if (color2 < 10) color2 = 255;
color2 -= 17;
if (color2 < 10) color2 = 255;
stroke(color1, color2, color3);
strokeWeight(2);
for (let i = 0; i < 100; i++) {
randomY[i] = randomY[i] + step;
if (randomY[i] > 400) {
randomY[i] = 0;
}
step = random(4, 15);
line(randomArray[i], randomY[i], randomArray[i], randomY[i] + rainLen[i]);
}
}
</script>
</body>
</html>To watch how it looks in a Shorts video, here you go:
For more content like that, stay tuned!