Vector class

From here I learnt how to import a library called ‘toxiclibs’ which is basically a more advanced complex class code for 3d vectors, however I will just be using it in the 2D sense.

I had to go back to my previous ball bouncing code and change parts so it was working with vectors. It involved changing all my x and y integers to vectors, defining these at the beginning of the code as vec3D so I could then include them in my code, calling them vec3D.loc instead of x and y and vec.3D.speed instead of x.speed and y.speed. I also replaced all the floats with just one vector. It doesn’t make it look much differently at the moment, just changed the way of writing it.

import toxi.geom.*;
//Declares the class then class instance 
ArrayList ballCollection;
void setup() {
 size(600, 600);
 smooth();
//Initializes the class. New is saying create a new instance of the class 'Ball'
 ballCollection = new ArrayList();
for (int i = 0; i<100; i++) {
 Vec3D origin = new Vec3D(random(width), random(200), 0);
 Ball myBall = new Ball(origin);
 ballCollection.add(myBall);
 }
}
void draw() {
background(0);
//Calls the function of the class. The '.' opens up the class.
for (int i = 0; i<ballCollection.size(); i++) {
 Ball mb = (Ball) ballCollection.get(i);
 mb.run();
 }
}
class Ball {
//global variables. location, speed...
Vec3D loc = new Vec3D (0, 0, 0);
 Vec3D speed = new Vec3D(1, 0, 0);
 Vec3D grav = new Vec3D(0,0.2,0);
 //constructor. how to build the class, calling variables, happens just once.
 Ball(Vec3D _loc) {
loc = _loc;
 }
 //functions.
 void run() {
 display();
 move();
 bounce();
 gravity();
 }
 
 void gravity() {
 speed.addSelf(grav);
 }
 
 
 void bounce() {
 
 if (loc.x > width) {
 speed.x = speed.x * -1;
 }
 if (loc.x < 0) {
 speed.x = speed.x * -1;
 }
 if (loc.y > height) {
 speed.y = speed.y * -1;
 }
 if (loc.y < 0) {
 speed.y = speed.y * -1;
 }
 }
 
 
 void move() {
loc.addSelf(speed);
 }
void display() {
 noStroke();
 fill(255);
 ellipse(loc.x, loc.y, 30, 30);
 }
}

Arraylist experiments

Replacing the 100 in the previous line of code

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

with

for(int i = 0; i<ballCollection.size(); i++)

means it will keep adding another class instance every frame indefinitely. It ends in a very trippy visual.

I continued to play around with arraylists changing the location of the starting points, the speed, shapes, colour and even reversing the gravity.

Array Lists

Arraylists are a technique for building collections, like in the last tutorial I learnt how to build a class and duplicate the class instances so there were three balls, arraylists enable me to do this without having to write out the class instances loads of times.

You start by defining an arraylist at the beginning of the code, here I’ve named it ‘ballCollection.’ Then you build a new class instance in the initialize section of code and then add that instance to the arraylist.

And then you have to run the first element of the array list in the call function section. In this part you can set the x and y coordinates of where the collection will start to appear on the canvas.

Then using a for loop you can say how many instances are in the collection. This is done in the void setup section then repeated in the void draw part where it calls the class instance to the element i which is defined within the for loop.

I played around with adding random colours as well to make it look a bit cooler.

//Declares the class then class instance 
ArrayList ballCollection;
void setup(){
 size(600,600);
 smooth();
 
//Initializes the class. New is saying create a new instance of the class 'Ball'
ballCollection = new ArrayList();
for(int i = 0; i<100; i++){
Ball myBall = new Ball(random(0, width),random(0,400));
ballCollection.add(myBall);
}
}
void draw(){
 
 background(0);
 
 //Calls the function of the class. The '.' opens up the class. 
 for(int i = 0; i<100; i++){
 Ball myBall = (Ball) ballCollection.get(i);
 myBall.run();
 }
 
 
 
}
class Ball {
//global variables. location, speed...
 float x=0;
 float y=0;
 float speedX = 4;
 float speedY = 0.5;
//constructor. how to build the class, calling variables, happens just once.
 Ball(float _x, float _y) {
x = _x;
 y = _y;
 }
 //functions.
 void run() {
 display();
 move();
 bounce();
 gravity();
 }
void gravity() {
 speedY += 0.2;
 }
 
 void bounce() {
if (x > width) {
 speedX = speedX * -1;
 }
 if (x < 0) {
 speedX = speedX * -1;
 }
 if (y > height) {
 speedY = speedY * -1;
 }
 if (y < 0) {
 speedY = speedY * -1;
 }
 }
 void move() {

x += speedX;
y += speedY;
}
void display() {
noStroke();
fill(random(200),0,random(200));
ellipse(x, y, 30, 30);

}
}

NOTA BENE

“NOTA BENE Visual is a multi-disciplinary studio based in Istanbul, specialized in digital experiences with the newest technology for global brands & artistic platforms by focussing on video projection mapping, interactive experiences and installations.”

http://www.notabenevisual.com/about/

They work on lots of projection mapping installations, this one above named ‘in order to control’ being one of my favourites.

“A text discussing about the threshold on ethics and morality was looping on the floor, people who step on the typographic area to read it, realize them selves on the wall and the interaction process starts.

Everything that’s legal is not always fair. Everything that’s fair is not always legal.”

inordertocontrol_001.jpg

 

