Processing 2. Креативное программирование
.pdf
JavaScript
Processing
- JAVASCRIPT.STANDARD JAVASCRIPT.
, - JAVASCRIPT.. , -
1, Processing 2.
JAVASCRIPT,. , . ,.
float x, y;
float prevX, prevY;
void setup()
{
size( 640, 480 ); smooth(); background( 0 );
x |
= random( |
width ); |
|
||
y |
= random( |
height ); |
|
||
prevX = x |
+ |
random( |
-10, 10 |
); |
|
prevY = y |
+ |
random( |
-10, 10 |
); |
|
}
void draw()
{
stroke( random( 192 ) ); strokeWeight( 1 );
line( x, y, prevX, prevY );
prevX = x; prevY = y;
x += random( -10, 10 ); y += random( -10, 10 );
190
9
if ( x < 0 ) { x = width;
} else if ( x > width ) { x = 0;
}
if ( y < 0 ) { y = height;
}else if ( y > height ) { y = 0;
}
}
, , ,, -. ,Google Chrome:
191
JavaScript
JAVASCRIPT, . Processing . Processing - ,- . URL, : 127.0.0.1:59792. 127.0.0.1IP (Internet Protocol) , localhost.:59792 -.80. Processing ,-, .
, web-export. HTML , JavaScript Processing.js .pde .
- Processing.js, JavaScriptProcessing. , jQuery, -HTML5 canvas. Processing.jscanvas JavaScript. Processing. js http://processingjs.org/.
Processing.js JavaScript,-. Sketchpad - Processing Processing.js. - , -Processing. Sketchpad
http://sketchpad.cc/.
HTML
, JAVASCRIPT,HTML . , ,- , .
HTML ,.
HTML5 Reset Stylesheet .CSS CSS,“ ” CSS . ,- . CSShttp://html5doctor.com/html-5-reset-stylesheet/.
192
9
Processing.. HTML CSS,, .JavaScript | Start Custom Template. Processing template
. : template.html processing.js. template.html , :
<!DOCTYPE html> <head>
<meta http-equiv="content-type" content="text/html; charset=utf- 8" />
<title>@@sketch@@ : Built with Processing and Processing.js </title>
<meta name="Generator" content="Processing" />
<link rel="stylesheet" href="reset.css" media="screen" /> <link rel="stylesheet" href="style.css" media="screen" />
<script src="processing.js" type="text/javascript"></script> @@scripts@@
</head>
<body>
<div id="container"> <div>
<canvas id="@@id@@" data-processing-sources="@@sketch@@.pde" width="@@width@@" height="@@height@@">
<p>Your browser does not support the canvas tag.</p> </canvas>
<noscript>
<p>JavaScript is required to view the contents of this page.</p>
</noscript> <!--[if lt IE 9]>
<p>Your browser does not support the canvas tag.</p> <![endif]-->
</div>
<h1>@@sketch@@</h1>
<p id="description">@@description@@</p>
<p id="sources">Source code: @@source@@</p>
193
JavaScript
<p>Built with <a href="http://processing.org" title="Processing">Processing</a> and <a href="http://processingjs.org" title="Processing.js">Processing.js</a></p>
</div>
</body>
</html>
reset.css, HTML5 doctor, template. style.css template. CSS ,style.css:
body {
background: #fff; color: #000;
font-family: Helvetica, Arial, sans-serif; font-size: 12px;
line-height: 1.4em;
}
#container { width: 640px;
margin: 40px auto;
}
h1 {
font-size: 2em; line-height: 1em; margin-bottom: 0.5em;
}
p{
margin-bottom: 1.4em;
}
canvas { margin-bottom: 30px;
}
194
9
, :
Processing template,Web.
template.html CSS,. CSS ,.
195
JavaScript
, HTML . Processing Web,.
f@@scripts@@: JavaScript.processing.js.
f@@sketch@@: . custom_html_ template.pde.element.canvas data-processing-sources.
f@@source@@: .
f@@id@@: ID <canvas>.
, .
f@@width@@ and @@height@@:. size() .canvas.
f@@description@@: . . :
/**
*This is a short description of the sketch.
*/
2, , 2D, . JAVASCRIPT .vlw,Create Font. , ..
Chunk. Chunk - (open source) The League of Moveable Type. : http://www.
theleagueofmoveabletype.com/chunk. Chunk.ttf
, Processing.
196
9
, . , ,.
PFont font;
float x; float y;
void setup()
{
size( 640, 480 );
font = createFont( "Chunk.ttf", 60 );
textFont( font );
x = 0;
y = height + 60;
}
void draw()
{
background( 255 );
noStroke();
fill( 255, 225, 0 );
rect( x, 0, random( width/2 ), height );
String txt = "This is Chunk!"; float tw = textWidth( txt );
fill( 0 );
text( txt, (width-tw)/2, y );
x += noise( mouseY * 0.02, y * 0.02 ); if ( x >= width ) {
x = 0;
197
JavaScript
}
y--;
if ( y <= -60 ) { y = height + 60;
}
}
, . ,. JavaScript | Playback Settings (Directives),Directives Editor.
, .scan Chunk.ttf ., , .scan , . -OK, Directives Editor:
/* @pjs font="Chunk.ttf"; */
198
9
, , canvas.
STANDARD Processing data.Processing.js , ,..
/* @pjs font="Chunk.ttf"; */
199