Did#you#do#this?# • Go"the"CS"Computer"Lab"(Room"231"PSB)" Log"in" • • Start"the"Processing"applica'on" (Make"sure"it"is"Version"2.x)" 2D#Shapes#(using#variables)# • In"a"web"browser,"go"to"the"Tutorials"sec'on"of"processing.org" " hPp://www.processing.org/tutorials/geSngstarted/" " Read"the"GeSng"Started"tutorial"(by"Casey"Reas"&"Ben"Fry)"and"try"out"the" • Crea've"Coding"&"Genera've"Art"in"Processing"2" two"examples"of"simple"Processing"programs"presented"there" If"you’d"like,"install"Processing"2.x"on"your"own"computer" Ira"Greenberg,"Dianna"Xu,"Deepak"Kumar" • Do"the"Coordinate"System"and"Shapes"tutorial" • • Read"Ch."2,"pgs."33W48"(for"last"class)" • Read"Ch."2,"pgs."48W63"(for"this"class)" Start"Assignment"1" • Ques'ons" Drawing#Basics# • Assignment1" • Canvas#–#computer#screen# • Reading"for"today" size( width , height ); " • Entry"Survey"(Please"complete"by"next" " Tuesday)" • Drawing#Tools#–#shape#commands " " " • Colors#–#grayscale,#RGB,#or#RGBA# background(125); # # 1"
Drawing#Tools#D#Basic#Shapes# Drawing#Tools#D#Basic#Shapes# ! Point " "" ! Point " " " "point( x,"y );" ! Arc" x,"y" " " " ! Line " " " x1,"y1" ! Line " " " "line( x1,"y1,"x2,"y2 );" "" ! Quad" " " x2,"y2" " x1,"y1" ! Triangle " " " ! Triangle " " " "triangle( x1,"y1,"x2,"y2,"x3,"y3 );" "" ! Polygon" " x2,"y2" x3,"y3" " x,"y" " ! Rectangle " " "rect( x,"y,"width,"height );" ! Rectangle" " "" height" " " width" ! Curve" ! Ellipse " " " ! Ellipse " " " "ellipse( x,"y,"width,"height );" "" height" x,"y" width" Drawing#&#Shape#AFributes# Drawing#Tools#D#Basic#Shapes# • AnGDaliasing# ! Point " "" ! Arc" " – smooth();" " ! Line " " " – noSmooth();" " "" ! Quad" " • Stroke# " ! Triangle " " " – noStroke();" "" – strokeWeight(<pixel"width>);" ! Polygon" " – stroke(<stroke"color>);" " " ! Rectangle" " "" " • Fill# ! Curve" ! Ellipse " " " – noFill();" "" – fill(<fill"color>);" 2"
Basic#Shapes:#Arcs# Basic#Shapes:#Arcs# arc(x, y, width, height, startAngle, endAngle); " • What"is"an"arc?" " 270°""3π/2" W" degrees" vs "radians " " " " 0°""2π" height" π"180°" 200,"200" TWO_PI" " " " " 90°""π/2" noFill(); width" stroke(255, 0, 0); arc(200, 200, 150, 150, 0, PI); Basic#Shapes:#Arcs# Basic#Shapes:#Arcs# arc(x, y, width, height, startAngle, endAngle); " " 270°""3π/2" W" degrees" vs "radians " " " " 0°""2π" height" " π"180°" 200,"200" TWO_PI" " " " fill(255, 255, 0); 90°""π/2" width" stroke(255, 0, 0); arc(200, 200, 150, 150, 0, PI); 3"
Basic#Shapes:#Quadrilaterals# Basic#Shapes:#Polygons# " quad(x1, y1, x2, y2, x3, y3, x4, y4); " beginShape(); vertex(x1, y1); fill(240,"127,"71);" … quad(100,"50,"200,"50,"250,"100,"50,"100);" noStroke();" vertex(xN, yN); fill(12,"37,"80);" endShape(CLOSE); quad(100,"50,"150,"100,"100,"150,"50,"100);" fill(240,"127,"71);" fill(240,"127,"71);" beginShape();" beginShape();" ""vertex(100,"50);" ""vertex(100,"50);" ""vertex(150,"100);" ""vertex(150,"100);" ""vertex(100,"150);" ""vertex(100,"150);" ""vertex(250,"100);" ""vertex(250,"100);" endShape(CLOSE);" endShape();" noStroke();" fill(163,"208,"193);" quad(100,"50,"150,"100,"100,"150,"250,"100);" Basic#Shapes:#Curves# More#Complex#Curves# " curve(cpx1, cpy1, x1, y1, x2, y2, cpx2, cpy2); " " cpx1,cpy1W"control"point#1" x1,"y1 "W"start"of"curve" beginShape(); x2,"y2 "W"end"of"curve" curveVertex(x1, y1); cpx2,cpy2W"control"point#2" … " curveVertex(xN, yN); Draws"a"CatmullWRom"Spline"between"x1,"y1"and"x2,"y2" curve(50, 50, 150, 50, 250, 100, 50, 200); endShape(CLOSE); " Examples:" 50,"50" 150,"50" beginShape(); 50,"50" 150,"50" curveVertex(50, 50); curveVertex(150, 50); 250,"100" 50,"100" curveVertex(250, 100); curveVertex(50, 200); endShape(); 80,"150" 50,"200" curve(50, 50, 150, 50, 250, 100, 50, 200); curve(50, 50, 80, 150, 50, 100, 150, 50); 4"
Example:#A#Penguin# Review:#Drawing#Basics# //#penguin# beginShape();# curveVertex(112,#80);# Canvas # size(400,#500);# curveVertex(105,#400);# curveVertex(110,#72);# • smooth();# curveVertex(105,#400);# curveVertex(120,#60);# size( width , height ) " Drawing#Tools " " # curveVertex(101,#392);# curveVertex(140,#60);# • point( x, y ) background(0);# curveVertex(108,#387);# curveVertex(180,#90);# line( x1, y1, x2, y2 ) " stroke(245,#63,# curveVertex(117,#398);# # triangle( x1, y1, x2, y2, x3, y3 ) quad( x1, y1, x2, y2, x3, y3, x4, y4 ) 55);# curveVertex(119,#342);# curveVertex(210,#200);# rect( x, y width, height ) strokeWeight(3);# curveVertex(106,#210);# curveVertex(180,#410);# ellipse( x, y, width, height ) arc( x, y, width, height, startAngle, endAngle ) fill(0);# curveVertex(110,#160);# curveVertex(144,#200);# curve( cpx1, cpy1, x1, y1, x2, y2, cpx2, cpy2 ) # curveVertex(121,#120);# curveVertex(160,#136);# beginShape() endShape(CLOSE) curveVertex(122,#99);# curveVertex(164,#125);# vertex( x, y ) curveVertex(116,#90);# curveVertex(163,#117);# curveVertex( x, y ) " • Colors# # curveVertex(153,#135);# grayscale "[0..255]," RGB "[0..255],[0..255],[0..255]," alpha "[0..255]" curveVertex(85,#72);# curveVertex(153,#120);# background( color ) # Drawing#&#Shape#AFributes # curveVertex(112,#80);# curveVertex(163,#110);# • curveVertex(120,#83);# curveVertex(170,#112);# smooth(), noSmooth() stroke( color ), noStroke(), strokeWeight( pixelWidth ) curveVertex(129,#80);# curveVertex(173,#122);# fill( color ), noFill() curveVertex(120,#77);# curveVertex(173,#122);# # # endShape();# Simple#Program#Structure# Simple#Program#Structure# // Draw a simple house // Create and set canvas // Create and set canvas size(width, height); size(300, 300); smooth(); smooth(); background(187, 193, 127); background(color); // wall fill(206, 224, 14); rect(50, 150, 200, 100); // Draw something … // Draw Door fill(72, 26, 2); // Draw something else rect(125, 200, 50, 50); … // Draw roof fill(224, 14, 14); // etc. triangle(50, 150, 150, 50, 250, 150); 5"
Recommend
More recommend
