G RAPHICS & I NTERACTIVE P ROGRAMMING Lecture 2 More Programming with Processing.

Slides:



Advertisements
Similar presentations
Creative Computing. \\ aims By the end of the session you will be able to: 1.Move objects around 2.Write simple interactive programs 3.Use the mouse position.
Advertisements

Introduction to Macromedia Director 8.5 – Lingo
Mouse Listeners We continue our examination of GUIs by looking at how to interact with the mouse –Just as Java creates Events when the user interacts with.
Introduction to Programming
Game with US Beginner Tutorial. Welcome!! Who I am What is Processing? Basic Coding Input Methods Images Classes Arrays.
A Quick Introduction to Processing
RAPTOR Syntax and Semantics By Lt Col Schorsch
Variables and Operators
© Calvin College, Being abstract is something profoundly different from being vague... The purpose of abstraction is not to be vague, but to create.
Programming Paradigms and languages
 Variables  What are they?  Declaring and initializing variables  Common uses for variables  Variables you get “for free” in Processing ▪ Aka: Built-in.
Data: Programming Design and Modularization IS 101Y/CMSC 101 Computational Thinking and Design Thursday, September 26, 2013 Marie desJardins University.
Processing Processing is a simple programming environment that was created to make it easier to develop visually oriented applications with an emphasis.
IAT 334 Java using Processing ______________________________________________________________________________________ SCHOOL OF INTERACTIVE ARTS + TECHNOLOGY.
IAT 800 Lab 1: Loops, Animation, and Simple User Interaction.
ICM Week 2. Structure - statements and blocks of code Any single statement ends with semicolon ; When we want to bunch a few statements together we use.
Sketchify Tutorial Graphics and Animation in Sketchify sketchify.sf.net Željko Obrenović
Lecture 3 IAT 800. Sept 15, Fall 2006IAT 8002 Suggestions on learning to program  Spend a lot of time fiddling around with code –Programming is something.
(An Introduction for Programmers)
PROCESSING Animation. Objectives Be able to create Processing animations Be able to create interactive Processing programs.
G RAPHICS & I NTERACTIVE P ROGRAMMING Lecture 1 Introduction to Processing.
Review Blocks of code {.. A bunch of ‘statements’; } Structured programming Learning Processing: Slides by Don Smith 1.
Programming for Artists ART 315 Dr. J. R. Parker Art/Digital Media Lab Lec 10 Fall 2010.
G RAPHICS P ROGRAMMING Lecture 3 - Simple Animation - Simple 3D Drawing.
1-1 OBJ Copyright 2003, Paradigm Publishing Inc. Dr. Joseph Otto Silvia Castaneda Christopher deCastro CSULA Macromedia Flash MX Introduction.
Visual Basic .NET BASICS
Continuous February 16, Test Review What expression represents the zip car eligibility rules of at least 18 years old and no incidents?
Keyboard and Events. What about the keyboard? Keyboard inputs can be used in many ways---not just for text The boolean variable keyPressed is true if.
Processing Lecture.2 Mouse and Keyboard
PAGES:51-59 SECTION: CONTROL1 : DECISIONS Decisions.
C H A P T E R T E N Event-Driven Programming Programming Languages – Principles and Paradigms by Allen Tucker, Robert Noonan.
Introduction to Processing CS 4390/5390 Fall 2014 Shirley Moore, Instructor September 3,
______________________________________________________________________________________ SCHOOL OF INTERACTIVE ARTS + TECHNOLOGY [SIAT] |
Graphic User Interface. Graphic User Interface (GUI) Most of us interact with computers using GUIs. GUIs are visual representations of the actions you.
Programming for Artists ART 315 Dr. J. R. Parker Art/Digital Media Lab Lec 10 Fall 2010.
Introduction to Processing. 2 What is processing? A simple programming environment that was created to make it easier to develop visually oriented applications.
1 Georgia Tech, IIC, GVU, 2006 MAGIC Lab Rossignac Lecture 02b: Tutorial for Programming in Processing Jarek Rossignac.
C++ Lecture 1 Friday, 4 July History of C++ l Built on top of C l C was developed in early 70s from B and BCPL l Object oriented programming paradigm.
I Power Higher Computing Software Development Development Languages and Environments.
© Copyright by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved. 1 Outline 21.1 Test-Driving the Painter Application.
CIS 3.5 Lecture 2.2 More programming with "Processing"
Lesson Two: Everything You Need to Know
Variables Art &Technology, 3rd Semester Aalborg University Programming David Meredith
Mouse Inputs in Processing. Interacting with the Mouse mouseX and mouseY: pg mouseXmouseY –The position of the mouse in the canvas pmouseX and.
Lesson Two: Everything You Need to Know
Lawrence Snyder University of Washington, Seattle © Lawrence Snyder 2004 More details and explanation …
Test 2 Review. General Info. All tests are comprehensive. You are still responsible for the material covered prior to the first exam. You will be tested.
Computer Game Design ActionScript is… Object-oriented programming Everything you do in ActionScript does something to some object* Some objects.
Computer Science I Recap: variables & functions. Images. Pseudo-random processing.
Computer Science I Looping. User input. Classwork/Homework: Incorporate looping & user input into a sketch.
Continuous. Flow of Control Programs can broadly be classified as being –Procedural Programs are executed once in the order specified by the code varied.
Test Review. General Info. All tests will be comprehensive. You will be tested more on your understanding of code as opposed to your ability to write.
What is Computing? What can be Programmed? Creative Computing Processing Downloading Processing Dropbox Primitive Shapes – point – line – triangle – quad.
Review Random numbers mouseX, mouseY setup() & draw() frameRate(), loop(), noLoop() Mouse and Keyboard interaction Arcs, curves, bézier curves, custom.
Computer Science I Animations. Bouncing ball. The if statement. Classwork/homework: bouncing something. Compress and upload work to Moodle.
Introduction to Processing Dominique Thiebaut Dept. Computer Science Computer Science Dominique Thiebaut Thiebaut -- Computer Science.
Computer Science I More class examples. Paths. Jigsaw. Tolerance. Classwork/homework: Your class project. Post proposal for midterm project.
Variables. Something to mention… void setup(){ size(200, 200); background(255); smooth(); } void draw() { stroke(0); strokeWeight(abs(mouseX-pmouseX));
Loops. About the Midterm Exam.. Exam on March 12 Monday (tentatively) Review on March 5.
Task 1 and Task 2. Variables in Java Programs Variables start with lower case letter Variables are descriptive of what they store Variables are one word.
MOM! Phineas and Ferb are … Aims:
Concepts of Object Oriented Programming
p5.js mouse, keyboard and if’s
Introduction to Events
Computation as an Expressive Medium
Mouse Inputs in Processing
More programming with "Processing"
IAT 265 Lecture 2: Java Loops, Arrays Processing setup, draw, mouse Shapes Transformations, Push/Pop.
LCC 6310 Computation as an Expressive Medium
Web Programming and Design
Presentation transcript:

G RAPHICS & I NTERACTIVE P ROGRAMMING Lecture 2 More Programming with Processing

R ESOURCES Processing web site: For loops (counter-controlled repetition) While loops (event-controlled repetition) Reference:

C ONTENT 1.Variables 2.Bitmap and Vector Graphics 3.Event Handlers 4.Keyboard & Mouse Events 5.Repetition (looping) 1.Counter Controlled (for) 2.Event-Controlled (while) 6.Standard Processing Program

P REVIOUSLY IN L ECTURE 1 Processing is a scripting language that allows you to write simple graphics programs using an IDE. Processing is an Imperative, Procedural, Object- Oriented programming language, that uses syntax rules and a semantic keyword set similar to C++. In the last lab you started using the Imperative and Procedural paradigm aspects of Processing. How does Processing implement: 1) Sequence 2) Selection 3) Repetition (will cover in more detail) 4) Functions

