Processing 2. Креативное программирование
.pdf
, 2D
line( 40, 200, 120, 40 ); line( 600, 40, 300, 240 );
fill( 255 );
rect( 120, 40, 4, 4 ); rect( 300, 240, 4, 4 );
float n = noise( noiseOffset );
float x = bezierPoint( 40, 120, 300, 600, n ); float y = bezierPoint( 200, 40, 240, 40, n );
stroke( 0 );
rect( x, y, 6, 6 );
float t = map( mouseX, 0, width, -5.0, 5.0 ); curveTightness( t );
// Catmull-Rom spline stroke( 0 ); noFill();
curve( 120, 240, 40, 400, 600, 240, 300, 440 );
stroke( 255, 0, 0 );
line( 120, 240, 40, 400 ); line( 600, 240, 300, 440 );
fill( 255 );
rect( 120, 240, 4, 4 ); rect( 300, 440, 4, 4 );
x = curvePoint( 120, 40, 600, 300, n ); y = curvePoint( 240, 400, 240, 440, n );
stroke( 0 );
rect( x, y, 6, 6 );
}
50
2
, ., .
-. .
fbezierPoint() . -. -0 1. noise(), .0,, 1, . -, - .
fcurvePoint() bezierPoint()..
51
, 2D
. , Processing , ..
setup(). frameRate() , .
void setup()
{
size( 640, 480 ); smooth(); frameRate( 1 );
}
, - .: .
void star( int numSpikes, float innerRadius, float outerRadius )
{
int numVertices = numSpikes * 2;
float angleStep = TWO_PI / numVertices;
beginShape();
for ( int i = 0; i < numVertices; i++ ) { float x, y;
if ( i % 2 == 0 ) {
x = cos( angleStep * i ) * outerRadius; y = sin( angleStep * i ) * outerRadius;
}else {
x= cos( angleStep * i ) * innerRadius;
y= sin( angleStep * i ) * innerRadius;
vertex( x, y );
}
endShape( CLOSE );
}
52
2
. , bezierVertex().
void flower( int numLeafs, float innerRadius, float outerRadius )
{
float angleStep = TWO_PI / numLeafs;
beginShape();
float startX = cos( 0 ) * innerRadius; float startY = sin( 0 ) * outerRadius; vertex( startX, startY );
for ( int i = 0; i < numLeafs; i++ ) {
float cx1 = cos( angleStep * i ) * outerRadius; float cy1 = sin( angleStep * i ) * outerRadius; float x2 = cos( angleStep * (i + 1) ) * innerRadius; float y2 = sin( angleStep * (i + 1) ) * innerRadius; float cx2 = cos( angleStep * (i + 1) ) * outerRadius; float cy2 = sin( angleStep * (i + 1) ) * outerRadius; bezierVertex( cx1, cy1, cx2, cy2, x2, y2 );
}
endShape( CLOSE );
}
star() flower(), ,draw(). 75 .50 .
void draw()
{
background( 0 ); noStroke();
for ( int i = 0; i < 75; i++ ) {
int numPoints = floor( random( 4, 8 ) ); float innerRadius = random( 20, 40 ); float outerRadius = random( 50, 100 );
pushMatrix();
translate( random( width ), random( height ) ); if ( random( 100 ) < 50 ) {
fill( 255, 255, 0, 64 );
star( numPoints, innerRadius, outerRadius );
}else {
fill( 255, 0, 0, 64 );
flower( numPoints, innerRadius, outerRadius );
}
popMatrix();
}
}
53
, 2D
- :
beginShape() endShape()., CLOSE endShape()., .vertex(), .bezierVertex() curveVertex(). , bezier() curve(), ., . , bezierVertex() curveVertex()vertex().
54
2
Processing . ,., .radians(). degrees(). Processing ,, .TWO_PI, . QUARTER_PI, THIRD_PI, HALF_PI PI.
SVG
Processing ,. , -, Processing SVG.
, - SVG . Processing SVG , Adobe Illustrator Inkscape. Inkscape -, Illustrator, . : http://inkscape.org/.
manipulating_svg_files.pde.SVG data . ,SVG Processing, , .
PShape setup().snowFlake SVG,SVG.
PShape snowFlake; PShape small1; PShape small2; PShape small3; PShape small4; PShape small5; PShape small6; PShape big1;
void setup()
55
, 2D
{
size( 640, 480 ); smooth();
snowFlake = loadShape("snowflake.svg");
small1 = snowFlake.getChild("small1"); small2 = snowFlake.getChild("small2"); small3 = snowFlake.getChild("small3"); small4 = snowFlake.getChild("small4"); small5 = snowFlake.getChild("small5"); small6 = snowFlake.getChild("small6"); big1 = snowFlake.getChild("big1");
shapeMode( CENTER );
}
draw() SVG shape():
void draw()
{
background( 255 );
// regular snowflake
shape( snowFlake, 160, 120 );
// distorted snowflake
shape( snowFlake, 480, 120, 160, 80 );
//orange snowflake snowFlake.disableStyle(); fill( 255, 128, 0 ); stroke( 255 ); strokeWeight( 2 );
shape( snowFlake, 160, 360 ); snowFlake.enableStyle();
//draw separate parts (colorful star) strokeWeight( 1 );
stroke( 0 ); small1.disableStyle();
56
2
fill( 151, 183, 189 ); shape( small1, 480, 360 ); small1.enableStyle(); small2.disableStyle(); fill( 216, 234, 237 ); shape( small2, 480, 360 ); small2.enableStyle();
small3.disableStyle(); fill( 151, 183, 189 ); shape( small3, 480, 360 ); small3.enableStyle();
small4.disableStyle(); fill( 216, 234, 237 ); shape( small4, 480, 360 ); small4.enableStyle();
small5.disableStyle(); fill( 151, 183, 189 ); shape( small5, 480, 360 ); small5.enableStyle();
small6.disableStyle(); fill( 108, 223, 234 ); shape( small6, 480, 360 ); small6.enableStyle();
strokeWeight( 2 ); big1.disableStyle(); fill( 251, 0, 95 ); stroke( 255 );
shape( big1, 480, 360 ); big1.enableStyle();
}
57
, 2D
- :
SVG , , XML., .
58
2
SVG setup() PShape.loadShape().SVG shape().PShape, x y ,. ,. SVG , PShape disableStyle() fill() stroke() Processing. , -enableStyle() .SVG getChild().id , SVG.
small4 = snowFlake.getChild("small4");xml, <path id="small4" ….
, SVG Processing. ,. , SVG , Processing , Processing .
- . ProcessingPGraphics.
, - PGraphics -setup() .x y. , .
PGraphics pg;
float x; float y;
void setup()
{
size( 640, 480 ); smooth();
59