Introduction to Programming

1. Introduction to Programming • Instead of emphasizing the details of a particular programming language, this course will teach how to approach a problem in a way that makes it easy to solve using programming. • The most difficult part of learning to program is learning how to analyze and break down a problem, and that’s what we intend to focus on. This is to provide tools to make your vision a reality.

2. The Four Steps of Programming Programming is just a process of logical problem-solving - something that anyone can learn and most people do all the time. The two big challenges are learning syntax and applying your logical problem-solving skills to an unfamiliar domain. There are four important things that will help you do this. 1. Code Reading 2. Pseudo-Code 3. Writing Code 4. Debugging

3. The Four Steps of Programming • Code – Reading To be able to program is being able to look at the code and figure out what it does. • What a particular line of code is doing – understanding the syntax and control flow of program. i.e. When the program executes a line of code, what is the line of code that it will execute next? • Knowing how to read a line of code, and knowing what order to read those lines in, will give you the tools to understand programs and other people have written. • Code–sharing – borrowing a code from existing programs that already does what you’re trying to do: if you can’t read their code, you can not know which parts are relevant to your project. • Additionally, if you work on a code project together with somebody else, it will be helpful if you can each read what the other one is doing. • Finally, code-reading is very important for debugging your code.

4. The Four Steps of Programming 2. Pseudo-Code • The second step of programming is programming pseudo-code. • This is where you do a lot of thinking and not very much writing code! • Most projects start with a vague idea or an text description, this step helps turn the project into something that is approachable as program. • It forces you to define and explain what you’re trying to do very precisely. • This is also the step where you think about the best way to solve problems that you’re going to run into during the project, figuring out what solutions to try before you start writing random code.

5. The Four Steps of Programming 3. Writing Code • This is the most-hyped step of programming. • This can be very intimidating process to express what you’re trying to do with unfamilar syntax of a programming language. • However, if you have done a good job in pseudo-code, this should be in some ways the simplest step: just performing a transformation from the precise and clear concepts. • As you write the code, you’ll figure out issues that your original design and pseudo-code didn’t address. You will improvise, double-back, and sometimes change your entire design.

6. The Four Steps of Programming 4. Debugging • Debugging means testing and fixing the problems in a program that you’ve already written. • Unfortunately, this is the step that will generally take most of your time. • Sometimes your program will not work or do something unexpected. That’s why learning actual techniques for figuring out what’s wrong is so important. • There are a wide variety of ways to debug effectively, but not all work for you. • The key way to being a good debugger is to be able to make intelligent hypotheses about what might be going wrong, then to come up with ways to test those hypotheses.

7. Data and Algorithms • Data and algorithms are the two key concepts of programming. • Data is “stuff” – information that the program stores, things that the program knows about, material that the program operates on. • An algorithm is “action” – what the program is doing and in what order and why. • If data is noun, then algorithms are the verbs. • An algorithm is a set of instructions that tells you how to solve a problem. It must be precise – clear and unambiguous, without relying on human judgment or interpretation, so that the computer knows exactly what it is supposed to do when it comes time to create a program. It must be finite – it must always have an ending, even if that ending simply states, “I could not solve this problem.

8. Working with Processing

9. Processing Environment Processing is Open Source Software. Processing is a programming language, development environment, and online community that since 2001 has promoted software literacy within the visual arts. Processing was founded by Ben Fry and Casey Reas in 2001 while both were John Maeda's students at the MIT Media Lab. The Processing software runs on the Mac, Windows, and GNU/Linux platforms. With the click of a button, it exports applets for the Web or standalone applications for Mac, Windows, and GNU/Linux. Graphics from Processing programs may also be exported as PDF, DXF, or TIFF files and many other file formats. Future Processing releases will focus on faster 3D graphics, better video playback and capture, and enhancing the development environment. Some experimental versions of Processing have been adapted to other languages such as JavaScript, ActionScript, Ruby, Python, and Scala; other adaptations bring Processing to platforms like the OpenMoko, iPhone, and OLPC XO-1. http://processing.org/download/ http://www.learningprocessing.com/

10. Processing Environment Processing is a "sketching" tool Processing is a simple programming environment that was created to make it easier to develop visually oriented applications with an emphasis on animation and providing users with instant feedback through interaction. The developers wanted a means to “sketch” ideas in code. As its capabilities have expanded over the past six years, Processing has come to be used for more advanced production-level work in addition to its sketching role. Originally built as a domain-specific extension to Java targeted towards artists and designers, Processing has evolved into a full-blown design and prototyping tool used for large-scale installation work, motion graphics, and complex data visualization. Processing covers basic drawing, exporting, saving files, rendering to different contexts (2D, 3D, PDF). Download porcessing (free) http://processing.org/download/

