CREATIVE CODING

Esha Batool | Level 4

INTRODUCTION

Bath Spa University

 MODULE DESCRIPTION
Creative Coding is a practice that uses code for artistic or creative
expression. This can cover a wide variety of media including
generative art, animation, data visualisation, games, apps,
robotics, music, interactive art, immersive experiences – and many
more. Creative Coders are frequently engaged in online
community building, the open-source software movement, and
campaigns for an open and equitable internet.
 MODULE DESCRIPTION
In this module you explore the context of your own emerging
design practice through diving into the field of creative coding.

Through making a research-informed creative coding piece or

experiments collection we hope you will begin to feel at home
within creative computing communities and gain a wider
understanding of the context in which Creative Computing sits.
What makes creative coding unique as an art
form compared to other artistic expressions?

INTERACTIVITY
DYNAMIC AND GENERATIVE ART
ACCESSIBILITY
INTEGRATION OF TECHNOLOGY

Bath Spa University

 KEY ADVICE

Technical skills still matter and you will develop your code skills
from the foundations learned in CodeLab, but you will also use
code in unexpected ways, driven by curiosity and iteration rather
than finding a particular solution.
SA 1 - CREATIVE CODER CASE STUDY
SA 1: (LINK)

Your task is to select a creative coder, or significant figure in one of the

coding movements, and research and write a case study on their work,
career and its impact. You can choose from one of the weekly featured
artists, other artists whose work is mentioned, or identify one of your own.
You should discuss your choice with the tutor before commencing work.
SA 2 - CREATIVE CODING PORTFOLIO
SA 2: (LINK)

Your portfolio will document a series of code experiments that

demonstrate a variety of creative code techniques and variations. The
portfolio will take the form of a public GitHub repository

Each entry should link to a series of live versions of the code and include
screenshots and a suggested 300-word commentary.
INTRODUCTION TO P5.JS

Bath Spa University

FORMS, SHAPES, AND VARIABLES
WEEK 2

Bath Spa University

Design is relationships. This is
where it starts.

PAUL RAND
 FORMAT
How big is my canvas?

SHAPE
Basic square? Ellipse? Triangle?

Relationships POSITION
Where do we place it?

DIMENSION
what size should it have?

ROTATION
http://printingcode.runem Do I turn it?
adsen.com/lecture-form/
FORMAT
CANVAS
CANVAS
CANVAS
SHAPE
POSITION
DIMENSIONS
ROTATION
SYMBOLISM
playful
SYMBOLISM
heavy
SYMBOLISM
sharp
SYMBOLISM
lost
SYMBOLISM
dominant
ICE CREAM CONE / PIN
sharp
 RUNE MADSEN
Tiny Artist 4 - 6
JONATHAN PUCKEY
Delaunay Raster
FIELD
Communion
FIELD
Communion
 FORMAT
How big is my canvas?

SHAPE
Basic square? Ellipse? Triangle?

Relationships POSITION
Where do we place it?

DIMENSION
what size should it have?

ROTATION
http://printingcode.runem Do I turn it?
adsen.com/lecture-form/
 FORMAT
createCanvas(), background()

Basic
SHAPE
point(), line(), rect(), ellipse(), triangle(), quad(), beginShape(),
endShape(), vertex(), bezierVertex(), curveVertex(), also covering

Relationships
ellipseMode(), rectMode(), fill(), noFill(), stroke(), noStroke(),
strokeWeight()

POSITION
(Code) rect( 10, 20, 10, 10), translate(), push(), pop()

DIMENSION
rect( 10, 20, 10, 10), scale()

ROTATION
rotate(PI), radians(180)

VARIABLES
var, width, height, display,Width, displayHeight
P5.JS VARIABLES
String
var word = “Hello world!”;
P5.JS Variables
int (integer) width = canvas width;
height = canvas height;
var wholeNum = 50;

float (decimal)
var decimalNum = 20.5;
FORMAT
createCanvas (150, 150)
createCanvas (width, height)

background (200);
background (color)
SHAPE/ POSITION/ DIMENSIONS
point ( 75, 75); line ( 10, 100, 100, 10);
point(x, y); line ( x1, y1, x2, y2);
SHAPE/ POSITION/ DIMENSIONS
rect(50, 25, 50,100); ellipse ( 75, 75, 100, 100);
rect( x, y, width, height); ellipse (x, y, width, height);
SHAPE/ POSITION/ DIMENSIONS
beginShape();
vertex( 0, 50);
bezierVertex(50, 25, 75, 50, 50, 50);
endShape();

