Creative coding workshop for beginners


#JFOBM
EF
"SUFT
.FEJBMFT

0DU
UI

Workshop Content
‣ Shape and Code
‣ Introduction of Processing
‣ Trying to draw simple forms with Processing
Shape and Code
Shape and Code
‣ The meaning to use code for creation
‣ Historical works of coding of creating shapes
Shape and Code
‣ The advantage of programming for creation

‣ Correct ： Code can draw shapes exactly same as ordered

‣ Repeat： Code can repeat tasks any number of times
‣ Logic（Algorithm） : Code can write the rule for drawing itself

‣ Introducing some works that draw forms using coding

Shape and Code
‣ Ben F Laposky : Oscillons, 1952-56
Shape and Code
‣ Herbert Franke : Electronic Graphics, 1961-62
Shape and Code
‣ A Michael Noll : Gaussian Quadratic 1962
Shape and Code
‣ Ivan Sutherland: Sketchpad, 1963
Shape and Code
‣ Sketchpad, by Dr. Ivan Sutherland with comments by Alan Kay（YouTube）
Shape and Code
‣ Frieder Nake : 13/9/65 Nr. 2, 1965
Shape and Code
‣ Georg Nees: Wurfel-Unordnung (Cubic Disarray), 1968-71
Shape and Code
‣ Edward Zajec : RAM 10/3, 10/4, 2/6, 2/9, 1969
Shape and Code
‣ Manfred Mohr : Cubic Limit 1972-77
Shape and Code
‣ 10 PRINT (demo)
Shape and Code
‣ Current works
‣ Casey Reas : Process Compendium 2004-2010 https://vimeo.com/
22955812
Shape and Code
‣ Now, Anyone can express by code using PC.
‣ Let s begin with code expression!!
Processing Basics
Processing Basics
‣ Processing interface
Processing Basics
‣ play button：run the sketch ( = program)
‣ stop button：stop the sketch
‣ new button：create a new sketch
‣ open button：open the saved sketch
‣ save button：save the sketch
‣ exports button：export the sketch as Java application
Processing Basics
‣ Download from Processing via Web
‣ http://processing.org/download/
Processing Basics
‣ Observe the examples
‣ Any rules?
‣ Kind of characters
‣ End of lines
‣ Colors
‣ Comments
Processing Basics
‣ Parentheses, brackets, braces
‣ おなじ括弧に囲まれている部分がひとつのブロック
{ ……… }
( ……… )
[ … ]

(…){
…
…
… }
About colour
About colour
‣ How to define a color?
‣ Additive primaries v.s. Subtractive primaries
‣ Processing uses Additive primaries (Red, Green, Blue)

Additive Subtractive
About colour
‣ A mechanism of computer screen
‣ Zoom into the screen
‣ Two-dimensional grid of points → pixel
‣ Each pixels consits with Red Green Blue (RGB)
About colour
‣ The computer screen is like huge excel table consits of pixels
‣ e.g. Screen resolution of 1024 x 768
‣ The huge table 1024 row, 768 lines
‣ Each cells holds R, G, B, A values

R
G
B
A
Coordinate System
Coordinate System
‣ Coordinate System
‣ Pair of numbers uniquely determine the position of a point

‣ How many points to define the position of one point?

‣ 2 numbers : (x, y)
‣ Cartesian coordinate system
Coordinate System
‣ Coordinate system of Processing
‣ Origin of coordinate system is top-left
‣ e.g. 100 x 100 coordinate system

(0, 0) (100, 0)

(0, 100)
Trying to draw simple forms
Trying to draw simple forms
‣ At first, define a canvas size
‣ size()：defines a window size to draw

size(<width>, <height>);

‣ e.g. : open a 320 x 240pixel window

size(320, 240);
Trying to draw simple forms
‣ point() : draws a point to the screen

point(<x-coordinate>, <y-coordinate>);

‣ e.g. : draw a point at x-coordinate:100, y-coordinate:120

point(100, 120);
Trying to draw simple forms
Trying to draw simple forms
‣ line() : draws a line to the screen

line(<first point:x>, <first point:y>, <second point:x>, <second point:y>);

