e-lctrnc-msc - Tumblr blog

e-lctrnc-msc · 6 years ago

Text

Week 11-12

In these couple weeks, I find myself restudying up on coding language in order to be more fluent and to understand it better. I am also studying up more on WEBGL and how it works. In today’s post I have documented my notes from class as well as my own personal studying. I have also begun the Fake World test sketch.

Notes from class: command, forward slash

uniform is a variable

because of the prefix uniform, it can control things in the

shader : variable called shdr

shader language is built into your computer

so p5js can access it

text files:

basic vertex text (basic-vert.txt)

basic fragment text (basic-frag.txt)

vertex and fragment talks to separate things

vertex applies to geometry like triangles

fragment applies to pixels

shader is a class that contains functions and variables

shader is made up of the two text files above

buffer is something that exists next to p5js, like an invisible screen or an image. whenever i want i can position that image somewhere inside of my sketch

createGraphics

there are no randomness in shaders, so you have to write them into the fragment or vertex files

under fragment file:

uniform float value

gl_FragColor = vec4(value, 1.0, 0.0, 1.0)

for every frame value, it’s uploaded once and applied to each pixel

uv are coordinates

for each pixel, there is a frag coordinate (FragCoord)

coordinates are stored inside uv

vec2 uv = fragCoord => means you’re calling out to the

process is important to document

milky-believe on sojamo

WEBGL

WEBGL: web graphics library, a standard for doing openGL in the browser. one of the many 3D environments

(openGL is another graphics library that is hardware accelerated)

CPU central processing unit

GPU graphics processing unit

any image is a grid of pixels

openGL renders images to your screen via the graphics card (GPU)

P3D mode uses java openGL

to do 3D in browser, you can use WEBGL, or a library like three.js -> very useful for doing ultimate 3D stuff

p5js - beginner friendly, creative coding library for javascript focused on 2D drawing but also has features

sound library

webcam

dom library for html -> document object model is a programming interface for HTML and XML documents. It represents the page so that programs can change the document structure, style, and content. The DOM represents the document as nodes and objects, but is the same document in both cases

WEBGL render

by default, the context for p5 is a 2D html5 canvas

by giving createCanvas a new argument:

createCanvas(width, height, WEBGL) -> you are changing the 2D context to a 3D one

new functions you can call in 3D context:

3D geometry

camera

texture

material

lights

3 CAMERA FUNCTIONS

camera()

perspective()

ortho()

camera:

need to define where it is in the scene, and where it is pointing. also need to define a vector pointing up that tells us how the camera is supposed to turn. all 3 are (x,y,z) values. you need 9 arguments in total for camera

perspective:

separate from the camera

is a function that defines how the illusion of 3 dimensional perspective is created

involves a few things:

field of view - is a pyramid. could be wider or smaller (fov - default fov is PI/3 or 60 degree angle)

define a clipping plane

aspect ratio tied to aspect ratio of canvas

in the end, you get something like:

perspective(fov, aspect ratio, min clipping plane, clipping max plane)

ortho:

which stands for orthographic perspective. objects further away appear the same size. classic 3D look for games. flattened 3D perspective. also known as isometric perspective.

cos 0 = 1

cos pi/2 = 0

cos pi = -1

cos 3pi/2 = 0

cos 2pi = 1

sin 0 = 0

sin pi/2 = 1

sin pi = 0

sin 3pi/2 = -1

sin 2pi = 0

Personal notes:

object oriented programming:

the point is to make code have

modularity

reusability

Ball b;

function setup() {

b = new Ball();

}

function draw() {

b.move();

b.bounce();

b.display();

}

mini program called a Ball class “class Ball { }”

functions

do we know what functions are?

background(0) is us calling a function

it has the name background, and it has arguments 0-255

this function comes from the processing API (application program interface). it exists because somebody (ben fry) defined this function

rect(0,0,100,100) is also a function. somebody has defined the function rect.

what about flower(300,20,10,10,10,10)?

the function flower does not exist because no one has defined the function. but you can define your own functions!

syntax for defining a function:

returnType name (___,___,___) {

}

in the brackets, are where you list the arguments

if statements, loops, setup, draw are all functions we’re defining.

an example would be

function draw () {

}

returnType: function

name: draw

arguments: no arguments