vertex(x, y);
bezierVertex(x1, y1, x2, y2, x3, y3);
x1, y1 = first control point
x2, y2 = second control point
x3, y3 = anchor point
SHAPE/ POSITION/ DIMENSIONS
SHAPE/ POSITION/ DIMENSIONS
translate(width/2 - 150, 0);
beginShape();
vertex(0,100);
bezierVertex( 0, 100, 50, 0, 100, 100);
bezierVertex(100, 100, 150, 200, 200, 100);
bezierVertex(200, 100, 250, 0, 300, 100);
vertex(300, 300);
vertex( 0, 300);
vertex( 0, 100);
endShape();
SHAPE MODES
ellipseMode(CENTER); ellipseMode(CORNER);
ellipse (0, 0, 100, 100); ellipse (0, 0, 100, 100);

default
SHAPE MODES
rectMode(CENTER); rectMode(CORNER);
rect (0, 0, 100, 100); rect (0, 0, 100, 100);

default
SHAPE STYLES
fill(100); noFill();
rect( 25, 25, 100, 100); rect( 25, 25, 100, 100);
SHAPE STYLES
stroke(0); NoStroke();
rect( 25, 25, 100, 100); rect( 25, 25, 100, 100);
SHAPE STYLES
strokeWeight(5);
rect( 25, 25, 100, 100);
ACTIVITY
Create your own car using different shape modes
and styles.

You can color according to your preference.

TRANSLATE 1 SHAPE
translate (25, 25);
triangle ( 50, 0, 100, 100, 0, 100);

translate (x, y);

TRANSLATE MULTIPLE SHAPE
push();
translate ( 25, 25);
triangle ( 50, 0, 100, 100, 0, 100);
pop();

push();
translate (50, 60);
triangle (25, 0, 50, 50, 0, 50);
pop();

also should be used if you are rotating or

scaling multiple shapes
SCALE

rect (10, 10, 100, 100);

scale (1, 2);
rect (70, 10, 100, 100);

scale (width*value, height*value);

 ROTATE
rect (70, 10, 50, 50);
rotate (PI/4);
rect( 70, 10, 50, 50);

rotate (degree);

PI = 180 degrees
TWO_PI = 360 degrees
HALF_PI = 90 degrees
Rotates around 0.0
ACTIVITY
Create your own car using different shapes modes
and styles.

You can color according to your preference.

ACTIVITY
Create your own Alien. Make sure to use the
beginShape(), endShape(), translate(),
bezierVertex(), and the different shape modes and
styles. You can also put color of your own choice.
ACTIVITY
Create your own Alien. Make sure to use the
beginShape(), endShape(), translate(),
bezierVertex(), and the different shape modes and
styles. You can also put color of your own choice.

Add today’s newly introduced functions

(push, pop, scale, and rotate) in the Alien making
activity.

You can also put color of your own choice.

WORKING WITH IMAGES
WEEK 3

Bath Spa University

 IMAGE DISPLAY
loadImage(), image()

IMAGE COLOR
tint(), noTint()

Image Input IMAGE PROCESSING

filter(), BLUR, INVERT, THRESHOLD, blend(), ADD,
Google Drive Link for Images: SUBTRACT, MULTIPLY
https://drive.google.com/drive/fo EXTRACT IMAGE COLOR
lders/1XoN_oAt8pQKcBqR0FPq
5yADa1CmqklGt?usp=sharing loadPixels(), pixels[], updatePixels(), get()

IMAGE METHODS
Image Sequence / Animation
 IMAGE INPUT - loadImage
var img;
function preload() {
img = loadImage("tree.jpg");
}

function setup () {
createCanvas (400, 400);
background(0);
}
function draw() { // It continuously redraws everything on the canvas
background(0);
tint(255, 0, 0);
image(img, 0, 0, img.width/2, img.height/2);
noTint();
image(img, 0, img.height/2, img.width/2, img.height/2);
//These specify the width and height to which the image will be
scaled when drawn. It's drawing the image at half of its original
width and half of its original height.
}
 IMAGE INPUT - Filters
var img;
function preload() {
img = loadImage("tree.jpg");
}

function setup () { //to ensure that necessary external files, like

images, are loaded before the rest of the sketch runs
createCanvas (400, 400);
background(0);
}

function draw() { //It redraws the canvas continuously.

background(0); // Clears the canvas and sets the background
color to black at the beginning of each draw cycle.
image(img, 0, 0);
filter(INVERT);
}
https://p5js.org/reference/p5/filter/
 IMAGE INPUT - Filters
var img; //Declares a variable img to hold the loaded image.
function preload() { // It ensures that the image "tree.jpg" is
loaded before the rest of the sketch runs.
img = loadImage("tree.jpg");
}

function setup () {
createCanvas (400, 400); // The setup() function sets up the
canvas with a size of 400x400 pixels
background(0); // (RGB value of (0, 0, 0))
}
function draw() { //It redraws the canvas continuously.
background(0);
image(img, 0, 0);
filter(BLUR, 10); // Applies a blur effect to the canvas and 10
specifies the level of blur
}
 IMAGE INPUT - Filters
