Creative

Computation
for Visual

Communication
Design

 

WEEK 3 DAY 2

Coding Workshop 3.2

What did we learn?

  • Drawing text on canvas
  • Styling text
  • Loading external fonts
    • Using preload()
  • Some string methods
    • string.length
    • string.charAt()
    • string.replace()
  • Regular expressions
    • /pattern/modifiers

Nested loops

PROBLEM:
HOW TO MAKE A GRID?

Two separate loops

//draw circles 50px apart until x > width
for(let x = 0; x <= width; x+= 50){
ellipse(x,0,40);
}
//draw circles 50px apart until y > height
for(let y = 0; y <= height; y+= 50){
    ellipse(0,y,40);
}

Nested loops

  • Loop inside a loop

    • Execute a second loop for every iteration of first loop

    • Works like a table

      • For every column (x) make rows (y)

columns (x)

rows (y)

Exercise 1: Nested loop

Computing a grid

width

height

columns = 4

rows = 3

 

cellWidth = width/columns

cellHeight = height/rows

 

cellWidth

cellHeight

Computing a grid

Calculating the coordinates of the upper left corner of cells using cellWidth and cellHeight:

0

1

2

3

0

1

2

C0 R0: (0,0)

C1 R0: (cellWidth, 0)

C2 R1: (2*cellWidth, cellHeight)

C3 R2: (3*cellWidth, 2*cellHeight)

IN CODING WE ALWAYS START COUNTING FROM 0!

columns

rows

Computing a grid

0

1

2

3

0

1

2

WE WANT UNIVERSAL FORMULAS! 

UPPER LEFT CORNER OF EACH CELL

X = column * cellWidth
Y = row * cellHeight

CENTER OF EACH CELL

X = column * cellWidth + cellWidth/2
Y = row * cellHeight + cellHeight/2

columns

rows

Computing a grid

THIS WORKS FOR ANY NUMBER AND SIZE OF COLUMNS AND ROWS! 

const columns = 4;
const rows = 3;
let cellW = width / columns;
let cellH = height / rows;

for(let i = 0; i < columns; i++){
    for(let j = 0; j < rows; j++){
        //calculate coordinates
        let x = i * cellW + cellW/2;
        let y = j * cellH + cellH/2;
        ellipse(x,y,40);
    }
}

Exercise 2: Basic Grid

Exercise 3: Kinetic Grid

VARIATION: Exercise 4: 3D effect grid

VARIATION: Exercise 4: 3D effect grid

  • Modify the Kinetic Grid exercise so that each cell has a slightly different rotation from the previous cell (in addition to the animated rotation)

    • ​How to achieve that using the variables in the nested loop?

  • ​In stead of a cross, draw a small circle in each cell
    • What should be the coordinates of the circle? Take a look at the helper sketch!
  • Adjust the number of rows and columns for the desired effect

Computing a grid:

Calculating the index number of each cell

0 1 2 3 4
5 6 7 8 9
10 11 12 13 14
15 16 17 18 19

i=0

i=1

i=2

i=3

j=0

j=1

j=2

INDEX NUMBER OF EACH CELL:

j*columns+i

i=4

j=3

columns = 5

rows = 4

Exercise 5: The Ultimate Grid

VARIATION: Exercise 6: Interactive Grid

Basic concepts in computation

  • MEMORY

    • Storing data and accessing it later

      • Variables, arrays, objects

  • SEQUENCE

    • Running instructions in order

      • Functions, algorithms

  • SELECTION

    • Making choices

      • Conditionals and logic (if, else, and, or)

  • REPETITION

    • Doing the same thing more than once

      • Loops (for, while)

Functions

PROBLEM: HOW TO DRAW MULTIPLE SIMILAR SHAPES?

Functions

  • In addition to using pre-existing functions, you can define and use your own functions

  • Functions are reusable blocks of code that perform a specific task

    • Useful for performing the same task with different parameters

    • Useful for organising your code in separate blocks

    • Useful for distributing code

Declaring a function

function myFunction(argument1, argument2,...){
    // do stuff with arguments
}

function name

(arbitrary)

OPTIONAL

argument names in brackets, separated with commas

(arbitrary)

function body inside curly brackets

declare function

Using your function

myFunction(100,200);

values for arguments

name of defined function

  • Your custom function is executed when it’s called somewhere outside the function definition

    • You can use your functions in draw() the same way you would use predefined functions (eg. ellipse)

​Using your function

  • Declare your function outside draw() and setup()

  • Call your function inside draw(), setup() or other function

  • Function arguments and other possible variables inside the function are local. They can not be accessed outside the function

Exercise 7: Functions

Exercise 8: Randomised grid

PROBLEM: HOW TO GET RANDOM VALUES THAT DO NOT CHANGE IN EVERY FRAME?

Exercise 9: Randomised shape grid

  • By default, random() produces different results each time a sketch is run and in each frame.

  • Calling randomSeed() with a constant argument makes random() produce the same results each time a sketch is run and in every frame.

    • The seed value is arbitrary, as long as its constant.

Function with return value

  • Functions can return values to the caller

    • Eg. performing a calculation on the arguments and returning the solution

    • Same way as eg. the random() function returns a random number

  • When return is reached, the function stops executing 
function average(a,b){
  let result = (a+b)/2;
  return result;
}

let myAverage = average(1,3); //myAverage has value 2

Recap

//calculating grid cells
let cellW = width / columns;
let cellH = height / rows;
//drawing a grid with a nested loop
for(let i = 0; i < columns; i++){
    for(let j = 0; j < rows; j++){
        //calculate coordinates for cell centers
        let x = i * cellW + cellW/2;
        let y = j * cellH + cellH/2;
      	//draw eg. ellipse(x,y,w)
    }
}
//defining a custom function
function myFunction(argument1, argument2,...){
    // do stuff with arguments
}

//calling a custom function
myFunction(value1, value2,...)

//setting a seed value for the random function to get constant random values
randomSeed(99);

Coding Assignment III: Grid

Coding Assignment III

Make a program that generates grid-based compositions

Coding Assignment III: CONSTRAINTS

  • DIFFICULTY LEVEL 1:
    • The program should use nested for-loops
  • DIFFICULTY LEVEL 2:
    • The program should generate various outcomes and/or change over time​
  • DIFFICULTY LEVEL 3:​

    • The program should define and use at least one custom function (in a meaningful way!)

Coding Assignment III: INSTRUCTIONS

  • Comment your code well!

    • Add your name and date on the top

    • Explain how the code works

    • Reference any borrowed code (include links)

      • Explain which parts you have borrowed and how have you modified them

      • (No need to reference exercises from class)

    • Add instructions for interaction if needed!

  • Submit a link in MyCourses by next Tuesday