Compendium: creative code for graphic designers

(1)

Danish University Colleges

Compendium

creative code for graphic designers Hartelius, Anne Mette

Publication date:

2021

Document Version

Publisher's PDF, also known as Version of record Link to publication

Citation for pulished version (APA):

Hartelius, A. M. (2021). Compendium: creative code for graphic designers.

General rights

Copyright and moral rights for the publications made accessible in the public portal are retained by the authors and/or other copyright owners and it is a condition of accessing publications that users recognise and abide by the legal requirements associated with these rights.

(2)

Creative Code / 3 weeks / Spring 21 Compendium

This is the primer for learn- ing Processing. The Compen- dium refers primarily to this version of the book (from 2010).This book is referred to as 'Getting started'. Can be purchased as an eBook here:

http://it-ebooks.info/book/2

Newest version of the primer for learning Process- ing (from 2015).

But the version from 2010 present a better layout.

This book is referred to as 'Kostas Terzidis'.

Creative Code for graphic designers

Compendium

This compendium has been developed for the course Creative Code at the Danish School of Media and Journalism. You don't need any prior experience with

coding but you need to spend at least 150 hours of exercising during the next 3 weeks.

Learning by doing

Creative Code is based on the programming language Processing, which is tailor made for graphic design. Programming can not be learned just by reading a book. It requires first and foremost lots of hands on exercise and reading the theory when needed.

Progression in learning

This compendium complements the primer: Getting Started with Processing.

By mixing practical step-by-step instructions, exercises and references to the sources mentioned to the left on this page, the theory is introduced in a logical order with increasing complexity.

From the beginner level, you improves your coding skills day by day. There are four levels:

 Intro



Beginner



Intermediate



Advanced

Go forward in your own pace, be curious and patient. Spend time playing and experimenting with the exercises so you become familiar with the different concepts.

Your goal is to be able to easily create dynamic logos, patterns and design systems.

If some of the theory in the book, in the compendium or in the online support function seems unclear, you just switch between these different options of explanation.

Mandatory

To pass the course, you must attend all lectures and joint sessions. You must also pass every

(3)

Creative Code / 3 weeks / Spring 21 Compendium

Intro

1. Installation p 5 2. User interface

PDE=Processing Development Environment p 6 2.1 How to use the console p 7

3. File handling p 8

3.1 Naming, best practise, p 10 4. Intro to coding p 11 4.1 How to write code p 12 4.2 Formatting p 13 4.3 The helpfull editor p 15

5. Canvas and coordinates p 17 5.1 How to draw p 18

5.2 Functions and parameters p 19 5.3 Geometric shapes and colors p 21 5.4 Basic trigonometry p 23

Exercises

Ex 1: Printing text to the console p 7 Ex 2: File handling p 9

Ex 3: Formatting p 14

Ex 4: Drawin with numbers p 18 Ex 5: Drawing shapes p 22

Ex 6: Drawing with trigonometry p 24

Beginner

6. Transformations p 26 7. Datatypes and variables p 30

7.1 Syntax, declaration and initialization p 33 7.2 Naming variables p 34

8. Loops p 35 9. if-blocks p 37

10. Vector graphic import p 39 11. Vector graphic export p 41 12. Functions and parameters p 43 13. Dynamic mode p 44

14. Extra training p 48 Exercises

Ex 7: Translate p 26

Ex 17: Importing vector graphic p 39

Ex 18: Changing fill and stroke on imported vector graphic p 40 Ex 19: Importing photo p 40

Ex 20: Exporting vector graphic p 41 Ex 21: More export p 41

Ex 22: Dynamic mode p 43

Ex 23: Dynamic drawing with imported vector graphic p 45 Ex 24: Exporting vector graphic in dynamic mode p 46 Ex 25: Pattern with offset p 48

Ex 26: Spiral p 48

Ex 27: Dynamic spiral p 49 Ex 28: Two-colored spiral p 49 Ex 29: Asterisk with 4 arms p 50 Ex 30: Asterisk with 12 arms p 50 Ex 31: Asterisk function p 51

Intermediate

15. Events p 53 16. The mouse p 54 17. The keyboard p 56 18. Arrays p 61 19. Matrices p 64

20. Printing a 'matrix' from an array p 67 21. Typography p 68

Exercises

Ex 32: Mouse event 'mouse click' 1 p 54 Ex 33: Mouse event 'mouse click' 2 p 55 Ex 34: Keyboard event 'key press' p 56 Ex 35: Both mouse and keyboard events p 57 Ex 36: Interactive graphics controlled by 12 keys p 58 Ex 37: Print the content of an array p 62