var img;
function preload() {
img = loadImage("tree.jpg");
}

function setup () {
createCanvas (400, 400);
background(0); //RGB VALUES
}

function draw() {
background(0);
image(img, 0, 0);
var v = map(mouseX, 0, width, 0, 5);//re-maps a number from one
range to another.
filter(BLUR, v); // v specifies the level of blur, which is dynamically
adjusted based on the horizontal position of the mouse.
}
 IMAGE INPUT - Filters
var img;
function preload() {
img = loadImage(“ tree.jpg “);
}

function setup () {
createCanvas (400, 400);
background(0);
}

function draw() {
background(0);
image(img, 0, 0); //Draws the loaded image (img) onto
the canvas at the position (0, 0).
var v = map(mouseX, 0, width, 0, 1);
filter(THRESHOLD, v);
}
 IMAGE INPUT - Filters
var img;
function preload() {
img = loadImage("tree.jpg");
}

function setup () {
createCanvas (400, 400);
background(0);
}

function draw() {
background(0);
image(img, 0, 0); //Draws the loaded image (img) onto
the canvas at the position (0, 0)
var v = map(mouseX, 0, width, 2, 20);
filter(POSTERIZE, v); //v specifies the number of color
levels used in the posterization
}
 IMAGE INPUT - Get Image Pixel Data
var img, x, y;
function preload() {
img = loadImage("tree.jpg");
}

function setup() {
createCanvas (400, 400);
background(0);
noStroke();
}

function draw() {
background(0);
x = mouseX;
y = mouseY;
image( img, 0, 0);
var c = get(x, y); //Retrieves the color of the pixel at the mouse position (x, y)
on the canvas and stores it in the variable c.
fill(c); //Sets the fill color for shapes drawn on the canvas to the color sampled
from the image.
ellipse (x, y, 100, 100); //Draws an ellipse at the current mouse position (x, y)
with a diameter of 100 pixels, filled with the color sampled from the image.
}
 IMAGE INPUT - Pointillism Effect
var img, x, y;
function preload() {
img = loadImage("tree.jpg");
}

function setup() {
createCanvas (400, 400);
background(0);
noStroke();
}

function draw() {
x = random(width);
y = random(height);
var c = img.get(x, y); //Retrieves the color of the pixel at the mouse
position (x, y) on the canvas
fill(c[0], c[1], c[2], 50); // array of values which is the red green blue
colors and pass in the opacity value for the 4th one.
ellipse (x, y, 30, 30);
}
 IMAGE INPUT - Image Sequence
var numFrames = 6;
var frame = 0
var images = new Array(numFrames); //store multiple pieces of data of the same
type together

function preload() {
images[0] = loadImage("dove01.png");
images[1] = loadImage("dove02.png");
images[2] = loadImage("dove03.png");
images[3] = loadImage("dove04.png");
images[4] = loadImage("dove05.png");
images[5] = loadImage("dove06.png");
}
function setup() {
createCanvas(600, 400);
frameRate(15); //the speed
background(255);
}

function draw() {
background(255);
frame++;
if (frame == numFrames) frame = 0; //loop back to 0
image(images[frame], mouseX - 75, mouseY - 100);
}
ACTIVITY
Do similar work of image pixel data. Instead of an
ellipse, use another shape. Use your own image.

Do similar work of Pointellism Effect. Increase the

transparency and change the shape. Use your own
image.

Do 1 filter with mouse interaction. Use your own image

Clip and mask function

Clip with text

REPETITION , DECISION,
RANDOMIZATION
WEEK 4

Bath Spa University

Repetition - Nature
 REPETITION - FOR LOOP
for (var i=0; i < 5; i+=1) {
rect(21*i, 0, 20, 20);
}
//it increases the value of 'i' by 1
after each iteration of the loop

for (variable; test; update) {

…then do this;
}
 REPETITION - FOR LOOP
function setup() {
createCanvas(200, 200); // Set up
the canvas
for (var i = 0; i < 5; i++) {
rect(21 * i, 0, 20, 20); // Draw
rectangles
}
}
function draw() {
// Optionally, add any dynamic
drawing logic here
}
 REPETITION - FOR LOOP
