Processing 2. Креативное программирование

, 2D

.setup() 640 480 :

void setup()

{

size( 640, 480 ); smooth();

}

10 10 . draw():

void drawGrid()

{

stroke( 225 );

for ( int i = 0; i < 64; i++ ) { line( i*10, 0, i*10, height );

}

for ( int i = 0; i < 48; i++ ) { line( 0, i*10, width, i*10 );

}

}

draw(). ,, , .

void draw()

{

background( 255 );

drawGrid();

stroke( 0 );

//rectangles (yellow) fill( 255, 255, 0 ); rect( 20, 20, 120, 120 );

rect( 180, 20, 120, 120, 20 );

rect( 340, 20, 120, 120, 20, 10, 40, 80 ); rect( 500, 40, 120, 80 );

//ellipses (red)

32

2

fill( 255, 0, 0 );

ellipse( 80, 240, 120, 120 ); ellipse( 240, 240, 120, 80 ); ellipse( 400, 240, 80, 120 );

//triangles (blue) fill( 0, 0, 255 );

triangle( 560, 180, 620, 300, 500, 300 ); triangle( 40, 340, 140, 460, 20, 420 );

//quads (cyan)

fill( 0, 255, 255 );

quad( 180, 340, 300, 340, 300, 380, 180, 460 ); quad( 400, 340, 440, 400, 400, 460, 360, 400 ); quad( 500, 340, 620, 400, 500, 460, 560, 400 );

}

, , :

33

, 2D

drawGrid() - , ,- . for, -, - . . , .

frect() , . -. x y,- . Processing square(), ,rect(). rect()Processing 2 . rect() - .rect() -, .

fellipse() rect() , - . , . ,ellipse(). circle() Processing .

ftriangle() . x/y..

fquad() triangle(), - , .

- .- Photoshop, ,. CMYK, LAB, HSB, HSV, RGB, XYZ . . -, Processing RGB HSB. , .

34

2

, - c, setup()., .

color c;

void setup(

{

size( 640, 480 ); smooth();

c = color( random( 255 ), random( 255 ), random( 255 ) );

}

, - , . 255 - .draw().

Void draw(

{

colorMode( RGB, 255 ); background( 255 );

// grayscale noStroke();

for ( int i = 0; i < 255; i++ ) { fill( i );

rect( i * 2 + 20, 20, 2, 120 );

}

stroke( 0 ); noFill();

rect( 20, 20, 500, 120 );

}

-. draw().

// random color fill( c ); stroke( 0 );

rect( 540, 20, 80, 120 );

35

, 2D

ၪၖၙၦၢၖၯၩ, . , , , , , , .

draw():

//full opaque colors stroke( 0 );

fill( 255, 0, 0 );

rect( 20, 160, 75, 60 ); fill( 0, 255, 0 );

rect( 95, 160, 75, 60 ); fill( 0, 0, 255 );

rect( 170, 160, 75, 60 ); fill( 0, 255, 255 ); rect( 245, 160, 75, 60 ); fill( 255, 0, 255 ); rect( 320, 160, 75, 60 ); fill( 255, 255, 0 ); rect( 395, 160, 75, 60 ); fill( 255 );

rect( 470, 160, 75, 60 ); fill( 0 );

rect( 545, 160, 75, 60 );

. . -. draw().

// black background behind transparent colors rect( 0, 250, width, 70 );

float t = map( mouseX, 0, width, 0, 255 );

// transparent colors fill( 255, 0, 0, t ); rect( 20, 220, 75, 60 ); fill( 0, 255, 0, t ); rect( 95, 220, 75, 60 ); fill( 0, 0, 255, t ); rect( 170, 220, 75, 60 ); fill( 0, 255, 255, t ); rect( 245, 220, 75, 60 ); fill( 255, 0, 255, t ); rect( 320, 220, 75, 60 ); fill( 255, 255, 0, t ); rect( 395, 220, 75, 60 ); fill( 255, t );

rect( 470, 220, 75, 60 ); fill( 0, t );

rect( 545, 220, 75, 60 );

36

2

, draw(). -HSB.. x , - y.

// HSB color bar

colorMode( HSB, 360, 100, 100, 100 ); float h = map( mouseX, 0, width, 0, 360 );

float s = map( mouseY, 0, height, 0, 100 ); noStroke();

for ( int i = 0; i < 100; i++ ) { fill( h, s, i );

rect( 20 + i*6, 340, 6, 120 )

}

noFill();

stroke(0);

rect( 20, 340, 600, 120 );

, , , RGB HSB:

37

, 2D

. color(), stroke() fill(). - ,. , Processing RGB, 0 255. color(0) , color(255) - . . -, ., , ..

fcolor() color. ,, .c setup().

ffill() ,. ..

fnoFill() .

fstroke() fill(), .

fnoStroke() .

fbackground() . ,draw(), .. , alpha .

fcolorMode() .RGB HSB. , - RGB, -0 255. colorMode( RGB, 1.0 )0 1.HSB, colorMode( HSB, 360, 100, 100 ).

Processingcolor selector.

Tools | Color Selector.

background() , . - .

38