Variables and For Loops

This week is a vibe shift.

We move from representational approaches to art making (where the artist depicts a figure or sensation from their experience in an art work) to a process that is more in line with what a computer, or code more specifically, is good at doing.

What is a computer good at doing?

Storing information. There are all kinds of ways of storing information. You can write a note on your hand, forget about it, and look at it again later. You can count chickens with your fingers and not worry about losing count because the information is stored in your fingers. Computers stem from devices like the abacus -- which we can think of as both a computer and a store of information simultaneously. We will explore how computers store information through variables.

Doing math. Last assignment we spent a lot of our time doing math in our heads and figuring out specific position for shapes. Just like the abacus, computers are really proficient at doing math (and more quickly than us). This week we will explore writing basic arithmetic (addition, subtraction, division, multiplication) that will allow us to outsource our calculations to the computer. Operators like +,-,/,*,%, and parentheses will allow us to do this.

Repeating with a difference. Computers work very quickly and are able to repeat very precisely. If you want to send an email to 100 of your friends to invite them to a party, you don't have to write 100 different emails. You can open a new email, input 100 emails, and the computer will automatically send to them to 100 different people. Large-scale emails such as adverts or newsletters use a technique called "mail merge" which allows writers to use a data sheet that matches names with emails, so that the same email is sent out, but they are able to create personalized greetings or other information. We will explore this this week through the for loop. Later, when we move to animation, the draw loop will be helpful here as well.

This week we begin our exploration of computational affordances through art making. Variables, for loops, and arithmetic operators will allow us to begin to use code creatively to generative geometries that we can modulate as artists creatively. Although we are still learning the foundational moves, these technical concepts are the foundation of making more complex and visually intriguing image compositions.

In creative coding, we are constantly going between the role of the programmer and the artist. As a programmer, we want to write code that allows us to focus on artistic considerations when we are in artist mode. Many creative coders refer to this as a conversational workflow: you program something, then you see what the computer puts out.

Variables

Variables are helpful for a number of reasons. First, it allows us to use a word that makes sense to us to stand in for a specific number (and, later, other data types).

Looking for patterns will help you to become proficient and expedient with creative coding. This will allow us to make changes more quickly in artist mode. For instance, in the figure below, there we are drawing several shapes that have the same Y value. If we put our artist hat on and decide we want to move the row of shapes up or down, we will have to spend time looking in our code for where those functions are and change all of them manually. That is tedious!

function setup() {
  createCanvas(200, 200);
  background(220);
circle(50,100,30);
circle(100,100,30);
circle(150,100,30);
}

Instead, we can declare a variable that will allow us to use a letter or word that makes sense to us to stand in for that number. We can declare variables in different places that have different affordances, but for now let's define them at the top of the file. This is called global scope, which means we can use the variable anywhere in the sketch. I like to refer to this as our control panel: is a region of the sketch where we can quickly change parameters and see the results change (helpful when you are in artist mode and don't want to go digging through code!).

Notice I use the word let to introduce the word that I will use as a variable, followed by the = sign. The word let will show up in the same color as the word function, which lets me know it is a special word in p5. On the other side of the = sign is the number (or other data type, more later) which the variable will store (in this case: 100). This is called declaring and initializing a variable.

Notice how the circle() functions now include the y varible in the second parameter spot. This is how you "call" a variable.

Note: In p5.js and Javascript in general, there are three ways to declare a variable: let, var, and const. Without going too far into it, you can just use let for this class. Anytime you see var or const, you can safely substitute let.

let y = 100;
function setup() {
createCanvas(200, 200);
background(220);
circle(50,y,30);
circle(100,y,30);
circle(150,y,30);
}

We can also use variables with some arithmetic. When using a variable for position, this can be helpful for group shapes together around a kind of anchor position. Addition and subtraction from the variable creates a vertical offset.

