Member-only story

Visualize, Program, and Create with JavaScript in p5.js

Carter Hayes

·12.8k Followers· Follow

Published in Generative Design: Visualize Program And Create With JavaScript In P5 Js

7 min read · 1 week before

1.2k View Claps

77 Respond

Save

Listen

p5.js is a user-friendly coding library that makes it easy for artists, designers, and beginners to create visualizations, programmatically generate images, and design interactive graphics. With its simple yet powerful syntax, p5.js lowers the barrier to entry for learning to code and enables creative individuals to express themselves through technology.

Generative Design: Visualize, Program, and Create with JavaScript in p5.js

by Jerry Yarnell

4.5 out of 5

Language	:	English
File size	:	89929 KB
Text-to-Speech	:	Enabled
Enhanced typesetting	:	Enabled
Print length	:	502 pages
Lending	:	Enabled
Screen Reader	:	Supported

In this article, we will explore the capabilities of p5.js and how it can be used to create compelling visualizations, dynamic images, and interactive experiences. Through hands-on examples and clear explanations, we will delve into the core concepts of p5.js, including:

Setting up the p5.js environment
Drawing shapes and lines
Working with color and gradients
Animating and transforming objects
Responding to user input
Creating interactive graphics

Getting Started

To get started with p5.js, you can either use the online editor or download the library and set it up locally. The online editor provides a convenient way to experiment with p5.js without having to install anything. To access the online editor, visit https://p5js.org/editor/.

If you prefer to work locally, you can download the p5.js library from https://p5js.org/download/. Once downloaded, extract the ZIP file and copy the p5.js file into your project folder. You can then create a new HTML file and link to the p5.js file in the <head> section, as shown below:

<html> <head> <script src="p5.js"></script> </head> <body> <script> </script> </body> </html>

Basic Drawing

Once you have set up the p5.js environment, you can start drawing shapes and lines. p5.js provides a variety of functions for drawing basic shapes, such as rect(), circle(), and line(). These functions take different parameters to specify the position, size, and color of the shape.

For example, the following code will draw a red rectangle with a width of 100 pixels and a height of 50 pixels:

function setup(){createCanvas(400, 400); fill(255, 0, 0); rect(50, 50, 100, 50); // Draw a rectangle at position (50, 50) with a width of 100 pixels and a height of 50 pixels }

Working with Color and Gradients

p5.js provides a range of functions for working with color and gradients. You can specify colors using the rgb(), hsl(), or hex() functions. For example, the following code will draw a gradient from red to blue:

function setup(){createCanvas(400, 400); for (var i = 0; i

`Animation and Transformation`

p5.js makes it easy to animate and transform objects. You can use the translate(), rotate(), and scale() functions to move, rotate, and scale objects. For example, the following code will draw a circle that moves across the screen:

var x = 0; // Initialize the x position of the circle

function setup(){createCanvas(400, 400); fill(0, 255, 0); }

function draw(){clear(); translate(x, 0); // Move the circle to position (x, 0) circle(0, 0, 50); // Draw a circle at position (0, 0) with a radius of 50 pixels x += 1; }

`Responding to User Input`

p5.js provides several functions for responding to user input, such as mousePressed(), mouseMoved(), and keyPressed(). These functions can be used to create interactive graphics that respond to user actions.

For example, the following code will draw a circle that follows the mouse cursor:

var x = 0; var y = 0; // Initialize the y position of the circle

function setup(){createCanvas(400, 400); fill(0, 255, 0); }

function draw(){clear(); circle(x, y, 50); // Draw a circle at position (x, y) with a radius of 50 pixels }

function mouseMoved(){x = mouseX; y = mouseY; }

`Creating Interactive Graphics`

p5.js can be used to create a wide range of interactive graphics, such as games, simulations, and data visualizations. These graphics can be used to engage users, communicate information, and explore complex ideas.

For example, the following code will create a simple game where the user controls a circle to avoid colliding with obstacles:

var x = 200; var y = 200; var speed = 5; // Initialize the speed of the circle

var obstacles = []; // Initialize an array to store the obstacles

function setup(){createCanvas(400, 400); fill(0, 255, 0); }

function draw(){clear(); // Clear the canvas

circle(x, y, 50); // Draw a circle at position (x, y) with a radius of 50 pixels

Generative Design: Visualize, Program, and Create with JavaScript in p5.js

by Jerry Yarnell

4.5 out of 5