I. Introduction

If you have taken Creative Coding Lab or The Nature of Code, you would be quite familiar with the tool that I’m introducing today. It’s called P5LIVE, a web-based live-coding editor built around the p5.js library. P5.js is a free and open-source JavaScript library that aims to create art and design with creative coding.

P5LIVE, made by Ted Davis, supports VJ for live performances, collaborative creative coding, and online teaching.

The main difference is the “cocoding” function, which supports multiple users to collaborate and write code in real-time.

II. Installation & Setup Guide

Since P5LIVE is web-based, you could simply get access to it via this link:

P5LIVE

<aside> 💭

(Even though it is not necessary to do so, there does exist a local offline-mode of P5LIVE:

• Download P5LIVE or Clone in Github Desktop
• Install node.js + npm package (binary installers)
• MacOS – open Terminal // Windows – open command prompt
• type cd + SPACEBAR + drag/drop P5LIVE folder into window, press ENTER
• type npm install, press ENTER
• type npm start, press ENTER (for custom port: npm start ####)
• P5LIVE is live! visit » http://localhost:5001
• type CTRL + C, to stop server.) </aside>

After entering the website, the code editing area will appear on the left, and the menu area will be on the right. I will reference Boyan’s description of the menu here:

“There are mainly four parts in the menu: P5 Live includes most important functions such as settings and references; Cocoding allows you to cooperate with others like Flok, you can even share the effect(screen) by running the codes and let others see the same motion; Sketchs lets you create new file/folder, upload or export the sketches; Recording let you can record the whole live coding process.”

III. First Example + Intermediate Example

Texts

Syntax:

text(str, x, y, [maxWidth], [maxHeight])

When entering the website, the first sketch you’ll see is :

//Default Code
function setup() {
	createCanvas(windowWidth, windowHeight) //This line is to define to width and height of the canvas
	
}

function draw() {
	
}

So let’s add four lines of code to create a very basic example that says “ALGORAVE++”.

//Text Example 1: Static Word
function setup() {
	createCanvas(windowWidth, windowHeight)
	
}

function draw() {
	background(0); //This line sets the background as black, and it prevents text from overlapping
	textSize(75); //This line defines the size of the text
	fill(192,255,0); //This line defines the color of the text with RGBA
	text("ALGORAVE++", 100, 150); //This line is about what text you're putting in, and the other two parameters are x and y position
}