Processing 2. Креативное программирование
.pdf
JavaScript
Processing.js jQuery
Processing.js jQuery. jQuery UI (User Interface), , jQuery.Processing.
, jQuery jQuery UI. -, :
fhttp://jquery.com/
fhttp://jqueryui.com/
jQuery jQuery UI jsProcessing.js. reset.css style.css css. , , CSS ,jQuery UI. base themesjQuery UI, .
. HTML HTMLJavaScript. CSSJavaScript div; .
<!doctype html> <html lang="en"> <head>
<meta charset="utf-8" />
<title>Using Processing.js with jQuery</title>
210
9
<link rel="stylesheet" href="css/reset.css" media="screen" />
<link rel="stylesheet" href="css/base/jquery.ui.all.css"> <link rel="stylesheet" href="css/style.css"
media="screen" />
<script src="js/jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.8.18.custom.min.js" type="text/javascript"></script>
<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>
<p>Use these sliders to change the background color.</p> <div id="red"></div>
<div id="green"></div> <div id="blue"></div>
<p>Use this slider to change the radius of the ball.</p> <div id="radius"></div>
</div> </body> </ html>
CSS , . 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;
}
211
JavaScript
h1 {
font-size: 2em; line-height: 1em; margin-bottom: 0.5em;
}
p{
margin-bottom: 1.4em;
}
canvas { margin-bottom: 30px;
}
#red,
#green, #blue {
margin-bottom: 20px;
}
#red .ui-slider-range { background: #f00;
}
#green .ui-slider-range { background: #0f0;
}
#blue .ui-slider-range { background: #00f;
}
- JavaScriptProcessing:
$(document).ready( function() {
$( "#red, #green, #blue" ).slider({ orientation: "horizontal", range: "min",
max: 255, value: 0,
slide: updateBackground, change: updateBackground
});
$( "#radius" ).slider({
212
9
orientation: "horizontal", range: "min",
min: 40, max: 160, value: 80,
slide: updateRadius, change: updateRadius
});
var red = 0, green = 0, blue = 0; var radius = 80;
function updateBackground()
{
red = $("#red").slider( "value" ); green = $("#green").slider( "value" ); blue = $("#blue").slider( "value" );
}
function updateRadius()
{
radius = $("#radius").slider( "value" );
}
function mySketch( processing )
{
var x; var y;
var velX = 1; var velY = 1;
processing.setup = function()
{
processing.size( 640, 480 ); processing.background( red, green, blue ); processing.noStroke();
processing.fill( 255 );
x = processing.width/2;
y = processing.random( processing.height );
}
processing.draw = function()
{
x += velX;
if ( x < radius || x > processing.width - radius) { velX *= -1;
213
JavaScript
}
y += velY;
if ( y < radius || y > processing.height - radius ) { velY *= -1;
}
processing.background( red, green, blue ); processing.ellipse( x, y, radius * 2, radius * 2 );
}
}
var canvas = $("#mycanvas")[0];
var processingInstance = new Processing( canvas, mySketch ); });
, , . ,;.
214
9
JavaScript ,.
$(document).ready( function() {});
window.onloadJavaScript. , , . .
$( "#red, #green, #blue" ).slider({ orientation: "horizontal", range: "min",
max: 255, value: 0,
slide: updateBackground, change: updateBackground
});
div, HTML. 255 0. slide changeupdateBackground. , $( "#radius" ).slider()
, .
var red = 0, green = 0, blue = 0; var radius = 80;
, ,. mySketch(),.
function updateBackground()
{
red = $("#red").slider( "value" ); green = $("#green").slider( "value" ); blue = $("#blue").slider( "value" );
}
function updateRadius()
{
radius = $("#radius").slider( "value" );
}
215
JavaScript
updateBackground() updateRadius() ,. updateBackground(), . updateRadius()radius. draw()mySketch(), ,.
- canvas jQuery., document.getElementById(),:
var canvas = $("#mycanvas")[0];
Toxiclibs.js
Toxiclibs, , , Processing. - , , , . JavaScript , . Toxiclibs.js http://haptic-data.com/toxiclibsjs/.
toxiclibs.js. GitHubhttps://github.com/hapticdata/toxiclibsjs/.
toxiclibs.min.js js .:
216
9
HTML . toxiclibs.js Processing.js, CSS Processing.
<!doctype html> <html lang="en"> <head>
<meta charset="utf-8" />
<title>Getting Started with Toxiclibs.js</title>
<link rel="stylesheet" href="css/reset.css" media="screen" />
<link rel="stylesheet" href="css/style.css" media="screen" />
<script src="js/toxiclibs.min.js" type="text/javascript"></script>
<script src="js/processing-1.3.6.min.js" type="text/javascript"></script>
</head>
<body>
<div id="container">
<canvas id="mycanvas" data-processing- sources="toxiclibs_js.pde"></canvas>
</div>
</body>
</html>
Processing. .. , .
var Vec2D = toxi.geom.Vec2D,
ToxiclibsSupport = toxi.processing.ToxiclibsSupport, Polygon2D = toxi.geom.Polygon2D;
import toxi.geom.*; import toxi.processing.*;
ToxiclibsSupport gfx;
Polygon2D[] polygons;
void setup() {
217
JavaScript
size( 640, 480 ); smooth(); noStroke();
polygons = new Polygon2D[4]; for ( int j = 0; j < 4; j++ ) {
int randomNum = floor( random( 3, 8 ) ); float angle = TWO_PI / randomNum;
Vec2D[] vertices = new Vec2D[randomNum]; for ( int i = 0; i < randomNum; i++ ) {
float x = 100 + (j*150) + cos( i * angle ) * 60; float y = height/2 + sin( i * angle ) * 60; vertices[i] = new Vec2D( x, y );
}
polygons[j] = new Polygon2D( vertices );
}
gfx = new ToxiclibsSupport( this );
}
void draw() { |
|
|
background( |
255, 225, 3 ); |
|
for ( int |
i |
= 0; i < 4; i++ ) { |
Vec2D m |
= |
new Vec2D( mouseX, mouseY ); |
if ( polygons[i].containsPoint( m ) ) { fill( 255, 64, 0 );
}else { fill( 0 );
}
gfx.polygon2D( polygons[i] );
}
}
218
9
HTML , :
JavaScript , Processing., Java Toxiclibs.,
Processing, Toxiclibs:
var Vec2D = toxi.geom.Vec2D,
ToxiclibsSupport = toxi.processing.ToxiclibsSupport, Polygon2D = toxi.geom.Polygon2D;
toxi.geom toxi.processing. JavaScript,Processing.
setup() ToxiclibsSupportPolygon2D. ToxiclibsSupport -Toxiclibs
Processing.
219