Ex 38: Snake p 63

Ex 39: Print the content of a matrix p 65 Ex 40: Drawing 'tiles' from a matrix p 65 Ex 41: Drawing graphic from a matrix p 66 Ex 42: Mouse-moving matrix p 67 Ex 43: Typographic cristmas card p 69 Ex 44: Study group generator p 70

In the written code, naming also apply. Æ, æ, Ø, ø, Å and å cannot be read by the compiler (see page 11) and will cause error messages. All 'colored' words and characters are reserved names for built-in functions that Processing recognizes and knows what means. All non-colored words (the black ones) are names 'invented' by the programmer. It is a good idea using logical names: In this example the name strokeThickness is a reasonably logical name for the thickness of a stroke.

float x=0;

float y=0;

float tileSize = 30;

float strokeThickness = 1;

void setup() { size (1000, 1000);

background(0);

}

void draw() { stroke(255);

strokeWeight(strokeThickness);

if (random(1) < 0.5) {

line(x, y, x+tileSize, y+tileSize);

} else {

line(x, y+tileSize, x+tileSize, y);

}

x = x + tileSize;

Inter-capping

Note that 'inter-capping' is used in the example with the words 'tileSize' and 'strokeThickness'.

Inter-capping is a general naming-convention for code:

Names are written in lower case, but in compound words all syllables that follow the first syllable begin with a capital letter. For example like these three words:

pole, skiPole, slalomSkiPole …

(10)

Creative Code / 3 weeks / Spring 21 Compendium

Compilation of Processing language into machine code

Here you see some of the machine coding language called Assembler. Machine code is called 1st generation computer language (1GL). It is quite abstract for humans to read and write machine code, therefore higher level languages such as Processing have been invented. These are called 2nd genera- tion computer language (2GL).

Structure of coding language, editing code, drawing with code etc.

4. Intro to coding

One of the benefits by learning Processing is that it is based on one of the world's most widely used programming languages C++. If you only need to learn one programming language, Processing is therefore an excellent choice. It can be used in many contexts and is understood by many.

Programming languages are the link between human languages and machine code that the computer can understand. Programming languages are similar to human languages, but can only be used if we understand the syntax (see explanation below).

How the computer reads your code

The translater between programming language and raw machine code is called a compiler. The compiler reads a Processing program line by line from left to right, and from top to bottom. The compiler ignores space, tabs and line breaks (see page 11), but is extremely sensitive to uppercase and lowercase letters and spelling.

A program consists of a series of sentences, called statements, which are separated by semicolons. For example this statement:

println ("Hello World");

The rules for grammatically correct programming statements are called the syntax of the programming language. Statements written in correct syntax are accepted by the compiler and translated into machine code. If the syntax is incorrect, the compiler will not be able to translate and instead error messages will be printed.

(11)

Creative Code / 3 weeks / Spring 21 Compendium

Very important!

4.1. How to write code

Read this part of appendix A from the primer

Getting started with processing:

(12)

Creative Code / 3 weeks / Spring 21 Compendium

Very important!

4.2. Formatting

Read this part of appendix A from the primer Getting started with processing:

Syntax

Processing is case-sensitive. It distinguishes between uppercase and lowercase letters, so for example the word rect is a reserved word in the code language, while the word Rect is not. You can see the difference when the editor automatically adds a color to the word rect as you type it, while Rect stays black.

(13)

Creative Code / 3 weeks / Spring 21 Compendium

Exercise 3. Formatting

Below is some code with 'nice' formatting. The curly braces ('Tuborgparanteser' in Danish) are used to encapsulate 'blocks' of one or more statements.

All the statements within the curly braces are indented.

Create a new sketch (cmd N) and enter the code.

Note how the editor helps you create good formatting in the following ways:

• Highlightening begin- and end-brackets.

• Automatically indentation at line breaks.

• Automatically colored reserved words.

• Clean-up indentation with 'CMD+ t'.

Run the program. Save the sketch as exercise3.

 Processing/Help/Reference/Language/Structure/curly braces.

Read about curly braces.

/* Program for drawin a line moving from bottom and up */

float yPos = 0.0;

void setup() { size(200, 200);

}

void draw() { background(204);

yPos = yPos - 1.0;

if (yPos < 0) { yPos = 200;

}

line(0, yPos, 200, yPos);

}

(14)

Creative Code / 3 weeks / Spring 21 Compendium

Very important!

4.3. The helpfull editor

Read this part of appendix A from the primer Getting started with processing:

Color coding

Some words are reserved for the program and can be looked up in Help/Find in

(15)

Creative Code / 3 weeks / Spring 21 Compendium

 Summary. When you are familiar with these aspects, you are ready to begin coding.

I understand how to:

Use the Processing Development Environment (PDE).

Handle files with sketches, sketch-folders and sketchbooks.

Use the online-guide Help/Find in Reference.

Code language, syntax and formatting.

(16)

Creative Code / 3 weeks / Spring 21 Compendium

How to draw in the display-window

5. Canvas and coordinates

The Display window represents the so-called canvas, which is organized as a coordinate system with the point 0,0 in the upper left corner.

All drawing elements are placed in relation to this point.

The format of your drawing in pixels is the format of the canvas.

In this example the format is 200 × 200 pixels, defined by the command:

size (200, 200);

Coordinate system of the Display-window

(0, 0)

X (200, 0)

(17)

Creative Code / 3 weeks / Spring 21 Compendium

(80, 0)

(30, 70)

A line from (x1, y1) = (80, 0) to (x2, y2) = (30, 70) is drawn with this statement:

line(80, 0, 30, 70);

Canvas of 100 × 100 pixels is defined with this statement:

size (100, 100);

5.1. How to draw

Processing 'draws' with exact numbers related to the point 0,0 on the canvas.

The size of the canvas have to be defined before drawing, using the size-command.

Exercise 4. Drawing with numbers

Create a new sketch (cmd N) and make yourself familiar with sizes of the display window, the 0,0 point of the coordinate system and the directions of the X and Y axis.

Try different sizes of display windows and draw different lines on those. Use the statements:

size(width, height);

line(x1, y1, x2, y2);

Experiment with the values of width, height, x1, y1, x2 and y2.

Double-click the word size and look it up in Help/Find in reference. Read all about how

(18)

Creative Code / 3 weeks / Spring 21 Compendium

5.2. Functions and parameters

In Exercise 4, you worked with two built-in functions, size() and line(). Processing has a lot of other functions for 'drawing' with code. For example ellipse(), rect() and stroke(). The parentheses after the function name are used to specify parameters for that function. For example stroke(255) specify the numeric value 255 as a parameter for the stroke-function. Thereby the computer knows that the stroke color must have the value of 255 (= white).

Parameters are data inputs that results in a specific output of the function. In Exercise 4, you checked the syntax for the two functions by looking up Help / Find in reference. The syntax explanations in Help / Find in reference are easy to understand and complete. Use them often!

You can also write your own functions. We will get back to that later.

(19)

Creative Code / 3 weeks / Spring 21 Compendium

Read this part of appendix A from the primer

Getting started with processing:

(20)

Creative Code / 3 weeks / Spring 21 Compendium

5.3. Geometric shapes and colors

Processing is tailor made for coding graphics, so is has lots of built-in functions for geometric shapes, as well as coloring, fillings and strokes. Some frequently used functions and parameters are:

• Functions for basic shapes: line, triangle, rect, ellipse, arc, vertex,, beginShape and endShape.

• Functions for background color, line and fill: background, stroke, strokeWeight, fill, noStroke and noFill.

• Parameters for color specification depends on the color system used, for example a line color in greyscale color system is specified by: stroke(235); A line color in RGB color system is specified by: stroke (255,123,0); And a line color in Hexadecimal color system is specified by: stroke (# FF3321);

• Parameters for transparency are given as a 4th parameter to a drawing function.

For example: stroke (255,123,0,107);

• The 'random'-function can generate some unexpected and fun output. The parameter is a number and the output is a random number between 0 and the input number.

For example, to create random colors, you write: stroke (random (255), random (255), random (255)) ;

(21)

Creative Code / 3 weeks / Spring 21 Compendium

Exercise 5. Drawing shapes

Create a new sketch (cmd N) and use the following code to experiment with different shapes in different colors and transparencies. Explanations are added as comments. Double-click the reserved words (like for instance line or stroke) and check the syntax by looking up the word in Help / Find in Reference. Here you will also find suggestions for similar ('related') functions. Usually you will find that at the bottom of the description.

size (500,800); //canvas width = 500 and height = 800 pixler background (255,255,0); //background color in rgb

noFill(); //no color for filling shapes

stroke (250,100,255); //pink color for lines, in r,g,b strokeWeight(3); //thickness for lines, in pixels

line(250, 0, 150, 800); //draw a line from (x1,y1) = (250,0) to (x2,y2) = (150,800) stroke (0,220,255,100); //make the next line blue with transparency = 100, (r,g,b,alpha) strokeWeight(12); //make the next line 12 pixels in thickness

ellipse(450, 0, 50, 800); //draw a circle with center in (450,0) and a with of 50 pixels and a height of 800 pixels.

//Arbitrary line color and transparency:

stroke (random(255), random(250), random(255), random(250));

strokeWeight(24); //make the next line 24 pixels in thickness

arc(300, 300, 400, 200, -PI, PI/2); //draw an arc with center in 300, 300, a width of 400, a height of 200, a start angle at -PI, and an end angle at PI/2.

Experiment with more figures.

Save the sketch as exercise5.

 processing.org/tutorials/drawing/

Read about the drawing functions.

 Chapter 3, p.15-35, in Getting Started.

Read about vector graphics and basic shapes.

(22)

Creative Code / 3 weeks / Spring 21 Compendium

5.4. Basic trigonometry

Trigonometry is used a lot in drawing with code. Here is a brush-up with the basics:

Triangle

A and B are angles in the triangle.

a, b and c are sides in the triangle.

sin(A) = a/c.

cos(A) = b/c.

tan(A) = a/b = sin(A)/cos(A).

A = tan^-1(a/b).

Circle

b = hosliggende KATETE til vinklen A

π = 3,14.

A circle is: 360° in total.

In radians this is: 2π.

90° is the same as:

π/2 = 3,14/2 = 1.57.

r is the radius of the circle.

If r = 1, the circle is called the 'unit circle'.

A C

a = modstående KATETE til vinklen A c = HYPOTENUSEN

B 90˚

r = radius

A

Degrees: 270°

Radians: 3π/2

Degrees: 0° or 360°

Radians: 0 or 2π Degrees: 180°

Radians: π

Point, P: (x,y)

(23)

Creative Code / 3 weeks / Spring 21 Compendium

The black statements her e

is the drawing. Try drawing something else her

e.

Exercise 6. Drawing with trigonometry

Create a new sketch (cmd N) and replace the black statements below to draw a bicycle,

a house, an umbrella or something else with basic geometric shapes. Try using the arc () function.

Important!!! Before you begin coding it is strongly recommended to make a hand drawn sketch on paper.

Indicate the coordinate system with 0,0 in the top left corner to know where to put the coordinates of the drawing.

import processing.pdf.*;

size(400,400);

beginRecord(PDF, "myDrawing.pdf");

background(5,50,10);

strokeWeight(15);

stroke(255);

line(width/2, height-40, width/2, height-200);

fill(255,0,0);

noStroke();

arc(width/2, height-200, 200, 200, -PI, 0);

strokeWeight(10);

stroke(255);

line(width/2 + 10, height-40, width/2+50, height-100);

noStroke();

arc(width/2+50, height-100,70,70,-PI*5/6, PI/6);

endRecord();

NOTE: In this exercise, a 'recording'-function has been added. This is for saving your drawing as a pdf. Pdf's are vector graphics and can be opened in Illustrator.

(24)

Creative Code / 3 weeks / Spring 21 Compendium

 Summary. When you are familiar with these aspects, you are ready to enter the blue level.

I now understand:

The Processing Coordinate system.

Line, circle, rectangle, arc and polygon.

Stroke, strokeWeight and fill.

Colors in color systems Hex, RGB and grey.

Transparency.

Random function.

(25)

Creative Code / 3 weeks / Spring 21 Compendium

6. Transformation

There are three types of transformation:

Translate, Rotate, and Scale.

Transformation can be a little bit tricky, but once you get used to it, it's easy to work with.

The following 4 exercises show you how:



The blue level is about basic coding principles:

• Tranformation:

Translate, rotate and scale.

Push() and Pop().

• Datatypes and variables: Syntax, declara-

tion and initialising.

• Functions: Types of functions and parameters.

• Algorithms: ^{Loops and}

conditions.

• Vector graphics: ^Import

and export to and from Illus- trator.

• Dynamic mode: ^Interac-

tive graphic and animation.

Very important:

It is not the shape itself, but the

COORDINATE SYSTEM that is transformed.

Exercise 7. Translate

Create a new sketch (cmd N) and write the code below one piece at a time (between ––––). Run the code after each piece. After the first piece you see a dot in the middle, then a one square and finally the same square being translated 70 pixels along the x-axis and 30 pixels down the y-axis. Double-click on the word rect- Mode and look it up in Help / Find in reference. Try switching rectMode to CENTER.

size (600,600);

background (255);

strokeWeight(5);

stroke(255,0,0);

point(width/2, height/2); // width and height are reserved words, meaning canvas-width and canvas-height. Here, the canvas is 600 x 600 pixels. Therefore width is 600 pixels and height is 600 pixels.

––––––––––

rectMode(CORNER); //Note: Transformation depends of the reference-point of the shape. Meaning if the figure is drawn from its center or from a corner of itself.

noStroke();

fill(10,200,255,150);

rect(width/2, height/2, 150, 150);

––––––––––

translate(70, 30);

fill(255,80,0,140);

rect(width/2, height/2, 150, 150);

(26)

Creative Code / 3 weeks / Spring 21 Compendium

NOTE

If the Rotate function is tricky, it can either be the coordinate system's 0,0 point is somewhere else than you think, or the reference point's rectMode for the figure is different than you think (this can be CORNER, CORNERS, CENTER, or RADIUS).

Exercise 8. Rotate

Create a new sketch (cmd N) and write the code below.

Click Run and watch a square being rotated by the angle π/8 clockwise around the point 0,0 of the coordinate system. Remember that the coordinate systems point 0,0 is in the upper left corner.

size (600,600);

background (255);

strokeWeight(5);

stroke(255,0,0);

point(400, 250); //mark the center of the square with a red dot.

rectMode(CENTER);

noStroke();

fill(10,200,255,150);

rect(400, 250, 150, 150); //draw the square with the center in 400, 250.

rotate(PI/8); //angle of rotation is measured in radians. Rotation is clockwise.

noStroke();

fill(255,80,0,140);

rect(400, 250, 150, 150); //draw the rotated square.

stroke(0);

noFill();

ellipse(400, 250, 10, 10); //mark the center of the rotated square with a black dot.

Note how the coordinate system and not the square is rotated.

Also note, that rotation takes place around the 0,0 point of the

coordinate system. By translating the 0,0 point of the coordinate system to the reference point of the square, the square will rotate around itself.

Replace the pink part of the code with the following and see the difference:

translate(400, 250); //translates the 0,0-point to the center of the square.

rect(0, 0, 150, 150); //draw the square from the new 0,0-point.

rotate(PI/8);

noStroke();

(27)

Creative Code / 3 weeks / Spring 21 Compendium

NOTE

Trial & Error: It is often faster to experiment with the code until you get the right result, rather than trying to calculate the result in advance.

Exercise 9. Scale

Create a new sketch (cmd N) and write the 12 statements below. Click Run and watch a square being scaled down to half size. The scaling is calculated from the 0,0 point of the coordinate systems upper left corner.

size (600,600);

background (255);

strokeWeight(5);

stroke(255,0,0);

point(300, 200); //mark the center of the square with a red dot.

rectMode(CENTER);

noStroke();

fill(10,200,255,150);

rect(300, 200, 150, 150); //draw the square with the center in 300, 200.

scale(0.5); // Scale down to half size.

fill(255,80,0,140);

rect(300, 200, 150, 150);

Scaling happens by scaling the entire coordinate system (including the figures drawn according to the scale command) with reference to the 0,0 point of the coordinate system. By translating the 0,0 point of the coordinate system to the reference point of the square, the figure will scale with reference to itself. Replace the pink part of the code with the following and see the difference:

translate(300, 200); //translates the 0,0-point to the center of the square.

rect(0, 0, 150, 150); //draw the square from the new 0,0-point.

scale(0.5); //scale the square from the new 0,0-point.

fill(255,80,0,140);

rect(0,0, 150, 150);

Save the sketch as exercise9.

(28)

Creative Code / 3 weeks / Spring 21 Compendium

Exercise 10. Push() and Pop()

These two functions are used when several transformations follow one another. push() puts the existing coordinate system aside while a transformation is taking place, and pop() retrieves it after the transformation. Create a new sketch (cmd N) and type in the code:

size (700,400);

background (255);

rectMode(CENTER);

noStroke();

fill(10,200,255,150);

translate(100, 100); //translate the 0,0-point to 100, 100.

rect(0, 0, 50, 50);

translate(200, 100); //translate again to 200, 100.

rect(0, 0, 50, 50);

translate(300,100); //translate again to 300, 100.

rect(0, 0, 50, 50);

Expected output: Actual output – Oh no!!!:

Each translation relates on the current state of the 0, 0 point of the coordinate system.

If the 0, 0 point has already been translated, the new translation will be 'added' to the previous one and the result will be as in the above picture to the right. Replace the pink part of the code with the following and see the difference:

push(); //put aside the current state of the coordinate system.

translate(100, 100); //translate the 0,0-point of the coordinate system to 100, 100.

rect(0, 0, 50, 50);

pop(); //retrieve the previous state of the coordinate system.

push(); //put aside the current state of the coordinate system.

translate(200, 100); //translate the 0,0-point of the coordinate system to 200, 100.

rect(0, 0, 50, 50);

pop(); //retrieve the previous state of the coordinate system.

(29)

Creative Code / 3 weeks / Spring 21 Compendium

x is just a name pointing at a piece of data storage.

The storage can be filled with different kinds of the type of data it represents.

For example:

A variable could be named 'birthday' for representing a date of someones birthday. The content of that varible can vary between all possible dates of birthdays in the world.

Very important!

7. Data types and variables

A variable is a number of bits in the computer's memory. The state of each bit can vary between on and off. The number of bits necessary for representing a variable depends on the type of variable. This is called data type. For instance the variable of data type boolean only needs 1 bit for storage, since the state of a boolean data type can be either true or false. A variable of another data type, for example an integer (= a number without decimals) takes up 4 bytes = 4 × 8 bit = 32 bits and can represent any integer from approximately -2 billion to 2 billion. Integers are abbreviated 'int'.

Read this part of appendix B from the primer

Getting started with processing:

(30)

Creative Code / 3 weeks / Spring 21 Compendium

31

Variable

A variable is a physical 'storage space' (a number of bits) in the computer memory.

The size of the variable depends on the 'size' of the data that has to be stored in the variable.

The size of a variable can be 1, 2, 3 … or 117-or-more bits.

Here to the right you see a variable of 8 bits = 1 byte.

The smallest possible variable is 1 bit (a light bulb in the computer): ON 1 bit can have 2 conditions: ON or OFF (like a light bulb).

A 1-bit variable can store data of the data type called boolean. OFF

Data type

A data type is a category of data, for example, numbers, names, photos, colors etc.

A boolean data type is a data type that has one of two possible values: 1 or 0 (usually denoted TRUE or FALSE).

An integer is a data type that has billions of possible values.

The values are all possible whole numbers, like for example 5784 or -77 or 3.

A float is a data type that has almost endless possible values.

The values are all possible decimal numbers, like for example 3,5784 or -94831, 3 or 0,0047.

XDANMARKS MEDIE- OG JOURNALISTHØJSKOLE • GD2018-21 • Creative Code • F20 Datatyper oversigt

Almindelige datatyper

Boolean

1 bit

~ 2 muligheder: 1 eller 0, true eller false.

2 bit

~ 4 muligheder: 0,1,2 eller 3.

0 × 2⁰+ 0 × 2¹= 0 + 0 = 0

1 × 2⁰+ 0 × 2¹= 1 + 0 = 1

0 × 2⁰+ 1 × 2¹= 0 + 2 = 2

1 × 2⁰+ 1 × 2¹= 1 + 2 = 3

Char

8 bit = 1 byte,

~ 256 muligheder: 0-255. ‘a’, ‘b’, … ‘A’, ‘B’, …’1’, ‘2’, ASCII: https://theasciicode.com.ar/

0 × 2⁰+ 0 × 2¹+ 0 × 2²+ 0 × 2³+ 0 × 2⁴+ 0 × 2⁵+ 0 × 2⁶+ 0 × 2⁷= 0 + 0 + 0 + 0 + 0 + 0 + 0 + 0 = 0

…

1 × 2⁰+ 1 × 2¹+ 1 × 2²+ 1 × 2³+ 1 × 2⁴+ 1 × 2⁵+ 1 × 2⁶+ 1 × 2⁷= 1 + 2 + 4 + 8 + 16 + 32 + 64 + 128 = 255

Integer (short)

16 bit = 2 bytes

~ 65535 muligheder: 0-65535, eller -32768 – 32767

2⁰+ 2¹+ 2²+ 2³+ 2⁴+ 2⁵+ 2⁶+ 2⁷+ 2⁸+ 2⁹+ 2¹⁰+ 2¹¹+ 2¹²+ 2¹³+ 2¹⁴+ 2¹⁵=

1 + 2 + 4 + 8 + 16 + 32 + 64 + 128 + 256 + 512 + 1024 + 2048 + 4096 + 8192 + 16384+ 32768 = 65535.

Integer (standard), heltal

32 bit = 4 bytes

0 1

1 1 1 0 0 0 1 0

2⁰

2⁰ 2¹

2⁰ 1 2¹

1 2²

1 2³

1 2⁴

1 2⁵

1 2⁶

1 2⁷

2⁰ 1 2¹

1 2²

1 2³

1 2⁴

1 2⁵

1 2⁶

1 2⁷

1

2⁰ 0 2¹

0 2²

0 2³

0 2⁴

0 2⁵

0 2⁶

0 2⁷

2⁰ 0 2¹

0 2²

0 2³

0 2⁴

0 2⁵

0 2⁶

0 2⁷ 2⁸

0 2⁹

0 2¹⁰

0 2¹¹

0 2¹²

0 2¹³

0 2¹⁴

0 2¹⁵

0

0 0

2⁸ 1 2⁹

1 2¹⁰

1 2¹¹

1 2¹²

1 2¹³

1 2¹⁴

1 2¹⁵

1

slukket

… tændt

Almindelige datatyper

Boolean

1 bit

2 bit

0 × 2⁰+ 0 × 2¹= 0 + 0 = 0

1 × 2⁰+ 0 × 2¹= 1 + 0 = 1

0 × 2⁰+ 1 × 2¹= 0 + 2 = 2

1 × 2⁰+ 1 × 2¹= 1 + 2 = 3

Char

8 bit = 1 byte,

0 × 2⁰+ 0 × 2¹+ 0 × 2²+ 0 × 2³+ 0 × 2⁴+ 0 × 2⁵+ 0 × 2⁶+ 0 × 2⁷= 0 + 0 + 0 + 0 + 0 + 0 + 0 + 0 = 0

…

1 × 2⁰+ 1 × 2¹+ 1 × 2²+ 1 × 2³+ 1 × 2⁴+ 1 × 2⁵+ 1 × 2⁶+ 1 × 2⁷= 1 + 2 + 4 + 8 + 16 + 32 + 64 + 128 = 255

Integer (short)

16 bit = 2 bytes

2⁰+ 2¹+ 2²+ 2³+ 2⁴+ 2⁵+ 2⁶+ 2⁷+ 2⁸+ 2⁹+ 2¹⁰+ 2¹¹+ 2¹²+ 2¹³+ 2¹⁴+ 2¹⁵=

1 + 2 + 4 + 8 + 16 + 32 + 64 + 128 + 256 + 512 + 1024 + 2048 + 4096 + 8192 + 16384+ 32768 = 65535.

Integer (standard), heltal

32 bit = 4 bytes

~ 65535 muligheder: 0-65535, eller -2.147.483.648 – 2.147.483.647.

Float (standard), decimaltal

64 bit = 8 bytes

~ -3,4 × 10⁻³⁸ to 3,4 × 10 ³⁸. (-340000…000,000000 to 34000…000,0000000).

amh 2

0 1

1 1 1 0 0 0 1 0

2⁰

2⁰ 2¹

2⁰ 1 2¹

1 2²

1 2³

1 2⁴

1 2⁵

1 2⁶

1 2⁷

2⁰ 1 2¹

1 2²

1 2³

1 2⁴

1 2⁵

1 2⁶

1 2⁷

1

2⁰ 0 2¹

0 2²

0 2³

0 2⁴

0 2⁵

0 2⁶

0 2⁷

2⁰ 0 2¹

0 2²

0 2³

0 2⁴

0 2⁵

0 2⁶

0 2⁷ 2⁸

0 2⁹

0 2¹⁰

0 2¹¹

0 2¹²

0 2¹³

0 2¹⁴

0 2¹⁵

0

0 0

2⁸ 1 2⁹

1 2¹⁰

1 2¹¹

1 2¹²

1 2¹³

1 2¹⁴

1 2¹⁵

1

slukket

… tændt

Almindelige datatyper

Boolean

1 bit

2 bit

0 × 2⁰+ 0 × 2¹= 0 + 0 = 0

1 × 2⁰+ 0 × 2¹= 1 + 0 = 1

0 × 2⁰+ 1 × 2¹= 0 + 2 = 2

1 × 2⁰+ 1 × 2¹= 1 + 2 = 3

Char

8 bit = 1 byte,

0 × 2⁰+ 0 × 2¹+ 0 × 2²+ 0 × 2³+ 0 × 2⁴+ 0 × 2⁵+ 0 × 2⁶+ 0 × 2⁷= 0 + 0 + 0 + 0 + 0 + 0 + 0 + 0 = 0

…

1 × 2⁰+ 1 × 2¹+ 1 × 2²+ 1 × 2³+ 1 × 2⁴+ 1 × 2⁵+ 1 × 2⁶+ 1 × 2⁷= 1 + 2 + 4 + 8 + 16 + 32 + 64 + 128 = 255

Integer (short)

16 bit = 2 bytes

2⁰+ 2¹+ 2²+ 2³+ 2⁴+ 2⁵+ 2⁶+ 2⁷+ 2⁸+ 2⁹+ 2¹⁰+ 2¹¹+ 2¹²+ 2¹³+ 2¹⁴+ 2¹⁵=

1 + 2 + 4 + 8 + 16 + 32 + 64 + 128 + 256 + 512 + 1024 + 2048 + 4096 + 8192 + 16384+ 32768 = 65535.

Integer (standard), heltal

32 bit = 4 bytes

~ 65535 muligheder: 0-65535, eller -2.147.483.648 – 2.147.483.647.

Float (standard), decimaltal

64 bit = 8 bytes

~ -3,4 × 10⁻³⁸ to 3,4 × 10 ³⁸. (-340000…000,000000 to 34000…000,0000000).

Derudover kan datatyper være eksempelvis: String, PShape, PFont, PImage

eller brugerdefinerede klasser (classes), jfr. objekt orienteret programmering (OOP).

amh 2020

0 1

1 1 1 0 0 0 1 0

2⁰

2⁰ 2¹

2⁰ 1 2¹

1 2²

1 2³

1 2⁴

1 2⁵

1 2⁶

1 2⁷

2⁰ 1 2¹

1 2²

1 2³

1 2⁴

1 2⁵

1 2⁶

1 2⁷

1

2⁰ 0 2¹

0 2²

0 2³

0 2⁴

0 2⁵

0 2⁶

0 2⁷

2⁰ 0 2¹

0 2²

0 2³

0 2⁴

0 2⁵

0 2⁶

0 2⁷ 2⁸

0 2⁹

0 2¹⁰

0 2¹¹

0 2¹²

0 2¹³

0 2¹⁴

0 2¹⁵

0

0 0

2⁸ 1 2⁹

1 2¹⁰

1 2¹¹

1 2¹²

1 2¹³

1 2¹⁴

1 2¹⁵

1

slukket

… tændt

Compendium: creative code for graphic designers

Danish University Colleges

Compendium

creative code for graphic designers Hartelius, Anne Mette

Creative Code / 3 weeks / Spring 21 Compendium

Creative Code for graphic designers

Compendium

This compendium has been developed for the course Creative Code at the Danish School of Media and Journalism. You don't need any prior experience with

coding but you need to spend at least 150 hours of exercising during the next 3 weeks.







Creative Code / 3 weeks / Spring 21 Compendium

Intro

Beginner

Intermediate

Table of contents

Creative Code / 3 weeks / Spring 21 Compendium

2

3

Getting started

1. Installation

Download the Processing-program from the official website, processing.org/download:

1

Creative Code / 3 weeks / Spring 21 Compendium

PDE = Processing Development Environment

2. User interface

Processings user interface only consists of 5 parts:

Creative Code / 3 weeks / Spring 21 Compendium

Very important!

Exercise 1. My first program:

2.1. How to use the console

Read this part of appendix A from the primer

Getting started with processing:

Creative Code / 3 weeks / Spring 21 Compendium

Exercise 1. My first program:

Sketch, sketch-folder and sketchbook

3. File handling

Your programs will only work if their files and

data are saved correctly on the hard drive.

Creative Code / 3 weeks / Spring 21 Compendium

Exercise 2. File handling

Creative Code / 3 weeks / Spring 21 Compendium

3.1. Naming, best practise

Creative Code / 3 weeks / Spring 21 Compendium

Structure of coding language, editing code, drawing with code etc.

4. Intro to coding

Creative Code / 3 weeks / Spring 21 Compendium

Very important!

4.1. How to write code

Read this part of appendix A from the primer

Getting started with processing:

Creative Code / 3 weeks / Spring 21 Compendium

Very important!

4.2. Formatting

Read this part of appendix A from the primer Getting started with processing:

Creative Code / 3 weeks / Spring 21 Compendium

Exercise 3. Formatting

Creative Code / 3 weeks / Spring 21 Compendium

Very important!

4.3. The helpfull editor

Read this part of appendix A from the primer Getting started with processing:

Creative Code / 3 weeks / Spring 21 Compendium

I understand how to:

Creative Code / 3 weeks / Spring 21 Compendium

How to draw in the display-window

5. Canvas and coordinates

Creative Code / 3 weeks / Spring 21 Compendium

5.1. How to draw

Exercise 4. Drawing with numbers

Creative Code / 3 weeks / Spring 21 Compendium

5.2. Functions and parameters

Creative Code / 3 weeks / Spring 21 Compendium

Read this part of appendix A from the primer

Getting started with processing:

Creative Code / 3 weeks / Spring 21 Compendium

5.3. Geometric shapes and colors

Creative Code / 3 weeks / Spring 21 Compendium

Exercise 5. Drawing shapes

Creative Code / 3 weeks / Spring 21 Compendium