Attributes and Modes

Last Time: Types

Each variable in our program has a type associated with it.

Types restrict what sorts of values we can put into the variable.

Type is placed on the left hand side of the variable during declaration.

void setup(){
  int x = 5;  // Declare x	
  
  int y = 7;
	
  x = 4; // Modifying x
	
  y = "Hello" // Illegal, wrong type!
}

We'll see examples of more complex types later.

def setup():
  x = 5;   # Type of x is implicitly
           # set by the initialization
  y = 7;
	
  x = 4;   # Modify x. This looks the
	       # same as making a new x
  y = "Hello" # Perfectly fine!

Last Time: Scope

Each variable in our program has a scope associated with it.

This scope is a region of the program where that variable can be seen.

void setup(){
  int x = 5;
}

void draw(){
  // Illegal! Can't 
  // see x from here.
  int y = x; 
}
int x = 5;

void setup(){
  x = 4;
}

void draw(){
  // What gets printed?
  println(x);
}

Last Time

Shape Primitives: Shapes included in Processing as a building block for more complex shapes.

  • point
  • triangle
  • ellipse
  • rect
  • arc
  • bezier

Locations described in screen space (a.k.a. the screen coordinate system).

Questions!

Questions whose answers are "Yes"

If we miss a class, can we write an essay to avoid using a grace day even if we still have grace days?

Are lectures recorded?

Can we write a missed class essay for more than one class?

Is it okay that I've never worked with Java before?

Are project grades [in this class] in place of exam grades?

How many hours a week should we expect to spend on coursework outside of lecture?

It depends

What if I'm entirely new to programming, or it's been a while since I took my other Elements Courses?

This class does require a solid grasp of some basic programming principles. If you're concerned you can talk to me.

For reference, I expect the second-to-last question on the welcome survey to be straightforward and the last one to potentially be a little challenging but not super-hard.

As low as 5, as high as 20.

What's with the conflicting rules on AI usage?

 

  • Hands-On: No AI usage
  • Projects: Anything goes as long as three rules are followed.

How many projects are there?

 

Seven, plus a final project.

If I use a LM to explain what's wrong with my code, do I have to cite that?

 

No, but do include your conversation in the language model log.

Rapid-Fire Round!

Open brace on new line or its own line?

This debate's been going on for decades by now, I ain't solving it.

Is there any mathematical background that would help with this course?

Yes, but...

Will we explore how AI art works?

Not in the main part of the course, but stay tuned for the student chosen topics!

What is the syntax for a Java Function?

# Function definition
def func_name(arg1, arg2, arg3):
  function_body
  
# Function call
func_name(1, 2, 3)
//Function definition
void funcName(int arg1, int arg2, int arg3){
  function_body
}

  
//Function call
funcName(1, 2, 3)

Python

Java

Does Processing execute every function? What's the relationship with stuff outside of functions?

A function is a recipe. The body of the function doesn't do anything until the function is called!

void spamTheScreen(){
  while(true){
    println("Spam.");
  }
}

// this is fine
void setup(){}

void draw(){}
void spamTheScreen(){
  while(true){
    println("Spam.");
  }
}

void setup(){
  spamTheScreen();  // Dang it.
}

void draw(){}

Do skills in Processing translate outside of the language? E.g. to C++, Java, Python

 

Yes. In fact, I'd argue that you cannot become really good at programming in general without some of this cross-language skill transfer.

What sort of final project will we be able to create?

 

Last year (5-week session), we had quite a few games, a scientific visualizer, and an audio visualizer.

Is Processing a better language than <insert language here>?

 

No. It is better for learning graphics.

How do I discover new stuff in Processing?

(Hands-On Review)

Note to self: hands-on should demonstrate correct file structure.

A Note On setup() and draw()

You may have noticed that you can write code in Processing without using setup() and draw()

size(500,500);
rect(100,100, 50, 100);
void setup(){
  size(500,500);
}

void draw(){
  rect(100,100, 50, 100);
}

But these two programs do subtly different things!!

size(500,500);
rect(100,100, 50, 100);
void setup(){
  size(500,500);
}

void draw(){
  rect(100,100, 50, 100);
}
  1. Set the window size to 500 x 500
  2. Draw a rectangle
  1. Set the window size to 500 x 500
  2. On every frame that the main window is drawn:
    1. Draw a rectangle

We prefer using setup() and draw() for two reasons:

 

  1. Processing is built around using these functions, and certain functionality (e.g. lowering the frame rate/draw rate, pausing the draw loop, responding to input, etc.) is designed around using these functions.
     
  2. In real graphics applications, you'll be programming in this style as well: you have a single draw loop where things get updated.

    In fact, some languages like JavaScript are entirely based around this model.

In short: in this class, always use setup() and draw() for your programs.

Code snippets in lecture may not include setup() and draw() to save space.

What Goes Where?

Right now, size() calls go in setup(), everything else goes in draw().

