Skip to content

Archived Content

Jump to bottom
Lauren Lee McCarthy edited this page Jul 4, 2020 · 13 revisions

Research documentation

This project developed out of a Fellowship with the Processing Foundation exploring the future of Processing with JavaScript. Documentation of research in process and references is below.

Starting points

Possibilities

  • what would be gained/lost by js, removing java altogether
  • processing-lite, js syntax
  • processing-js bridge to c++ compiles
  • installations without c++
  • processing as web dev

Approaches

  • a bunch of different scenarios - writing out what code for that would look like
  • speculative source code - examples or hack usable

Goals

  • processing identity - running in browser, barrier to entry low
  • primary audience - hard-core programmers, 19yr old design students
  • system+api
  • as a library, focus what processing does and doesn’t do

Questions

  • What is unique about javascript?
  • What are main ways it diverges/differs from java/processing?
    • dynamic vs static
    • loosely-typed vs strongly-typed
    • prototypal vs classical inheritance
    • functions as classes, constructors, methods
    • classical objects are hard, the only way to add a new member to a hard object is to create a new class. js objects are soft, a new member can be added to a soft object by simple assignment. shallow hierarchies are efficient and expressive, deep hierarchies are often inappropriate.
    • event driven vs linear/loop based
  • Focus on browser experience? What about node, etc.
  • Network connectivity, manipulating dom, interfacing with other elts outside canvas, user interface built-on elts that processing doesn't have, multiple drawing surfaces, interfaces with other libraries / also spec for other - maybe IDE adds in auto (like import library feature).
  • question - limited to canvas?

Considerations

Core classes

PImage, PFont, PShape and PShader, PGraphics (needed to create offscreen drawing surfaces), and PVector.

What js things could be improved?

  • libraries - documentready annoying, processing-js handles loading order for you (modernizer.js, queue.js), waits to execute
  • (controlled loading and execution built-in)
  • canvas/error handling

Other notes

  • Library spec?
  • dynamic typing - better typeof method, switch statement
  • strict typeof
  • enforce a type of code, scope
  • jslint strict mode
  • pokeyoke
  • easy way to define your own events, bind listeners

Current Processing JavaScript mode

  • processing.org/learning/javascript/
  • github.com/jeresig/processing-js
  • Processing.js is really two things: a Processing-to-JavaScript translator; and an implementation of the Processing API (e.g., functions like line(), stroke(), etc.) written in JavaScript instead of Java.
  • Nothing new to learn - Processing.js automatically converts your Processing code to JavaScript. This means that you don't have to learn JavaScript in order to run your code in a browser.
  • Does not currently support libraries.
  • Possible to write native JS code inside sketch, but not intended use.
  • Simulates synchronous I/O using Directives (preloading assets).

Notes / considerations

  • web developer tools
  • processing-js as entry point to web development
  • more transparent, more standard web structure
  • standard javascript - quasi auto complete, strict mode, viz of var scope, sequence
  • live, quasi-live coding environment, dev tools built in
  • also use processing methods
  • visually represent what's going on, in terms of inheritance
  • find in reference
  • not too cluttered
  • all the benefits, but executes like it's in the browser

Tools

  • JSHint - tool to detect errors and potential problems in JavaScript code and to enforce chosen coding conventions, flexible, easily adjusted to enforce particular coding guidelines and environment
  • JSLint

Editors

IDEs / learning

See References on IDE page github.com/lmccart/js-processing/wiki/IDE-thoughts#references

JS creative coding libraries

  • Plask - JS based creative coding env, Uses: V8, Skia, NodeJS, Cocoa & OpenGL, FreeImage, Syphon
  • Plask on github
  • two.js - two-dimensional drawing api geared towards modern web browsers. It is renderer agnostic enabling the same api to draw in multiple contexts: svg, canvas, and webgl. Aims to make the creation and animation of flat shapes easier and more concise, does not support text or image. Built in scene graph, animation loop, svg interpreter.
  • paper.js - vector graphics scripting framework that runs on top of the HTML5 Canvas. It offers a clean Scene Graph / DOM and a lot of powerful functionality to create and work with vector graphics and bezier curves, largely compatible with Scriptographer

