Processing.js: Difference between revisions
Content deleted Content added
→Challenges: remove weird "challenges section" WP Not here to document code development |
m Redirect bypass from Processing (programming language)#Processing.js to Processing#Processing.js using popups Tag: Redirect target changed |
||
| (24 intermediate revisions by 14 users not shown) | |||
| Line 1: | Line 1: | ||
#REDIRECT [[Processing#Processing.js]] |
|||
{{peacock|date=September 2017}} |
|||
{{buzzword|date=September 2017}} |
|||
{{r from merge}} |
|||
{{r to section}} |
|||
{{Infobox software |
|||
| name = Processing.js |
|||
| logo = [[File:Processing Logo Clipped.svg|180px|Processing logo]] |
|||
| author = [[John Resig]] |
|||
| developer = Processing Foundation |
|||
| released = {{Start date and age|2008}} |
|||
| latest release version = 1.4.8 |
|||
| latest release date = {{Start date and age|2014|3|25}} |
|||
| latest preview version = |
|||
| latest preview date = |
|||
| programming language = [[JavaScript]] |
|||
| status = Discontinued |
|||
| genre = [[Web application framework]] |
|||
| license = [[MIT License|MIT]] |
|||
| website = {{url|http://processingjs.org}} |
|||
| size = {{Nowrap|61 [[Kilobyte|KB]] (gzipped)}} / {{Nowrap|209 KB (production)}} / {{Nowrap|754 KB (development)}} |
|||
| Successor = p5.js |
|||
}} |
|||
'''Processing.js''' is a [[JavaScript]] port of [[Processing (programming language)|Processing]], a programming language designed |
|||
to write visualisations, images, and interactive content. It allows web browsers to display animations, visual applications, games and other graphical rich content without the need for a [[Java applet]] or [[Flash plugin]]. |
|||
Processing.js was originally created to allow existing Processing developers and existing code to work unmodified on web. Processing.js uses JavaScript to render 2D and 3D content on the HTML [[canvas element]], and is supported by browsers that have implemented this element (the latest versions of Mozilla [[Firefox]], [[Opera (web browser)|Opera]], [[Internet Explorer]], [[Safari (web browser)|Safari]] and [[Google Chrome]]). |
|||
The development of Processing.js was begun by [[John Resig]] and then picked up by students at [[Seneca College]] after its initial release in 2008. A team of students finished the port of Processing.js, fixing more than 900 bugs, shipping 12 releases, and creating a vibrant community in the process. The project was done through a partnership between the [[Mozilla Foundation]] and [[Seneca College]], led by David Humphrey, Al MacDonald, and Corban Brook. The students continue to maintain the project today. |
|||
==IDE== |
|||
The Processing.js code is designed to be used with standalone text editors, or it may be built into an [[integrated development environment]] (IDE). |
|||
Following are the IDEs which support Processing.js: |
|||
* Sketchpad puts processing on [[Etherpad]], allowing authors to simultaneously edit a text document, and see all of the participants' edits in real-time, with the ability to display each author's text in their own color. |
|||
* The Processing.js code can be edited in Processing helper tool. |
|||
* Even the code can be designed by using [[Eclipse (software)|Eclipse]] by importing packages using [[GitHub]]. |
|||
==iPhone use== |
|||
There exists an integration of the Processing.js library and a Javascript application framework for iPhone, called iProcessing. |
|||
==Processing syntax== |
|||
Processing.js syntax is almost identical to that of the Processing language, in that a <code>setup()</code> function is used to define general visualization properties like canvas size, frame rate and other variables, and a <code>draw()</code> function controls the behavior of each frame in the animation. |
|||
The Processing.js library can be included in head section of a web page as a single JavaScript file: |
|||
<source lang="html4strict"> |
|||
<html> |
|||
<head> |
|||
<script type="text/javascript" src="processing.js"></script> |
|||
</head> |
|||
</source> |
|||
A <code>canvas</code> element is declared inside the body, with a <code>data-processing-sources</code> attribute, specifying the location of an external file holding the Processing code: |
|||
<source lang="xml"> |
|||
<canvas data-processing-sources="example.pde"></canvas> |
|||
</source> |
|||
Any extension can be used in the external file, for example, the .pde extension used by the Processing language sketch files. |
|||
<source lang="arduino"> |
|||
/* example.pde */ |
|||
// The statements in the setup() function |
|||
// execute once when the program begins |
|||
void setup() |
|||
{ |
|||
size(200, 200); // Sets the canvas size to 200 by 200 pixels |
|||
stroke(255); // Set line drawing color to monochrome white |
|||
frameRate(30); // Set up draw() to be called 30 times per second |
|||
} |
|||
float y = 100; |
|||
// The statements in draw() are executed until the |
|||
// program is stopped. The function is called as many |
|||
// times per second as the frameRate. If no explicit |
|||
// rate is set, this is 45 times per second. |
|||
void draw() |
|||
{ |
|||
background(0); // Set the background to monochrome black |
|||
y = y - 1; |
|||
if (y < 0) { y = height; } |
|||
line(0, y, width, y); // draw a horizontal line at height y |
|||
} |
|||
</source> |
|||
Processing language has two ways of rendering a 2D or 3D in order to understand underlying graphic. It uses [[Java (programming language)|Java]] for 2D, and [[OpenGL]] for 3D. |
|||
This code demonstrates the rendering . |
|||
The <code>size()</code> function provide choice to choose 2D or 3D. To create a 2D sketch that is 100 by 100 pixels. |
|||
<code>size(100, 100, P2D);</code><br> |
|||
To draw a 3D sketch OpenGL is used: |
|||
<code>size(100, 100, OPENGL);</code> |
|||
== p5.js == |
|||
[[Lauren McCarthy]] created [http://p5js.org/ p5.js], a native [[JavaScript]] alternative and successor to Processing.js that has the official support of the Processing Foundation. McCarthy also teaches an introductory course to p5.js on [[Kadenze]]. |
|||
==See also== |
|||
{{Portal|Free software}} |
|||
*[[D3.js]] |
|||
*[[JavaScript InfoVis Toolkit]] |
|||
*[[Processing (programming language)]] |
|||
==References== |
|||
{{Refbegin}} |
|||
*{{citation |
|||
|first1 = Andrew |
|||
|last1 = Glassner |
|||
|title = Processing for Visual Artists: How to Create Expressive Images and Interactive Art |
|||
|date = August 9, 2010 |
|||
|edition = 1st |
|||
|publisher = A K Peters/CRC Press |
|||
|pages = 955 |
|||
|isbn = 1-56881-716-9 |
|||
|url = http://www.crcpress.com/ecommerce_product/product_detail.jsf?isbn=9781568817163 |
|||
|deadurl = yes |
|||
|archiveurl = https://web.archive.org/web/20110421204824/http://www.crcpress.com/ecommerce_product/product_detail.jsf?isbn=9781568817163 |
|||
|archivedate = April 21, 2011 |
|||
|df = |
|||
}}D |
|||
*{{citation |
|||
| first1 = Casey |
|||
| last1 = Reas |
|||
| first2 = Ben |
|||
| last2 = Fry |
|||
| title = Getting Started with Processing |
|||
| date = June 17, 2010 |
|||
| edition = 1st |
|||
| publisher = Make |
|||
| pages = 208 |
|||
| isbn = 1-4493-7980-X |
|||
| url = |
|||
}} |
|||
*{{citation |
|||
| first = Joshua |
|||
| last = Noble |
|||
| title = Programming Interactivity: A Designer's Guide to Processing, Arduino, and Openframeworks |
|||
| date = July 21, 2009 |
|||
| edition = 1st |
|||
| publisher = [[O'Reilly Media]] |
|||
| pages = 736 |
|||
| isbn = 0-596-15414-3 |
|||
| url = http://oreilly.com/catalog/9780596154141/ |
|||
}} |
|||
*{{citation |
|||
| first = Kostas |
|||
| last = Terzidis |
|||
| title = Algorithms for Visual Design Using the Processing Language |
|||
| date = May 11, 2009 |
|||
| edition = 1st |
|||
| publisher = [[John Wiley & Sons|Wiley]] |
|||
| pages = 384 |
|||
| isbn = 0-470-37548-5 |
|||
| url = http://www.wiley.com/WileyCDA/WileyTitle/productCd-0470375485.html |
|||
}} |
|||
*{{citation |
|||
|first1 = Casey |
|||
|last1 = Reas |
|||
|first2 = Ben |
|||
|last2 = Fry |
|||
|first3 = John |
|||
|last3 = Maeda |
|||
|title = Processing: A Programming Handbook for Visual Designers and Artists |
|||
|date = September 30, 2007 |
|||
|edition = 1st |
|||
|publisher = The MIT Press |
|||
|pages = 736 |
|||
|isbn = 0-262-18262-9 |
|||
|url = http://mitpress.mit.edu/catalog/item/default.asp?ttype=2&tid=11251 |
|||
|deadurl = yes |
|||
|archiveurl = https://web.archive.org/web/20110417063708/http://mitpress.mit.edu/catalog/item/default.asp?tid=11251&ttype=2 |
|||
|archivedate = April 17, 2011 |
|||
|df = |
|||
}} |
|||
*{{citation |
|||
| first = Ben |
|||
| last = Fry |
|||
| title = Visualizing Data |
|||
| date = January 11, 2008 |
|||
| edition = 1st |
|||
| publisher = [[O'Reilly Media]] |
|||
| pages = 382 |
|||
| isbn = 0-596-51455-7 |
|||
| url = http://oreilly.com/catalog/9780596514556/ |
|||
}} |
|||
*{{citation |
|||
|first = Ira |
|||
|last = Greenberg |
|||
|title = Processing: Creative Coding and Computational Art (Foundation) |
|||
|date = May 28, 2007 |
|||
|edition = 1st |
|||
|publisher = friends of ED |
|||
|pages = 840 |
|||
|isbn = 1-59059-617-X |
|||
|url = http://friendsofed.com/book.html?isbn=159059617X |
|||
|deadurl = yes |
|||
|archiveurl = https://web.archive.org/web/20110127204040/http://www.friendsofed.com/book.html?isbn=159059617X |
|||
|archivedate = January 27, 2011 |
|||
|df = |
|||
}} |
|||
*{{citation |
|||
| first = Daniel |
|||
| last = Shiffman |
|||
| title = Learning Processing: A Beginner's Guide to Programming Images, Animation, and Interaction |
|||
| date = August 19, 2008 |
|||
| edition = 1st |
|||
| publisher = Morgan Kaufmann |
|||
| pages = 450 |
|||
| isbn = 0-12-373602-1 |
|||
| url = http://www.learningprocessing.com/ |
|||
}} |
|||
{{Refend}} |
|||
==External links== |
|||
* {{Official website|http://processingjs.org/}} |
|||
* [https://wiki.mozilla.org/Education/Projects/ProcessingForTheWeb Processing for the Web (POW) project] |
|||
* [http://sketchpad.cc/ Studio Sketchpad, a browser-based IDE for Processing.js] |
|||
* [https://www.khanacademy.org/cs Computer Science at Khan Academy] |
|||
* [http://www.processing.org/ Processing homepage] |
|||
* [https://web.archive.org/web/20111118221049/https://wiki.mozilla.org/Processing.js_for_JavaScript_Devs Different ways of executing ] |
|||
* [http://gsvideo.sourceforge.net/ GSvideo for playback music] |
|||
[[Category:Free computer libraries]] |
|||
[[Category:Free software programmed in JavaScript]] |
|||
[[Category:JavaScript libraries]] |
|||
[[Category:JavaScript visualization toolkits]] |
|||
[[Category:Software using the MIT license]] |
|||
Latest revision as of 23:58, 22 September 2022
Redirect to:
- From a merge: This is a redirect from a page that was merged into another page. This redirect was kept in order to preserve the edit history of this page after its content was merged into the content of the target page. Please do not remove the tag that generates this text (unless the need to recreate content on this page has been demonstrated) or delete this page.
- For redirects with substantive page histories that did not result from page merges use {{R with history}} instead.
- To a section: This is a redirect from a topic that does not have its own page to a section of a page on the subject. For redirects to embedded anchors on a page, use {{R to anchor}} instead.