As we write more Processing, we'll see things that should not be done every draw (e.g. loading images from files, processing text) which go in setup().

Logically does this need to occur once, or whenever I want to draw the screen?

"Before" and "After"

and loops!

For-Loop

my_list = [1,2,3,4,5]

def draw():
  for x in my_list:
    print(x)
int[] myList = {1,2,3,4,5};

void draw(){
  for(int i = 0; i < myList.size(); i++){
     println(myList[i]);
  }
}

for( initial; test; repeat ){

  <body>

}

  • When the loop is first run, execute initial.

  • Every time before we execute <body>, check to see if test is true.

  • Between iterations of the loop, execute repeat.

What is the type of test?

For-Loop

for( initial; test; repeat ){

  <body>

}

for(int i = 0; i < 5; i++){
  println(i);
}
for(int i = 0; i < 10; i+=2){
  // Do you see the bug?
  println("10 divided by " + i + " is " + 10 / i);
}
// Wacky loop, please do not do this
int i = 0
for(;i < 10;){
  println(i);
  i++;
}
for(int i = 0; i < 5; i++){
  arr[i] += 1;
}

Is "herp()" called before "derp()"?

void setup(){
  for(int i = 0; i < 3; i++){
    herp();
    derp();
  }
}

Is "derp()" called before "herp()"?

void setup(){
  for(int i = 0; i < 3; i++){
    herp();
    derp();
  }
}
void setup(){
    herp();
    derp();
    herp();
    derp();
    herp();
    derp();
}

Is "derp()" called before "herp()"?

void setup(){
  for(int i = 0; i < 3; i++){
    herp();
    derp();
  }
}
void setup(){
    herp();
    derp();
    herp();
    derp();
    herp();
    derp();
}

Is "derp()" called before "herp()"?

void setup(){
    herp();
    derp();
    herp();
    derp();
    herp();
    derp();
}

derp() is not called "Text-Before" herp()

derp() is called "Time-Before" herp()

Computer science terms: lexical and dynamic

void setup(){
  for(int i = 0; i < 3; i++){
    herp();
    derp();
  }
}

Attributes

Attributes

  • Function calls which modify the appearance of shape primitives

  • Apply to all primitives displayed after the attribute

After here means time-after (dynamic)!

Attributes: Fill and Stroke

  • background() sets the background color of the screen
     
  • fill() sets the fill color for a shape
     
  • stroke() sets the outline color for a shape
     
  • noFill() and noStroke() prevent shape fill or shape stroke respectively
int WHITE = 255;
int BLACK = 0;

fill(WHITE);
stroke(BLACK);
rect(0, 0, 50, 50);

fill(BLACK);
stroke(WHITE);
rect(50, 50, 50, 50);

Modes

  • Function calls which modify the interpretation of shape primitive functions
     
  • Apply to all primitives displayed after the mode

Modes for rect and ellipse

  • rectMode() and ellipseMode() take a parameter:
    • CORNER, CORNERS, CENTER, RADIUS
  • These parameters change how the parameters to calls to rect() and ellipse() are interpreted.

rectMode(CORNER);
rect(a, b, c, d);

(a,b)

c

d

rectMode(CORNERS);
rect(a, b, c, d);

(a,b)

(c,d)

rectMode(CENTER);
rect(a, b, c, d);

rectMode(RADIUS);
rect(a, b, c, d);

(a,b)

c

d

(a,b)

c

d

Other Modes

Modes allow for different models within the context of the same method.

 

Other modes in Processing:

  • colorMode
  • textureMode
  • imageMode
  • shapeMode
  • blendMode
  • textMode

Order Matters!

Attribute and mode commands only affect the commands that come after them. Ordering of statements is important!

stroke(100);
rect(80, 120, 150, 40);
stroke(200);
rect(50, 100, 150, 40);

Order Matters!

The order of draw commands can also affect output!

rect(50, 100, 150, 40);
rect(80, 120, 150, 40);
rect(80, 120, 150, 40);
rect(50, 100, 150, 40);

vs

Order Matters Globally 

int WHITE = 255;
int BLACK = 0;

fill(WHITE);
stroke(BLACK);
rect(0, 0, 50, 50);

drawRect(0, 0, 100, 100);

// What color does this draw in?
rect(100, 100, 100, 100);
void drawRect(int a, int b, 
              int c, int d){
  fill(BLACK);
  stroke(BLACK);
  rect(a,b,c,d);
}

Hands-on: Using Attributes

  1. Experiment with stroke(), fill(), noStroke(), and noFill().
  2. Draw a rectangle and an ellipse and then try out at least one alternate mode on these shapes.
  3. Experiment with the order of attribute/mode/draw calls. Create at least two shape clusters which demonstrate a difference in order.
  4. Answer the following questions in a /* block comment */:
    1. How can order create the illusion of depth?
    2. How can primitive modes help us build images?

[02a]: Attributes and Modes

By Kevin Song

[02a]: Attributes and Modes

  • 32

More from Kevin Song