Processing / JavaScript + other languages

Other native code on web

JavaScript engines / performance

JS desktop app platforms / libs

References and Research

JS and physical computing

Other references (for extensions)

Starting points

Goal

Basic concept description / goals

This Processing+JavaScript library starts with the original goal of Processing at it's beginning, to serve as a software sketchbook and to teach computer programming fundamentals within a visual context, and reimagines it for today, based on JavaScript instead of Java. The focus will first be on basic API and 2D drawing functionality, leaving more advanced graphics features, like shaders and 3D, for later.

start with canvas, reveal

something about syntax, API

Spec out and test a JavaScript library that would enable Processing-like syntax for drawing using Canvas and WebGL. It's both about the syntax and how to code.

Bring "Processing" ideas to JavaScript, rather than to emulate Processing/Java through JavaScript. Explore how to take positive parts of what Processing does, and see what the affordances of JS add/remove to the equation.

Involves both "language design" and "ide design".

Idea of Processing syntax-wise was to take some of the nastiness out of writing Java code (having to define classes, threaded animation loops, etc) before you could make things show up on screen. Starting from scratch with JavaScript as the base language would ideally 1) use the nice bits of JS, and 2) hide the uglier bits.

Current work on the Processing JS port is focused on being able to be code compatible and having things run right out of the box (which is great!), but comes at the cost of keeping some of Java's quirks, while potentially hiding the nicer parts of JS. (Strictly speaking, you can still do JS inside of that mode, but it's not necessarily the intent or the current setup.)

References

Processing core values

  • Programming in a visual arts context
  • Made for teaching programming
  • Bridge to other languages
  • Simple publishing for sharing
  • Provide educational infrastructure (tutorials, videos, books)
  • Community infrastructure
  • Extensible through libraries
  • Import/Export to diverse media and formats
  • Concise IDE, scale to professional IDE
  • Free to download
  • Open Source
  • Developed through workshops, forums, etc.

Instantiation Cases

Global Mode

// API 
preload(): runs once, first  
setup(): runs once, second 
draw(): loops, indefinitely  
createCanvas(w, h): creates a canvas element at the 0,0 with input size  
 
// CASE 1  
// Only setup(). 
// setup() runs once and createCanvas() gets called automatically with defaults. 
function setup() { 
  background(255, 0, 0); 
  noStroke();  
  ellipse(0, 0, 50, 50); 
}  
 
// CASE 2  
// Only setup() and createCanvas().  
// setup() runs once and createCanvas() returns a pointer to the canvas created  
// with the input size, at 0,0.  Holding the pointer is optional.  
function setup() { 
  createCanvas(400, 400);  
  background(255, 0, 0); 
  noStroke();  
  ellipse(0, 0, 50, 50); 
}  
 
// CASE 3  
// Only draw().  
// createCanvas() is called automatically with defaults. 
function draw() {  
  ellipse(random(0, 400), random(0, 400), 50, 50); 
}  
 
// CASE 4  
// setup() and draw() without createCanvas().  
// createCanvas() is called automatically with defaults. 
function setup() { 
  background(255, 0, 0); 
}  
function draw() {  
  ellipse(random(0, 400), random(0, 400), 50, 50); 
}  
 
// CASE 5  
// setup() and draw() with createCanvas(). 
function setup() { 
  createCanvas(400, 400);  
  background(255, 255, 0); 
}  
function draw() {  
  ellipse(random(0, 400), random(0, 400), 50, 50); 
}  
 
// CASE 6  
// setup() and draw() with createCanvas(), holding pointer 
var canvas;  
function setup() { 
  canvas = createCanvas(400, 400); 
  canvas.position(100, 50); // allows you to set position, id, etc 
  background(255, 255, 0); 
}  
function draw() {  
  ellipse(random(0, 400), random(0, 400), 50, 50); 
}  
 
