Processing 2. Креативное программирование
.pdf
JavaScript
. @pjs Processing.js,. font="Chunk.ttf" Processing.js Chunk.ttf -,.
Processing.js ; , - .Chunk. , ,. ,., ,, .
/ SVG
SVG.2, , 2D, , ,- , .
Processing SVG,data Processing.
. SVGcanvas.
PImage img;
PShape shapes;
void setup()
{
size( 640, 480 );
img = loadImage("osaka-fluo.jpg");
shapes = loadShape("shapes.svg");
shapeMode( CENTER );
}
void draw()
200
9
{
background( 255 );
image( img, 0, 0 );
translate( width/2, height/2 ); shape( shapes, 0, 0 );
}
.JavaScript | Playback Settings (Directives) Directives Editor. scan .OK, . , :
201
JavaScript
, . .:
/* @pjs preload="osaka-fluo.jpg"; */
,.
, ,. ,.
/* @pjs preload="image1.jpg,image2.png,image3.png"; font="font1.ttf,font2.ttf";
*/
3D
. Processing.js3D , , 3, 3D -, .
3D . OpenGLsize() OPENGL. . Y .
import processing.opengl.*;
void setup()
{
size( 640, 480, OPENGL ); smooth();
noStroke();
}
void draw()
{
202
9
background( 255 );
lights();
translate( width/2, height/2 );
rotateX( radians( frameCount ) );
rotateY( map( mouseX, 0, width, -PI, PI ) );
fill( 255, 225, 23 ); box( 200 );
}
, :
203
JavaScript
3D Processing
WebGL. WebGL OpenGL ES 2.0, OpenGL. ES OpenGL ES
Embedded Systems. OpenGL. ,, : http://en.wikipedia.org/wiki/ WebGL#Desktop_Browsers.
OpenGLsize() OPENGL. Processing.js , Java JAVASCRIPT.STANDARD, , .
Processing.js
Processing
Processing - . , Processing.js .JavaScript .
Processing.js http://processingjs.org/ download/. Production,Development. , -. Processing.js js.reset.css,HTML .
HTML , CSS, Processing.js <script>. HTML.index.html.
<!doctype html> <html lang="en"> <head>
<meta charset="utf-8" />
<title>Using Processing.js without the Processing editor</title>
<link rel="stylesheet" href="css/reset.css" media="screen" />
204
9
<link rel="stylesheet" href="css/style.css" media="screen" />
<script src="js/processing-1.3.6.min.js" type="text/javascript"></script>
</head>
<body>
<div id="container"> <canvas data-processing-
sources="processingjs_no_editor.pde"></canvas> </div>
</body>
</html>
reset.css style.css HTML .css index. html. processingjs_ no_editor.pde.
void setup()
{
size( 640, 480 );
}
void draw()
{
background( 225 );
translate( width/2, height/2 ); fill( 255, 0, 0 );
noStroke();
ellipse( 0, 0, 200, 200 );
}
:
205
JavaScript
index.html , ,. , - , , - , - . ,.
, , , HTML Processing.js <script>. , :
<script src="js/processing-1.3.6.min.js" type="text/javascript"></ script>
HTML canvas. data- processing-sources Processing.
<canvas data-processing-sources="processingjs_no_editor.pde"></canvas>
206
9
HTML, . , , , - . Firefox Safari -, . Google Chrome, , .,- URL.
JavaScript
Processing.js , , JavaScript,Processing JavaScript. ,. Processing.js,.
HTML , reset.css style.cssProcessing.js Processing.Processing.js JavaScript mysketch.js., <canvas> data-processing-sources.
<!doctype html> <html lang="en"> <head>
<meta charset="utf-8" />
<title>Using Processing.js without the Processing editor</title>
<link rel="stylesheet" href="css/reset.css" media="screen" /> <link rel="stylesheet" href="css/style.css" media="screen" />
<script src="js/processing-1.3.6.min.js" type="text/javascript"></script> <script src="js/mysketch.js" type="text/javascript"></script>
</head>
<body>
<div id="container">
<canvas id="mycanvas"></canvas> </div>
</body>
</html>
Processing.mysketch.js js. JavaScript, :
window.onload = function() { function mySketch( processing )
207
JavaScript
{
processing.setup = function()
{
processing.size( 640, 480 ); processing.background( 255, 225, 4 );
}
processing.draw = function()
{
processing.stroke( 0 ); processing.fill( 0, 64 );
processing.ellipse( processing.random( processing.width ), processing.random( processing.height ), 20, 20 );
}
}
var canvas = document.getElementById("mycanvas");
var processingInstance = new Processing( canvas, mySketch );
}
, - :
208
9
HTML ,. JavaScript,.
window.onload = function() {}
, .- ., .
function mySketch( processing )
{
processing.setup = function()
{
processing.size( 640, 480 ); processing.background( 255, 225, 4 );
}
processing.draw = function()
{
processing.stroke( 0 ); processing.fill( 0, 64 );
processing.ellipse( processing.random( processing.width ), processing.random( processing.height ), 20, 20 );
}
}
mySketch() Processing.processing, Processing.js. processing.setup() = function(){} setup() Processing.js,. , processing.draw = function(){} draw(),- . Processing mySketch(), processing. ,stroke(), processing.stroke().
document.getElementById() canvas DOM - , , :
var canvas = document.getElementById("mycanvas");
Processing. canvas , , :
var processingInstance = new Processing( canvas, mySketch );
209