for (var i=0; i < 10; i+=1) { fill(0, 100, 100);
rect(width, 0, width/10, height);
fill(36*i, 100, 100); fill(36, 100, 100);
rect(width/10, 0, width/10, height);
rect(width/10*i, 0, width/10, height); fill(72, 100, 100);
} rect(width/20, 0, width/10, height);
fill(108, 100, 100);
rect(width/30, 0, width/10, height);
fill(144, 100, 100);
rect(width/40, 0, width/10, height);
fill(180, 100, 100);
rect(width/50, 0, width/10, height);
fill(216, 100, 100);
rect(width/60, 0, width/10, height);
fill(252, 100, 100);
rect(width/70, 0, width/10, height);
fill(288, 100, 100);
rect(width/80, 0, width/10, height);
fill(324, 100, 100);
rect(width/90, 0, width/10, height);
REPETITION - ARITHMETIC SYNTAX
++ increase by 1
-- decrease by 1
+= add assigned value (ie. i += 5, increase i by 5)
-= subtract assigned value (ie. i -= 5, decrease i by 5)
*= multiply assigned value (ie. i *= 5, multiply i by 5)
/= divide assigned value (ie. i /= 5, divide i by 5)
 REPETITION - FOR LOOP
for (var i=0; i < 5; i+=1) { for (var i=0; i < 9; i+=3) { for (var i = 1; i < 65; i*=2)
rect(21*i, 0, 20, 20); rect(20*i, 0, 20, 20); { fill(0, 100, i); rect(2*i,
} } height/2, i, i);
}
REPETITION - DOUBLE FOR LOOP
function setup() {
createCanvas(150, 150);
colorMode(HSB, 360, 100, 100);
background(255);
noStroke();

for (var i = 0; i < width/10; i++) {

for (var j = 0; j < height/10; j++) {
fill(0, 100, 10*i);
rect(10*i, 10*j, 9, 9);
}
}

}
 REPETITION - SIMPLE PATTERN
var circleSize = 80;
translate(circleSize/2, circleSize/2);

for(var x = 0; x < width; x += circleSize) {

for(var y = 0; y < height; y += circleSize) {
fill(255);
ellipse(x, y, circleSize * 1.2, circleSize * 1.2);
fill(0);
ellipse(x, y, circleSize * 0.8, circleSize * 0.8);
fill(255);
ellipse(x, y, circleSize * 0.3, circleSize * 0.3);
}
}
 REPETITION - SIMPLE PATTERN
var circleSize = 80;

function setup() {
createCanvas(400, 400); // Create a canvas of size 400x400
translate(circleSize / 2, circleSize / 2); // Translate the origin

for (var x = 0; x < width; x += circleSize) {

for (var y = 0; y < height; y += circleSize) {
fill(255);
ellipse(x, y, circleSize * 1.2, circleSize * 1.2); // Outer circle
fill(0);
ellipse(x, y, circleSize * 0.8, circleSize * 0.8); // Middle circle
fill(255);
ellipse(x, y, circleSize * 0.3, circleSize * 0.3); // Inner circle
}
}
}

function draw() {
// Nothing needed here for static drawings
}
DECISION
 DECISION - IF STATEMENTS
if (conditional statement) { if (conditional statement) {
…then do this; …then do this;
} else if (conditional statement) {
} …then do this;
} else if (conditional statement) {
…then do this;
} else if (conditional statement) {
…then do this;
} else if (conditional statement) {
if (conditional statement) {
…then do this;
…then do this; } else {
} else { …then do this;
}
…then do this;
}
DECISION - IF STATEMENTS
DECISION - ARITHMETIC SYNTAX
> greater than
< less than != not equal to
>= greater than or equal to || logical OR
<= less than or equal to && logical AND
== equal to ! logical NOT
DECISION - If Statement Examples
if (x == 8) { if (x > 3) { if (x <= 10) {
color = red; color = red; color = red;
} else { } else { } else {
color = black; color = black; color = black;
} } }

if (x == 3 && y == 4) { if (x == 10 || y < 20) { if (x != 3 && y != 1) {

color = red; color = red; color = red;
} else { } else { } else {
color = black; color = black; color = black;
} } }
 DECISION - Shorthand If Statement

if (x == 8) color = red; if (x > 3) color = red; if (x <= 10) color = red;

else color = black; else color = black; else color = black;
 DECISION - Shorthand If Statement
var maxCol = 5, maxRow = 4, circleD = 60;
var xSpacing = (width/maxCol);
var ySpacing = (height/maxRow);

for (var x = 0; x < maxCol; x++) {

for (var y = 0; y < maxRow; y++) {
if (x == 1) {
fill(255, 0, 0);
}
else {
fill(0, 0, 255);
}
ellipse(x*xSpacing, y*ySpacing, circleD, circleD);
}
}
 DECISION - Shorthand If Statement
function setup() {
createCanvas(400, 400); // Set the canvas size
maxCol = 5;
maxRow = 4;
circleD = 60;

xSpacing = width / maxCol;

ySpacing = height / maxRow;

for (var x = 0; x < maxCol; x++) {

for (var y = 0; y < maxRow; y++) {
if (x == 1) {
fill(255, 0, 0);
} else {
fill(0, 0, 255);
}
ellipse(x * xSpacing, y * ySpacing, circleD, circleD);
}
}
}
 DECISION - Shorthand If Statement
