Working with functions seems intuitive. It is satisfying to organize and contain certain parts of code. However I am worried about combining functions with classes and how they interact with each other. I feel it will become confusing then.

Function-a-fying My Interactive Self Portrait

Two weeks back, I knew with near absolute certainty that I would regret not organizing and commenting my code neatly in my interactive self-portrait and doing the assignment this week was that reckoning. It wasn’t horribly disorganized, but there were moments of confusion and despair when things:

1. Broke
2. While trying to fix said broken things, I lose where I am in the converting-to-functions process
3. Perspire and deep sigh

In the end, got it to work. It now looks much cleaner, and I can understand clearly why functions are useful and important.

Efficient Use of Functions

Thought it would be fun to use functions in an extremely inefficient way to see what would happen. This resulted in the idea of using new functions to do small tasks. In this case, using a new function to print one word at a fixed location on the screen. To make it worse, you could print individual letters too.

Learning Moment: Using functions this way defeats their own purpose because we are using more code than needed to perform a simple task, making the code more crowded than necessary. These functions are also not portable or reusable because their tasks are fixed and specific to this sketch.

function setup() {
  createCanvas(300, 600);
  
  background("#FFFDD0");
  
  textSize(20);
  textAlign(LEFT);
  textStyle(BOLD);
  textFont("#004D40"); 
  
  fill(20,100,100);
  
  //Why?
  //By splitting every single individual word into it's own function, we:
      // 1) keep function setup() lookin' clean
      // 2) can turn individual words on/off
      // 3) ensure portability (in the event you needed to print the word "WARM" at precisely x:10, y:190 in another sketch)
      // 4) efficiently use 50+ lines of code to print about 18 words

      //And in my next act... I will use drawLetter1, drawLetter2...etc.
  
  // Line 1
  drawWord1();
  drawWord2();
  drawWord3();
  drawWord4();
  
  // Line 2
  drawWord5();
  drawWord6();
  drawWord7();
  drawWord8();
  drawWord9();
  
  // Line 3
  drawWord10();
  drawWord11();
  drawWord12();
  drawWord13();
  drawWord14();
  drawWord15();
  
  // Line 4
  drawWord16();
  drawWord17();
  drawWord18();

}

// Line 1
function drawWord1() { text("AND", 10, 40); }
function drawWord2() { text("THEY", 70, 40); }
function drawWord3() { text("BOTH", 140, 40); }
function drawWord4() { text("SAT", 210, 40); }

// Line 2
function drawWord5() { text("THERE,", 10, 70); }
function drawWord6() { text("GROWN", 100, 70); }
function drawWord7() { text("UP,", 190, 70); }
function drawWord8() { text("YET", 240, 70); }
function drawWord9() { text("CHILDREN", 10, 100); }

// Line 3
function drawWord10() { text("AT", 10, 130); }
function drawWord11() { text("HEART", 50, 130); }
function drawWord12() { text("AND", 140, 130); }
function drawWord13() { text("IT", 210, 130); }
function drawWord14() { text("WAS", 240, 130); }
function drawWord15() { text("SUMMER,", 10, 160); }

// Line 4
function drawWord16() { text("WARM,", 10, 190); }
function drawWord17() { text("BEAUTIFUL", 90, 190); }
function drawWord18() { text("SUMMER.", 10, 220); }