function is a function’s returnType that exists in processing. if a function has no returnType, you say void OR function in p5.

what would it mean for a function to have a returnType?

that means the function would return an answer, it has a void returnType.

function random returns something to you

function background or rect that does not have a returnType, have a void returnType (but we write it as function in p5)

to create a new function. example, flower:

function draw() {

background(0);

flower();

}

function flower() {

fill(255,0,0)

ellipse(100,100,20,20)

}

function flower -> whatever is written inside is just an example, it is obviously not a flower

if you define a function, but don’t call it, explicitly somewhere within the flow of the program, it’s not gonna be executed.

the function exists but is not happening.

setup and draw are functions that processing actually executes for us. so we need to call the functions we create in one of those.

you can segment your code in different sections, under different functions you create so your overall code is neater

function draw() {

displayBall();

moveBall();

checkEdges();

}

function displayBall() {

}

function moveBall() {

}

function checkEdges() {

}

now you can easily define the various conceptual pieces of the program

we’ve made our program modular, there are 3 modular pieces

concept of reusability with functions. we’re going to look at functions with arguments.

function draw() {

background(51);

fill(127);

stroke(255);

strokeWeight(2);

// here we are hardcoding a series of vertices

beginShape();

vertex(100,50);

vertex(114,80);

vertex(147,85);

vertex(123,107);

vertex(129,140);

vertex(100,125);

vertex(71,140);

vertex(77,107);

vertex(53,85);

vertex(86,80);

endShape(CLOSE);

}

convert that to:

function draw() {

background(51);

star()

}

function star() {

fill(127);

stroke(255);

strokeWeight(2);

// here we are hardcoding a series of vertices

beginShape();

vertex(100,50);

vertex(114,80);

vertex(147,85);

vertex(123,107);

vertex(129,140);

vertex(100,125);

vertex(71,140);

vertex(77,107);

vertex(53,85);

vertex(86,80);

endShape(CLOSE);

}

this makes it modular but it still is not reusable.

how do you make something reusable?

when you want to draw a rectangle, you say

rect(100,50,25,100)

you give it arguments

we wanna be able to do the same thing with star.

we want to say star(100,200) and be able to draw a star with these arguments

star function has no returnType

star function’s name is star

what should we put in the arguments of the function’s syntax?

arguments to a function are LOCAL VARIABLES

so we declare a variable with a type and a name

e.g. function star (float x, float y)

so if i write star (100,200), the value of 100 goes into float x and 200 goes into float y.

the star function can now receive values stored in these variables just for use locally throughout the star.

it’s as if i’m saying float x = 100, float y = 200

we’re passing these values, going into these local variables, the function’s arguments, which are gonna be used throughout the function

can now define the vertices according to the arguments that have been received from the calling area

set all vertices set according to the x and y variable

function draw() {

background(51);

star(100,100);

star(200,300);

}

function star(float x, float y) {

fill(127);

stroke(255);

strokeWeight(2);

// here we are hardcoding a series of vertices

beginShape();

vertex(x, y-50);

vertex(x+14, y-20);

vertex(x+47, y-15);

vertex(x+23, y+7);

vertex(x+29, y+40);

vertex(x, y+25);

vertex(x-29, y+40);

vertex(x-23, y+7);

vertex(x-47, y-15);

vertex(x-14, y-20);

endShape(CLOSE);

}

object oriented programming

what are we trying to do with OOP?

we’re trying to understand a computer program in the way that we think somewhat about the world

Ball b;

function setup() {

createCanvas(320,240);

b = new Ball();

}

function draw() {

background(255);

b.update();

b.checkEdges();

b.display();

}

this is the manifestation of a Ball object moving around on the screen

what is the innovation of OOP?

our programs so far look like this:

variables

function setup() {

}

function draw() {

}

variables are the data of the program: x, y, xspeed, speed, colour, fill, blabla

we have functionality under function setup/draw, under other functions we create

what OOP does for us is it says ok we have data, we have functionality. we wanna put those things together, we want to have an object that wraps the data and functionality of an entity all together.

what is that entity?

it’s up to you, how would you conceptualise the program?

taking data and functionality and putting it together.

think about you yourself as an object living in the world

object: human

data: height, eye colour, personality, weight, etc

functionality: eat(), sleep(), run()

what would it mean to package all that up into one object so we can have humans in our program?

