Submodule 16.1: p5.js Introduction

Site:	ΕΛ/ΛΑΚ Moodle
Course:	Study / Web Design and Web Development
Book:	Submodule 16.1: p5.js Introduction

Printed by:	Guest user
Date:	Sunday, 24 November 2024, 1:23 PM

Description

Introduction to p5.js
Examples of p5.js projects
How p5.js works

Introduction to p5.js
Examples of p5.js projects
Getting Started with p5.js I (v1)
Getting Started with p5.js II
Getting Started with p5.js III
Getting Started with p5.js IV

Introduction to p5.js

p5.js is a JavaScript library that enables creative expressions through programming.

With p5.js you can create sketches, animations, simulations or anything creative that comes to your mind. You can also manipulate audio, video, and images. More importantly, the library has pre-build functions which make all of the above far more easy than it would be if you created them from scratch.

This library is the "new version" of the Processing language. Processing is also a creative programming language. Its main difference with p5.js, is that processing is based on Java whereas p5.js is based on JavaScript.

Java-based applications are no longer supported by browsers and thus these applets are no longer accessible. This is why p5.js was invented, using all the features of processing and translate them into the current language of the browser - JavaScript.

See more about p5.js library

Examples of p5.js projects

Since p5.js is not yet widely used, it may be hard, in the beginning, to imagine what you can create with it.

Here are some useful links that will give you a general image of things you can create:

Also, an example of p5.js on youtube:

Getting Started with p5.js I (v1)

The p5.js Command Line Interface

We will use the Node.js to innstall the p5-manager on the computer.

Open your terminal and run this command to install the p5 manager:

npm install -g p5-manager

What that did was use NPM (a package manager for programs written in Node.js) to install the p5-manager library (that's us!) globally (-g) on your machine.

To see if it worked, try running

p5 --version

from your command line. If the command works and outputs a number, the CLI is installed correctly.

See more about p5-cli
See more about p5- manager

Getting Started with p5.js II

Setting up a p5 folder

Go to your folder location on your desktop and copy the address.

Open a cmd window/terminal and move to your desktop folder by pasting the address.

At the prompt type p5 g -b p5YourName to create your p5 folder.

Inside the libraries folder, there are 3 files.

p5.js is the main file which contains the information needed in order for p5.js to function
p5.sound.js enables p5.js to manipulate/create audio files
p5.dom.js enables us to interact with the HTML5 elements

Go to your P5 folder location and ...

create 3 sub-sub-folders,module08, module09 and module10

Getting Started with p5.js III

Initialize a Git repository

In your terminal move to your p5yourName folder by typing

cd p5yourName

Next, initialize a Git repository in the p5 folder by typing "git init".

Then, open the folder p5yourName in your editor and set up a ".gitignore" file with the contents: libraries. Don't forget to Save the file!

In your terminal, check your Git repository's status git status.

Add the files to the staging area "git add ."

Check again with a git status

Commit the current staging area to your Git repository 'git commit -m "p5 Initial Setup"'.

Check again with a git status

Getting Started with p5.js IV

p5 server

Open a new cmd window/terminal and move to the p5yourName folder.
At the prompt type p5 server. This will enable the p5-server module to your project.
Open your browser to the URL localhost:5555/index.html

Your server is ON!