The Junior Woodchuck Manuel of Processing Programming for Android Devices
|
|
- Darrell Preston
- 6 years ago
- Views:
Transcription
1 Page1of15 TheJuniorWoodchuck Manuel of ProcessingProgramming for AndroidDevices TheImage JuniorWoodchuckManuelforProcessingProgramming Version1 CopyrightDavidNassarandJimRoberts,December2011,PittsburghPA
2 Page2of15 Chapter6 AlmostHome... TheImage First,ACodeCleanup(andreview) InChapter3weintroducedfunctionsthatwewriteandweuse.The functionwewrotewasnamedfigure()anditdrewthis: JuniorWoodchuckManuelforProcessingProgramming Version1 CopyrightDavidNassarandJimRoberts,December2011,PittsburghPA
3 Page3of15 Onereasonwewrotethefigure()functionwassowecouldreuseitto drawasmanyfiguresaswewantedtowithouthavingtocopyandpast thefigurecodeoverandoveragain.writingthefigure()functionletus drawthisimage: andkeepourdraw()functionverysimpleandshort: voiddraw() //BigFigure drawfigure(); //Preparationforsmallfigures w=80; h=80; y=580; //SmallFigure fartherestleft x=50; drawfigure(); //SmallFiguresecondfromleft x=180; drawfigure(); //SmallFigurethirdfromleft x=310; drawfigure(); //SmallFigurefourthfromleft x=440; drawfigure(); JuniorWoodchuckManuelforProcessingProgramming Version1 CopyrightDavidNassarandJimRoberts,December2011,PittsburghPA
4 Page4of15 Wefollowedthisideainthecodewewrotelasttimetheclassmetwhen wewrotethiscode: //Wrap And Bounce //Day 3 App Lab //QVHS and MHS float x, y, deltax; float px, py, deltapy; PImage p; void setup( ) size( 400, 400 ); imagemode( CENTER ); nostroke( ); p = loadimage( "Jim.jpg"); x = 0; y = height/2; px = width/2; py = 0; deltax = 3; deltapy = 4; void draw( ) preparescreen( ); drawbouncingfigure( ); drawwrappingfigure( ); void drawwrappingfigure( ) fill( 0, 0, 200 ); ellipse( px, py, 40, 40 ); image ( p, px, py, 30, 30 ); void changebouncingfigure( ) x = x + deltax; if( x > width ) // too far right //x = 0; //deltax = deltax + 2; deltax = -deltax; if ( x < 0 ) // too far left deltax = -deltax; void changewrappingfigure( ) py = py + deltapy; if ( py > height + 40 ) py = -40; changebouncingfigure( ); changewrappingfigure( ); void preparescreen( ) fill( 200, 200, 0, 30 ); rect(0, 0, width, height); void drawbouncingfigure( ) fill( 200, 0, 0 ); ellipse( x, y, 33, 22 ); JuniorWoodchuckManuelforProcessingProgramming Version1 CopyrightDavidNassarandJimRoberts,December2011,PittsburghPA
5 Page5of15 Thiscodedrawsthefollowing: Thisishowwewriteanduserourownfunctions.Thecodeinthedraw() functionshownbelowtellsprocessingexactlywhattodo.however,these functionsarenotdefinedinprocessing sapisowehavetowritethecode thatdefines(tellsprocessinghowtodo)thebehaviorrequested. void draw( ) preparescreen( ); drawbouncingfigure( ); drawwrappingfigure( ); changebouncingfigure( ); changewrappingfigure( ); Herearethedefinitionsfortwoofthesefunctions: void drawwrappingfigure( ) fill( 0, 0, 200 ); ellipse( px, py, 40, 40 ); image ( p, px, py, 30, 30 ); void changebouncingfigure( ) x = x + deltax; if( x > width ) // too far right //x = 0; //deltax = deltax + 2; deltax = -deltax; if ( x < 0 ) // too far left deltax = -deltax; Thesyntaxthatisrequiredisshowninblue.Thecodeinblackisuptous. Inourcodetheparenthesesareempty.Ifyoutakea real programming course,youwilllearnhowandwhentoputstuffintotheparentheses. Wedonothavetimetostudythatpartofprogramming. JuniorWoodchuckManuelforProcessingProgramming Version1 CopyrightDavidNassarandJimRoberts,December2011,PittsburghPA
6 Page6of15 Comparetheotherfunctiondefinitionsonpage4tothesetwodefinitions toseehowtheyarethesameandhowtheyaredifferent. Whydowedothis?Thereareseveralreasons.Oneisthatitmakesthe codewewanttowritemucheasiertoworkwith,debug,modify,and explaintoothers. Anotherthingthatwedidlasttime.Wehaveusedsomevariablesinthe codethatweown. Herearethevariables: float x, y, deltax; float px, py, deltapy; PImage p; Hereishowweinitializetheminoursetup()function: void setup( ) size( 400, 400 ); imagemode( CENTER ); nostroke( ); p = loadimage( "Jim.jpg"); x = 0; y = height/2; px = width/2; py = 0; deltax = 3; deltapy = 4; ThefunctioncallslikeimageMode(CENTER)and loadimage( Jim.jpg )areexplainedintheapi.lookthemupif youarenotsurewhattheyaredoing. Youcanlookattheotherfunctiondefinitionstoseehowweusedthese variables. JuniorWoodchuckManuelforProcessingProgramming Version1 CopyrightDavidNassarandJimRoberts,December2011,PittsburghPA
7 Page7of15 Whydowedothis?Youjustreadthisabovebuthereitisagain: Itmakesthecodewewanttowritemucheasiertoworkwith,debug, modify,andexplaintoothers.italsoletsourprogramchangesit behaviorasitisrunning. WealsousedsomevariablesownedbyProcessing.Twoofthese many more arewidthandheight.thesevariablesareinitially100and100.but whenweusethesize( )function,theyhavedifferentvalues.processing s variablewidthusesthefirstargumentasitsvalueanditsvariableheight usesthesecondargumentforitsvalue.youcanseehowweusedthese variablesinthecodebelow: //Wrap And Bounce //Day 3 App Lab //QVHS and MHS float x, y, deltax; float px, py, deltapy; PImage p; void setup( ) size( 400, 400 ); imagemode( CENTER ); nostroke( ); p = loadimage( "Jim.jpg"); x = 0; y = height/2; px = width/2; py = 0; deltax = 3; deltapy = 4; void drawbouncingfigure( ) fill( 200, 0, 0 ); ellipse( x, y, 33, 22 ); void drawwrappingfigure( ) fill( 0, 0, 200 ); ellipse( px, py, 40, 40 ); image ( p, px, py, 30, 30 ); void changebouncingfigure( ) x = x + deltax; if( x > width ) // too far right //x = 0; //deltax = deltax + 2; void draw( ) preparescreen( ); drawbouncingfigure( ); drawwrappingfigure( ); changebouncingfigure( ); changewrappingfigure( ); void preparescreen( ) fill( 200, 200, 0, 30 ); rect(0, 0, width, height); deltax = -deltax; if ( x < 0 ) // too far left deltax = -deltax; void changewrappingfigure( ) py = py + deltapy; if ( py > height + 40 ) py = -40; JuniorWoodchuckManuelforProcessingProgramming Version1 CopyrightDavidNassarandJimRoberts,December2011,PittsburghPA
8 Page8of15 IfweuseProcessing svariableslikethis,thenifwechangethesizeofthe window,wedonothavetochangeanythingelseinourcode. Wehavejustspent10pagesblatheringaboutsomethingthat programmerscall style. Youdonothavetowritefunctions.Youcanputallofyourcodeinsetup( )anddraw( ). Youdonothavetousevariables.Youcanusenumberseverywhere. Thisdecisioninthisclassisyours. BUTifyouwanttobeabletoquicklyfinemistakes,orquicklymodifyyour program,orreusetodosomethingrelatedbutdifferent,orexplainitto someoneelse,thisstylewillmakeyoulifeasaprogrammermucheasier. Andotherprogrammersthatmightlookatyourcodewillhavemuch greaterrespectforyourwork. Now..ontosomereallynewstuff... JuniorWoodchuckManuelforProcessingProgramming Version1 CopyrightDavidNassarandJimRoberts,December2011,PittsburghPA
9 Page9of15 SomeReallyNewStuff Wehavewrittencodethatwrapsamovingfigureandcodethatbounces amovingfigure.let stakethecodethatwrapsamovingfigureandadd usercontroltothemovement. Thewaywealterthespeedanddirectionoftherectistoalterthevalues ofthevariablesdeltaxfortheellipseanddeltapyforthepicture.itis possibletodothiswhiletheprogramisrunning.wesawthatlasttime. Sincewecandothat,wecanputinsomecodethatwilllettheuser drive theimageonthescreen. Thisquestionbringsustoanewkindoffunction.Let sreview wehave seenthreekindsoffunctions: Processingwritesthemandweusedthem:rect(),fill(),... WewritethemandProcessingusesthem:setup(),draw(). Wewritethemandweusethem:figure(),moveRectFigure(),... Letusintroduceyoutoafourthkindoffigure: WewriteitandProcessingwilluseitwhenthe userdoes something. Anytimea userdoessomething withortothecomputer,itiscalledan event.thetypicaleventshappenwhentheuserpressesakeyormoves themouse.therearemanydifferentevents.wearegoingtouseone thatworkswiththecomputer,intheandroidemulator,andyourandroid device. Theeventwearegoingtousehappenswhentheuserdragsthemouse (draggingmeansthatthemousebuttonisdown)ormovestheirfingeron theandroidscreen.hereishowwedoit. Ifwewriteafunctionnamed mousedragged( ) JuniorWoodchuckManuelforProcessingProgramming Version1 CopyrightDavidNassarandJimRoberts,December2011,PittsburghPA
10 Page10of15 thenwhenevertheuser: pressesthemousebuttonandmovesthemouseonthecomputer, pressesthemousebuttonandmovesthemouseintheemulator,or putsandmovestheirfingerontheandroiddevicescreen Processingwillusethisfunction. Itmustbenamedexactlyasshowandtheparenthesesmustbeempty. Insidethebraceswecandoanythingthatwewanttodo. Whatwewanttodoischangethespeedofthemovementoftherect. Question, Howdowedothat? JuniorWoodchuckManuelforProcessingProgramming Version1 CopyrightDavidNassarandJimRoberts,December2011,PittsburghPA
11 Page11of15 Hereisonewaywemightsolvethis: user moves mouse right horizontal speed increases user moves mouse left horizontal speed decreases Thismightwork.Youmayhaveabetterideabutyourteacheriswriting thissoitwillhavetodo sigh AnotherQuestion Howdoweknowwhichwaythemouseismoving? Whenwehaveaproblemlikethisandwearenotsurehowtodoitorwe haveneversolvedaproblemlikethis,agoodwaytostartistolistallof thedatawehave(variables)andseewhatmightbehelpful. Let ssee wehaveourvariablesinthecode: float x, y, deltax; float px, py, deltapy; PImage p; Whichvariableorvariablesdoweneedtochangesowecanspeedup andslowdownthepicture(nottheellipse)?thinkaboutit. JuniorWoodchuckManuelforProcessingProgramming Version1 CopyrightDavidNassarandJimRoberts,December2011,PittsburghPA
12 Page12of15 Didyoureallythinkaboutit? deltapy Thisisthevariablethatcontrolsthespeedofthepicture.Ifwechangeit, wechangethespeedofthepicture. NowwhichProcessingvariablescanweusetohelpusalterourvariables? width, height, mousex, mousey Again,thinkaboutit. Weareworkingwiththeverticalmovementonly youwillworkonthe horizontalmovementduringthenextweek. Itseemsreasonabletochecktheverticalmovementofthemouse.So,we willusemousey. Butweonlyknowwherethemouseisnow(mouseX and mousey).inorder toknowwhichwaytheusermovedit,weneedtoknowwhereitwas.if weknowwhereitwas,wecancomparewhereitwastowhereitisand figureoutwhichwayitismoving. Well,wherewasit? ItturnsoutthatProcessing remembers wherethemousewasinthe previousframe.processingstoresthatinformationintwoothervariables thatwecanuse: pmousex and pmousey which stands for Previous Mouse X and Previous Mouse Y. We know you are probably thinking, Is there anything Processing does not know? Great,nowathirdquestion Howdoweusethesevariables? Weareworkingwiththeverticalmovement.Theverticalmovements shouldbeverysimilar. JuniorWoodchuckManuelforProcessingProgramming Version1 CopyrightDavidNassarandJimRoberts,December2011,PittsburghPA
13 Page13of15 Iftheuserismovingthemousedownthentheycoordinateofthemouse wouldbegettinglargerfromthepastframetothecurrentframe.thetop edgeispositionzeroandthebottomedgeispositionheightorinthis code,400 void setup( ) size( 400, 800 );... sowhentheuserismovingthemousetothedown,mouseywillget bigger.weneedtoaskthequestion, IsthevalueofmouseYisgetting bigger? RememberthatthewayweaskquestionsinProcessingistousetheif( ) sowecandothatwithsomecodelikethis: if ( mousey > pmousey) ThissaysinEnglish Ifthevalueofthevariable,mouseYisbiggerthanthe valueofthevariable,pmousey whichiswhatwewanttoknow. Iftheansweristrue,thenwewanttoincreasethevalueofthevariable deltapy Howmuchweincreaseitisupeachofus.Wecanincreaseitbyasmall amountlike0.1orbyalargeramountlike1,orbyahugeamountlike10. Wehavetotrydifferentvaluesandseewhatwelike.Ideallythisvalue willbeavariablesowecanfindandchangeiteasilyaswetinkerand tuneourcode.let sassumewehaveavariablenamedchangeamountand itissettoasmallvaluelike0.1. Ifwedo,wecanwritethecodelikethis: if ( mousey > pmousey) deltapy = deltapy + changeamount; JuniorWoodchuckManuelforProcessingProgramming Version1 CopyrightDavidNassarandJimRoberts,December2011,PittsburghPA
14 Page14of15 ThenewmouseDragged( )wouldlooklikethis: void mousedragged ( ) if ( mousey > pmousey) deltapy = deltapy + changeamount; Ifthemovementupward,wecansubtractchangeAmount fromdeltapy. Thissamepatterncanbeusedforthehorizontalmovementofthemouse. Rememberthatyouneedtoaddhorizontalmovement.Youwillneeda deltapxvariableandyouwillneedaddcodetothe changewrappingfigure( ) functiontocreatehorizontalmovement.weleavethemforyoutowrite. Onthenextpageisyourteacher sversionofthiscode.hehasleftalong traceonthewindowsoyoucanseehowthemovementworks. JuniorWoodchuckManuelforProcessingProgramming Version1 CopyrightDavidNassarandJimRoberts,December2011,PittsburghPA
15 Page15of15 IntheNextExcitingChapter Wearegoingtotrytoputthiscodetogetherwiththefunctionsthat bouncethecircleofftheedgesofthewindowandusetheresultingcode forthebasisforagame.youwilltrytodrivetherectaroundthescreen andcollidewiththebouncingcircle.ifyoudocollide,youwill dramatize thecollisionandincreaseyourscore.youwilldisplayyour scoreonthescreenand,possiblyhowlongyouhavebeenplayingthe game. Wewillhavetofigureouthowtodetectthecollisionandhowtodisplay textandtimethegame.wecandothat! So,gobackoverthisandthepreviouschaptersandtrytounderstandthe code.ifyoudonot,writeyourquestionsdownandbringthemtoclass. ifyouhavetime,lookupthedistance(),text(),andmillis()functionsin theapi. Goodprogramming... JuniorWoodchuckManuelforProcessingProgramming Version1 CopyrightDavidNassarandJimRoberts,December2011,PittsburghPA
The Junior Woodchuck Manuel of Processing Programming for Android Devices
Page1of14 TheJuniorWoodchuck Manuel of ProcessingProgramming for AndroidDevices TheImage JuniorWoodchuckManuelforProcessingProgramming Version1 CopyrightJimRoberts,November2012,PittsburghPA Page2of14 Chapter5
More informationA B C D CS105 03a Interaction
Interaction Function Definition Events Built-in Variables CS105 03a Interaction 1 Which image is drawn by this code? strokeweight(10); stroke(0, 255, 0); // green line(99, 0, 0, 99); stroke(200, 0, 200);
More informationmith College Computer Science CSC103 How Computers Work Week 7 Fall 2017 Dominique Thiébaut
mith College Computer Science CSC103 How Computers Work Week 7 Fall 2017 Dominique Thiébaut dthiebaut@smith.edu Important Review Does the animation leave a trace? Are the moving objects move without a
More informationComputer Graphics. Interaction
Computer Graphics Interaction Jordi Linares i Pellicer Escola Politècnica Superior d Alcoi Dep. de Sistemes Informàtics i Computació jlinares@dsic.upv.es http://www.dsic.upv.es/~jlinares processing allows
More informationPick a number. Conditionals. Boolean Logic Relational Expressions Logical Operators Numerical Representation Binary. CS Conditionals 1
Conditionals Boolean Logic Relational Expressions Logical Operators Numerical Representation Binary CS105 04 Conditionals 1 Pick a number CS105 04 Conditionals 2 Boolean Expressions An expression that
More informationCISC 1600 Lecture 2.2 Interactivity&animation in Processing
CISC 1600 Lecture 2.2 Interactivity&animation in Processing Topics: Interactivity: keyboard and mouse variables Interactivity: keyboard and mouse listeners Animation: vector graphics Animation: bitmap
More informationWhat is a variable? a named location in the computer s memory. mousex mousey. width height. fontcolor. username
What is a variable? a named location in the computer s memory mousex mousey width height fontcolor username Variables store/remember values can be changed must be declared to store a particular kind of
More informationCISC 1600, Lab 3.1: Processing
CISC 1600, Lab 3.1: Processing Prof Michael Mandel 1 Getting set up For this lab, we will be using OpenProcessing, a site for building processing sketches online using processing.js. 1.1. Go to https://www.openprocessing.org/class/57767/
More informationCISC 1600, Lab 2.1: Processing
CISC 1600, Lab 2.1: Processing Prof Michael Mandel 1 Getting set up For this lab, we will be using Sketchpad, a site for building processing sketches online using processing.js. 1.1. Go to http://cisc1600.sketchpad.cc
More informationExploring Processing
Exploring Processing What is Processing? Easy-to-use programming environment Let s you edit, run, save, share all in one application Designed to support interactive, visual applications Something we ve
More informationClass Notes CN19 Class PImage Page
1 Images and the Graphics Window Prior to beginning the work with different parts of the libraries, we spent time with classes. One reason for that was to provide some background when we started this part
More informationBasic Computer Programming (Processing)
Contents 1. Basic Concepts (Page 2) 2. Processing (Page 2) 3. Statements and Comments (Page 6) 4. Variables (Page 7) 5. Setup and Draw (Page 8) 6. Data Types (Page 9) 7. Mouse Function (Page 10) 8. Keyboard
More information[ the academy_of_code] Senior Beginners
[ the academy_of_code] Senior Beginners 1 Drawing Circles First step open Processing Open Processing by clicking on the Processing icon (that s the white P on the blue background your teacher will tell
More informationModule 05 User Interfaces. CS 106 Winter 2018
Module 05 User Interfaces CS 106 Winter 2018 UI is a big topic GBDA 103: User Experience Design UI is a big topic GBDA 103: User Experience Design CS 349: User Interfaces CS 449: Human-Computer Interaction
More informationmith College Computer Science CSC103 How Computers Work Week 6 Fall 2017 Dominique Thiébaut
mith College Computer Science CSC103 How Computers Work Week 6 Fall 2017 Dominique Thiébaut dthiebaut@smith.edu Ben Fry on Processing... http://www.youtube.com/watch?&v=z-g-cwdnudu An Example Mouse 2D
More informationWhat can we do with Processing? Let s check. Natural Language and Dialogue Systems Lab Guest Image. Remember how colors work.
MIDTERM REVIEW: THURSDAY I KNOW WHAT I WANT TO REVIEW. BUT ALSO I WOULD LIKE YOU TO TELL ME WHAT YOU MOST NEED TO GO OVER FOR MIDTERM. BY EMAIL AFTER TODAY S CLASS. What can we do with Processing? Let
More informationCISC 1600, Lab 2.2: Interactivity in Processing
CISC 1600, Lab 2.2: Interactivity in Processing Prof Michael Mandel 1 Getting set up For this lab, we will again be using Sketchpad, a site for building processing sketches online using processing.js.
More informationWhat is a variable? A named locajon in the computer s memory. A variable stores values
Chapter 4 Summary/review coordinate system basic drawing commands and their parameters (rect, line, ellipse,background, stroke, fill) color model - RGB + alpha Processing IDE - entering/saving/running
More informationUsing Methods. Methods that handle events. Mairead Meagher Dr. Siobhán Drohan. Produced by: Department of Computing and Mathematics
Using Methods Methods that handle events Produced by: Mairead Meagher Dr. Siobhán Drohan Department of Computing and Mathematics http://www.wit.ie/ Caveat The term function is used in Processing e.g. line(),
More informationFunctions. Functions. nofill(); point(20, 30); float angle = map(i, 0, 10, -2, 2); parameters return values
Functions parameters return values 06 Functions 1 Functions Code that is packaged so it can be run by name Often has parameters to change how the function works (but not always) Often performs some computation
More informationCISC 1600, Lab 3.2: Interactivity in Processing
CISC 1600, Lab 3.2: Interactivity in Processing Prof Michael Mandel 1 Getting set up For this lab, we will be using OpenProcessing, a site for building processing sketches online using processing.js. 1.1.
More informationIntroduction to Processing. Sally Kong
Introduction to Processing Sally Kong - Open Source Platform - Geared toward creating visual, interactive media - Created by Ben Fry and Casey Reas Basic Setup void setup() { size(800, 600); background(255);
More informationWatch the following for more announcements
Review "plain text file" loadstrings() split() splittokens() selectinput() println(), float(), int(), can take an array argument, will return an array easy way to convert an array of Strings to an array
More informationKimberly Nguyen Professor Oliehoek Introduction to Programming 8 September 2013
1. A first program // Create 200x200 canvas // Print favorite quote size(200, 200); println("it is what it is"); // Draw rectangle and a line rect(100,100,50,50); line(0,0,50,50); // Save as.pde. Can be
More informationBits and Bytes. How do computers compute?
Bits and Bytes How do computers compute? Representing Data All data can be represented with: 1s and 0s on/of true/false Numbers? Five volunteers... Binary Numbers Positional Notation Binary numbers use
More informationUniversity of Cincinnati. P5.JS: Getting Started. p5.js
p5.js P5.JS: Getting Started Matthew Wizinsky University of Cincinnati School of Design HTML + CSS + P5.js File Handling & Management Environment Canvas Coordinates Syntax Drawing Variables Mouse Position
More informationInteraction Design A.A. 2017/2018
Corso di Laurea Magistrale in Design, Comunicazione Visiva e Multimediale - Sapienza Università di Roma Interaction Design A.A. 2017/2018 5 Basics of Processing Francesco Leotta, Andrea Marrella Last update
More informationInteraction Design A.A. 2017/2018
Corso di Laurea Magistrale in Design, Comunicazione Visiva e Multimediale - Sapienza Università di Roma Interaction Design A.A. 2017/2018 7 Conditionals in Processing Francesco Leotta, Andrea Marrella
More informationIteration in Programming
Iteration in Programming for loops Produced by: Mairead Meagher Dr. Siobhán Drohan Department of Computing and Mathematics http://www.wit.ie/ Topics list There are three types of loop in programming: While
More informationWe will start our journey into Processing with creating static images using commands available in Processing:
Processing Notes Chapter 1: Starting Out We will start our journey into Processing with creating static images using commands available in Processing: rect( ) line ( ) ellipse() triangle() NOTE: to find
More information+ Inheritance. Sometimes we need to create new more specialized types that are similar to types we have already created.
+ Inheritance + Inheritance Classes that we design in Java can be used to model some concept in our program. For example: Pokemon a = new Pokemon(); Pokemon b = new Pokemon() Sometimes we need to create
More informationChapter 5. Condi.onals
Chapter 5 Condi.onals Making Decisions If you wish to defrost, press the defrost bu=on; otherwise press the full power bu=on. Let the dough rise in a warm place un.l it has doubled in size. If the ball
More informationCISC 1600 Lecture 3.1 Introduction to Processing
CISC 1600 Lecture 3.1 Introduction to Processing Topics: Example sketches Drawing functions in Processing Colors in Processing General Processing syntax Processing is for sketching Designed to allow artists
More informationMiscellaneous Stuff That Might Be Important.
1 Miscellaneous Stuff That Might Be Important. Variable mousepressed VS function mousepressed( ) For much of the work in this class, it is usually safer to use the function form of mousepressed( ) instead
More informationTo specify the dimensions of the drawing canvas use the size statement: ! size( 300, 400 );
Study Guide We have examined three main topics: drawing static pictures, drawing simple moving pictures, and manipulating images. The Final Exam will be concerned with each of these three topics. Each
More information5.1. Examples: Going beyond Sequence
Chapter 5. Selection In Chapter 1 we saw that algorithms deploy sequence, selection and repetition statements in combination to specify computations. Since that time, however, the computations that we
More informationInteraction Design A.A. 2017/2018
Corso di Laurea Magistrale in Design, Comunicazione Visiva e Multimediale - Sapienza Università di Roma Interaction Design A.A. 2017/2018 8 Loops and Arrays in Processing Francesco Leotta, Andrea Marrella
More information1 Getting started with Processing
cisc3665, fall 2011, lab I.1 / prof sklar. 1 Getting started with Processing Processing is a sketch programming tool designed for use by non-technical people (e.g., artists, designers, musicians). For
More informationOld 257 Exam #2s for Practice
Old Exam #2s 257/757 Exploring Programming with Graphics Page 1 Old 257 Exam #2s for Practice Exams will be taken on Thursday March 27 in the cluster. You will have the entire class time to do the exam.
More information1 Getting started with Processing
cis3.5, spring 2009, lab II.1 / prof sklar. 1 Getting started with Processing Processing is a sketch programming tool designed for use by non-technical people (e.g., artists, designers, musicians). For
More informationCS 101 Functions. Lecture 15
CS 101 Functions Lecture 15 1 Key Processing language features so-far Basic color/shapes drawing Variables For-loops If-statements 2 Functions In the next few days, we ll be talking about Functions A Function
More informationINTRODUCTION TO PROCESSING. Alark Joshi, Amit Jain, Jyh-haw Yeh and Tim Andersen
INTRODUCTION TO PROCESSING Alark Joshi, Amit Jain, Jyh-haw Yeh and Tim Andersen What is Processing? Processing is a programming language designed to make programming easier Developers were frustrated with
More informationProcessing & Arduino in Tandem. Creating Your Own Digital Art Tools
Processing & Arduino in Tandem Creating Your Own Digital Art Tools Week 2 - Making your own drawing tool Using Processing to build a basic application Segment 1 - A Basic Drawing Program Change window
More informationModule 01 Processing Recap
Module 01 Processing Recap Processing is a language a library an environment Variables A variable is a named value. It has a type (which can t change) and a current value (which can change). Variables
More informationCISC 1600 Lecture 2.2 Interactivity&animation in Processing
CISC 1600 Lecture 2.2 Interactivity&animation in Processing Topics: Interactivity: keyboard and mouse variables Interactivity: keyboard and mouse listeners Animation: vector graphics Animation: bitmap
More informationCS 201 Advanced Object-Oriented Programming Lab 10 - Recursion Due: April 21/22, 11:30 PM
CS 201 Advanced Object-Oriented Programming Lab 10 - Recursion Due: April 21/22, 11:30 PM Introduction to the Assignment In this assignment, you will get practice with recursion. There are three parts
More informationArt, Randomness, and Functions
Art, Randomness, and Functions Midterm Step up your game! Common Issues Essays Final stage! Read your peer reviews on CrowdGrader Vote your reviews as helpful or unhelpful This affects other people's grades,
More information(Inter)Ac*ve Scripts. Sta*c Program Structure 1/26/15. Crea+ve Coding & Genera+ve Art in Processing 2 Ira Greenberg, Dianna Xu, Deepak Kumar
(Inter)Ac*ve Scripts Crea+ve Coding & Genera+ve Art in Processing 2 Ira Greenberg, Dianna Xu, Deepak Kumar Slides revised by Michael Goldwasser Sta*c Program Structure // Create and set canvas size(width,
More informationCS110 Introduction to Computing Fall 2016 Practice Exam 1 -- Solutions
CS110 Introduction to Computing Fall 2016 Practice Exam 1 -- Solutions The exam will be closed-note and closed-book; please consider this fact before using your notes on this practice version. Please see
More informationModule 01 Processing Recap. CS 106 Winter 2018
Module 01 Processing Recap CS 106 Winter 2018 Processing is a language a library an environment Variables A variable is a named value. It has a type (which can t change) and a current value (which can
More informationBasic Input and Output
Basic Input and Output CSE 120 Spring 2017 Instructor: Justin Hsia Teaching Assistants: Anupam Gupta, Braydon Hall, Eugene Oh, Savanna Yee Administrivia Assignments: Animal Functions due today (4/12) Reading
More informationThe Processing language
The Processing language Developed by Ben Fry and Casey Reas at MIT in 2001 Related to the languages Logo and Java Free, open-source software processing.org contains many programming resources www.openprocessing.org
More information1. Complete these exercises to practice creating user functions in small sketches.
Lab 6 Due: Fri, Nov 4, 9 AM Consult the Standard Lab Instructions on LEARN for explanations of Lab Days ( D1, D2, D3 ), the Processing Language and IDE, and Saving and Submitting. Rules: Do not use the
More informationBasic Input and Output
Basic Input and Output CSE 120 Winter 2019 Instructor: Teaching Assistants: Justin Hsia Ann Shan, Eunia Lee, Pei Lee Yap, Sam Wolfson, Travis McGaha Facebook to integrate WhatsApp, Instagram and Messenger
More informationCS110 Introduction to Computing Fall 2016 Practice Exam 1
CS110 Introduction to Computing Fall 2016 Practice Exam 1 The exam will be closed-note and closed-book; please consider this fact before using your notes on this practice version. Please see the abbreviated
More informationCST112 Variables Page 1
CST112 Variables Page 1 1 3 4 5 6 7 8 Processing: Variables, Declarations and Types CST112 The Integer Types A whole positive or negative number with no decimal positions May include a sign, e.g. 10, 125,
More informationCOMP Summer 2015 (A01) Jim (James) Young jimyoung.ca
COMP 1010- Summer 2015 (A01) Jim (James) Young young@cs.umanitoba.ca jimyoung.ca final float MAX_SPEED = 10; final float BALL_SIZE = 5; void setup() { size(500, 500); void draw() { stroke(255); fill(255);
More informationVariables and Control Structures. CS 110 Eric Eaton
Variables and Control Structures CS 110 Eric Eaton Review Random numbers mousex, mousey setup() & draw() framerate(), loop(), noloop() Mouse and Keyboard interaccon Arcs, curves, bézier curves, custom
More informationMethods (cont.) Chapter 7
Methods (cont.) Chapter 7 Defining Simple Methods ReturnType Iden&fier ( ParameterList ) { Body ReturnType is the type of value returned from the method/funcbon. IdenBfier is the name of the method/funcbon.
More informationRecall that creating or declaring a variable can be done as follows:
Lesson 2: & Conditionals Recall that creating or declaring a variable can be done as follows:! float radius = 20;! int counter = 5;! string name = Mr. Nickel ;! boolean ispressed = true;! char grade =
More informationCISC 1600, Lab 2.3: Processing animation, objects, and arrays
CISC 1600, Lab 2.3: Processing animation, objects, and arrays Prof Michael Mandel 1 Getting set up For this lab, we will again be using Sketchpad. sketchpad.cc in your browser and log in. Go to http://cisc1600.
More informationfor(int i = 0; i < numbers.length; i++) {
Computation as an Expressive Medium Lab 3: Shapes, Rockets, Mice, Cookies and Random Stuff Joshua Cuneo Agenda Time Project 1 Array Loops, PImage, Fonts Drawing polygons Trigonometry review random() Methods
More informationCS 106 Winter Lab 05: User Interfaces
CS 106 Winter 2018 Lab 05: User Interfaces Due: Wednesday, February 6th, 11:59pm This lab will allow you to practice User Interfaces using Direct Manipulation and ControlP5. Each question is on a separate
More informationCSE120 Wi18 Final Review
CSE120 Wi18 Final Review Practice Question Solutions 1. True or false? Looping is necessary for complex programs. Briefly explain. False. Many loops can be explicitly written out as individual statements
More informationBreakout YEAH hours. Brahm Capoor & Jared Wolens
Breakout YEAH hours Brahm Capoor & Jared Wolens Road Map YEAH hour schedule Deadline: Due Wednesday, February 8th Lecture Review Using the debugger Assignment Overview Q&A! YEAH hours this quarter Assignment
More informationCS116X Midterm Review Winter 2015
CS116X Midterm Review Winter 2015 This review will most likely not cover everything that could possibly be on the exam. The following is intended to help you study but remember that you may be tested on
More informationBasic Input and Output
Basic Input and Output CSE 120 Winter 2018 Instructor: Teaching Assistants: Justin Hsia Anupam Gupta, Cheng Ni, Eugene Oh, Sam Wolfson, Sophie Tian, Teagan Horkan How the Facebook algorithm update will
More informationLoops. Variable Scope Remapping Nested Loops. Donald Judd. CS Loops 1. CS Loops 2
Loops Variable Scope Remapping Nested Loops CS105 05 Loops 1 Donald Judd CS105 05 Loops 2 judd while (expression) { statements CS105 05 Loops 3 Four Loop Questions 1. What do I want to repeat? - a rect
More informationLecture 6: Processing
stanford hci group / cs377s Designing Applications that See Lecture 6: Processing Dan Maynes-Aminzade 24 January 2008 Designing Applications that See http://cs377s.stanford.edu Reminders Assignment t#
More informationCPSC Fall L01 Final Exam
CPSC 601.36 - Fall 2009 - L01 Final Exam Copyright Jeffrey Boyd 2009 December 12, 2009 Time: 120 minutes General instructions: 1. This exam is open-book. You may use any reference material you require,
More informationCMPT-166: Sample Midterm
CMPT 166, Fall 2016, Surrey Sample Midterm 1 Page 1 of 11 CMPT-166: Sample Midterm Last name exactly as it appears on your student card First name exactly as it appears on your student card Student Number
More informationClass #1. introduction, functions, variables, conditionals
Class #1 introduction, functions, variables, conditionals what is processing hello world tour of the grounds functions,expressions, statements console/debugging drawing data types and variables decisions
More informationConditional Events. Mouse events and Operators. Dr. Siobhán Drohan Mairead Meagher. Produced by:
Conditional Events Mouse events and Operators Produced by: Dr. Siobhán Drohan Mairead Meagher Department of Computing and Mathematics http://www.wit.ie/ Topics list Mouse Events Recap: Arithmetic Operators
More informationNotes from the Boards Set # 5 Page
1 Yes, this stuff is on the exam. Know it well. Read this before class and bring your questions to class. Starting today, we can no longer write our code as a list of function calls and variable declarations
More informationKhan Academy JavaScript Study Guide
Khan Academy JavaScript Study Guide Contents 1. Canvas graphics commands with processing.js 2. Coloring 3. Variables data types, assignments, increments 4. Animation with draw loop 5. Math expressions
More informationif / if else statements
if / if else statements December 1 2 3 4 5 Go over if notes and samples 8 9 10 11 12 Conditionals Quiz Conditionals TEST 15 16 17 18 19 1 7:30 8:21 2 8:27 9:18 3 9:24 10:14 1 CLASS 7:30 8:18 1 FINAL 8:24
More informationLab Lab 4 : Pretty, Pretty Pretty, Pretty Pictures Picture Joshua Cuneo
Computation as an Expressive Medium Lab 4: Pretty, Pretty Pictures Joshua Cuneo For today ¼ Checkpoint Building Blocks Assignment 2 Images + More Images Accessing Pixels 2D Arrays Project 2 Checkpoint
More informationIntroduction to Processing
Processing Introduction to Processing Processing is a programming environment that makes writing programs easier. It contains libraries and functions that make interacting with the program simple. The
More informationChapter 12: Functions Returning Booleans and Collision Detection
Processing Notes Chapter 12: Functions Returning Booleans and Collision Detection So far we have not done much with booleans explicitly. Again, a boolean is a variable or expression that takes on exactly
More informationIf the ball goes off either the right or left edge, turn the ball around. If x is greater than width or if x is less than zero, reverse speed.
Conditionals 75 Reversing the Polarity of a Number When we want to reverse the polarity of a number, we mean that we want a positive number to become negative and a negative number to become positive.
More informationBasic Input and Output
Basic Input and Output CSE 120 Spring 2017 Instructor: Justin Hsia Teaching Assistants: Anupam Gupta, Braydon Hall, Eugene Oh, Savanna Yee How airlines like United choose who to kick off a flight On Sunday
More informationSimulation and User Interaction
Chapter 3 Simulation and User Interaction What is in This Chapter? This chapter explains the concepts behind very simple computer simulations. All examples are explained within a graphical context. The
More informationGRAPHICS PROGRAMMING. LAB #3 Starting a Simple Vector Animation
GRAPHICS PROGRAMMING LAB #3 Starting a Simple Vector Animation Introduction: In previous classes we have talked about the difference between vector and bitmap images and vector and bitmap animations. In
More informationRepetition is the reality and the seriousness of life. Soren Kierkegaard
6 Loops Loops 81 Repetition is the reality and the seriousness of life. Soren Kierkegaard What s the key to comedy? Repetition. What s the key to comedy? Repetition. Anonymous In this chapter: The concept
More informationCS 101 Media (Images, Video, etc) Lecture 20
CS 101 Media (Images, Video, etc) Lecture 20 1 Images Though we ve displayed many shapes and colors to the screen, we have yet to display an actual image! Processing has a special type called PImage, for
More informationEP486 Microcontroller Applications
EP486 Microcontroller Applications Topic 2 Processing Department of Engineering Physics University of Gaziantep Sep 2013 Sayfa 1 Processing is a programming language, development environment, and online
More informationCOMP Summer 2015 (A01) Jim (James) Young jimyoung.ca
COMP 1010- Summer 2015 (A01) Jim (James) Young young@cs.umanitoba.ca jimyoung.ca order of operations with the explicit cast! int integervariable = (int)0.5*3.0; Casts happen first! the cast converts the
More informationThis Week Assignment 1 Arrays Time Casting Reading code Project 1
Computation as an Expressive Medium Lab 2: Kindergarten Cubbies, Back to the Future and Lego Mania Joshua Cuneo This Week Assignment 1 Arrays Time Casting Reading code Project 1 Assignment 1 A1-01: Draw
More informationCOMP Summer 2015 (A01) Jim (James) Young jimyoung.ca
COMP 1010- Summer 2015 (A01) Jim (James) Young young@cs.umanitoba.ca jimyoung.ca Don t use == for floats!! Floating point numbers are approximations. How they are stored inside the computer means that
More informationSolution Notes. COMP 151: Terms Test
Family Name:.............................. Other Names:............................. ID Number:............................... Signature.................................. Solution Notes COMP 151: Terms
More informationINDEX. Symbols. The SparkFun Guide to Processing: Create Interactive Art with Code! 2015 Derek Runberg 266 INDEX
INDEX Symbols && (AND logical operator), 55 * (asterisk), Loop sketch example, 169 170 { } (curly brackets), 12 13, 53, 210 % (modulo function), 181! (NOT logical operator), 55 (OR logical operator), 55,
More informationAppendix: Common Errors
Appendix: Common Errors Appendix 439 This appendix offers a brief overview of common errors that occur in Processing, what those errors mean and why they occur. The language of error messages can often
More informationAdapted from slides by Brahm Capoor. Breakout YEAH hours. Michael (Chung Troute)
Adapted from slides by Brahm Capoor Breakout YEAH hours Michael (Chung Troute) Road Map Lecture Review Graphics Animation Events Using the debugger Assignment Overview Q&A! Graphics GRect rect = new GRect(50,
More informationCS1103 INTRODUCTION TO MEDIA COMPUTING
CS1103 INTRODUCTION TO MEDIA COMPUTING TODAY S TOPICS Functions One last array exercise p5.sound: playing/looping sounds sound on events analyze sound in realtime FUNCTIONS S WHAT ARE THEY? Actually, we
More informationEXAMINATIONS 2016 TRIMESTER 2
EXAMINATIONS 2016 TRIMESTER 2 CGRA 151 INTRODUCTION TO COMPUTER GRAPHICS Time Allowed: TWO HOURS CLOSED BOOK Permitted materials: Silent non-programmable calculators or silent programmable calculators
More informationProcessing Assignment Write- Ups
Processing Assignment Write- Ups Exercise 1-1 Processing is not an elaborate series of points like connect the dots or is it? Can t be cause I got it all wrong when I mapped out each and every point that
More informationThe Processing language. Arduino and Processing.
IAT267 Introduc/on to Technological Systems Lecture 8 The Processing language. Arduino and Processing. 1 Course Project All teams submibed very interes/ng proposals One requirement for the project is to
More informationCS 106 Winter Lab 03: Input and Output
CS 106 Winter 2019 Lab 03: Input and Output Due: Wednesday, January 23th, 11:59pm Summary This lab will allow you to practice input and output. Each question is on a separate page. SAVE each sketch as
More informationACTIVE PROCESSING Summary Learning Objectives How to Proceed Check your Understanding Learning Objectives 412
ACTIVE PROCESSING Summary This is a difficult unit we finally move away from boring calculation programs and start to have programs that animate and you can interact with. These are called active programs
More informationEvaluating Logical Expressions
Review Hue-Saturation-Brightness vs. Red-Green-Blue color Decimal, Hex, Binary numbers and colors Variables and Data Types Other "things," including Strings and Images Operators: Mathematical, Relational
More information