‣ e.g.

line(10,10,200,180);
Trying to draw simple forms
Trying to draw simple forms
‣ rect() : draws a rectangle to the screen

rect(<x-coordinate>, <y-coordinate>, <width>, <height>);

‣ e.g.

rect(10,10,200,180);
Trying to draw simple forms
Trying to draw simple forms
‣ ellipse() : draws an ellipse (oval) to the screen

ellipse(<x-coordinate>, <y-coordinate>, <width>, <height>);

‣ e.g.

ellipse(10,10,200,180);
Trying to draw simple forms
Trying to draw simple forms
‣ Let s draw simple forms!
size(800, 600); // define a screen size

point(100, 200); // draw a point

line(80,40,700,500); // draw a line
rect(200,300,400,200); // draw a rectangle
ellipse(500,300,300,200); // draw an ellipse
Trying to draw simple forms
Specify colours
Specify colours
‣ Specify colours of shape
‣ Using additive colours system - Red, Green, Blue

Additive Subtractive
Specify colours
‣ There are three attribute of colours
‣ background colour - background()

background(<Red>, <Green>, <Blue>);

‣ stroke colour - stroke()

stroke(<Red>, <Green>, <Blue>);

‣ fill colour - fill()

fill(<Red>, <Green>, <Blue>);

Specify colours
‣ e.g. 1
//background color
background(128); //Grayscale

//fill color
fill(128, 64, 32); //RGB

//stroke color
stroke(128, 64, 32); //RGB
Specify colours
‣ e.g. 2
size(640, 480);

background(31); //background color

stroke(255, 255, 31); //stroke color
fill(31, 127, 255); //fill color

point(200, 200); //draw a point

line(80,40,600,400); //draw a line
rect(300,200,200,180); //draw a rectangle
ellipse(450,200,200,100); //draw an ellipse
Specify colours
Specify colours
‣ Alpha - means transparency of colour
‣ add alpha to background colour

background(<Red>, <Green>, <Blue>, <Alpha>);

‣ add alpha to stroke colour

stroke(<Red>, <Green>, <Blue>, <Alpha>);

‣ add alpha to stroke colour

fill(<Red>, <Green>, <Blue>, <Alpha>);

Specify colours
‣ adding alpha values
size(640, 480);

background(31);
stroke(255, 255, 31);
fill(31, 127, 255, 127); // 50% transparency

point(200, 200);
line(80,40,600,400);
rect(300,200,200,180);
ellipse(450,200,200,100);
Specify colours
‣ adding alpha values
Specify colours
‣ draw in different colours
size(640, 480);

background(31);
stroke(255, 255, 31);

point(200, 200);
line(80,40,600,400);

fill(31, 127, 255, 127); // rectangle colour

rect(300,200,200,180);

fill(255, 127, 31, 127); // ellipse colour

ellipse(450,200,200,100);
Specify colours
‣ draw in different colours
Quiz!
Quiz 1
‣ draw the shapes in below
‣ the screen size is 400 x 400 pixel
Quiz 1
‣ Answer
size(400,400);

noFill();

ellipse(200,200,400,400);
ellipse(100,200,200,200);
ellipse(300,200,200,200);
ellipse(200,100,200,200);
ellipse(200,300,200,200);
Quiz 2
‣ draw the shapes in below
‣ the screen size is 400 x 400 pixel
Quiz 2
‣ Answer
size(400, 400);

fill(255);
rect(40, 40, 320, 320);

fill(0);
rect(40, 40, 160, 160);
rect(200, 200, 160, 160);
Quiz 3
‣ Draw this shape using the shapes before we created
Quiz 3
‣ answer (example)
size(400, 400);

fill(255);
rect(40, 40, 320, 320);

fill(0);
rect(40, 40, 160, 160);
rect(200, 200, 160, 160);

fill(255);
ellipse(120, 120, 160, 160);
ellipse(280, 280, 160, 160);

fill(0);
ellipse(280, 120, 160, 160);
ellipse(120, 280, 160, 160);
Variables
Variables
‣ Quiz:
‣ Draw a half size of square within the square

ver
Variables
‣ Answer
size(400,400);