Wenting Guo,projection mapped installation

Guo’s installation called ‘fabric play’ is an interactive projection-mapped surface.

“The audio-visual installation ripples like a piece of fabric, while its sound is designed to be responsive to users’ movements.”

“Developed with Javascript and html5, the installation’s web interface is projected onto the ground as an “ambient environment that is [responsive] to the positions of physical participants with various light and sound effects.”

– http://thecreatorsproject.vice.com/en_uk/blog/projection-mapped-installation-ripples-like-fabric

Classes

I followed this tutorial to learn about classes

A class is a way of constructing something, it doesn’t specify one specific thing just how you go about building it. You have to construct a class and then create a class instance which is the specifics within the class which call the object in and tell it how to behave.

In this tutorial I learnt how to build a class where the class instance was a ball that bounces in the window.

Ball myBall; //Declares the class then class instance 
Ball myBall2;
Ball myBall3;
void setup(){
 size(600,600);
 smooth();
 
 myBall = new Ball(200,200); //Initializes the class. New is saying create a new instance of the class 'Ball'
myBall2 = new Ball(100,400);
myBall3 = new Ball(400,200);
}
void draw(){
 
 background(0,50,50);
 
 myBall.run(); //Calls the function of the class. The '.' opens up the class. 
 myBall2.run();
 myBall3.run();
 
 
}
class Ball {
//global variables. location, speed...
 float x=0;
 float y=0;
 float speedX = 4;
 float speedY = 0.5;
//constructor. how to build the class, calling variables, happens just once.
 Ball(float _x, float _y) {
x = _x;
 y = _y;
 }
 //functions.
 void run() {
 display();
 move();
 bounce();
 gravity();
 }
void gravity() {
 speedY += 0.2;
 }
 
 void bounce() {
if (x > width) {
 speedX = speedX * -1;
 }
 if (x < 0) {
 speedX = speedX * -1;
 }
 if (y > height) {
 speedY = speedY * -1;
 }
 if (y < 0) {
 speedY = speedY * -1;
 }
 }
 void move() {
 x += speedX;
 y += speedY;
 }
 void display() {
 strokeWeight(4);
 stroke(255);
 fill(154,54,154);
 ellipse(x, y, 30, 30);
 
 }
}

 

Square experiment

I played around with the previous code a bit more to create this square pattern.

int x = 10;
int y = 10;
void setup() {
size(800, 800);
 smooth();
}
void draw() {
background(255, 204, 204);
 x++;
 y++;
if (x>60) {
 x= x * -1;
 }
if (y>60) {
 y= y * -1;
 }
 for (int i = 0; i <50; i++) {
 for (int j = 0; j <100; j++) {
 fill(100, 204, 255);
 stroke(204, 50, 255);
 rect(i * 50, j * 50, x, y); //changing the shape and how many times the x                                and y coordinates are multiplied by to 
                               increase the size of the squares 
 }
 }
}

For loops, integers & condition experiments

For loops are a repetition function I leant from the plethora tutorials found at http://www.plethora-project.com/education/2011/09/12/processing-tutorials/

A for loop is a structure that allows you to repeat a command any number of times.

Screen Shot 2016-02-01 at 19.11.11

You can ‘nest’ a for loop in another one to create a grid like repeat pattern.

Screen Shot 2016-02-01 at 19.09.26.png

I experimented with this new technique along with my previously learnt knowledge of integers and colours.

 

int x = 0;
int y = 0;
void setup() {
size(600, 600);
 smooth();
}
void draw() {
background(255,204,204);
x++; //this part is shorthand for writing x = x + 1;
y++;
 for (int i = 0; i <50; i++) {
 for (int j = 0; j <100; j++) { //these are the for loop parts which 
                                  create the repeat pattern by adding
                                  on 1 to the integers i & j  
fill(255,204,255);
 stroke(204,153,255);
 ellipse(i * 20, j * 20, x, y);
 }
 }
}

In this experiment it adds a value of 1 each frame which creates some cool patterns however it will keep adding it on forever so I wanted to see if I could make it stop and start minusing 1. For this I looked into condition ‘if’ statements.

int x = 0;
int y = 0;
void setup() {
size(600, 600);
 smooth();
}
void draw() {
background(255, 204, 204);
 x++;
 y++;
if (x>40) {
 x= x * -1;
 }
if (y>40) {
 y= y * -1;        //this if statement means that once x and y have
 }                   reached 40 it will start multiplying them by -1
                     which means it will get smaller.
                     
 for (int i = 0; i <50; i++) {
 for (int j = 0; j <100; j++) {
 fill(100, 204, 255);
 stroke(204, 50, 255);
 ellipse(i * 20, j * 20, x, y);
 }
 }
}

Continue reading “For loops, integers & condition experiments”

Getting my head around variables.

I found variables hard to grasp at first but really it’s just something which stands for something that we can change. In processing you have to define your variable at the top of the script and then you can use it throughout. There are two types I’ve learnt so far, integers and floats. Integers being whole numbers and floats being decimals.

I found this tutorial series really helpful during this project as it clears up and adds to the things I’ve learnt in the workshops.

For instance it made me understand that by moving the background function from void setup, where it is just drawn once at the beginning, to void draw where it is drawn once every frame it changes the appearance when run as it doesn’t leave a trail when the background is in void draw because a new background is drawn every frame over the old one.

Test 1

 

Test 2