the above is a concept of what it is to be a human being. and then there is the human being him/herself.

the class is the template for what it is to make a human/ball/whatever

the object is the thing itself

syntax for writing an object in our main program

syntax for defining a class, the template that will allow us to make objects

how to turn non-object oriented program into an object oriented program

Bubble b;

function setup() {

b = new Bubble();

}

function draw() {

b.display();

b.ascend();

}

Bubble b; -> we need to declare a variable: this is something like int x; where int is the type and x is the name. lowercase data types (e.g. float, int) are primitive data types, uppercase data types (e.g. PImage, String) are objects. object data types are a collection of data and functions.

b.display -> the dot is known as dot syntax. we’re calling a function but specifically we’re calling the function display on the object b. we’re accessing the object through the dot. the dot means “go inside b and display”, display that bubble b.

step 1 is to declare the variable

step 2 is to initialise. with an integer we might say x = 10, but for an object, the syntax is b = new Bubble();

b is a new instance of a bubble object.

new means make me a new object.

Bubble is actually executing something called the “constructor”. the constructor is the moment where the object is born. the birth of the bubble.

in a class, you need to define a type.

do you want to figure out what the object needs to do first, then write the class to inform that or vice versa?

first we wrote a program that didn’t have any functions, then we changed it to a program with functions, then now we’re changing it to forget how the function works, the small things that are going on, we just want to control the function.

how to define a class:

