forked from processing-js/processing-js
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathREADME
136 lines (98 loc) · 5.3 KB
/
README
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
P R O C E S S I N G . J S - @VERSION@
a port of the Processing visualization language
//////////////////////////////////////////////////////////////////////////////
License MIT (see included LICENSE file for full license)
Original Author John Resig (http://ejohn.org)
Maintainers See included AUTHORS file for contributer list
Web Site http://processingjs.org
Github Repo http://github.com/jeresig/processing-js (see guidelines)
Bug Tracking http://processing-js.lighthouseapp.com
Contributing and/or Participating Organizations
The Processing Project and Community http://processing.org
The Mozilla Foundation https://www.mozilla.org/foundation/
Seneca College (CDOT) http://zenit.senecac.on.ca/wiki/
IMPORTANT! - NOTE FOR DEVELOPERS
Please read the guidelines before pushing your code to the repository. The
function(s) you are working on may already be finished and queued for push.
GUIDELINES
http://processing-js.lighthouseapp.com/projects/41284/project-workflow
IRC CHANNEL
Join the development team at irc://irc.mozilla.org/processing.js
MAILING LIST
User discussions happen at http://groups.google.com/group/processingjs
TWITTER
http://twitter.com/processingjs
//////////////////////////////////////////////////////////////////////////////
WHAT IS PROCESSING.JS?
Processing.js is the sister project of the popular visual programming language
Processing, designed for the web. Processing.js makes your data visualizations,
digital art, interactive animations, educational graphs, video games, etc. work
using web standards and without any plug-ins. You write code using the Processing
language (or JavaScript), include it in your web page, and Processing.js does the
rest.
Processing.js is perhaps best thought of as a JavaScript runtime for the Processing
language. Where Processing relies upon Java for its graphics back-end, Processing.js
uses the web--HTML5, canvas, and WebGL--to create 2D and 3D graphics, without
developers having to learn those APIs and technologies.
Originally developed by Ben Fry and Casey Reas, Processing started as an open
source programming language based on Java to help the electronic arts and visual
design communities learn the basics of computer programming in a visual context.
Processing.js takes this to the next level, allowing Processing code to be run by
any HTML5 compatible browser, including current versions of Firefox, Safari,
Chrome, Opera, and Internet Explorer. Processing.js brings the best of visual
programming to the web, both for Processing and web developers.
Much like the native language, Processing.js is a community driven project,
and continues to grow as browser technology advances. Processing.js is now
compatible with Processing, and has an active developer and user community.
//////////////////////////////////////////////////////////////////////////////
PLATFORM AND BROWSER COMPATIBILITY
Processing.js is explicitly developed for and actively tested on browsers that
support the HTML5 <canvas> element. Processing.js runs in FireFox, Safari,
Chrome, Opera, and Internet Explorer.
Processing.js aims for 100 percent compatibility across all supported browsers;
however, differences between individual canvas implementations may give
slightly different results in your sketches.
//////////////////////////////////////////////////////////////////////////////
SETTING UP A SIMPLE SKETCH
In order to get a sketch going in the browser you will need to download the
processing.js file and make two new files - one with the extension .html and
the other with the extension .pde or .pjs.
The .html file will have a link to the processing.js file you have downloaded,
and a <canvas> tag with a link to the .pde or .pjs file that you made.
Here is an example of an .html file:
<!doctype html>
<html>
<head>
<script src="processing.js"></script>
</head>
<body>
<canvas data-processing-sources="anything.pjs"></canvas>
</body>
</html>
Note that the .pjs file needs to be named anything.pjs (or whatever you named your file)
and that there is a custom attribute data-processing-sources that is used to link the sketch to
the <canvas>.
Here is an example of a .pjs file (.pde is also acceptable):
void setup()
{
size(200,200);
background(125);
fill(255);
noLoop();
PFont fontA = loadFont("courier");
textFont(fontA, 14);
}
void draw(){
text("Hello Web!",20,20);
println("Hello ErrorLog!");
}
Many more examples are available on the Processing.js website.
//////////////////////////////////////////////////////////////////////////////
LEARN MORE ABOUT PROCESSING.JS
Processing developers should start with the Processing.js Quick Start Guide for
Processing Developers, http://processingjs.org/reference/articles/p5QuickStart.
JavaScript developers should start with the Processing.js Quick Start Guide for
JavaScript Developers, http://processingjs.org/reference/articles/jsQuickStart
A more detailed guide is http://processingjs.org/reference/articles/PomaxGuide.
Complete reference information is available at http://processingjs.org/reference.
//////////////////////////////////////////////////////////////////////////////