Final outcome

After playing around with the code for a while, adjusting colours and speeds and the line between functions I settled on this as my final wall paper –

I went for a strong black and white contrast with the background and the inbetween lines as they make such beautiful geometric shapes when the interact with each other that I wanted this to be them main focus then with a nice bold hint of colour on the circles to brighten it up a bit.

It works great as a desktop background but also, in a futuristic sense, if projected on a wall I think it’d be well suited as a feature wall for a bar or restaurant as it’s really quite transfixing soothing.

Final code –

ballCollection = new ArrayList();
for (int i = 0; i<200; 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(random(-4, 4), random(-4, 4), 0);
Vec3D grav = new Vec3D(0, 0.01, 0);
 //constructor. how to build the class, calling variables, happens just once.
 Ball(Vec3D _loc) {
loc = _loc;
 }
 //functions.
 void run() {
 display();
 move();
 bounce();
 //gravity();
 lineBetween();
 }
 void lineBetween() {
for (int i = 0; i <ballCollection.size(); i++) {
Ball other = (Ball) ballCollection.get(i);
float distance = loc.distanceTo(other.loc);
if (distance > 0 && distance < 100) {
 stroke(244,221,173);
 strokeWeight(0.4);
 line(loc.x, loc.y, other.loc.x, other.loc.y);
 }
 }
 }
 
 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(243,5,114);
ellipse(loc.x, loc.y, 20, 20);
}
}

In this project I put a lot of my focus into full understanding the code I was writing, a lot of the time I found myself re writing the code over and over again so I could know how and why it was written. I think this has resulted in my final wallpaper not being that ambitious in design but the coding elements behind it being very complex under the surface. Its has allowed me to learn and understand how build basic shapes, how to use
variable to animate these shapes and get my head around the
types of variables like integers and floats then apply things like ‘if’
conditional statement and for loops to these variables. I then delved a little deeper watching hours of tutorials online to look at building classes and class instances with init and furthermore adding arraylists into this so I could build a collection of my class instances easily. From here I looked into changing my code so it used a vector library called toxiclibs which I had imported, I haven’t fully got my head around this part just yet but I plan on continuing to try and learn it. Finally I played around with lots of different functions. I found the structure of these really easy to understand and using the references on the processing website I was able to play around with such things as bounce, gravity and creating a line between my elements.

I’ve actually found myself really interested in this type of coding language and want to continue to build my knowledge of the subject to I can make my results a lot more unique and interesting pieces of interactive design. A lot of my research looked into mapping projections and this is something I would love to look into more in the future.

Steering behaviours and line between function

Finally, I learnt a behavioural function called ‘lineBetween’ which works with if statements and executes a visual behaviour if the class instance does a certain thing.

‘line between’ literally does what it says on the tin. It creates a line between the class instances. It goes with in the ‘void run’ function and then you create its own ‘void lineBetween’ where this section of code goes

for (int i = 0; i <ballCollection.size(); i++) {
Ball other = (Ball) ballCollection.get(i);
float distance = loc.distanceTo(other.loc);
if (distance > 0 && distance < 80) {
 stroke(255);
 strokeWeight(0.4);
 line(loc.x, loc.y, other.loc.x, other.loc.y);

This part of the code states that if the distance between the instances of the class are more than 0 and less than 80 connect them with a white line that has a weight of 0.4.

Which looks like this –

I played around with colours and speeds and changing the distance of when the lines will appear.

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 
 }
 }
}