// CASE 7  
// holding pointer, calling methods explicitly on that object  
function setup() { 
  var cnv = createCanvas(400, 400);  
  cnv.background(255, 0, 0); 
  cnv.noStroke();  
  cnv.ellipse(0, 0, 50, 50); 
}

Instance Mode

// CASE 0: no node specified 
// Canvas is auto-generated and appended to body.  
var sketch = function (p) {  
  var gray = 0;  
 
  p.setup = function () {  
    p.createCanvas(600, 400);  
  }; 
 
  p.draw = function () { 
    p.background(gray);  
    p.rect(p.width/2, p.height/2, 200, 200); 
  }; 
 
  p.mousePressed = function () { 
    gray = (gray + 16) % 256;  
  }; 
}; 
 
new p5(sketch);  
 
// CASE 1: node specified  
// Node is either a canvas element or any generic element. 
// If it is a canvas, P5 will attach to it.  
// If it is another type of element, a canvas with P5 attached will be inserted inside of it.  
// Note that "sketch" is arbitrary and a user may replace it w/ any variable name. 
 
var sketch = function (p) {  
  var gray = 0;  
 
  p.setup = function () {  
    p.createCanvas(600, 400);  
  }; 
 
  p.draw = function () { 
    p.background(gray);  
    p.rect(p.width/2, p.height/2, 200, 200); 
  }; 
 
  p.mousePressed = function () { 
    gray = (gray + 16) % 256;  
  }; 
}; 
 
new p5(sketch, node);

Note that the above is functionally equivalent to below, either may be used, but the above will be the recommended syntax for beginners as we feel it's clearer.

new p5(function (p) {  
  var gray = 0;  
 
  p.setup = function () {  
    p.createCanvas(600, 400);  
    noLoop();  
  }; 
 
  p.draw = function () { 
    p.background(gray);  
    p.rect(p.width>>1, p.height>>1, 200, 200); 
  }; 
 
  p.mousePressed = function () { 
    gray = (gray + 020) % 0x100; 
    redraw();  
  }; 
}, node);

ITP Working Group

**DEVELOPER DOC **INLINE DOCS GUIDE

If you are working on one of these things, create an issue on github and place your github username in brackets in the title, so others can collaborate rather than duplicate!

Projects list

  1. DOM manipulation. The intention with this library is not to limit to the canvas, and to allow access to DIVs and other elements. It's not meant to replace jQuery, but to give some basic access to the DOM in a way that is intuitive and useful. This tutorial describes the current functionality. This area of functionality is just a first draft, and some further thought in terms of functionality and syntax would be really useful.

  1. Touch interactions. Examples 5-0 through 5-3 here http://p5js.org/workshop/, demonstrate the current supported touch functionality. However, there are a few more questions to think about.

    • Should there be some notion of a touch id for the touches[] array? This could be useful for persistently tracking touches.
    • Example 5-2 demonstrates how to write your sketch to support both touch and mouse depending on device, but maybe we want a smart function or wrapper that automatically returns mouseX/Y or touchX/Y depending on device.
    • Right now there is touchStarted, touchMoved, and touchEnded. Should there be more functions to support touch?

  2. Some file I/O stuff to finish up: https://github.com/processing/p5.js/issues/40

  3. Thinking about text:

  1. Thinking about svgs and pdf export:

  1. Various bugs and issues.

  2. Tutorial for sketch instantiation -- global and instance modes. This functionality was recently added! Now we need some explanation:

    • Why use global vs instance mode?
    • Explanation of syntax for each setup. For instance mode, some explanation of closures, scope.
    • What are the different options for using each? The global and instance example cases are a good place to start.

  3. Developer page, extended version. [LUISA] This could be a great task for someone less experienced with JS or JS development. You could start by copying the current developer page into a new wiki page, then working through each step of the development setup process, and add a few sentences/paragraphs of lay mans explanation anywhere you would have liked to see it.

  4. Other documentation currently needed: https://github.com/processing/p5.js/issues/346

  5. Something else you are excited about?

    • Sound module, data module, module template. And what is a "module" called anyway? Extension, addon, module?
    • IDE
    • WebGL
    • Node.js + Websockets + p5.js
    • Arduino or Physical stuff + p5.js

