JAVASCRIPT WITH p5.JS
Get Started With p5.js for Javascript
On this page, you will learn how to set up a p5.js project
for JavaScript and make your first sketch.
Start by downloading and setting up p5.js
The easiest way to start is by using the empty example that comes with the p5.js complete download, which you can get by clicking the link.
After download:
After downloading the Complete Library of p5.js complete, extract all files and move the extracted folder to a chosen location. then downlaod and install a code editor of your choice (explained below).
The index.html you find in the extracted folder, links to the file p5.js. If you would like to use the minified version (compressed for faster page loading), change the link to p5.min.js.
if you don't want to install the p5.js setup file yet, you might also like to try using a free example and template from here. the link offers you some required facility for coding and editing JavaScript programs.
Required Environment for using p5.js for coding JavaScript
You can actually use any code editor of your choice. I normally
use Notepad++, for editing JavaScript codes, its highly effective, functional and free.
You can equally use Sublime Text 2 (see instruction for installation below) , other good editor include: Brackets, Atom and OpenProcessing.
Using Sublime text 2 editor:
download Sublime text 2 from this link:
-
Open Sublime.
-
Go to the File menu and choose Open...
-
choose the folder that your html and js files are located in.
-
On the left sidebar, you should now see the folder name at the top, with a list of the files contained in the folder directly below.
-
Click on your sketch.js file and it will open on the right where you can edit it.
-
Open the index.html file in your browser by double clicking on it in your file manager or by typing : file:///the/file/path/to/your/html in the address bar to view your sketch.
Making your First Sketch
In your editor you have just set up, type the following:
function setup() {
}
function draw() {
ellipse(50, 50, 80, 80);
}
This line of code means "draw an ellipse, with the center 50 pixels over from the left and 50 pixels down from the top, with a width and height of 80 pixels".
Save your sketch and refresh your page view in your browser. If you've typed everything correctly, you'll see this appear in the display window:
If you didn't type it correctly, you might not see anything. If this happens, make sure that you've copied the example code exactly: the numbers should be contained within parentheses and have commas between each of them, and the line should end with a semicolon.
Depending on the browser you are using, you can see your by looking at the JavaScript "console".
In Chrome - this is under View > Developer > JavaScript Console.
Second Example Sketch:
function setup() {
createCanvas(640, 480);
}
function draw() {
if (mouseIsPressed) {
fill(0);
} else {
fill(255);
}
ellipse(mouseX, mouseY, 80, 80);
}
The program creates a window that is 640 pixels wide and 480 pixels high, and then starts drawing white circles at the position of the mouse. When a mouse button is pressed, the circle color changes to black.
2. Create bubbles on the screen