Music:
– http://tonematrix.audiotool.com/
– http://www.earslap.com/projectslab/otomata
– http://www.earslap.com/projectslab/circuli

Homework Tips

• Everyone’s code is posted each week. Read other students code to see how they did what they did.
• The first priority is to master your understanding of the new concepts presented each week. Then you want to apply and demonstrate this understanding in your code.
• Start by reviewing the example code in the class notes, paste it into processing and then change, guess, check.
• Don’t do the same exact thing the example code did. There are many ways you can use variables, loops, conditionals, or whatever has been introduced.
• Incorporate concepts from earlier assignments each week, show ways of combining them with the new concepts.
• Take some time to make it look good, consider your composition and palette. Bring in some images.
• Take some time to make your code readable. Make sure it is properly indented (Command-T!). Place comments to label sections of your code and to explain what you are doing.
• Don’t forget the header!

Making Things Move

Last week we looked at using the mouseX and mouseY variables to make your drawing respond and animate based on mouse input. If the user stopped, your drawing stopped.

How can we make things move on their own?

Sprite is a common term for an on screen image that moves around. To make a sprite move, we need to change the position every time we draw it. In order to change the position we first need to store it in a variable (so it can vary). Then we will increment (change by a relative amount) the variable in the draw loop, once before each time we draw it. We might want to store the direction or speed in variables so we can change that as well.

It is helpful to think about all this in terms of what to know and what to do.

What to Do	What to Know
Move It	Position
Respond to inputs/circumstances	Speed/Direction
Draw It

The Bounce sample code below demonstrates moving a sprite.

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.
• 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 how much you know than how good you are at researching and figuring things out. This is a skill you can develop, and a skill you should be developing in this class.

Here are some approaches you can take with different kinds of problems.

Conceptual Issues

When you aren’t sure how some language syntax works or how to use an API call, you have a conceptual 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
• Look through the class sample code and the sample code built into processing. Try running this code and change, guess, check.
• 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.
• 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)
• Search for your problem on , the processing forums, and google. Most of the problems you will face will have been faced by many before you.

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.
• 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.

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.Because of this, 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.

Homework

Create an interactive illustration based on a page from a children’s book. Begin by selecting a children’s book and choosing a page in the book to illustrate.

Use processing and image assets to re-illustrate the page in your own style. Use concepts from previous assignments in creating this illustration, such as having variance in your drawing each time the program runs, or using loops to create repeated elements. Make sure your illustration includes the text of the page in some way.

Then add animation and interactivity to your illustration. Your illustration should have at least on element that moves/changes on its own and at least one specific interaction. Adding more animated or interactive elements may improve your grade. Your goal in this assignment is to apply and demonstrate the coding skills we have introduced in class so far in the service of creating an interactive artwork. In addition to technical aspects, this assignment will be evaluated in terms of aesthetics and craft.

Don’t forget to review and clean up your code. Make sure variable names are descriptive, that the code is well commented and formatted, and that you include the comment header.

We will be critiquing this work next week. We will look at everyone’s project and code.

When you are finished with this assignment post a screen shot of your illustration, the .pde code file, and a zip of the processing sketch to the blog. Bring your sketch to class next week, and be ready to run it on your lab computer at the start of class.

Resubmitting Homework

I will accept do-overs of the first four homework assignments provided they are posted before class on 3/12. Resubmitted work will be docked 1 point (A work will receive a B). Resubmitted work will never lower your existing grade for an assignment.

Bounce

The following examples show a sprite that moves around the screen, bouncing off walls. Each example builds in complexity.

1

//bounce1.pde
//part of a series of example programs that make a circle bounce on the screen

float spriteX = 200;
float spriteY = 200;

void setup()
{
    size(400, 400);
}

void draw()
{
    background(0, 50, 50);

    //Move the Sprite
    spriteX = spriteX + 1;

    //Draw the Sprite
    noStroke();
    fill(255, 50, 50);
    ellipse(spriteX, spriteY, 50, 50);
    fill(155, 0, 0);
    ellipse(spriteX, spriteY, 40, 40);
}

2

//bounce2.pde
//part of a series of example programs that make a circle bounce on the screen

float spriteX = 200;
float spriteY = 200;
float spriteMoveX = 1; 
//try changing spriteMoveX to 2. what does it change?
//try changing spriteMoveX to 3. this reveals a bug (or two), how can you fix it?

void setup()
{
    size(400, 400);
}

