Jupyter at Bryn Mawr College
Public notebooks: /services/public/dblank / CS110 Intro to Computing / 2017-Fall / Notebooks

1. Stick Person

New Processing functions:

  • stroke(GRAYSCALE) - sets the color of lines and borders around shapes
    • stroke(RED, GREEN, BLUE)
    • stroke(RED, GREEN, BLUE, ALPHA)
  • noStroke() - no drawing of the border

New ideas:

  • variable - a named value
  • type - the type of the value
    • int - integer, whole number, positive or negative
    • float - a floating-point number (number with a dot in it), positive or negative
    • void - no type, the null type
  • defining functions - create a new function

New Jargon:

  • variable
  • function
  • type
  • declare, or declaration
  • assign, or assignment
  • parameter - a special variable, see below
  • call a function

1.1 Variables

TYPE NAME;
TYPE NAME = INITIAL_VALUE;
  • Declare
  • Declare and Assign

1.1.1 Examples:

int weight = 120;
int age = 19;
float height = 152.4;

1.1.2 Variable Name Conventions

  • always start with lowercase letter
  • unless it is a CONSTANT, and then use all uppercase letters
    • float GRAVITY = 9.8;
  • variables that are composed of multiple words should use camelCase or use underscores_to_separate
    • int theDogThatBarkedInTheNight = 3;
    • int the_dog_that_barked_in_the_night = 3;

1.1.3 Why Variables?

Let's see an example!

Let's draw a stick person at location (200, 100):

1.2 Plain Drawing

NOTE: separated the numbers that indicate where (x, y) from size

In [15]:
size(400, 300);

// Shadow:
fill(180);
noStroke();
ellipse(200, 100 + 100, 30, 10);

// body and the rest
fill(255);
stroke(0);
// body:
line(200, 100, 200, 100 + 100); // x, y, 
// head:
ellipse(200, 100, 100, 100); // (x, y, w, h)
// arms:
line(200 - 50, 100 + 60, 
     200 + 50, 100 + 60);
Sketch #13:

Sketch #13 state: Loading...

Now, consider what you would need to do to:

  • move the stick person to a different location
  • make it taller or shorter

1.3 Half as Tall

In [1]:
size(400, 300);

fill(255);
stroke(0);
ellipse(200, 100, 0.5 * 100, 0.5 * 100);
// body:
line(200, 100, 200, 100 + 0.5 * 100);
// arms:
line(200 - 0.5 * 50, 100 + 0.5 * 60, 
     200 + 0.5 * 50, 100 + 0.5 * 60);
// Shadow:
fill(180);
noStroke();
ellipse(200, 100 + 0.5 * 100, 0.5 * 30, 0.5 * 10);
Sketch #1:

Sketch #1 state: Loading...

Consider the problem of drawing a stick person at some location x,y at a particular scale.

Let's say, at location (200, 100) at scale 1.0.

1.4 With Variables

In [27]:
size(400, 300);

// scale is a value indicating the size of stick person
float scale = 0.75;
// x,y are values indicating the location of stick person
int x = 300;
int y = 100;
int bodyLength = 100;

fill(255);
stroke(0);
ellipse(x, y, scale * 100, scale * bodyLength);
// base of body:
float baseX = x;
float baseY = y + scale * bodyLength;
// body:
line(x, y, baseX, baseY);
// arms:
line(x - scale * 50, y + scale * 60, 
     x + scale * 50, y + scale * 60);
// Shadow:
fill(180);
noStroke();
ellipse(baseX, baseY, scale * 30, scale * 10);
Sketch #25:

Sketch #25 state: Loading...

1.5 Smaller with Scale

In [28]:
size(400, 300);

// scale is a value indicating the size of stick person
float scale = 0.5;
// x,y are values indicating the location of stick person
int x = 200;
int y = 100;

fill(255);
stroke(0);
ellipse(x, y, scale * 100, scale * 100);
// base of body:
float baseX = x;
float baseY = y + scale * 100;
// body:
line(x, y, baseX, baseY);
// arms:
line(x - scale * 50, y + scale * 60, 
     x + scale * 50, y + scale * 60);