V ARIABLES A variable is a name and value pair. Variables provide a way to save information so that you can refer to it (use it, change it) later. We will use variables for control (position, color, etc.) Valid data types for variables are: int — for storing integers (whole numbers) float — for storing floating point (real) numbers boolean — for storing true or false values char — for storing single characters String — for storing multiple (strings of) characters Examples: int x1 = 10; int y1 = 10; int x2 = 20; int y2 = 20; line( x1, y1, x2, y2 );

B ITMAP & V ECTOR G RAPHICS There are two basic ways to create/store visual images: Bitmap Graphics: Images that are composed of individual pixels. Advantages: Easy to create/capture from real life. Disadvantages: Large, don't scale well. Vector Graphics: Images we create using a sequence of mathematical function calls. Advantages: Smaller, scale well. Disadvantages: Can be difficult to create.

B ITMAP AND V ECTOR I MAGES (2)

E VENT H ANDLERS In Processing “event handlers” are special, built- in functions: These functions are called by the OS. But you change the content of the funtions. Events are changes in the “state” of the program and/or user initiated actions like keyboard and mouse input. Users, can add event handler functions to their programs, modify them, and use them to change program variables, state, program flow, etc.. You have already used the keyPressed() event handler which responds to keyboard actions.

K EYBOARD V ARIABLES & E VENT H ANDLER ( S ) /** ******************** Use event-listeners like keyPressed() to allow users of your program to cause things to happen. ******************** */ void keyPressed() { if ( key == 'A' || key == 'a' ) { background( #FF0000 ); } // Function is called when any key is pressed. // If key is 'A' or 'a' background is changed to red.

M OUSE V ARIABLES & E VENT H ANDLERS Variables mouseX and mouseY Special variables, managed by the computer. Indicate (x, y) location of mouse pointer mouseButton indicates which button was pressed, on a multi-button mouse (on a Mac, use Cntl-click for left mouse button, Alt-click for middle mouse button and Apple-click for right mouse button) Event Handlers mouseClicked() Predefined “event handler” function. You change content. Handles behavior when user clicks mouse button (press and release) mouseMoved() handles behavior when user moves mouse (moves it without pressing button) mouseDragged() handles behavior when user drags mouse (moves it with button pressed)

4 TH P ROGRAM void setup() { size( 200, 200 ); } void draw() { background( #cccccc ); fill( # ); rect( mouseX, mouseY, 20, 20 ); } void mouseMoved() { fill( # ); rect( mouseX, mouseY, 20, 20 ); } void mouseDragged() { fill( # ); rect( mouseX, mouseY, 20, 20 ); }

5 TH P ROGRAM void setup() { size( 200, 200 ); } void draw() { background( #cccccc ); rect( mouseX, mouseY, 20, 20 ); } void mousePressed() { if ( mouseButton == LEFT ) { fill( # ); } else if ( mouseButton == CENTER ) { fill( # ); } else if ( mouseButton == RIGHT ) { // Ctrl-click on mac fill( # ); }

R EPETITION In the Imperative Paradigm (“smart list”) we need sequence, selection and repetition. There are three basic types of repetition in Processing: draw() function for loops while loops Repetition is necessary for animation, when we will want to display things over and over (although slightly differently each time).

C OUNTER L OOPS ( FOR ) Counter controlled loops ( for loops ) repeat things for a fixed number of times. Syntax: for ( init; test; update ) { statements } Example: int x1 = 10; for ( int i=0; i<5; i++ ) { line( x1, 10, x1, 20 ); x1 = x1 + 10; }

E VENT -C ONTROLLED L OOPS ( W HILE ) Event-Controlled ( while loops) loops repeat things while a condition holds true Syntax: while ( expression ) { statements } Example: int x2 = 10; while ( x2 < width ) { line( x2, 30, x2, 40 ); x2 = x2 + 10; }

6 TH P ROGRAM int x1 = 10; int x2 = 10; void setup() { stroke(#FF0000); // Make line red. for(int i=0; i<5; i++ ) { line( x1, 10, x1, 20 ); x1 = x1 + 10; } stroke(#0000FF); // Make line blue. while ( x2 < width ) { line( x2, 30, x2, 40 ); x2 = x2 + 10; } void draw() { }

S TANDARD P ROCESSING P ROGRAM 1) Setup any variables or classes you are going to use. 2) Use setup() function to specify things to do once, when the sketch first opens 3) Use draw() function to specify things to do repeatedly Use frameRate() function to specify how often things should be repeated in draw(); Default frame-rate is 60 (60 frames per second) NOTE: call to frameRate() should be done inside setup() function. For animations frameRate should be slower than 30 f/sec/ 4) Declare and event-listeners that you are going to use. 5) Declare any custom made functions you are going to use. 6) Declare any classes that you are going to use. Note: I have created a processing template that you can use to start your programs.

G ENERALIZED P ROGRAM O UTLINE /** ********** Variables: ********** */ /** ********** setup(): ********** */ void setup() { } /** ********** draw(): ********** */ void draw() { } /** ********** Event Handlers: **** */ void keyPressed() { } /** ********** Custom Functions: *** */ void draw_simple_image { } /** ********** Classes: ************* */

T HE E ND