void draw()
{
    background(0, 50, 50);

    //Move the Sprite
    spriteX = spriteX + spriteMoveX;
    if (spriteX == 400) {
        spriteMoveX = -1;
    }
    if (spriteX == 0) {
        spriteMoveX = 1;
    }

    //Draw the Sprite
    noStroke();
    fill(255, 50, 50);
    ellipse(spriteX, spriteY, 50, 50);
    fill(155, 0, 0);
    ellipse(spriteX, spriteY, 40, 40);
}

3

//bounce3.pde
//part of a series of example programs that make a circle bounce on the screen

float spriteX = 150;
float spriteY = 200;
float spriteMoveX = 1;
float spriteMoveY = 1; 

void setup()
{
    size(400, 400);
}

void draw()
{
    background(0, 50, 50);

    //Move the Sprite
    spriteX = spriteX + spriteMoveX;
    spriteY = spriteY + spriteMoveY;

    if (spriteX == 400) {
        spriteMoveX = -1;
    }
    if (spriteX == 0) {
        spriteMoveX = 1;
    }
    if (spriteY == 400) {
        spriteMoveY = -1;
    }
    if (spriteY == 0) {
        spriteMoveY = 1;
    }

    //Draw the Sprite
    noStroke();
    fill(255, 50, 50);
    ellipse(spriteX, spriteY, 50, 50);
    fill(155, 0, 0);
    ellipse(spriteX, spriteY, 40, 40);
}

4

//bounce4.pde
//part of a series of example programs that make a circle bounce on the screen

float spriteX = 150;
float spriteY = 200;
float spriteRadius = 25;
float spriteMoveX = 3;
float spriteMoveY = 8; 

void setup()
{
    size(400, 400);
    background(0, 50, 50);
}

void draw()
{
    background(0, 50, 50);

    //move the Sprite
    spriteX = spriteX + spriteMoveX;
    spriteY = spriteY + spriteMoveY;

    //check for collisions with the sides
    if (spriteX > width - spriteRadius) {
        spriteMoveX = -abs(spriteMoveX);
    }
    if (spriteX < 0 + spriteRadius) {
        spriteMoveX = abs(spriteMoveX);
    }
    if (spriteY > height - spriteRadius) {
        spriteMoveY = -abs(spriteMoveY);
    }
    if (spriteY < 0 + spriteRadius) {
        spriteMoveY = abs(spriteMoveY);
    }

    //draw the Sprite
    noStroke();
    fill(255, 50, 50);
    ellipse(spriteX, spriteY, spriteRadius * 2, spriteRadius * 2);
    fill(155, 0, 0);
    ellipse(spriteX, spriteY, spriteRadius * 2 - 10, spriteRadius * 2 -10);
}

Mouse Follow

// Follow_Mouse.pde
// This sample code demonstrates a few different ways to make an onscreen element follow the mouse.

float spriteX = 200;
float spriteY = 200;
String mode = "slush";

void setup()
{
    size(400, 400);
    frameRate(60);
}

void draw()
{
    background(0, 50, 50);

    if (mode == "immediate"){
        spriteX = mouseX;
        spriteY = mouseY;
    }

    if (mode == "zombie"){
        if (spriteX < mouseX) spriteX = spriteX + 1;
        if (spriteX > mouseX) spriteX = spriteX - 1;
        if (spriteY < mouseY) spriteY = spriteY + 1;
        if (spriteY > mouseY) spriteY = spriteY - 1;
    }

    if (mode == "straight"){
        float over = mouseX - spriteX;
        float up = mouseY - spriteY;
        float distance = dist(mouseX, mouseY, spriteX, spriteY);
        if (distance > 0){
            spriteX = spriteX + over / distance;
            spriteY = spriteY + up / distance;
        }       
    }

    if (mode == "slush"){
        float over = mouseX - spriteX;
        float up = mouseY - spriteY;
        spriteX = spriteX + over * .1;
        spriteY = spriteY + up * .1;
    }

    //Draw the Sprite
    noStroke();
    fill(255, 50, 50);
    ellipse(spriteX, spriteY, 50, 50);
    fill(155, 0, 0);
    ellipse(spriteX, spriteY, 40, 40);
}

Toggle Button

//this example responds when a user clicks a button by changing the color of a sprite

boolean spriteRed = false;

void setup()
{
  size(400, 400);
  noStroke();
}

void mouseReleased()
{
  if (mouseX > 100 && mouseY > 175 && mouseX < 100 + 50 && mouseY < 175 + 50)
  {
    spriteRed = !spriteRed;
  }
}

void draw()
{
  background(25, 25, 25);

  //draw button
  fill(255, 0, 0);
  rect (100, 175, 50, 50);

  //draw sprite
  if (spriteRed) {
    fill(255, 0, 0);
  }else{
    fill(0, 0, 255);
  }
  ellipse(275, 200, 40, 40);
}