Week 5

Matmos – California Rhinoplasty

Getting Stuck, Getting Unstuck, and Learning to Learn

First, keep this in mind:

  • You will run into problems when you code.
  • Those problems will take time, research, and experimentation to work out.
  • While you work them out, it will feel like your project isn’t moving forward. But it is.
  • This happens to everyone. It will happen to you. It doesn’t mean that you are not good at this.

Being a good programmer is less about researching and figuring things out. These are skills you can learn through practice and experience. Learning building these skills is an important part of this class.

Even in small, simple projects you there are dozens of things that might go wrong, and you might find yourself (temporarily) stuck. Many of these things fall into only a few broad categories. Here are some approaches you can take with different kinds of problems.

Conceptual Issues

Programming is often like solving a puzzle. For a core part of programing the syntax doesn’t matter, the library doesn’t matter, even the computer doesn’t matter. Before you can tell a computer how to do something you have to figure out how to do it. You need to study the problem and develop a specific plan to solve it.

  • Set aside your keyboard and get out a sketchbook.
  • Think about what you are trying to do. Think about just what you are trying to do. Not how to do it.
  • Define what you are trying to do broadly. For example, say you want the screen to flash when the user clicks a button. What if they don’t click the button?
  • Define what you are trying to do specifically. Does the screen flash once or continuously? Does the screen flash while the button is down, but not up, or does it start flashing when the button is clicked and then continue? What is the button? What does “flash” really mean anyway?
  • Study example code. Almost everyone has had the experience of taking something apart to see how it works. This is a very powerful idea: you can learn a lot about how something works just by looking at it closely.
  • Talk out your problem with a friend (even if they don’t know how to code, even if they are a duck, this can be extremely helpful)
  • Isolate. Create an empty project and try to use the new concept on its own. It is sometimes easier to explore a new idea on its own than as part of a larger system.
  • Search for your problem in general terms on , the processing forums, and Google. Most of the problems you will face will have been faced by many before you.

These are not step by step instructions. There is no single process that you can follow to solve a programming problems: programming is creative.

Knowledge Issues

When you aren’t sure how some language syntax works or how to use an API call, you have a knowledge issue.

  • Browse these places for topics related to your issue, read all you can find
    • The Getting Started Book
    • processing.org/reference
    • processing.org/learning
  • Searching help forums is a great way to learn from others who have worked through the same problems you are running into. In my experience these forums are even more helpful as a knowledge base than as a place to ask questions.
    • http://forum.processing.org/
    • http://stackoverflow.com/
  • Look through the class sample code and the sample code built into processing. Try running this code and change, guess, check.

Syntax Issues

When processing reports an error with your code and won’t run it, you have a syntax issue.

  • Read the error! Sometimes Processing provides a nice friendly error message, sometimes it provides a not so friendly error message. Even if you don’t fully understand what the error message means, it can often at least point you in a direction. Sometimes searching Google for a key phrase from the error message is very helpful.
  • You should be coding in small increments. Adding only a little functionality at a time. That way when a syntax error shows up, you have made only a few changes to focus on.
  • Use Command – T to format your code, constantly. Syntax errors are easier to spot in well formatted code.
  • If you are not sure where in code the problem is, try commenting a sections of code and running your sketch. If the syntax error doesn’t show up, there is probably something wrong in the section you just commented out.

Behavior Issues – Bugs!

When your program runs, but doesn’t do what you want, you have a bug. Remember that computers are stupid and ignorant. Your program can only do exactly what you tell it to. If your program does the wrong thing, it is because you told it to.

  • Think about what you want to happen carefully and specifically. Understand what you want your program to do.
  • Look at the behavior of your program carefully and specifically. Understand what it is doing.
  • Reread the code line by line. Execute the code in your head.
  • Use Println to print the value of variables to the console, this can help confirm that the values are what you expect, when you expect.

Functions

Functions are an important structural element in computer programming. They are a key way of breaking your code up into small, general, reusable parts. Breaking up programs into small parts is essential as programs get more complex, because it allows you to focus on one problem at a time. Creating general, reusable parts is an important part of reducing repetition in your code. Repetition makes programs needlessly complex, and harder to maintain. Programmers sometimes speak of keeping your code DRY.

