Creative
Computation
for Visual
Communication
Design
WEEK 5 DAY 2
Where to go
from here?
Continuing with p5:
Object-Oriented Programming
Autonomous agents, swarms, physics simulations
HOW TO CREATE MULTIPLE OBJECTS INTERACTING WITH EACH OTHER?
![](https://s3.amazonaws.com/media-p.slid.es/uploads/2229073/images/10027645/particles.gif)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/2229073/images/10027655/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/2229073/images/10027670/gameOfLife.gif)
Cellular automata: Conway's Game of Life
(ALSO USING VECTORS FOR MORE COMPLEX SIMULATIONS)
Continuing with p5:
Images & video:
Pixel sorting, filters, glitch, image detection
HOW TO USE IMAGES AND VIDEO AS A SOURCE MATERIAL?
![](https://s3.amazonaws.com/media-p.slid.es/uploads/2229073/images/10027525/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/2229073/images/10027531/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/2229073/images/10027554/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/2229073/images/10027700/handsfree.gif)
Continuing with p5:
Recursion & fractals
A FUNCTION REPEATING ITSELF
![](https://s3.amazonaws.com/media-p.slid.es/uploads/2229073/images/10027478/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/2229073/images/10027490/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/2229073/images/10027643/fractal2.gif)
Continuing with p5:
3D, WebGL and shaders
![](https://s3.amazonaws.com/media-p.slid.es/uploads/2229073/images/10027576/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/2229073/images/10027580/pasted-from-clipboard.png)
MAKING GRAPHICS FASTER WITH SHADERS
CREATING 3D ENVIRONMENTS
Continuing with p5:
Serial communication
(and physical computing)
HOW TO MAKE YOUR P5 SKETCH COMMUNICATE WITH CONTROLLERS, SENSORS AND OTHER PROGRAMS?
![](https://s3.amazonaws.com/media-p.slid.es/uploads/2229073/images/10027687/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/2229073/images/10027731/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/2229073/images/10027736/zwAAm.gif)
CHECK OUT MANY OTHER COOL CREATIVE CODING TOOLS AND RESOURCES HERE!
Coding Workshop 5.2
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, not)
-
-
-
REPETITION
-
Doing the same thing more than once
-
Loops (for, while)
-
-
Objects
PROBLEM:
HOW TO STORE AND ACCESS VARIOUS PIECES OF INFORMATION?
HOW TO ALLOW MULTIPLE ELEMENTS TO INTERACT WITH EACH OTHER?
Object Oriented Programming
-
Object-oriented programming is a fundamental programming paradigm which most popular programming languages use
-
In OOP, code is organised into objects that interact with each other
-
-
An object is a data structure that encapsulates both data and functionality
-
Data: Properties ("what it is")
-
Functionality: Methods ("what it can do")
-
PROPERTIES: location, size, colour
METHODS:
move, bounce
Objects and Classes
![](https://s3.amazonaws.com/media-p.slid.es/uploads/2229073/images/11756748/pasted-from-clipboard.png)
- In most OOP languages, objects are created with classes
- A class is a template for creating various similar objects
- Each object is an instace of a class
- Objects inherit their properties and methods from the class
CLASS
OBJECT
![](https://s3.amazonaws.com/media-p.slid.es/uploads/2229073/images/11756748/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/2229073/images/11756748/pasted-from-clipboard.png)
OBJECT
Objects in JS
-
JavaScript was not originally designed to be a strong OOP language
-
Traditionally in JS, objects are created as object literals and they inherit their features from prototypes
-
Classes were added to JS as a feature in 2015
![](https://s3.amazonaws.com/media-p.slid.es/uploads/2229073/images/11756748/pasted-from-clipboard.png)
CLASS
OBJECT
![](https://s3.amazonaws.com/media-p.slid.es/uploads/2229073/images/11756748/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/2229073/images/11756748/pasted-from-clipboard.png)
OBJECT
OBJECT
![](https://s3.amazonaws.com/media-p.slid.es/uploads/2229073/images/11756748/pasted-from-clipboard.png)
CLASS INHERITANCE
PROTOTYPE INHERITANCE
Object syntax
-
A JS object is a variable that can store multiple values as properties
-
An object literal is declared using const (or let)
-
Properties as listed as name:value pairs, separated by commas, inside curly brackets
- Properties can store any data: strings, numbers, arrays, other objects, etc.
const myPizza = {
name: "Margherita",
toppings: ["mozzarella", "tomato", "basil"],
price: 18.90
}
myPizza.price //returns 18.90
- Property values are accessed using the property names
Exercise 1: Simple Object
Class syntax
-
A JS class is an abstracted template for creating multiple objects with same properties and methods
-
eg. Ball class defines how all balls look and behave
-
-
Class is defined outside other function blocks
-
Class name starts with a capital letter
-
Class methods and properties go inside curly brackets
-
All classes require a constructor method
-
Inside the class definition, the object properties are defined with keyword this
class Ball {
constructor(){
this.x = 250;
this.y = 250;
this.r = 100;
}
move() {...}
bounce() {...}
}
Class constructor
-
The constructor method is executed when a new object instance is created
-
Constructor usually defines the objects's properties and sets initial values for them
-
Acts like setup() for classes
-
-
class Ball {
constructor(){
this.x = 250;
this.y = 250;
this.r = 100;
}
move() {...}
bounce() {...}
}
![](https://s3.amazonaws.com/media-p.slid.es/uploads/2229073/images/11757329/pasted-from-clipboard.png)
Creating Objects from Class
let myBall = new Ball();
//constructor is now executed and myBall is an object: {x:250, y:250, r:100}
- create a new object which is an instance of Ball class
- use object properties to draw ellipse
ellipse(myBall.x,myBall.y,myBall.r);
- executed class methods for object
myBall.move();
myBall.bounce();
-
New object instance is created using keyword new
- You can also pass arguments for the constructor method when new object is created
let myBall = new Ball(mouseX,mouseY);
//myBall is an object: {x:mouseX, y:mouseY, r:100}
- create a new object using Ball class, set x and y coordinates as mouse coordinates
class Ball {
constructor(x,y){
this.x = x;
this.y = y;
this.r = 100;
}
move() {...}
bounce() {...}
}
Creating Objects from Class
Exercise 2: Simple Class
Exercise 3: Array of Objects
- Create an array of objects that are instances of Flake class
- Learn a new way to use a for loop to loop through the objects in an array: for...of
- Add new objects when mouse is dragged
Exercise 4: Particle System
- Create class methods that define how the objects interact with each other!
Exercise 5: Object Grid
- Draw objects in a grid formation
- Make the objects interactive: register how many times each object has been clicked
Noise
- The noise function is in many ways similar to sine function and random function
- Input value should be a linear sequence
- Always returns a value between 0 and 1
- Produces a harmonically changing random sequence
- Uses the Perlin noise algorithm developed by Ken Perlin 1983
noise(x, [y], [z])
Exercise: Noise
VARIATION: Exercise: Noise Circle
VARIATION: Exercise: Noise Terrain
CC_w5_d2
By eevirutanen
CC_w5_d2
- 271