// Shadow:
fill(180);
noStroke();
ellipse(baseX, baseY, scale * 30, scale * 10);
Sketch #26:

Sketch #26 state: Loading...

Two Stick People

NOTE: in copy, don't declare the variables again, just assign them

In [29]:
size(400, 300);

// DRAW ONE!

// scale is a value indicating the size of stick person
float scale = 0.25;
// x,y are values indicating the location of stick person
int x = 100;
int y = 50;

fill(255);
stroke(0);
ellipse(x, y, scale * 100, scale * 100);
// base of body:
float baseX = x;
float baseY = y + scale * 100;
// body:
line(x, y, baseX, baseY);
// arms:
line(x - scale * 50, y + scale * 60, 
     x + scale * 50, y + scale * 60);
// Shadow:
fill(180);
noStroke();
ellipse(baseX, baseY, scale * 30, scale * 10);

// REPEAT!

// scale is a value indicating the size of stick person
scale = 1.0;
// x,y are values indicating the location of stick person
x = 200;
y = 100;

fill(255);
stroke(0);
ellipse(x, y, scale * 100, scale * 100);
// base of body:
baseX = x;
baseY = y + scale * 100;
// body:
line(x, y, baseX, baseY);
// arms:
line(x - scale * 50, y + scale * 60, 
     x + scale * 50, y + scale * 60);
// Shadow:
fill(180);
noStroke();
ellipse(baseX, baseY, scale * 30, scale * 10);
Sketch #27:

Sketch #27 state: Loading...

1.6 Setup and Draw

New way of creating sketches.

Break code up into two functions:

  • setup() - all of the code that you want to run just once
  • draw() - the rest of your code
In [30]:
void setup() {
    
}

void draw() {

}
Sketch #28:

Sketch #28 state: Loading...
In [31]:
void setup() {
    size(400, 100);
}

void draw() {
    // scale is a value indicating the size of stick person
    float scale = 0.25;
    // x,y are values indicating the location of stick person
    int x = 100;
    int y = 50;

    fill(255);
    stroke(0);
    ellipse(x, y, scale * 100, scale * 100);
    // base of body:
    float baseX = x;
    float baseY = y + scale * 100;
    // body:
    line(x, y, baseX, baseY);
    // arms:
    line(x - scale * 50, y + scale * 60, 
         x + scale * 50, y + scale * 60);
    // Shadow:
    fill(180);
    noStroke();
    ellipse(baseX, baseY, scale * 30, scale * 10);    
}
Sketch #29:

Sketch #29 state: Loading...

Defining Functions with Parameters

  1. Take the code with variables
  2. define a new function, using void as TYPE
  3. put old code in new function, and indent
  4. move variables to parameters
  5. call the function where code was

In class, we will transform the following to create a new function, stickPerson(x, y, scale).

In [37]:
void setup() {
    size(400, 100);
}

void drawStickPerson(int x, int y, float scale) {
    // scale is a value indicating the size of stick person
    //float scale = 0.25;
    // x,y are values indicating the location of stick person
    //int x = 100;
    //int y = 50;

    fill(255);
    stroke(0);
    ellipse(x, y, scale * 100, scale * 100);
    // base of body:
    float baseX = x;
    float baseY = y + scale * 100;
    // body:
    line(x, y, baseX, baseY);
    // arms:
    line(x - scale * 50, y + scale * 60, 
         x + scale * 50, y + scale * 60);
    // Shadow:
    fill(180);
    noStroke();
    ellipse(baseX, baseY, scale * 30, scale * 10);        
}

void draw() {
    fill(200, 229, 255);
    rect(0, 0, 400, 50); // sky
    fill(0, 255, 0);
    rect(0, 50, 400, 50); // ground
    drawStickPerson(100, 50, 0.25);
    drawStickPerson(200, 55, 0.5);
}
Sketch #34:

Sketch #34 state: Loading...