rect(100,100,200,200);
rect(100,100,100,100);
Variables
‣ Add a half of the square into the square
Variables
‣ Answer
size(400,400);

rect(100,100,200,200);
rect(100,100,100,100);
rect(100,100,50,50);
Variables
‣ Is there more smart way to calculate the size of square?
‣ If we can record the size of the square, it is more convenient

‣ To the record of the value → use Variables

Variables

‣ Storage location paired with an associated symbolic name

‣ the Box to locate a data

7BSJBCMF
Variables
‣ Data type - identifying one of various types of data
‣ Popular data types in Processing
‣ int：integer value (-1, 0, 1, 2, 3....)
‣ float：real number (-0.01, 3.14, 21.314)
‣ boolean：having two values (true, false)
‣ char：character (a, b, c, d...)
‣ color：color value

JOU PBU DIBS

Variables
‣ Declaration : declares what a word (identifier) means

int hoo;

‣ Assignment : copies a value into the variable

hoo = 0;

‣ Calculation : calculates value using stored value in variable

hoo = hoo + 1;
Variables
‣ Improve the code before using variable calculation
size(400, 400);
float rectSize = 200;

rect(100, 100, rectSize, rectSize);

rectSize = rectSize / 2.0;
rect(100, 100, rectSize, rectSize);
rectSize = rectSize / 2.0;
rect(100, 100, rectSize, rectSize);
rectSize = rectSize / 2.0;
rect(100, 100, rectSize, rectSize);
rectSize = rectSize / 2.0;
rect(100, 100, rectSize, rectSize);
rectSize = rectSize / 2.0;
rect(100, 100, rectSize, rectSize);
rectSize = rectSize / 2.0;

…
Variables
‣ You can draw the nest of rectangles
変数
‣ e.g.
size(800, 600);
background(0);
noStroke();
fill(0, 127, 255, 100);

float x, y, diameter;
x=width/2;
y=height/2;
diameter=height;

ellipse(x, y, diameter, diameter);

diameter = diameter / 1.4;
ellipse(x, y, diameter, diameter);
diameter = diameter / 1.4;
ellipse(x, y, diameter, diameter);
diameter = diameter / 1.4;
ellipse(x, y, diameter, diameter);
diameter = diameter / 1.4;
ellipse(x, y, diameter, diameter);
変数
Iteration
Iteration
‣ There is a repeated expression in the code before
‣diameter
途中から同じ命令のくりかえしになっていないだろうか?
= diameter / 1.4;
ellipse(x, y, diameter, diameter);
‣ たとえば最初の例
diameter = diameter / 1.4;
ellipse(x, y, diameter, diameter);

diameter = diameter / 1.4;

ellipse(x, y, diameter, diameter);

diameter = diameter / 1.4;

ellipse(x, y, diameter, diameter);

....
Iteration
‣ Can we define repeated sections at once?
‣ → For loop

diameter = diameter / 1.4;

ellipse(x, y, diameter, diameter);

Repeat 100 times

Iteration
‣ for loop

for (INITIALIZATION; CONDITION; AFTERTHOUGHT) {

// Code for the for-loop's body goes here.
}

‣ INITIALIZATION：specifies the initial value of the constant

‣ CONDITION：checks a condition of condition to repeat
‣ AFTERTHOUGHT : runs each time the loop runs
Iteration
‣ e.g.
/*
print “+” 100 times
*/

int i;

for (i=0; i<100; i=i+1){

print("+");
}
Iteration
‣ e.g. 2
/*
count up
*/

int i;

for (i=0; i<100; i=i+1){

print(i + ", ");
}
Iteration
‣ e.g. draws a concentric circles
size(800, 600);
background(0);
noStroke();
smooth();
fill(0, 127, 255, 40);

float x, y, diameter;
x = width / 2;
y = height / 2;
diameter = height;

for (int i=0; i<32; i++) {

ellipse(x, y, diameter, diameter);
diameter = diameter / 1.2;
}
Iteration
‣ e.g. draws a concentric circles
Iteration
‣ Iteration of rectangles
size(800, 600);
background(0);
stroke(0);
fill(0, 127, 255, 100);
float x, y, w, h;
x = 0;
y = 0;
w = width;
h = height;