let y = 100;
function setup() {
createCanvas(400, 200);
background(220);
circle(50,y-30,30);
circle(100,y,30);
circle(150,y+10,30);
}

Variables declared with let (or var) can also be modified in various ways after they are initialized. This makes variables even more useful. Note: here are three different ways to add 80 to the variable y.

let y = 60;
function setup() {
createCanvas(400, 400);
background(220);
circle(50,y-30,30);
circle(100,y,30);
circle(150,y+10,30);
y = 140;
circle(50,y-30,30);
circle(100,y,30);
circle(150,y+10,30);
y = y + 80;
circle(50,y-30,30);
circle(100,y,30);
circle(150,y+10,30);
y+= 80;
circle(50,y-30,30);
circle(100,y,30);
circle(150,y+10,30);
}

We can use variables for many more things than y position. From what's already on our plate, we could make a few more:

• x position --> x
• y offsets --> yOffset
• circle diamater --> d

Notice that I am using variable names that make sense to me. I can leave comments next to them which remind me what they do. While you can make a variable called adjnfajs, it would be annoying and unpractical to do (although practicality does not always reign supreme; for instance, if you wrote a poem using variables it may not be very practical but it may be aesthetically effective).

Let's simplify the sketch a bit, write these variables in, and try something new: I want to add to the number of circles in my column. Fortunatately we have written our code so I can just copy and paste these two lines: circle(x,y,d); and y+= yOffset;.

let y = 60; // y pos of circle
let x = 50; // x pos of circle
let yOffset = 80; // y positional difference between circles
let d = 30; // diameter of the circle
function setup() {
createCanvas(400, 400);
background(220);
circle(x,y,d);
y+= yOffset;
circle(x,y,d);
y+= yOffset
circle(x,y,d)
y+= yOffset;
circle(x,y,d);
y+= yOffset
circle(x,y,d)
y+= yOffset;
circle(x,y,d);
y+= yOffset
circle(x,y,d)
}

Remember that one of our goals was to minimize the overhead in switching between artist mode and programmer mode. If I want to try out different numbers of circles in the column, I need to spend a lot of time deleting or pasting code and I'm likely to make a mistake if I'm going too fast. What I really want is a variable called numCircles which I could change quick and the computer would repeat those two lines of code for me. Enter the for loop.

For Loops

For loops are structures for repeating blocks of code. When you repeat something (like sit-ups or folding dough), you often count those repetitions to structure the task. When you get to a certain number of situps, you stop. Coding for loops work a similar way, except computers make less assumptions about what it means to count and repeat.