Education

This is a place for p5.js related teaching resources -- links to syllabi, workshop materials, helper tools for teaching / classroom. Feel free to add things you create here (just click the "Edit" button). For examples and demos without related syllabi or teaching materials please see the contributed tools page.

Note that examples included may be using older versions of p5.js and might not be up to date.

Class / workshop syllabi

Tools

  • WordPress p5.js embedder - plugin to embed p5.js sketches into WordPress pages and posts (Discontinued, use at own risk)

Tutorials

  • Embedding p5.js - different ways of including sketches on existing sites or blogs.

Videos

Books

p5.js Resources

JS Resources

HTML+CSS Resources

General Programming

Tools

Debugging

p5.js Development Extended [DRAFT MATERIAL]

[THIS IS A ROUGH DRAFT]

This extended guide doesn't assume familiarity with concepts like unit testing, inline documentation, Javascript deployment workflows or specific tools like grunt or mocha. If you are comfortable with these and are looking for a quick start guide, please see this page.

The development of P5 is collaborative: we encourage you to participate and help us shape it. Here are some ways to contribute:

  • Add documentation to the code. P5's main documentation is generated automatically based on structured comments written in the code describing classes, functions and their parameters. Browsing the files in the src folder and adding documentation where it's missing is a great way to get familiarized with p5. See syntax details [below].
  • Create unit tests. P5 is tested using a unit testing framework. This means that for each feature there should be a test that asserts whether it does what it's supposed to do. Each time we generate a distribution of p5, all unit tests are run. This allows us to make changes more confidently: if all tests pass, we know we didn't break anything; if some tests fail, we know exactly what did. You can take a look at the existing tests in the tests folder. Adding tests to functions that don't have them is also a great way to get started. See how to do this in the [testing section].
  • Fix a bug. Explain how Issues list is used in this project.
  • Add a feature.

Setting up:

  • start from beginning: fork repo and add upstream remote (and link to tutorial).

  • explain why distribution needed: p5 runs in browser. browser gets library from server. can’t start running until all files have been transferred —> distribution. p5.js: all files combined into one. p5-min.js: one file w/o unnecessary spaces and line breaks. not readable, but faster download.

  • explain why grunt: javascript is interpreted, not compiled. but because p5 fairly big project still need a series of steps to generate distribution and also do some quality control: syntax checking (and good practices? check what lint does), running tests. repetitive task, so automated. task runner: grunt. to install grunt: package manager.

  • specific setup instructions will be the same, but adding details like ‘Open Terminal’.

Writing code:

  • Code Style. "All code in any code-base should look like a single person typed it, no matter how many people contributed." We recommend looking at idiomatic.js for a JS style guide. Here is some sample code for quick reference: ///I'd want to be able to take a quick look: have to do a lot of scrolling before getting this on the idiomatic page. Should see what else to include though
var i = 0,
      length = 100;

    for ( ; i < length; i++ ) {
      // statements
    }

    if ( true ) {
      // statements
    } else {
      // statements
    }
  • Inline Documentation. Please add inline documentation to your code. This will allow us to generate a complete HTML documentation website automatically. We use JSDoc; here is some example syntax:
/**
   * Create a new empty PImage object.
   * @param  {Integer} width
   * @param  {Integer} height
   * @return {PImage}
   */
function Book(title, author) {
}

Testing:

  • explain what the tools are before going over specific steps.
  • include test snippet.

Misc.

Large Objects - Sometimes large Javascript objects get unruly and the code needs to be split across multiple files. For this scenario, the style convention should be: p5.[ObjectName].[descriptor].js. Note, code should be grouped in each file thematically.

For example, the p5.Renderer3D file is split across 3 js files:

  • p5.Renderer3D.js
  • p5.Renderer3D.Retained.js
  • p5.Renderer3D.Immediate.js

https://p5js.org/

If you would like to edit this wiki and don't already have edit access, please open an issue or comment on an existing one noting the wiki page you'd like to edit. You will then be added as a repository contributor with edit access.

Clone this wiki locally