Skip to content

Archived Content

Jump to bottom
David Newbury edited this page May 30, 2015 · 13 revisions

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

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