p5.js P5.JS: Getting Started Matthew Wizinsky University of Cincinnati School of Design HTML + CSS + P5.js File Handling & Management Environment Canvas Coordinates Syntax Drawing Variables Mouse Position Programming Modes Conditionals Loops Color Color Modes Language Reference Examples based on processing.org and Casey Reas, Ben Fry: Processing: A Programming Handbook for Visual Designers And Artists (MIT Press) and p5js.org examples by Daniel Schiffman.
What is P5.js? P5.JS: Getting Started pg. 1 p5.js is a JavaScript library that starts with the original goal of Processing, to make coding accessible for artists, designers, educators, and beginners, and reinterprets this for today s web. Using the original metaphor of a software sketchbook, p5.js has a full set of drawing functionality. However, you re not limited to your drawing canvas, you can think of your whole browser page as your sketch! For this, p5.js offers add-on libraries that make it easy to interact with other HTML5 objects, including text, input, video, webcam, and sound.» Free to download, open source, communitiy-based development» Interactive web applications and prototypes» Libraries extend core capabilities: sound, text, webcam, &c.» In active development, new things on the way» Well documented with many tutorials www.p5js.org Open source refers to a computer program in which the source code is available to the general public for use and/or modification from its original design. Open source code is typically a collaborative effort where programmers improve upon the source code and share the changes within the community so that other members can help improve it further.
HTML + CSS + JavaScript P5.JS: Getting Started pg. 2 CSS / presentation What does it look like? Javascript / behavior What does it do? HTML / strucutre What does it mean?
HTML + CSS + P5.js P5.JS: Getting Started pg. 3 CSS and Javascript files (including your sketch and the p5 libraries) are separate files, linked to the HTML page.
File Handling & Management P5.JS: Getting Started pg. 4 Remember: Each sketch has its own directory/folder where the main sketch file is located (sketch.js) as well as the HTML file that contains it (index.html). Example: For a project named demo_01 the directory folder will be called demo_01 while the sketch itself will (by default) be called sketch.js From p5, you can reveal the content and location of your sketch folder by choosing View/Show sketch folder in the menu bar or by pressing command+k.
Environment P5.JS: Getting Started pg. 5 You can use the code editor of your choice or the beta version of the official p5 editor. Run: Compiles the code, opens a display window, and runs the program inside (you can also open file directly in a browswer). Stop: Terminates program. Tabs: Open file in the same project (i.e., html, css). Sidebar: Shortcuts to files in same project (i.e., html, css). New File: Creates new file in same project (i.e., js, html, css). New Project: New project with a new folder. Preferences: Editor preferences.
Canvas P5.JS: Getting Started pg. 6 The size of the display canvas is controlled with the createcanvas() function. This function has two parameters: the width first and the height second: createcanvas(100, 100); To create a canvas as large as the browser window: createcanvas(windowwidth, windowheight); To control the canvas position, you first create a canvas variable, then set its position. var cnv = createcanvas(100, 100); cnv.position(50, 100);
Coordinates P5.JS: Getting Started pg. 7 A position on the screen is comprised of an x-coordinate and a y-coordinate. The x-coordinate is the horizontal distance from the origin and the y-coordinate is the vertical distance. The origin is the upper left corner of the window or canvas. In a 400 pixel wide by 400 high window, [0, 0] is the upper vleft pixel, and the last visible pixel in the lower-right corner of the screen is at [399, 399]
Syntax P5.JS: Getting Started pg. 8 Elements of the language and how they are used: Comment Statement Statement Terminator Function Parameter //example statements line(10, 80, 30, 40); i = i + 1; var txt = Daniel ; print(txt);
Drawing P5.JS: Getting Started pg. 9 Defining the canvas size: createcanvas(300, 300); Setting the background color: background(0); //black background(255); //white background(255, 0, 0); //red in rgb syntax
Drawing Graphic Primitives P5.JS: Getting Started pg. 10 createcanvas(200, 200); //draws a point at x=10 and y=20 point(10, 20); // draws a line from x1, y1 to x2, y2 line(10, 10, 100, 100); // draws a rectangle over x1, y1, width, height rect(10, 10, 180, 140); // draws an ellipse x, y, width, height ellipse(120, 50, 40, 40); // draws a triangle x1, y1, x2, y2, x3, y3 triangle(120, 120, 80, 160, 160, 180); // draws a four sided polygon x1, y1, x2, y2, x3, y3, x4, y4 quad(38, 31, 86, 20, 69, 63, 30, 76);
Defining Stroke and Fill Color P5.JS: Getting Started pg. 11 stroke(120); // gray stroke stroke(0, 0, 255); // blue stroke stroke(200, 80); // gray fill, transparent nostroke(); // no Stroke fill(100); // gray fill fill(255, 0, 0); // red fill fill(0, 255, 0, 127); // green fill semi transparent nofill(); // no Fill
Variables P5.JS: Getting Started pg. 12 _Used to store values _Have a name and a value (can be anything but descriptive names are helpful!) _Case-sensitive _Name must not begin with special characters _There are different variable types, but they are all declared with var var name; // Declare a variable, type is unknown name = "Daniel"; // Assign a string variable var number = 32; // Declare and assign an integer variable var counter = 12.2; // Declare and assign a float variable print(number); print(name); print(counter);
Mouse Position P5.JS: Getting Started pg. 13 mousex: x-position of the mouse within the canvas mousey: y-position of the mouse within the canvas line(mousex, 20, mousex, 80); The boolean mouseispressed returns true while mouse is pressed, false if not. function draw() { if (mouseispressed) { fill(0); else { fill(255); rect(25, 25, 50, 50);
Programming Modes P5.JS: Getting Started pg. 14 The setup() function establishes initial settings for the program, which run only once! The draw() function makes it possible for a program to run continuously. This is required to create animation and interactive programs. Everything in draw() runs every single frame! function setup() { createcanvas(windowwidth, windowheight); background(255); //background draws only once if in setup nostroke(); fill(255, 204, 0); function draw(){ background(255); //background draws every frame if in draw ellipse(mousex, mousey, 50, 50);
Conditionals P5.JS: Getting Started pg. 15 Statements within the if section are only executed in case the condition (i < 35) is true; statements within the else section are executed only in case the condition is false. function setup() { createcanvas(300, 300); function draw(){ if (mousex < 150) { line( 0, mousey, 150, mousey ); else { line( 150, mousey, 300, mousey );
Loops P5.JS: Getting Started pg. 16 The for() loop uses defined conditions for (var i=0; i<10; i++) { line(0, i*5, 100, i*5); for (init; test; update) { do something;
Color P5.JS: Getting Started pg. 17 The default color mode for p5.js is RGB. var c1 = color(102, 102, 0); fill(c1); nostroke(); rect(30, 20, 55, 55); Syntax: color(gray) color(gray, alpha) color(value1, value2, value3) color(value1, value2, value3, alpha) color(hex) color(hex, alpha)
Color Mode P5.JS: Getting Started pg. 18 The default color mode for p5.js is RGB. You can use either RGB or HSB, corresponding to Red/Green/Blue and Hue/Saturation/Brightness. function setup() { createcanvas(255, 255); colormode(hsb, 255); function draw() { for (var i = 0; i < 255; i++) { for (var j = 0; j < 255; j++) { stroke(i, j, 255); point(i, j); By default, colors are defined by values between 0 and 255 using the RGB color model. The colormode() function is used to change the numerical range used for specifying colors and to switch color systems. colormode(mode); colormode(mode, range);
Language Reference P5.JS: Getting Started pg. 19 http://p5js.org/reference/ There are many examples in the tutorials section of the p5.js website: http://p5js.org/tutorials/ Take a look at the libraries section and see how the functionality of p5.js can be expanded for specific interests and subjects. http://p5js.org/libraries/