Skip to content

Archived Content

Jump to bottom
David Newbury edited this page May 30, 2015 · 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

##References##

###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.

ITP WORKNG 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

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