11. Processing Environment Processing is based on Java, but because program elements in Processing are fairly simple, you can learn to use it even if you don't know any Java. If you're familiar with Java, it's best to forget that Processing has anything to do with Java for a while, until you get the hang of how the API works. Processing consists of: * The Processing Development Environment (PDE). The PDE is an Integrated Development Environment (IDE) with a minimalist set of features designed as a simple introduction to programming or for testing one-off ideas. * A collection of functions (also referred to as commands or methods) that make up the “core” programming interface, or API, as well as several libraries that support more advanced features such as drawing with OpenGL, reading XML files, and saving complex imagery in PDF format. * A language syntax, identical to Java but with a few modifications.

12. Sketching with Processing A Processing program is called a sketch. The idea is to make Java-style programming feel more like scripting, and adopt the process of scripting to quickly write code. Sketches are stored in the sketchbook, a folder that's used as the default location for saving all of your projects. When you first run Processing, the sketch last used will automatically open. If this is the first time Processing is used (or if the sketch is no longer available), a new sketch will open. Sketches that are stored in the sketchbook can be accessed from File → Sketchbook. Alternatively, File → Open... can be used to open a sketch from elsewhere on the system. Advanced programmers need not use the PDE, and may instead choose to use its libraries with the Java environment of choice. However, if you're just getting started, it's recommended that you use the PDE for your first few projects to gain familiarity with the way things are done. While Processing is based on Java, it was never meant to be a Java IDE with training wheels. To better address our target audience, the conceptual model (how programs work, how interfaces are built, and how files are handled) is somewhat different from Java.

13. Processing Tutorials http://processing.org/learning/basics/index.html

14. Processing Tutorials http://processing.org/learning/basics/index.html

15. Processing Tutorials http://processing.org/learning/tutorials/index.html

16. Processing Environment

17. Processing Environment Run button is an icon that looks like the Play button from any audio or video device. If you have a code, a new window with a gray background will be appeared.

18. Exporting and distributing your work • Select File → Export to package your current sketch as an applet. This will create a folder named applet inside your sketch folder. Opening theindex.htmlfile inside that folder will open your sketch in a browser. • File → Export Application to bundle your sketch as an application for Windows, Mac OS X, and Linux

19. Creating images from your work • saveFrame("output.png"); • To do the same for a numbered sequence, use # (hash marks) where the numbers should be placed: saveFrame("output-####.png"); • For high quality output, you can write geometry to PDF files instead of the screen, as described in the later section about the size() function.

20. Libraries add new features http://processing.org/reference/libraries/ • Sketch → Import Library → PDF Export import processing.pdf.*; beginRecord(PDF, "line.pdf"); • Other libraries provide features such as writing movie files, reading images from a camera, sending and receiving MIDI and OSC commands, sophisticated 3D camera control, and access to MySQL databases.

21. Loading and displaying data • To add a file to the data folder of a Processing sketch, Sketch → Add File • To view the contents of the sketch folder Sketch → Show Sketch Folder loadStrings() loadImage() // Examples of loading a text file and a JPEG image // from the data folder of a sketch. String[] lines = loadStrings("something.txt"); PImage image = loadImage("picture.jpg");

23. Hello World! About size() • size(400, 400); // The wrong way to specify the middle of the screen ellipse(200, 200, 50, 50); // Always the middle, no matter how the size() line changes ellipse(width/2, height/2, 50, 50); • Java2D : default, high-quality 2D vector graphics, low speed, size(400, 400, JAVA2D); • Processing 2D : simpler graphics and fast pixel operations, to draw thousands of simple shapes or directly manipulate pixels of an image or video size(400, 400, P2D); • Processing 3D : speed and pixel operations, 3D graphics inside a web browser, Image quality is poorer (the smooth() function is disabled, and image accuracy is low) but you can draw thousands of triangles very quickly size(400, 400, P3D); • OpenGL : faster rendering, select Import Library, then OpenGL from the Sketch menu size(400, 400, OPENGL); • PDF : import the PDF library before using it size(400, 400, PDF, "output.pdf");

24. Hello World! For example; line(15, 25, 70, 90); On a gray background, this code generate a black line from coordinate (15, 25) to (70, 90). The (0, 0) coordinate is the upper left-hand corner of the display window.

25. Hello World! This program is to change the size of the display window and set the background color.

26. Hello World! Building on this program to change the size of the display window and set the background color, type in the code below:

27. Hello World! Stroke() • stroke(255); // sets the stroke color to white • stroke(255, 255, 255); // identical to the line above • stroke(255, 128, 0); // bright orange (red 255, green 128, blue 0) • stroke(#FF8000); // bright orange as a web color • stroke(255, 128, 0, 128); // bright orange with 50% transparency

29. Points • Drawing Point Syntax: point(x, y); • Parameters: x int or float: x-coordinate of the point y int or float: y-coordinate of the point

30. Points • Drawing Point Syntax: point(x, y); point(x, y, z); • Parameters: x int or float: x-coordinate of the point y int or float: y-coordinate of the point z int or float: z-coordinate of the point

