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
CC_w3_d2
By eevirutanen
CC_w3_d2
- 265