Functions are basically small sub-programs that you can use together as “blocks” in creating your larger program. You have used functions in every program you have made so far. When you use rect(), line(), or fill(), you are calling a function. You have also declared and defined setup() and draw() functions. All that we are introducing today is creating a function you name and call yourself.

Functions can be broken down into a few parts:

  • return type – Sometimes functions send a value back to the code that calls them. When you declare the function, you specify the type of this value (int, float, etc.) or specify “void” for functions that do not return a value.

  • name – Like variables, functions have names. Also, like with variables, you should choose a name that clearly indicates what the function does. Variable names are almost always nouns. Function names should almost always start with a verb.

  • parameters – Functions often receive parameter values from the code that calls them. This lets the calling code specify additional information that the function needs. For example, a function that draws a star on the screen might take parameters for the number of points in the star.

  • body – In between the braces, “{” and “}”, you place the code that will run when the function is called.

  • return statement – The return statement is used to send a value back to the code that called the function. When a return statement is executed, the function stops running immediately. If there is more code below the return statement, it will be ignored.

Example Functions:

//This is a silly function that adds two parameters and returns the results. You wouldn't want to use this function because the + operator already does this. I'm including it to show the structure of a function.

float add(float _a, float _b){
    return _a + _b;
}


//Calling this function will set the fill to a random color.

void randomFill()
{
    fill(random(0, 255), random(0, 255), random(0, 255));
}

//This function draws a red and white ring target. Passing values for _x and _y lets you tell the function where to draw.

void drawTarget(float _x, float _y)
{
    noStroke();
    fill(255, 0, 0);
    ellipse(_x, _y, 50, 50);
    fill(255, 255, 255);
    ellipse(_x, _y, 40, 40);
    fill(255, 0, 0);
    ellipse(_x, _y, 30, 30);
    fill(255, 255, 255);
    ellipse(_x, _y, 20, 20);
    fill(255, 0, 0);
    ellipse(_x, _y, 10, 10);
}

// This draw funciton uses drawTarget
void draw() {
    for (int n = 0; n < 100; n++){
        drawTarget(random(625), random(350);
    }
}

State

As your programs become larger and more complex, they will start doing different things at different times. To do this, your program will need to keep track of what it is supposed to be doing. This is often referred to as the programs state.

You store your state in variables. Choosing what variables you need, what they should be called, and what values they should hold, is a critical part of organizing more complex projects. The following project uses a state variable to remember if it should draw a circle or a square.

State variables need to declared outside of a function. This gives them a global scope, so that they can be accessed by any function in your program, and so that they will survive between draws.

// state demo, demonstrates using a "global" variable to store state
// also shows how to use boolean and (&&) operator to detect if the cursor is in a rectangle

String shapeToDraw = "rect";

void setup()
{
  size(625, 350);
  ellipseMode(CORNER);
}

void draw()
{
  background(50, 50, 100);
  noStroke();
  fill(200, 200, 100);
  if (shapeToDraw == "rect") {
    rect(625 * .5 - 75, 100 - 75, 150, 150);
  }
  else {
    ellipse(625 * .5 - 75, 100 - 75, 150, 150);
  }

  rect(10, 300, 30, 30);
  ellipse(50, 300, 30, 30);

  if (mousePressed) {
    if (mouseX > 10 && mouseX < 10 + 30 && mouseY > 300 && mouseY < 300 + 30) {
      shapeToDraw = "rect";
    }
    if (mouseX > 50 && mouseX < 50 + 30 && mouseY > 300 && mouseY < 300 + 30) {
      shapeToDraw = "ellipse";
    }  
  }
}

Homework

  1. Read up on Functions in Getting Started with Processing

  2. Create a Processing sketch for each of the challenges below. Recreate the interaction and look of each as closely as you can. Don’t forget to follow the spec. Do not post your code to the blog. Bring your code to class on your thumb drive. Remember you should always bring your code for every project (from the beginning of the class) to every class.

Challenge 1

Challenge 2

Challenge 3

Challenge Bonus

Coming Up

We are nearing the end of the technical half of the class. Next week we will review everything we’ve learned so far and learn a little more about managing state. Next week the resubmits will be assigned, you can get started on them this week if you want. The following week we will have an in-class test on the technical material we have covered so far. We will then begin applying processing to more creative assignments.

Leave a Reply