var maxCol = 5, maxRow = 4, circleD = 60;
var xSpacing = (width/maxCol);
var ySpacing = (height/maxRow);

for (var x = 0; x < maxCol; x++) {

for (var y = 0; y < maxRow; y++) {
if (x == 3 && y == 2) {
fill(0, 100, 100);
} else {
fill(0, 0, 100);
}
ellipse(x*xSpacing, y*ySpacing, circleD, circleD);
}
}
 DECISION - Shorthand If Statement
function setup() {
createCanvas(400, 400); // Set the canvas size
maxCol = 5;
maxRow = 4;
circleD = 60;

xSpacing = width / maxCol;

ySpacing = height / maxRow;

for (var x = 0; x < maxCol; x++) {

for (var y = 0; y < maxRow; y++) {
if (x == 1) {
fill(255, 0, 0);
} else {
fill(0, 0, 255);
}
ellipse(x * xSpacing, y * ySpacing, circleD, circleD);
}
}
}
 DECISION - Shorthand If Statement
var maxCol = 5, maxRow = 4, circleD = 60;
var xSpacing = (width/maxCol);
var ySpacing = (height/maxRow);

for (var x = 0; x < maxCol; x++) {

for (var y = 0; y < maxRow; y++) {
if (x == 3 || y == 2) {
fill(0, 100, 100);
} else {
fill(0, 0, 100);
}
ellipse(x*xSpacing, y*ySpacing, circleD, circleD);
}
}
 DECISION - Shorthand If Statement
function setup() {
createCanvas(400, 400); // Set the canvas size
maxCol = 5;
maxRow = 4;
circleD = 60;

xSpacing = width / maxCol;

ySpacing = height / maxRow;

for (var x = 0; x < maxCol; x++) {

for (var y = 0; y < maxRow; y++) {
if (x == 1) {
fill(255, 0, 0);
} else {
fill(0, 0, 255);
}
ellipse(x * xSpacing, y * ySpacing, circleD, circleD);
}
}
}
RANDOMIZATION
Anything that has a numerical value
can be assigned a random value.
 RANDOMIZATION - function
random(100); // MAximum
// Gives a float between 0 and 100

random(50, 100);
// Gives a float between 50 and 100

round(random(100));
// If you want a intrather than a float (which
returns a decimal point) you can use round(),
ceil() or floor() to round it to the closest, next
or previous whole number.
 RANDOMIZATION - random(max)
function setup() {
varrectSize= random(100);
createCanvas(400, 400);
colorMode(HSB, 360, 100, 100);
varx = random(width -rectSize); vary =
random(height -rectSize);
background(random(360), 100, 100);

noStroke();
fill(random(360),
100, 100);
rect(x, y, rectSize, rectSize);
}
 RANDOMIZATION - random(min,max)
function setup() {
varrectSize= random(20, 100)
createCanvas(400, 400);
colorMode(HSB, 360, 100, 100);
varx = random(width -rectSize);
vary = random(height -rectSize);
background(random(270, 360), 100, 100);

noStroke();
fill(random(90, 180), 100, 100);
rect(x, y, rectSize, rectSize);

}
 RANDOMIZATION - color theory
varrectSize= 130;
function setup(){
varorigColor= random(180, 360); createCanvas(600,
400);
rectMode(CENTER);
background(255);
colorMode(HSB, 360, 100, 100);

noStroke();
fill(origColor, 80, 80);
rect(width/2 -rectSize/2, height/2, rectSize, rectSize);
fill((origColor+ 180) % 360, 80, 80);
rect(width/2 + rectSize/2, height/2, rectSize, rectSize);
}
RANDOMIZATION - Perlin Noise
RANDOMIZATION - Perlin Noise
RANDOMIZATION - Perlin Noise
RANDOMIZATION - Perlin Noise
 RANDOMIZATION - Perlin Noise
function setup() {
createCanvas(600, 400);
background(255);
stroke(0);
noFill();
strokeWeight(3);

translate(0, height/2);
beginShape();
var noiseCount= 0;
for(var i= 0; i< width; i+= 1) {
var ranY= noise(noiseCount);
vertex(i, ranY* 100);
noiseCount+= 0.02;
}
endShape();
}
 RANDOMIZATION - Perlin Noise Clouds
var noiseVal;
var noiseScale=0.005;
function setup() {
createCanvas(600, 400);
colorMode(HSB, 360, 100, 100);

//noprotect
for (var y = 0; y < height; y++) {
for (var x = 0; x < width; x++) {
noiseDetail(10, 0.5);
noiseVal= noise((x) * noiseScale, (y) * noiseScale);
stroke(150, 30, noiseVal*100);
point(x,y);
}
}
}
RDR - ACTIVITY
Create your own pattern
with the use of for loop and
if statements that shows
repetition , decision and
randomization
FUNCTIONS, CLASSES, &
TYPOGRAPHY
WEEK 5

