Lecture E1Complex Conditionals and VariablesComputing and Art : Nature, Power, and LimitsCC 3.12: Fall 2007Functionalia•Tea - Thursday - 1:30 - 3:30 - 0317 N•HW D: DUE Wednesday, Oct 31, 11:59 pm•HW D BONUS!InstructorChipp Jansen, [email protected] Web Pagehttp://www.sci.brooklyn.cuny.edu/~chipp/cc3.12/FinalProjectOffice Hours | Extra HelpMy Office Hours : Mondays 12:30 to 1:30 - basement Ingersoll 0317NVirtual: Tuesdays 9 to 11pm - AIM: chippbotMonday1:30 to 5pmTuesday1:30 to 3:30Wednesday1:30 to 3:30Thursday12:45 - 1:45, 2:15 - 3:15Bridges Student Resource Center : 0317NFunctionaliaToday:•Conditional Review•Making a Button•Variablesvoid setup() {size(400, 400);background(0);stroke(255);}void draw() {background(0);if(mousePressed) {ellipse(mouseX, mouseY, 20, 20);}}Within the parentheses, is a Boolean Expression.mousePressed is a Boolean variable.void setup() {size(400, 400);background(0);stroke(255);}void draw() {background(0);if(mousePressed) {ellipse(mouseX, mouseY, 20, 20);}}Code contained within the curly-braces is executed, only if the expression is true.void setup() {size(400, 400);background(0);stroke(255);}void draw() {background(0);line(200,0,200,400);if(mouseX > 200) {ellipse(mouseX, mouseY, 20, 20);}}Use a conditional to respond to the Mouse’s Position on the screenWhich side will the ellipse appear?Conditional Examples Greater Than ConditionalLess Than ConditionalLess Than And Greater ThanChecking for being Within an AreaWithinARectangleWithinARectangleAndPressedWithinARectangleDoneBooleanProcessingAND&&OR||NOT!Making a Clear ButtonClear Button Step 0Clear Button Step 1Clear Button Step 2Clear Button Step 3Clear Button DoneProject SkeletonVariables in ProcessingVariables are containers used in programs to store data.We used variables in programs to store and process mouse data.mouseX, mouseY, and mousePressedAlso use variables to store a state. Can be used to animate your sketches and to store user interactions (i.e. imagine adding different brushes to your drawing program)Example: Basics > Data > IntegersFloats•here two lines are being animated across the stage •the program keeps track of the x-value of both of the lines independently)Implementing VariablesVariables have 3 parts:•name (i.e. mouseX)•value (i.e. 320)•type (i.e. integer)Here are 3 types of variables (there are many more!):•integers: 23, 0, -31•floats: 3.14, -0.22, 0.0•booleans: true, falseWe can see the value of a variable in processing by using printlnExamples of VariablesAnatomy - how to declare a variableChangeValues - you can change values of a variablePrettierPrint - print out prettier messagesShortHandNames - give variables meaningful namesCan use Mathematics with VariablesBasic > Data > VariablesAdd+Subtract-Multiply*Divide/Can use variables in parameters for functions!Animation Examplewidth and height are variables that store the width and the height of the sketchWhy would we want to use this Variables > WidthHeightAreaIntegersFloats•frameRate(30); // sets the looping of draw(), 30 times a second!•Variables declared outside of these functions, globals•Variables a and b are incremented•What conditions are checked? •What if they are removed?Animation Example Continued•How do we speed each line up?•How do we reverse the direction of a line?•How can we add an additional shape?More Complex AnimationIncrementDecrement and switch Direction•what is changing?•what shape is being used in the code?•how is the color changing?•++ and --•direction = !direction; •how can we increase the spacing?Use a Variable to Store StateTwoShapesTwoShapesStep1 - draw 2 extra buttonsTwoShapesStep2 - add a variable whichShape, set it to a value that you decide on in the button conditions•0 for circle•1 for squareTwoShapesStep3 - draw the shapes, use an else ifTwoShapes - finishing touch, ignore the buttons with a condition(mouseX < 340)ThreeShapesTO DOREAD: Chapter 13 (For Iteration next Week)(Javascript is VERY similar to
View Full Document