PowerPoint

Processing

Moon Yong Joon

Processing

Moon Yong Joon

Windows

1:

2: c C

3: Processing processing

display window

4: ellipse() 50, 50, 80

Ctrl+R

5: Processing processing

display window

tab Tab

aaa tab

1

2

: Java Mode

http://learningprocessing.com/examples/

file:///C:/processing-3.1.1/modes/java/reference/index.html

: p5.js

Processing

Moon Yong Joon

pixel (2) x y

pixel (2)

pixel (2) A, B

pixel (3) x , y, -z

23

size(width, height) background(0) display window

Processing setup() draw() setup() draw()1 60

setup :

() .

setup() setup display window

draw : draw

console

draw draw display window

# = ;

; = ;

display window

size size(width, height) display window

background : background() 0 ~ 255 50 0 , 255

background : RGB background(R,G,B) RGB Red

rect : (rect(x,y,width,height))

Yx(0,0)(20,20)

ellipse : (ellipse(x,y,width,height))

Yx(0,0)(20,20)

ellipse : 2 y -100

(278, -100)(120,100)(412, 60)

processing Hello World

Global : global setup draw

:

: int

: float float

: width, height

(-)

fill

Console

console : println println console

console : print console

console : printArrayArray console index

size

: noLoop setup noLoop() draw

:event mousePressed noLoop release

: noLoop/loop setup noLoop() draw event loop

: redraw setup noLoop() draw event redraw

Mouse

: exit() exit

Processing

Moon Yong Joon

Processing

: JVM Java { } (brace) , . ; ()

: Class new

: loop loop Draw noLoop, loop Loop Draw

# = ;

; = ;

# Return Data Type () { Return }

# ();

, , class ClassName { ; ; ; } class HLine { float ypos, speed;

HLine (float y, float s) { ypos = y; speed = s; } void update() { ypos += speed; if (ypos > height) { ypos = 0; } line(0, ypos, width, ypos); } }

= new ()// Declare and construct two objects (h1, h2)// from the class HLineHLine h1 = new HLine(20, 2.0); HLine h2 = new HLine(50, 2.5);

..// Declare and construct two objects (h1, h2)// from the class HLineHLine h1 = new HLine(20, 2.0); HLine h2 = new HLine(50, 2.5);

void setup() { size(200, 200); frameRate(30);}

void draw() { background(204); h1.update(); h2.update(); }

Processing : , ,

Moon Yong Joon

( ) : ,

, : , array, array

. :

Class

line/mulitline doc

; : ;(semi-colon)

= :

[ ] : array array

{ }: array array ,

Keyword

true/false boolean

void : return

private/public

final , final final , (override)

return : . Return void

import : processing video

class :

static : /

extends :

implements: interface

new: new

this: this video

super: class

try/catch: ,

%Module*multiply*=multiply assign+addition++increment>=greater than or equal to+=add assign-minus--decrement-=subtract assign/divide/=divide assign

!= inequality< less thangreater than>=greater than or equal to

! logical NOT&& logical AND||logical OR

&bitwise AND>right shift|bitwise OR

? test ? expression1 : expression2int s = 0; for (int i = 5; i < 100; i += 5) { s = (i < 50) ? 0 : 255; stroke(s); line(30, i, 80, i); }

if

if() { Statements;} if() { Statements;} else if () { statements;}