Bath Spa University

Functions - Random face
function setup (){
createCanvas(400,400);
colorMode (HSB, 360, 100, 100);
background ( 0, 0, 0);

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

face(random(width), random (height),
random(20,100), random(40,50), random(360));
}

face(width/2, height/2, 100, 150, random (360));

}

function face (x, y, w, h, c) {

fill(c, 100, 100);
ellipse (x,y, w, h);
fill (0 ,0, 100);
ellipse (x - w/6, y - h/8, w/4, h/4);
ellipse (x + w/6, y - h/8, w/4, h/4);
ellipse ( x, y + h/8, w/8, h/8);
ellipse ( x, y + h/3, w/8, h/8);

}
 Classes- Simple Custom Classes
function ClassName(var1, var2) {
this.function1() {
fill(0, 0, 0);
ellipse(var1, var2, 20, 20);
}
this.function2() {
fill(0, 0, 0);
rect(var1, var2, 10, 40);
}
}
Classes - Random Faces
function setup() {
createCanvas(600, 400);
background(255);
noStroke();

var f1 = new Face(width/2 - 100, height/2, 100, 150,

random(255));
var f2 = new Face(width/2 + 100, height/2, 150,
100, random(255));

f1.head();
f1.features();
f2.head();
f2.features();
}

function Face(x, y, w, h, c) {
// Create multiple functions to use.
this.features = function() {
fill(0, c, 0);
ellipse(x - w/6, y - h/8, w/4, h/4);
ellipse(x + w/6, y - h/8, w/4, h/4);
ellipse(x, y + h/8, w/8, h/8);
ellipse(x, y + h/3, w/8, h/8);
}
this.head = function() {
rectMode(CENTER);
fill(c, 0, 0);
rect(x, y, w, h);
}
}
 TYPEFACE - CLASSIFICATIONS
Serif - They are often perceived as more traditional
and formal.
 TYPEFACE - CLASSIFICATIONS
San Serifs - without the decorative strokes, giving
them a cleaner and more modern look.
 TYPEFACE - CLASSIFICATIONS
Scripts - Fonts that mimic handwriting or calligraphy.
They can vary greatly in style, from elegant to playful.
 TYPEFACE - CLASSIFICATIONS
Dingbat or Specialty: consist of symbols or pictograms
rather than traditional alphanumeric characters.
 COMPUTATIONAL TYPE
Rule-Based Typography
Creating a typeface from scratch using rules and
p a r a me t e r s .

Outline Based
S t a r t i n g wi t h a p r e - e x i s t i n g f o n t a n d mo d i f y i n g t h e
o u t l i n e o r i n t e r i o r b a s e d o n p a r a me t e r s .
 COMPUTATIONAL TYPE
Rule-Based Typography
 COMPUTATIONAL TYPE
Outline Based Typography

Growing Data Generative Typografie

 TYPOGRAPHY - SIMPLE TEXT
var word = "Hello world!";

function setup() {

createCanvas(600, 400);
background(255); fill(0); textSize(48);
textAlign(CENTER);
text(word, width/2, height/2 - 30);
text(textWidth(word), width/2, height/2 + 30);
}
 TYPOGRAPHY - SIMPLE TEXT
textSize(Number);
//size

textAlign(alignX, alignY);
// LEFT, CENTER, or RIGHT and TOP, BOTTOM, CENTER, or BASELINE

text(text, x, y);
// Pass in a string of text, x location and y location
 TYPOGRAPHY - FONT
var word = "Hello world!";
var font1, font2, font3;

function preload() {
font1 = loadFont("fonts/BlackOpsOne-Regular.ttf");
font2 = loadFont("fonts/Comfortaa-Light.ttf");
font3 = loadFont("fonts/ShadowsIntoLight.ttf");
}
function setup() { createCanvas(600, 400);
background(255); fill(0); textFont(font3, 100);
textAlign(CENTER); text(word, width/2, height/2);
}
 TYPOGRAPHY - RULE - BASED
var letters = [ [ 0, 1, 1, 0, 1, 0, 0, 1, 1, 1, 1, 1, 1, 0, 0, 1, 1, 0, 0, 1 ], //A
[ 1, 1, 1, 0, 1, 0, 0, 1, 1, 1, 1, 0, 1, 0, 0, 1, 1, 1, 1, 0 ], //B
[ 0, 1, 1, 1, 1, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0, 0, 0, 1, 1, 1 ] ]; //C

var blockSize = 20;

