Week 1 -- Whaaaaaaaaaaaaaaa?

What is programming?

Programming is the process of creating steps for a computer to perform a desired task. Let's say you needed to program your computer to feed your cat. 

Decide that an appropriate amount of food for a cat is one cup.
Go to where the cat lives
unlock door
walk inside
get food
pet cat
pour an appropriate amount of food in bowl
if it is the morning, replace bowl of water
otherwise just pet the cat
pet cat until you are tired of petting cat
walk outside
lock door
IMPORTANT ALGORITHM CONSTRUCTS:


Sequence:  series of steps
Selection:  choice between alternative paths
Iteration:  repetition

Steps for developing your program

  • Specify your idea / problem to solve.

  • Design an algorithm (sequence of steps) for implementing the idea.

  • Express the algorithm as a computer program in a programming language.

  • Compile and run the program.
    •  Notice that the order of the instructions is just as important as the instructions themselves. For example, you would not want to stop petting the cat before you poured water! The order of your instructions, how you figured out how to feed the cat is called an Algorithm (a procedure or formula for solving a problem.)

    The other fundamental element of programming is Data, this is the stuff that the program knows about and operates on. For example, in the above program our data might be the "appropriate portion of food" or the weather conditions outside. We'll get into this more next week.

    Here's another example that implements several ideas that we will cover over the coming weeks (variables, iteration, etc.):

    Let's describe an algorithm that shows how the sum 1+2+3+ . . . + N can be evaluated, if N is a given whole number > 0.

    1) set SUM = 0 and a counter K = 1
    2) Repeat the following steps until K is greater than N.
        (2.1) Calculate SUM + K and save the result in SUM.
        (2.2) Increase the value of K by 1.
    3) The solution is now the number saved in SUM

    What is Processing?


    From the Processing web site:

    "The Processing project introduces a new audience to computer programming and encourages an audience of hybrid artist/designer/programmers. It integrates a programming language, development environment, and teaching methodology into a unified structure for learning. Its goal is to introduce programming in the context of electronic art and to open electronic art concepts to a programming audience. Unlike other popular web programming environments such as Flash and Director, Processing is an extension of Java and supports many of the existing Java structures, but with a simplified syntax. The application runs locally and exports programs to Java applets, which may be viewed over the Internet. It is not a commercial production tool, but is build specifically for learning and prototyping...

    Processing provides three different modes of programming—each one more structurally complex than the previous. In the most basic mode, programs are single line commands for drawing primitive shapes to the screen. In the most complex mode, Java code may be written within the environment. The intermediate mode allows for the creation of dynamic software in a hybrid procedural/object-oriented structure. It strives to achieve a balance between features and clarity, which encourages the experimentation process and reduces the learning curve.    "

    This week we will focus on the most basic mode, but we will quickly move on to the "intermediate" mode.

    How do I get Processing?


    Processing should already be installed on all the ITP machines in the lab. If you need to install it, it is available for free download from: http://www.proce55ing.net/download/index.html. The Windows Expert version is for advanced users who can take care of installing Java themselves (as described in the readme). It is included because it is a smaller download (11 MB instead of 29 MB for the Standard download). but it is more difficult to set up so if there's any question as to which version you want, go for the Standard.

    The Processing Environment consists of an integrated text editor and display window for showing programs. When the "run" button is pushed, the program compiles and plays in the graphic window. From the main environment window, it is possible to run, stop, save, open, and export files.

    The processing web site is also the definitive resource for learning the syntax and structure of the language. Visit: http://www.proce55ing.net/reference/index.html.

    Coordinates




    Processing uses a Cartesian coordinate system with the origin in the upper-left corner.

    Publishing your Program


    Processing also allows you to "publish" your program, by exporting it as a java applet. Go to "File" --> "Export to web" . You'll then have three files that you need:

  • index.html -- html source for viewing the applet page
  • filename.jar -- compiled applet classes
  • filename.pde -- source code


    • You should publish each assignment you create for this class online, and include the source.

    Week One Assignment

  • Create a web site to house your work for the class and e-mail me (daniel.shiffman@nyu.edu) the link to your site.
  • Create a static screen "drawing" using only black and white colors, and the commands listed below.
  • Make your drawing interactive by using "mouseX" and/or "mouseY" commands.

    Drawing Primitives


    2D Primitives
    point()
    line()
    triangle()
    quad()
    rect()
    rectMode()
    ellipse()
    ellipseMode()

    Stroke attributes
    strokeWeight()

    Colors
    background()
    stroke()
    noStroke()
    fill()
    noFill()
    colorMode()

    Mouse
    mouseX
    mouseY
    pmouseX
    pmouseY

    Examples


    size(100,100);
background(0);
stroke(255);
line(40,50,70,35);
line(20,30,50,15);
line(70,35,50,15);
line(40,50,20,30);
line(40,50,50,70);
line(70,35,50,70);
line(20,30,50,70);

    void setup() {
  size(100, 100);
  background(50);
}

void loop() {
  background(50);
  stroke(255);
  line(mouseX,mouseY,70,35);
  line(20,30,50,15);
  line(70,35,50,15);
  line(mouseX,mouseY,20,30);
  line(mouseX,mouseY,50,70);
  line(70,35,50,70);
  line(20,30,50,70);
}

    What's wrong this program?

    This program should produce a grayscale background based on the mouse location left to right, but it stays black -- why?? 

    void setup() {
  size(100, 100);
  background(0);
}
void loop() {
  background(( mouseX / 100) * 255);
}
    This program has code to draw two rectangles, why doesn't it? 

    size(100, 100);
background(150);
rectMode(CENTER_DIAMETER);

noStroke();
fill(0,255,0);
rect(50, 50, 10, 10);
fill(0,0,255);
rect(50, 50, 50, 50);


    back to syllabus

    site stylesheet courtesy of www.style.org