Let's look at the example below to understand the anatomy of the for loop. First, we write the word for, which shows up in the same color as the word let and function. It's followed by parentheses, which we will come back to. Then, curly braces { //contains the code to be repeated}.

Now let's look at what needs to go in the parentheses. Using a:

1. a variable declaration
2. a conditional statement about that variable, and
3. a variable incrementer

We can instruct the for loop how to repeat and when to stop and move on with the rest of the code. These three bits of information are seperated by semicolons:

The first position defines the variable used in the for loop -- it is where we start and runs once at the start of the loop. The second position is the coditions for repeating. In the above, the for loop will go through the code in the curly braces so long as i is less than 10. The last position indicates how the for loop should change the variable each time. If we start at 0, the for loop will run 10 times. In this example, the for loop is counting by 1 and the i variable serves as an index of the repetition number.

There are other ways to count. For instance, when you are counting cash money, you don't often count the number of bills, you count the amount.

In creative code, you may frequently count by pixel positional offsets, size of a shape, changes in color, etc.

let y = 60; // y pos of circle
let x = 50; // x pos of circle
let yOffset = 80; // y positional difference between circles
let d = 30; // diameter of the circle
function setup() {
createCanvas(400, 400);
background(220);
circle(x,y,d);
y+= yOffset;
circle(x,y,d);
y+= yOffset
circle(x,y,d)
y+= yOffset;
circle(x,y,d);
y+= yOffset
circle(x,y,d)
y+= yOffset;
circle(x,y,d);
y+= yOffset
circle(x,y,d)
}

Homework

Coding Sketch: For Loop Remixes

Remix the for loop examples in the book (ex. 4-5 through 4-9) to create something original. See how you can incorporate color, strokeWeight(), and different shapes from the previous week.

Readings

Make: Getting Started with p5*js

Chapters 4. Variables.

by Lauren McCarthy, Casey Reas, Ben Fry

Examples

// declare our variables 
// 3 ways to declare a variable: const; var; let 

let d = 3; // diameter of the circle
let r = d / 2; // calculate the radius 
let xOffset = 0; // left hand margin (not including the radius of the circle)

let numCircles = 200; // control the number of circles

function setup() {
  createCanvas(400, 400);
  console.log(d,r);
}

function draw() {
  background(220);
  
  
 for (let i = 0;i<numCircles;i=i+1) {
    // and to repeat it!!! for a certain number of times
  circle(xOffset+d*i,100,d);
  }
  
  
}

// control panel
let x = 3;
let y = 250;
let w = 10; // width of my circle
let g = 7; // growth rate of my circle, how many pixels are added each time
let num = 150; // number of circles

function setup() {
  createCanvas(500, 500);
  noLoop(); // draw loop only runs once;
}

function draw() {
  background(220);

  // 3 parts to the rules of a for loop
  // for loops need a variable
  // init, where it starts; test, when it should end; update, how it should change
  for (let i = 1; i <= num; i += 1) {
    // the block of code to be repeated
    circle(x * i, y, w);
    //w += g; // takes what w was, and adds whatever is on the right side of it
  }
}

let g = 100;
let offset = 100;
let o = 255; // opacity

function setup() {
  createCanvas(600, 600);
  strokeWeight(2);
  noLoop();
}
function draw() {
  background(204, 0, 100);
  // stroke(greyscale, opacity)
  stroke(255, o);
  // adds a pixel value instead of an index

  //  for loop 1
  for (var x = 20; x < width; x += g) {
    stroke(255, o);
    line(x, 0, x + x / offset, height - 20); // x1, y1, x2, y2
    o -= 1;
  }

  // flor loop 2
  o = 0;
  for (var x = 20; x < width; x += g) {
    // rgb opacity: stroke(r,g,b,opacity)
    stroke(0, 0, 200, o);
    line(x, 0, x + x / offset, height - 20); // x1, y1, x2, y2
    o += 1;
  }
}

let x = 25;
let y = 50;
let d = 20; // diameter of our circle
let r = d / 2;
let num = 10;

function setup() {
  createCanvas(800, 400);
}

function draw() {
  background(220);

  for (let i = 0; i < num; i = i + 1) {
    circle(x * i, y, d); // x,y, diameter
    line(x * i - r, y - r, x * i - r, y + r); // 2 xy pairs for the start and stop
    line(x * i + r, y - r, x * i + r, y + r); // 2 xy pairs for the start and stop
  }

  noLoop();
}

// declaring a varable
let x = 20;
let y = 20;
let w = 20; // w is the width of my rectangle
let h = 10; // h is the height of my rectangle
let spz = 20; // spacing between shapes

function setup() {
  createCanvas(800, 400);
  noFill();
}

function draw() {
  background(220);

  // index
  for (let i = 0; i < 20; i = i + 1) {
    rect(x + spz * i, y, w, h);
    line(x + spz * i, y - h / 2, x + w + spz * i, y + h * 1.5);
    line(x + spz * i, y + h * 1.5, x + w + spz * i, y - h / 2);
  }
}

function setup() {
  createCanvas(480, 800);
}

function draw() {
  background(204);
  for (var i = 20; i < 400; i = i + 20) {
    stroke(i, 100, 10);
    strokeWeight(i / 20);
    line(i, 0, i + i / 2, 800 - i);
  }

  noLoop();
}

// global scope variables
let numLines = 250; // change var to affect for loop function and drawing spacing!
let xOffset = 50; // x starting point
let spacing; // declare but not define spacing;

function setup() {
  createCanvas(480, 480);
  strokeWeight(0.5);
  // updating a global scope
  spacing = (width - xOffset) / numLines; // 280
}

function draw() {
  background(10);
  // repeats code for a given number of iterations based on the rules inside the parentheses
  for (let x = xOffset; x < width - xOffset * 2; x += spacing) {
    // rgb range is 0 to 255;
    let b = map(x, xOffset, width, 100, 255); // number that belongs to a range, old range min, old range max, new range min, new range max
    let r = map(x, xOffset, width, 255, 100); //
    stroke(r, 100, b);

    // code to be repeated
    let y = height - x * 2;
    line(x, 0, x + x / 2, y); // 1st set is top, 2nd is elbow
    line(x + x / 2, y, x, height); // 1st set is elbow, 2nd is bottom
  }
}

// define our variables
// control panel
// variable declaration:
// let: declares a variable (something that can change)
// var: like let but older, still works
// const: declares a constant (cannot be changed)

// camelCaseStyle -- this is not a syntactical rule!
// style guide for variables -- be short but clear!
// single equal sign is always used for declaration of variables
// if you need to use the ma60hematical equals, you write ==;

// global variables are accesible anywhere in the sketch!
// do *you* need to change it in order to see something different? if yes it should be a global variable, if not it might not need to be
let vOffset = 150; // the number of pixels between the top and bottom of canvas and the start and end of the line
let xSpacing = 10; // the horizontal spacing between lines
let numLines = 60; // number of lines

function setup() {
  createCanvas(400, 600);
}

function draw() {
  background(220);
  // local scoped variable! only useable within the context of the draw loop.

  // code inside () are the rules and conditions for repeating the for loop
  // (start;stop;change)
  // start: declare a variable e.g. let i = 0;
  // stop: when should the computer repeat the for loop ? (if the condition it true, the computer will repeat. if not it will exit the for loop and do the next thing)
  // we program rules and conditions around a variable

  // two styles for writing rules and conditions
  // book style: you are thinking in terms of a visual result (position on the canvas, color amount, opacity)
  // index style: where you are thinking it terms of the number of repetitions

  // code inside the {} is the code to be repeated in the for loop.
  for (let i = 0; i < numLines; i++) {
    line(20 + xSpacing * i, vOffset * i/12, 60 + xSpacing * i/9, height - vOffset);
  }
}

// variables
let d = 20; // diameter of the circle
let r = d / 2; // radius of the circle

let inclineFactor = 5; // how much the circles go down

let xOffset = 20;
let numCircles = 20; // number of circles in each row

function setup() {
  createCanvas(400, 400);
  console.log(r);
}

function draw() {
  background(220);
  // radius is half the diameter
  // diameter is the width of the circle cutting thru its center point
  // radius is the distance between the center of the circle to anywhere on its edge
 

  for (let i = 0; i < numCircles; i = i + 1) {
    // the code I want to repeat!
    
    fill(i*20,200-i*10,0)
    circle(xOffset + d * i, 100 + i * inclineFactor, d); // x,y,d
  }
}

// declare our variables 
// 3 ways to declare a variable: const; var; let 

let d = 20; // diameter of the circle
let r = d / 2; // calculate the radius 
let xOffset = 0; // left hand margin (not including the radius of the circle)

let numCircles = 200; // control the number of circles

function setup() {
  createCanvas(400, 400);
  console.log(d,r);
}

function draw() {
  background(220);
  
  let g = 0; 
 for (let i = 0;i<numCircles;i=i+1) {
    // and to repeat it!!! for a certain number of times
  
   fill(100,g,200)
   circle(xOffset+d*i,100,d-i);
   g+=10;
  }
  
  
}