function setup() {
createCanvas(600, 400);
noStroke();
background(255);
fill(0);
for(var i = 0; i < letters.length; i++) {
var xPos = 0, yPos = 0;
for(var j = 0; j < letters[i].length; j++) {
if(letters[i][j] == 1) {
rect(xPos, yPos, blockSize, blockSize);
}
xPos += blockSize;
if(j % 4 == 3) {
xPos = 0;
yPos += blockSize;
}
} translate(blockSize * 6, 0);
}
}
 TYPOGRAPHY - OUTLINE - BASED
var font;

function preload() {
font = loadFont('ShadowsIntoLight.ttf'); }

var points;
function setup() {
createCanvas(300, 400);
stroke(0);
points = font.textToPoints('hello', 100, 100, 100, { sampleFactor: 0.15 });

background(255);
for (var i = 0; i < points.length; i++) {
var p = points[i];
ellipse(p.x, p.y, 3, 3);
}
}
ACTIVITY
Design the BATH SPA UNIVERSITY word using your
own font , random, and with different colors
(outline - based)

design the background also

KEYBOARD & MOUSE
INTERACTIONS
WEEK 6

Bath Spa University

Typewriters
Typewriters
Typewriters
Typewriters - IBM Selectic
COMPUTERS
PUNCH CARDS
PERSONAL COMPUTER
BINARY
A = 01000001
B = 01000010
C = 01000011
ACII
QWERTY
QWERTY
Dvorak
SPECIALTY KEYBOARDS
 KEYBOARD
Key Variables – keyIsPressed, key, keyCode, UP_ARROW,
DOWN_ARROW,
LEFT_ARROW, RIGHT_ARROW, BACKSPACE, SHIFT, DELETE

Key Events – keyPressed(), keyReleased()

Draw Functions – noLoop(), loop()

 MOUSE INTERACTION
Mouse Variables – mouseX, mouseY, pmouseX, pmouseY

Mouse Interaction Functions – mousePressed(), mouseReleased(),

mouseDragged()

Booleans – True or False statements, mouseIsPressed, mouseButton

Mouse Functions – noCursor(), cursor(), map(), constrain(), dist(),

save()

Math Methods – Hover State, Easing and Speed Detection

 MouseX & MouseY
function setup() {
createCanvas(600, 400);
background(0);
noStroke();
}
function draw() {
fill(255, 50);
ellipse(mouseX, mouseY, 50, 50);
}
 Start Off Screen
var d = 50;
function setup() {
createCanvas(600, 400);
background(0);
noStroke();
mouseX = -d;
mouseY = -d;
}
function draw() {
fill(255, 50);
ellipse(mouseX, mouseY, d, d);
}
 Offset
var d = 20;
function setup() {
createCanvas(600, 400);
background(0);
noStroke();
mouseX = -d*2;
mouseY = -d*2;
}
function draw() {
fill(255, 50);
ellipse(mouseX + d, mouseY, d, d);
ellipse(mouseX - d, mouseY, d, d);
ellipse(mouseX, mouseY + d, d, d);
ellipse(mouseX, mouseY - d, d, d);
}
 pmouseX & pmouseY
function setup() {
createCanvas(600, 400);
background(0);
stroke(255);
strokeWeight(3);
frameRate(10);
}

function draw() {
line(mouseX, mouseY, pmouseX, pmouseY);
}
 Mapping
var angle;
function setup() {
createCanvas(600, 400);
background(0);
stroke(255);
strokeWeight(5);
}
function draw() {
background(0);
angle = map(mouseX, 0, width, 0, TWO_PI);
translate(width/2, height/2);
rotate(angle);
triangle(0, -95, 75, 65, -75, 65);
}
 Hover
function setup() {
createCanvas(600, 400);
background(0);
noStroke();
}
function draw() {
background(0);
fill(255);
if (mouseX < width/2) {
rect(0, 0, width/2, height);
} else {
rect(width/2, 0, width/2, height);
}
}
 Boolean
var hoverBoolean = true;
function setup() {
createCanvas(600, 400);
background(0);
noStroke();
}
function draw() {
background(0);
fill(255);
if (mouseX < width/2) hoverBoolean = true;
else hoverBoolean = false;
if (hoverBoolean == true) {
rect(0, 0, width/2, height);
} else if (hoverBoolean == false) {
rect(width/2, 0, width/2, height);
}
}
 mousePressed
function setup() {
createCanvas(600, 400);
background(0);
stroke(255);
}
function draw() {
if (mouseIsPressed) {
translate(mouseX, mouseY);
for(var i = 0; i < 10; i++) {
strokeWeight(i);
point(0, i * -10);
}
}
}
 constrain()
function setup() {
createCanvas(600, 400);
background(0);
noStroke();
}

function draw() {
var x = constrain(mouseX, 100, 500);
var y = constrain(mouseY, 100, 300);
if (mouseIsPressed) {
fill(255, 0, 0); ellipse(x, y, 20, 20);
}
}
 dist()