for (int i = 0; i < 32; i++) {

w = w / 2;
h = h / 2;
rect(x, y, w, h);
rect(x + w, y + h, w, h);
}
Iteration
Iteration
‣ Iteration of circles
size(800, 600);
background(0);
stroke(0);
fill(0, 127, 255, 100);
float x, y, diameter;
x = width/4;
y = height/2;
diameter = width/2;

for (int i = 0; i < 32; i++) {

ellipse(x, y, diameter, diameter);
ellipse(x + diameter, y, diameter, diameter);
diameter = diameter / 2;
x = x / 2;
}
Iteration
Iteration
‣ Iteration of rotations
size(800, 800);
background(0);
noStroke();
fill(0, 127, 255, 30);

float diameter;
diameter = width/1.8;

translate(width/2, height/2);
rotate(PI/4);
for (int i = 0; i < 256; i++) {
ellipse(diameter / -2, 0, diameter, diameter);
ellipse(diameter / 2, 0, diameter, diameter);
diameter = diameter / 1.05;
rotate(PI / 24.0);
}
Iteration
HSB Color System
HSB Color System
‣ There is another colour system expect RGB

‣ HSB (HSV) Color System

‣ Hue : the aspect of a colour
‣ Saturation : the intensity of a colour
‣ Brightness (Value) : the brightness of a colour

‣ the HSB is similar with our sensibility for colour

HSB Color System
‣ Image for HSB colour system
HSB Color System
‣ HSB in the Processing

‣ use colorMode() function

‣ e.g.
‣ hue: 360 degree
‣ saturation: 100 graduation
‣ brightness: 100 graduation

colorMode(HSB, 360, 100, 100);

Randomness
Randomness
‣ Computer executes exactly same as programmed
‣ No accidental event

‣ How to include chances?

‣ → Uses randomness

‣ Randomness
‣ Randomness is the lack of pattern or predictability in events
Randomness
‣ random() : generate randomness in Processing

‣ e.g. generates a random value form 0 to 100

random(100);

‣ e.g. generates a random value form 100 to 1000

random(100, 1000);
Randomness
‣ draws shapes with random colours
int i;

size(800, 600);
colorMode(HSB, 360, 100, 100);
noStroke();

for (i=0; i<width; i++) {

fill(random(360), random(100), random(100));
rect(i*1, 0, 1, height);
}
Randomness
‣ draws shapes with random colours
Randomness
‣ draws shapes with random colours (similar hue)
int i;

size(300,300);
colorMode(HSB, 360, 100, 100);
noStroke();

for(i=0; i<300; i++){

fill(random(200,220),random(100),random(100));
rect(i*1,0,1,300);
}
Randomness
‣ draws shapes with random colours (similar hue)
Randomness
‣ draws shapes with random colours (similar saturation and brightness)
int i;

size(300,300);
colorMode(HSB, 360, 100, 100);
noStroke();

for(i=0; i<300; i++){

fill(random(360),60,90);
rect(i*1,0,1,300);
}
Randomness
‣ draws shapes with random colours (similar saturation and brightness)
Randomness
‣ draws a many circles randomly
int i;

size(800, 600);
background(0);
colorMode(HSB, 360, 100, 100, 100);
noStroke();

for (i=0; i<100; i++) {

float diameter;
fill(random(200, 240), random(50, 100), random(50, 100), 50);
diameter = random(50, 200);
ellipse(random(width), random(height), diameter, diameter);
}
Randomness
‣ draws a many circles randomly
Randomness
‣ draws a many rectangles randomly
int i;

size(800, 600);
background(0);
colorMode(HSB, 360, 100, 100, 100);
rectMode(CENTER);
noStroke();

for (i=0; i<100; i++) {

fill(random(0, 40), random(50, 100), random(50, 100), 50);
rect(random(800), random(600), random(5, 200), random(5, 200));
}
Randomness
‣ draws a many rectangles randomly
Let s do it yourself!
‣ Create a sketches using iteration and randomness!

‣ Modify code examples

‣ Share the codes each other