if () if (test) { statements } for (int i = 5; i < height; i += 5) { stroke(255); // Set the color to white if (i < 35) { // When 'i' is less than 35... stroke(0); //...set the color to black } line(30, i, 80, i); }

else () else if (expression) { statements } else if (expression) { statements } else { statements }for (int i = 5; i < 95; i += 5) { if (i < 35) { line(30, i, 80, i); } else if (i < 65) { line(20, i, 90, i); } else { line(0, i, 100, i); }}

switch () case default switch(expression) { case label: statements case label: // Optional statements default: statements }char letter = 'N';

switch(letter) { case 'A': println("Alpha"); // Does not execute break; case 'B': println("Bravo"); // Does not execute break; default: // Default executes if the case labels println("None"); // don't match the switch parameter break;}

break, continue break/continue for (int i = 0; i < 100; i += 10) {

if (i == 70) { // If 'i' is 70, continue; // skip to the next iteration, } // therefore not drawing the line. line(i, 0, i, height);}

for array 2 for (init; test; update) { statements } for (datatype element : array) { statements }for (int i = 0; i < 40; i = i+1) { line(30, i, 80, i); }int[] nums = { 5, 4, 3, 2, 1 }; for (int i : nums) { println(i); }

for , ,

for : for

for : 2 for

for : for

while while (expression) { statements}int i = 0; while (i < 80) { line(30, i, 80, i); i = i + 5; }

Processing :

Moon Yong Joon

null . array null

boolean boolean true false

byte 127 -128 8

character (16 ) .

color . GET () color() # FFCC00 0xFFFFCCOO 16

float 3.40282347E + 38 -3.40282347E + 38 . 32 (4 )

doublefloat 64

int 2,147,483,647 -2,147,483,648 32

long9,223,372,036,854,775,808 (64 ) 9,223,372,036,854,775,807

binary() , (16, 8 )

boolean() boolean

byte()boolean,byte,char,color,double,float,int, ,long -128and127

char()boolean,byte,char,color,double,float,int, ,long

float()(),

hex()hex

6

int()(),

str(), boolean,

unbinary()(), ()

unhex()()

Processing:String

Moon Yong Joon

String

String : byte char array

String =

String

Char array String

String :

String

joinjoin(list, separator) String[]: array of Strings list

matchmatch(str, regexp)

content

matchAllmatch(str, regexp) String[][]

String[i][0] = String[i][1] =

nf format nf(num) nf(num, digits)nf(num, left, right) num : int[], float[], float, or int digits : 0 left: right:

nfc format 1000 , nf(num) nfc(num, right) num : int[], float[], float, or int right:

nfp format . nfp(num, digits)nfp(num, left, right) num : int[], float[], float, or int digits : 0 left: right:

nfs format . blank nfp(num, digits)nfp(num, left, right) num : int[], float[], float, or int digits : 0 left: right:

split array split(value, delim) value : string delim : char

splitTokes token array splitTokens(value)splitTokens(value, delim) value : string delim : char

, : , blank

trim trim(str)trim(array) str : string array : string array

Processing: ARRAY

Moon Yong Joon

Array

array array []

[] = new [];

array / 1 array array

array / 2 array

Array

append array append(array, value) array : Object, String[], float[], int[], char[], or byte[] value : Object, String, float, int, char, or byte

arrayCopy array array arrayCopy(src, srcPosition, dst, dstPosition, length)arrayCopy(src, dst, length)arrayCopy(src, dst) src, dst : array srcPosition, dstPosition : array length : copy

concat array array array concat(a, b) a, b : Object, String[], float[], int[], char[], byte[], or boolean[]

expand array expand(list, newsize) list : Object, String[], double[], float[], long[], int[], char[], byte[], or boolean[]

Newsize :

reverse array sort reverse(list) list Object, String[], float[], int[], char[], byte[], or boolean[]: booleans[], bytes[], chars[], ints[], floats[], or Strings[]

shorten array shorten(list) list : Object, String[], float[], int[], char[], byte[], or boolean[]

sort array sort sort(list)Sort(list, count) list : String[], float[], int[], char[], or byte[]

count : number of elements to sort, starting from 0

splice array index insert splice(list,value,index) list : Object, String[], float[], int[], char[], byte[], or boolean[]

value : Object, String[], String, float[], float, int[], int, char[], char, byte[], byte, boolean[], or boolean

subset array array subset(list,start)subset(list,start,count) list : Object, String[], float[], int[], char[], byte[], or boolean[]

Processing:setting

Moon Yong Joon

size()/width/height

size syntax size renderer P2D, P3D P2D : OpenGL P3D : OpenGL

P3D render size 3D

2 3 x,y,z z

size . setup ()

width . size () .

height . size () .

clear mousePressed() clear

smooth syntax smooth

:smooth smooth

noSmooth syntax

:noSmooth noSmooth

stroke() syntax storke

: stroke() storke

: noStroke() noStorke

: strokeWeight()

smooth strokeWeight

: strokeCap() ROUND, SQUARE, PROJECT default ROUND

cap strokeCap

squareround

: strokeJoin() MITER, BEVEL, and ROUND default MITER.

join strokeJoin

roundbevel

0 255 0

1 fill

2 fill

3 fill/noFill/noStroke 3 2

noStorke stroke

R,G,B 0 255

RGB, HSB, HEX

RGB R, G, B

(background), (stroke), (fill)

background()stroke()fill()

background syntax alpha :

Background (background)

fill() syntax fill ,RGB/HSB/HEX alpha :

: fill() fill

fill(rgb) fill(rgb, alpha) fill(gray) fill(gray, alpha) fill(v1, v2, v3) fill(v1, v2, v3, alpha) alpha :

Color : RGB 1 fill R,G,B red + green = yellow

Color : RGB 2 fill RGB 255

Color : HEX backgroun/fill hex #818257/#AEDD3C

noFill() noFill

colorMode

colorMode colorMode () , colorMode(mode) colorMode(mode, max) colorMode(mode, max1, max2, max3) colorMode(mode, max1, max2, max3, maxA)modeint: Either RGB or HSB, corresponding to Red/Green/Blue and Hue/Saturation/Brightnessmaxfloat: range for all color elementsmax1float: range for the red or hue depending on the current color modemax2float: range for the green or saturation depending on the current color modemax3float: range for the blue or brightness depending on the current color modemaxAfloat: range for the alpha

colorMode : HSB/RGB HSB(hue, saturation and brightness) RGB

colorMode : HSB 1 Mode

colorMode : HSB 2 Mode stroke hsb

colorMode : RGB 1 Mode

colorMode : RGB 2 Mode stroke r,g,b

Rect Mode

rectMode()

rectMode() : CORNER(2,3) 5, 4

rectMode() : CORNERS(5,5) (8,7)

rectMode() : CORNER/CORNERSCORNERS rect() 3,4 1,2 top(25,25), bottom(50,50)

rect

rectMode() : CENTER(3,3) 5, 5

rectMode() : RADIUS/CENTERCORNERS rect() 3,4

ellipse Mode

ellipseMode : CORNER 4 (3,3) 4 4

ellipseMode : CENTER 5

(3,3) 5 5

ellipseMode : CORNERS (5,5)(8,7)

Processing: 2D

Moon Yong Joon

,

(line), (point)

line strokeWeight stroke

size , background , fill , rect

size , background , nofill , ellipse

triangle(x1, y1, x2, y2, x3, y3)

(quad)

quad(x1, y1, x2, y2, x3, y3, x4, y4)

2

(arc)

arc(a, b, c, d, start, stop) arc(a, b, c, d, start, stop, mode)

1

Radian degree radian degree

radian HALF_PI

0HALF_PI

radian degree(90)

090

: radians

: radians

Processing : vertex

Moon Yong Joon

Vertex

vertex

vertex syntax

vertex beginShape endShape vertex beginShape(); vertex(); endShape();

vertex vertex(x,y)

(30,20)(85,20)(30,75)(85,75)

vertex vertex(x,y)

endShape(CLOSE)

vertex vertex(x,y)

curveVertex

curveVertex syntax curveVertex x,y,z

curveVertex c1 c2 control point

curveVertex 3 curve

c1c2

Vertex

beginShape beginShape kind , , ,

vertex : POINTS beginShape(POINTS) vertex(x,y)

vertex : LINES 1 beginShape(LINES) vertex(x,y)

vertex : LINES 2 beginShape(), endShape() vertex(x,y)

vertex : triangles beginShape(TRIANGLES) vertex(x,y)

vertex : TRIANGLE_STRIP beginShape(TRIANGLE_STRIP) vertex(x,y)

vertex : TRIANGLE_FAN beginShape(TRIANGLE_FAN) vertex(x,y)

vertex : QUADS beginShape(QUADS) vertex(x,y)

vertex : QUAD_STRIP beginShape(QUAD_STRIP) vertex(x,y)

vertex : endShape(CLOSE) vertex(x,y)

Vertex

endShape endShape mode shape

vertex : CLOSE vertex(x,y) endShape(CLOSE)

Processing: mouse

Moon Yong Joon

Mouse mouse ( ) console

mouseButton mouse input draw

mouseClicked mouse input draw

0 255 0

mouseDragged mouse drag input draw

mouseMoved mouse input draw ( mouseDragged )

mousePressed mouse draw

mousePressed mouse draw mousePressed

mouseReleased mouse draw

release

mouseWheel mouse wheel -1 1 wheel

mouseX mouse X

mouseY mouse Y

pmouseX mouseX

pmouseY mouseY

Processing: keyboard

Moon Yong Joon

key

b/B

keyCode key CODED keyCode

keykeyCodeAltALTCtrlCONTROLShiftSHIFTLEFTRIGHTUPDOWNPage UpPAGE_UPPage DownPAGE_DOWNHomeHOMEEndEND

keycode : 1 keykey codeBackspace8Tab9Enter10Shift16Control17Alt18Caps Lock-Escape27Space32Page up33Page down34End35Home36Left37Up38Right39Down40Delete127

keykey code048149250351452553654755856957

keykey codef1112f2113f3114f4115f5116f6117f7118f8119f9120f10121f11122f12123

keycode : 2 keykey codea65b66c67d68e69f70g71h72i73j74k75l76m77n78o79p80q81r82

keykey codes83t84u85v86w87x88y89z90

keykey codeSemicolon (;)186Colon (:)186Plus (+)187Equals sign (=)187Comma (,)188Less than sign ()190Question mark (?)191Forward slash (/)191Backtick (`)192Tilde (~)192Opening square bracket ([)219Opening curly bracket ({)219Backslash (\)220Pipe (|)220Closing square bracket (])221Closing curly bracket (})221Single quote (')222Double quote (")222

keyPressed keyboard

Keyboard

keyPressed keyboard key press

Keyboard

keyReleased keyboard

Keyboard

Processing: time & date

Moon Yong Joon

day/month/year // text

hour/minute/second/millis /// text

Processing:Typography

Moon Yong Joon

text

text

Processing:Transform

Moon Yong Joon

transform ?

pushMatrix()

transform : pushMatrix() pushMatrix

translate() syntax x:, y:, z: z size P3D

translate()

transform : translate() translate

rotate() radian

transform : rotate() rotate

scale() syntax

scale()

transform : scale() scale

transform : popMatrix() popMatrix

XY

transform : popMatrix() popMatrix

Processing:

Moon Yong Joon

hypotenuse, adjacent, opposite , ,

**2 = 4**2 + 3**2 = 16 + 9 = 25 = 5 **2 5

sin, cos, tan

5 cm

sin15 sin

sin15

=r=

x

1

x * , Y *

degrees radians degrees radians

Degrees Radians

degrees radians degrees radians

degrees radians 2 360, 1radian 57.3

cos

cosine syntax angle .

cosine .

cosine

sin

sine syntax angle .

sine .

sine

tan

tan syntax angle .

tangent .

tangent

radian

radian PI, TWO_PI, HALF_PI, PI

HALF_PI

radians & degrees

degrees radians , float

arc

acos, asin, atan cos, sin, tan arc

Processing: math

Moon Yong Joon

: 1

: x**4 1

: 1

Math

math 1 abs(n)ceil(n)Int constrain(amt, low, high) low high , low low, high highdist(x1, y1, x2, y2) dist(x1, y1, z1, x2, y2, z2)exp(n)Returns Euler's number e (2.71828...) raised to the power of the n parameterfloor(n) (int)lerp(start, stop, amt)(Linear Interpolation). start stop amt(0~1) log(n) mag(a, b)mag(a, b, c) () map(value, start1, stop1, start2, stop2)Start1 stop1 start2 stop2

math 2 max(a, b) max(a, b, c) max(list) min(a, b)min(a, b, c)min(list)

norm(value, start, stop)Normalizes a number from another range into a value between 0 and 1.pow(n, e) e round(n) sq(n)sqrt(n)

Lerg

lerp (Linear Interpolation). start stop amt(0~1 )

lerp (Linear Interpolation). start stop amt

Mag/dist

mag/dist

mag/dist

Map

map syntax map(value, start1, stop1, start2, stop2) target

map map(value, start1, stop1, start2, stop2) target

norm

norm 0~1