function setup() {
createCanvas(600, 400);
background(0);
noStroke();
fill(255, 0, 0);
}

function draw() {
background(0);
var d = dist(width/2, height/2, mouseX, mouseY);
ellipse(width/2, height/2, d*2, d*2);
}
 easing
var x = 0;
var easing = 0.07;

function setup() {
createCanvas(600, 400);
background(0);
noStroke();
}

function draw() {
background(0);
fill(255);
var targetX = mouseX; x += (targetX - x) * easing;
ellipse(x, height/2, 40, 40);
}
 Speed
var speed = 0;
var easing = 0.03;
var x, y;
function setup() {
createCanvas(600, 400);
background(0);
stroke(255);
}

function draw() {
var target = dist(mouseX, mouseY, pmouseX, pmouseY);
speed += (target - speed) * easing;
if(mouseIsPressed){
strokeWeight(speed/2);
line(mouseX, mouseY, pmouseX, pmouseY);
}
}
 save()
var count = 1;
var c;
function setup() {
c = createCanvas(600, 400);
background(255);
noStroke();
}
function draw() {
if (mouseIsPressed) {
fill(255, 0, 0, 40);
ellipse(mouseX, mouseY, 30, 30);
}
}

function keyPressed() {
if (keyCode == 65) {
saveCanvas(c, 'canvasName' + count, 'jpg');
count++;
}
}
 Button Class for GUI
var brush = 0;
var bx = 20;
var by = 20;
var bw = 50;
var bh = 20;
var by2 = by + bh + 10;
var b1, b2;
 Button Class for GUI
function Interface(x, y, w, h, c1, c2, b, bSize) {
this.button = function() {
if((mouseX > x) && (mouseX < x + w) && (mouseY > y) && (mouseY < y + h) && mouseIsPressed) {
fill(c1);
brush = b;
} else {
fill(c2);
}
rect(x, y, w, h);
}
this.brush = function() {
if(((mouseX < x) || (mouseX > x + w) || (mouseY < y) || (mouseY > y + h)) && brush == b &&
mouseIsPressed) {
if (b == 0) fill(255, 0, 0, 50);
if (b == 1) fill(255, 50);
ellipse(mouseX, mouseY, bSize, bSize);
}
}
}
 Button Class for GUI
function setup() {
createCanvas(600, 400);
background(0);
noStroke();
// Create a new interface class for each button and brush.
b1 = new Interface(bx, by, bw, bh, color(100, 0, 0), color(255, 0, 0), 0, 20);
b2 = new Interface(bx, by2, bw, bh, color(255), color(100), 1, 40);

} function draw() {
// Draw the button and brush to the canvas.
b1.button();
b1.brush();
b2.button();
b2.brush();
}
Button Class for GUI
ACTIVITY
Create your own mouse
interaction trails with different
colors that depends on your
preference and has the save
option.
 Group Major ACTIVITY - (April 29)
Create an interactive art:
1 . It must display Welcome to Bath Spa
University
2 . Full Canvas Size: windowWidth,
windowHeight

walkthrough video (planning, code and art explanation)

demo video ( screen recording of your work)
ASSESSMENT 1
total 1500 words ( +/-10% - 1,350 to 1,650 words. )
Introduction 500
about creative coding
achievements/accomplishments
inspiration of his works
Creative Coding Works 700
his works
( you can compare his/her works from other
coders) Comparison of Different Artworks of Casey
Reas and Ben Fry
focus on the styles used
Conclusion 300
INFO POINTS
Font : Times New Roman
Font Size:
·Heading - 16
· Paragraph – 12
Line Spacing : 1.5

DON’T PUT YOUR NAME

WORD COUNT : 1350 – 1650 w/o the references
1st PAGE : TITLE ,
2nd PAGE : Table of Contents and Table of Figures
3RD PAGE : start of your main research
ZACH LIEBERMAN
is an artist, designer, computer
programmer, and educator living in
New York City.

creates artwork with code and

experimental animation tools.

co-founder of the School for Poetic

Computation.
CASEY REAS
co-created the Processing
programming language and
development environment in 2001.

received a Master's degree from the

Massachusetts Institute of
Technology's (MIT) Media Lab.

His artistic practice involves

exploring the intersection of
software, generative art, and visual
expression.
BEN FRY
co-created the Processing
programming language and
development environment in 2001.

holds a Ph.D. in Aesthetics and

Computation from the Massachusetts
Institute of Technology (MIT).

wrote "Visualizing Data," which

explores the principles and techniques
of effective data visualization.
MARIO KLINGEMANN
renowned German artist and creative
coder known for his innovative work in
the intersection of art and technology

currently lives in Munich, Germany

2016, he received the British Library

Labs Artistic Award

2018, he won the Lumen Prize Gold

which recognizes works of art made
using technology