class Bubble {

float x;

float y;

function display() {

stroke(0);

fill(127);

ellipse(x,y,64,64)

}

this is a new big block of code. everything about how a bubble works is going to go in here. this is what it means to be a bubble, but it is not the bubble object itself. the bubble object is in the main code

inside of the bubble class, we need some function definitions. all bubble objects will have the ability to execute these functions, when we say b.display for example.

in the display function, we have variables x, y. every single bubble will have its own x, y. how do we define that? by defining x and y in the same class, not as a global variable.

-> what is an object? something with both data and functionality. this is the whole innovation and excitement of OOP.

objects have things that happen to them at the beginning. what are its initial conditions? we need to write that constructor. here’s the syntax for the constructor:

Bubble() {

}

it has no returnType. the returnType is Bubble, which means it’s returning an object. b = new Bubble is saying make a new object and store it at variable b. the name of the constructor must match the class name. so this is where you can initialise things e.g.:

x = width/2;

y = height;

in total it would look like this:

class Bubble {

float x;

float y;

Bubble() {

x = width/2;

y = height;

}

function ascend() {

y- -;

}

function display() {

stroke(0);

fill(127);

ellipse(x,y,64,64)

}

you have the data, the constructor, and the functions.

//test code

var b1;

var b2;

function setup() {

createCanvas(400,400)

b1 = new Bubble(10,10,50,color(134,123,234,125));

b2 = new Bubble(300,300,100,color(125,125));

}

function draw() {

background(205)

b1.ascend();

b1.display();

b1.top();

b2.ascend();

b2.display();

b2.top();

}

function Bubble(tempX, tempY, tempD, tempColor) {

this.x = tempX

this.y = tempY

this.diameter = tempD

this.color = tempColor

this.ascend = function() {

this.y--;

this.x += random(-2,2);

}

this.display = function() {

stroke(0);

fill(this.color);

ellipse(this.x,

this.y,

this.diameter,

this.diameter)

}

this.top = function() {

if (this.y<this.diameter/2) {

this.y = this.diameter/2

}

//test code b

Bubble b1;

Bubble b2;

function setup() {

b1 = new Bubble(64);

b2 = new Bubble(16)

}

function draw() {

b.ascend();

b.display();

b.top();

}

class Bubble {

float x;

float y;

diameter = tempD

Bubble(tempD) {

x = width/2;

y = height;

diameter = tempD;

}

function ascend() {

y- -;

x += random(-2,2);

}

function display() {

stroke(0);

fill(127);

ellipse(x,y,diameter,diameter)

}

function top() {

if (y<diameter/2) {

y = 32

}

converting that into code for p5:

var b1;

var b2;

function setup() {

createCanvas(400,400)

b1 = new Bubble(64);

b2 = new Bubble(16)

}

function draw() {

background(205)

b1.ascend();

b1.display();

b1.top();

b2.ascend();

b2.display();

b2.top();

}

function Bubble(tempD) {

this.x = width/2

this.y = height

this.diameter = tempD

this.ascend = function() {

this.y--;

this.x += random(-2,2);

}

this.display = function() {

stroke(0);

fill(127);

ellipse(this.x,

this.y,

this.diameter,

this.diameter)

}

this.top = function() {

if (this.y<this.diameter/2) {

this.y = this.diameter/2

}

the arguments in a constructor become the handoff layer.

tempD is to take the value assigned to it and hand it off to this.diameter, which is the one that really matters. it is applied to the rest of the code.

you can’t say function Bubble(this.diameter) because this.diameter is a global variable that you want to apply to the rest of the class. that’s not how arguments work. because you want to use this.diameter down in this.display, you can’t make it an argument to the Bubble constructor. instead, you have to make up some temporary thing that’s only local to the constructor so it can receive and pass it off. it cannot be used anywhere else in the class anymore. this is just the way it works.

in this case, you could add more parameters to the Bubble and pass it through the constructor to the rest of the class

things to note about objects!!!

for any object, the data doesn’t just have to be float or int or numbers, it could be other objects

you can also write more than 1 constructor for any object. you can make different versions of constructors. this is called overloading the constructor. we can have one constructor that requires 2 arguments, another that requires 3 arguments, one that requires no arguments. we see this in:

fill(255)

fill(123,123,45)

fill(124,23)

fill(124,124,35,125)

how do we get objects to communicate with each other? key concept that involves techniques that are beyond the basics of OOP. how do we know if 2 circles are overlapping? if the distance between the 2 circles < the sum of their radii, they are overlapping and you can assign something to happen when they overlap e.g.: float d = dist(p1.x,p1.y,p2.x,p2.y); if (d < p1.r + p2.r) { background(0,255,0); } but to write that in an OOP way, you say if(p1.overlaps(p2)) { } why is this useful? this is unlocking the key to what code you need to write. you need to write a function as part of the particle class called overlaps. but because you’re passing through another object “p2” as the argument, you need to pass in another object in the overlaps function too. let’s call it “Particle other”. function overlaps(Particle other) we’re in the particle class, but we have a function which receives another particle. but remember the idea that you can call the overlaps function on this particle in reference to another particle. you can even check if a particle overlaps itself but that’s conceptually flawed notice p1.overlaps(p2) is inside an if statement, so it has to evaluate to true or false. it does or doesn’t. this means that the returnType has to be boolean, to return a boolean variable. boolean overlaps(Particle other) { float d = dist(x,y,other.x,other.y) if (d < r + other.r) { return true; } else { return false; } }

function inside of an object that receives another object as its argument so that the 2 objects can talk to each other

the reason why this is useful is because we can have 5 particles and we can check if p5 overlaps p3, p2 overlaps p1, p4 overlaps p2 and so on and so forth

so i have a generic function which checks if one object overlaps another object

way of thinking that you want to get used to even though having a single object checking another object of the same type might be a bit tricky. would be simpler if we checked if a particle object was overlapping a bubble object for example.

there’s a key principle in how variables are passed in as arguments to other functions.

int x = 50

change(x);

println(x);

function change(int val) {

val = val * 2

}

the above is known as pass by copy. when you pass in a primitive value - a number, integer, float, into a function, you pass a copy of that value. in the computer’s memory, x is referencing a place in the computer’s memory as 50. then, val is referencing another place in the computer’s memory with the value 50 getting copied there. val gets multiplied by 2, so val becomes 100, but x is still 50, it is unaffected.

if you pass an object into a function, it does not work this way. it works by something called pass by reference.

Particle p = new Particle(50,100);

change(p);

function change(Particle aP) {

aP.x = 00

}

Particle p, points to somewhere in the computer’s memory where both 50,100 are stored. i make a new particle aP, i’m not making a new object. when you pass an object into a function, you’re passing the reference. the location of the data in memory, not a copy of that data. so aP is actually pointing to 50,100 as well. i’m changing the original value as well

in java, when you pass a primitive value into a function as an argument, you make a copy of it and the original value is unaffected. when you pass an object into a function, you’re passing a reference, and if you change that object in the function, the original value is changed as well

what is an array?

why do we need an array?

Bubble b1;

Bubble b2;

Bubble b3;

Bubble b4;

we want to have a list of 100, 1000, 1,000,000 bubbles.

an array is a list of data. an array is a data structure that allows us to say i want to have a list of n/x number of bubbles.

int val = 5;

RAM - opening up a spot in the RAM in the computer’s memory and storing the number 5

what if we have the computer’s memory and we want to open up spots for 7 numbers? and we want to name them values.

e.g. 2, -5, 107, 4, 91, 3, 33: values is a list of these numbers.

how do we write that?

previously we declared int val = 5, which means val points to a single integer val. we need to declare:

int[] values = {2, -5, 107, 4, 91, 3, 33}

in order for values to point to a list of integers

few steps when you want to have a variable in your system:

declare the variable - giving it a name

initialise the variable - giving it its initial value

use the variable

it’s the same thing for an array.

what if we want 10,000 bubbles? are we going to hardcode all of them like so? -> int[] values = {2, -5, 107, 4, 91, 3, 33}

for an array, there’s an additional step we need to do.

declare the variable - giving it a name 1a. CREATE

initialise the variable - giving it its initial value

use the variable

CREATE: how long is it? how many spots do we need?

this is how you create an array:

DECLARE - int[] nums;

1a. CREATE - nums = new int[7];

how to simplify the above into one line? array syntax:

int [] nums = new int[10];

type of array, indicating that it is an array, array name = new int how long is the array, how many integers am i creating?

this would produce ten zeros because we have not yet initialised the array, and the default value for an integer is 0.

usually how we initialise and use a variable:

x = 0;

line (x,y,10,10)

how do we use the array?

here’s the moment we stop talking about the whole array. we only really talk about the array at the moment of its birth.

now we want to talk about individual elements of the array. the individual elements are referred to with an index number

there are 10 things here, and the indices of an array start at 0.

so there are 10 spots and the index values range from 0->9. you’re always counting from 0.

if i want to initialise one of them, i would say

nums[4] = 132

nums[0] = -3

point(nums[1],nums[2])

this would allow this to happen:

-3,0,0,0,132,0,0,0,0,0

and a point to be drawn at coordinates 0,0

using an array is identical to using a single variable x

the only thing is now we need to refer to which elements of that array.

declare the array

give it a type, give it a name

specify how long that array is going to be

assign values to individual elements according to their indices which start from 0.

let’s apply this thinking to our bubble sketch. so instead of having separate bubble object variables, we want a single list of bubble objects.

Bubble[] bubbles = new Bubble[2];

function setup() {

createCanvas(600,400);

bubbles[0] = new Bubble(64);

bubbles[1] = new Bubble(64);

}

function draw() {

background(255);

bubbles[0].ascend();

bubbles[0].display();

bubbles[0].top();

bubbles[1].ascend();

bubbles[1].display();

bubbles[1].top();

}

we’ve created the identical code for our bubble using an array but it’s still pretty inefficient. we want to learn how to create bubbles using an array and loops.

Bubble[] bubbles = new Bubble[3];

function setup() {

createCanvas(600,400);

bubbles[0] = new Bubble(64);

bubbles[1] = new Bubble(64);

bubbles[2] = new Bubble(64);

}

function draw() {

background(255);

bubbles[0].display();

bubbles[1].display();

bubbles[2].display();

}

if we want to have 1000 bubbles -> need 1000 lines of code??

for (let i=0;i<3;i++) {

println(i);

}

output we get from that loop: 0,1,2. notice how these are the numbers we need for our bubble array above?

this what we can do:

for (let i=0;i<3;i++) {

println(i);

bubbles[i].display();

}

the code can change to this:

Bubble[] bubbles = new Bubble[1000];

function setup() {

createCanvas(600,400);

for (let i=0;i<1000;i++) {

bubbles[i] = new Bubble(64);

}

function draw() {

background(255);

for (let i=0;i<1000;i++)

bubbles[i].ascend();

bubbles[i].display();

bubbles[i].top();

}

an array has a length property that can be accessed directly. instead of typing 1000 over and over again throughout the program, we can just say bubbles.length like so:

Bubble[] bubbles = new Bubble[1000];

function setup() {

createCanvas(600,400);

for (let i=0;i<bubbles.length;i++) {

bubbles[i] = new Bubble(64);

}

function draw() {

background(255);

for (let i=0;i<bubbles.length;i++)

bubbles[i].ascend();

bubbles[i].display();

bubbles[i].top();

}

which is essentially the same as the code above

couple of nuances:

when you’re initialising a bunch of objects this way, you only have one line of code initialising the objects. we’re initialising every object identically. so why is there variation? because in the constructor, a lot of the parameters are set randomly what you can do is:

Bubble[] bubbles = new Bubble[25];

function setup() {

createCanvas(600,400);

for (let i=0;i<bubbles.length;i++) {

bubbles[i] = new Bubble(i*4);

OR bubbles[i] = new Bubble(random(60));

}

function draw() {

background(255);

for (let i=0;i<bubbles.length;i++)

bubbles[i].ascend();

bubbles[i].display();

bubbles[i].top();

}

an array is a fixed size. when we declare an array of bubbles, we have to say it’s a new array and we have to specify the number of bubbles we want to have. that’s the size of the array. the size of the array doesn’t change.

what if you want a flexible number of elements on the screen? we need to develop strategies for this, and there are a few

you want to use the function append() and there are three elements, the append function creates a new array of maybe 4 spots and brings over the 3 elements there and there is one extra spot. but append is slightly weird in terms of syntax so not preferred

shiffman prefers to use ArrayList. gives you more flexibility, more power, more ease. research more if you’d like to

what we could do is:

Bubble[] bubbles = new Bubble[100];

int total = 0;

function setup() {

createCanvas(600,400);

for (let i=0;i<bubbles.length;i++) {

bubbles[i] = new Bubble(random(20,40));

}

function mousePressed() {

total = total + 1;

}

function keyPressed() {

total = total - 1;

}

function draw() {

background(255);

for (let i=0;i<bubbles.length;i++)

bubbles[i].ascend();

bubbles[i].display();

bubbles[i].top();

}

in this case, we have an array of 100 bubbles, but we’re only using a part of the array.

what is an array?

why do you want to use one?

var num = 5;

var nums = [5,3,];

an array is a list of values, separated by commas, embedded inside open square brackets.

this is not that far off from an object which is a collection of name value pairs.

both of these are collections, one of values, one of name value pairs.

the key distinction is the order of arrays matter. the ability of having order matters.

objects don’t have to be just name value pairs, they can be name function pairs

var bubble = {

x : 100;

y : 50;

display : function() {

ellipse(this.x,this.y,24,24);

}

function draw() {

bubble.display();

}

——————————————————————————

var bubbles = [];

function setup() {

createCanvas(400,400);

bubbles[0] = {

x:300,

y:200,

display: function() {

stroke(255);

noFill();

ellipse(this.x,this.y,24,24);

move: function() {

this.x = this.x * random(-1,1);

this.y = this.y * random(-1,1);

}

function draw() {

background(0);

bubbles[0].move();

bubbles[0].display();

}

———————————————————————————

var bubbles = [];

function setup() {

createCanvas(400,400);

for (let i=0; i<20; i++) {

bubbles[i] = new Bubble();

}

function draw() {

background(0);

for (let i=0; i<bubbles.length; i++) {

bubbles[i].move();

bubbles[i].display();

}

function Bubble() {

this.x = random(width);

this.y = random(height);

this.display = function() {

stroke(255);

noFill();

ellipse(this.x,this.y,24,24);

}

this.move = function() {

this.x = this.x * random(-1,1);

this.y = this.y * random(-1,1);

}

} ;

}

constructor function is just like any other function

to define a function in javascript, simply write function, the name of the function, and include any arguments in the (), and then {}

we wanna execute a new function called bubble, with

2D perlin noise

noise function takes an input xoff, some sort of offset along the x-axis, the function will return a particular value related to the x offset.

noise(xoff,yoff) -> give me a particular noise value at a particular x location and y location. there’s a difference between drawing stuff in 2D and pulling values from 2D.

every 2D noise value is similar to the values around it.

supershapes

instead of the pure spherical coordinates where you have radii, longitude and latitude, we’re changing the formula

function called supershape which returns a radius value. we need constants. the arguments are constants that you can change.

spherical coordinates are also a bit different

there are two values, r1 and r2

why?

it’s like having two 2D supershapes perpendicular to each other

so we need two values.

also have to add in “theta”

r1 = supershape 1

r2 = supershape 2