31. Lines • Drawing Line • Syntax: line(x1, y1, x2, y2); • Parameters: x1 int or float: x-coordinate of the first point y1 int or float: y-coordinate of the first point x2 int or float: x-coordinate of the second point y2 int or float: y-coordinate of the second point

32. Lines • Drawing Line • Syntax: line(x1, y1, x2, y2); line(x1, y1, z1, x2, y2, z2); • Parameters: x1 int or float: x-coordinate of the first point y1 int or float: y-coordinate of the first point z1 int or float: z-coordinate of the first point x2 int or float: x-coordinate of the second point y2 int or float: y-coordinate of the second point z2 int or float: z-coordinate of the second point

33. Points and Lines • Constructing a simple dimensional form with lines and rectangles.

34. Shapes Syntax: rect(x, y, width, height); ellipse(x, y, width, height); triangle(x1, y1, x2, y2, x3, y3); quad(x1, y1, x2, y2, x3, y3, x4, y4); stroke (255); stroke (255, 255, 255); stroke (125, 250, 112); noStroke(); fill (226); fill (226, 226, 226) fill (125, 250, 112); noFill(); smooth(); noSmooth(); Processing is Case Sensitive!

39. smooth()

40. Modes for Shapes Modifies the location from which rectangles draw. The default mode is rectMode(CORNER), which specifies the location to be the upper left corner of the shape and uses the third and fourth parameters of rect() to specify the width and height. The syntax rectMode(CORNERSuses the first and second parameters of rect() to set the location of one corner and uses the third and fourth parameters to set the opposite corner. The syntax rectMode(CENTER) draws the image from its center point and uses the third and forth parameters of rect() to specify the image's width and height. Syntax: rectMode(MODE)

41. Vertices • The beginShape() function begins recording vertices for a shape and endShape() stops recording. • A vertex is a location in space specified by X, Y and sometimes Z coordinates. • After calling the beginShape() function, a series of vertex() functions must follow. • To stop drawing the shape, call the endShape() functions.

42. Variables • Constructing a simple dimensional form with lines and rectangles. • Changing the value of the variable 'd' scales the image. • The four variables set the positions based on the value of 'd'.

43. Colors Grayscale Color background(255); // Setting the background to white stroke(0); // Setting the outline (stroke) to black fill(150); // Setting the interior of a shape (fill) to grey rect(50,50,75,100); // Drawing the rectangle

44. Colors Red + Green = Yellow Red + Blue = Purple Green + Blue = Cyan (blue-green) Red + Green + Blue = White no colors = Black

45. Colors background(255); noStroke(); // Bright red fill(255,0,0); ellipse(20,20,16,16); // Dark red fill(127,0,0); ellipse(40,20,16,16); // Pink (pale red) fill(255,200,200); ellipse(60,20,16,16); TOOLS (from the menu bar) → COLOR SELECTOR

46. Color Transparency background(0); noStroke(); // No fourth argument means 100% opacity. fill(0,0,255); rect(0,0,100,200); // 255 means 100% opacity. fill(255,0,0,255); rect(0,0,200,40); // 75% opacity. fill(255,0,0,191); rect(0,50,200,40); // 55% opacity. fill(255,0,0,127); rect(0,100,200,40); // 25% opacity. fill(255,0,0,63); rect(0,150,200,40); • Alpha values also range from 0 to 255, with 0 being completely transparent (i.e., 0% opaque) and 255 completely opaque (i.e., 100% opaque).

47. Color Range colorMode() • RGB • HSB (hue, saturation, and brightness) • Hue - The color type, ranges from 0 to 360 by default (think of 360 degrees on a color "wheel"). • Saturation - The vibrancy of the color, 0 to 100 by default. • Brightness - The, well, brightness of the color, 0 to 100 by default.

48. Variables • A variable is a way of helping the computer remember a particular piece of information. • By default, the computer is stupid: it can only remember things for one line at a time. • Returning to the idea of control flow, each time the computer moves from on line of code to the next, the program forgets everything that happened on the last line and only thinks about the lines it’s currently processing. • What variable can do is give a name to a piece of information, so that the computer can remember that piece of information whenever in the program the name is called. For example, the variable is like a bucket labeled that the computer can store information in. • From a technical standpoint, what putting a piece of information into a variable does is give that information a place in memory.

49. Variables • To set a variable value, you simply use the “ = “ sign. • i.e. speed = 10 Now if you want to find out what the speed is later on in our program, we can simply say: print speed That will print the current value of speed to the message window. There are lots of other ways we could use the retrieved value, like making it part of the comparison in an if statement. if speed > 5 then print “Too fast!” end if • Scope • VOID : if you didn’t set or create the variable in advance and call it later.

50. Variables How to name your variables? • All variable names must be one word, contain no spaces, and begin with a letter. • They can also include numbers, but they can’t start with one. • 1 Speed / Speed_1 / Speed1 • Also, variable name should be meaningful. How to recognize a variable? • Reserved words appear in color.