Connect

GenerativeSpatial Art

Connect

(study of space between two art forms)

Chris Wilson

Contents Introduction to site

page 3

Initial Research

page 5

Final Concept

page 7

Using Processing

page 11

Concept in Practice

page 15

Bibliography

page 19

prototyping interactive experiences edinburgh napier university interior and spatial design chris wilson 40054182

3

This coridoor is small and narrow and is not a straight coridoor It contains doors, alcoves and has lighting that is sensored so is always on due to the traffic of this particular walkway.

This site is narrow and will need to be careful on the way I create the experience and how I will go about conducting this.

My site is located between two departments.

Music, and the Creative insustries. The idea is to show this connection through the power of generative art.

Site Introduction

4

Site Introduction

5

This is a detail of the space around the site. It is a network of coridoors leading to different areas of the building.

Considering my space, it is not the busiest area.

A quick sketch of the view of the corridoor from the creative industry side.

The space is tight and is a relitivly busy corridoor with constant lighting which may effect my final output.

Initial Research

6

From my site, I am wanting to project onto the left wall as you walk from the Creative industries to the Music side.

I want to use this connection and use processing to potray this though the use of visual generative art.

The effect i want to creat will be very conceptual and rely on shapes froming over a period of time to create a fantastic piece of art that will follow the idea of connection between the two departments through this coridoor.

Initial Research

7

swirling discs -5th october 2013

line spindles - 7th october 2013

connecting two arts - 16th october 2013

Final Concept

8

After some altering code changes, the light comes from the sides and flares itself equally across the space. I have also added in small bubbles where the two points meet to create this idea of connection and bursting of ideas and possibilites between the two practices.

Below is the sequence of lighting change over the course of five minutes. It is a gradual build up of lines to show how many paths both music and design can create and make possible. stages of light change

Final Concept

9

Final Concept

10

Final Concept

Connect working in a space that enables people to connect from one side of the university to another.

We should use these connections in the work we do to stregnthen ourselves and also connect with each other.

11 void setup() { float boxSize = 2; size(700, 700); float margin = 100; colorMode(RGB,3000,100,400); void setup() { smooth(); size(500, 500, P3D); } frameRate(12); void draw() { noStroke(); background(200, 0, 100); } float angle = map(dist(mouseX, mouseY, width / 2, height / 2), 0, width / 3, 0, PI); void clearBackground() { noStroke(); background(0); for(int i = 12; i > 0; i--) { } fill(i * 300, 500, 100); void draw() { pushMatrix(); clearBackground(); translate(width / 2, height / 2); lights(); rotate(radians(i * frameCount * 0.2)); translate(width/2, height/2, 0); arc(50, 20, i * 50, i * 50, 0, angle); rotateY(frameCount * 0.01); popMatrix(); rotateX(frameCount * 0.01); } for (float i =- height+margin; i <= height-margin; i += margin){ pushMatrix(); pushMatrix(); translate(width / 2, height / 2); for (float j =- height+margin; j <= height-margin; j += margin){ popMatrix(); pushMatrix(); } for (float k =- width+margin; k <= width-margin; k += margin){ pushMatrix(); translate(k, j, i); fill(random(255),random(255),random(255)); box(boxSize, boxSize, boxSize); popMatrix(); } popMatrix(); } popMatrix(); } } void setup() { size(500, 500) smooth(); } void draw() { stroke(random(255),random(255),random(255)); line(mouseX,mouseY,450,450); line(mouseX,mouseY,50,50); }

Using Processing

12 float _a, _b, _centx, _centy, _x, _y; int _num = 12; color _col; float _noiseoff; int _angle; void setup() { size(800, 800); smooth(); frameRate(9); background(0); _centx = (height/2); _centy = (width/2); _noiseoff = random(1); _col = color(random(255), random(255), random(255)); _angle = 1; restart(); } void restart() { _noiseoff = _noiseoff + .001; _a = 3.5; _b = _a + (noise(_noiseoff) * 1) - 0.5; _angle++; if (_angle == 360) { _angle = 0; } } void clearBackground() { noStroke(); fill(0, 5); } void draw() { clearBackground(); translate(_centx, _centy); noFill(); stroke(_col, 50); strokeWeight(0.05); beginShape(); for (int i=0;i < 30; i++) { _x = sin(_a * i + radians(_angle) + PI / 2) * _centx; _y = sin(_b * i + radians(_angle)) * _centy; curveVertex(_x, _y); } endShape(); restart();

Using Processing

13

My origional code

My updated code

float x, y, diam; float r, g, b, a; float xAdd, yAdd, reachX, reachY;

float x, y,z, diam; float r, g, b, a; float xAdd, yAdd, zAdd, reachX, reachY, reachZ; void setup(){ size(1200,700,P3D); background(20); smooth(4); x = random(height); y = random(width); r = random(255); g = random(255); b = random(255); a = random( 1,30); frameRate(5);

void setup(){ size(1000,500); background(0); smooth(); x = random(height); y = random(width); r = random(255) g = random(255); b = random(255); a = random(1,30); frameRate(20); } void draw(){ diam = random(50); xAdd = random(-40,30); yAdd = random(-30,30); reachX = random(1); reachX = round(reachX); reachX = width * reachX; reachY = height/2; fill(r,g,b,a); stroke(r,g,b,a); strokeWeight(9); ellipseMode(CENTER); ellipse(x%width, y%height, diam, diam); stroke(r,g,b,21); line(x%width, y%height, reachX, reachY); strokeWeight(5); point(x,y); y = y + yAdd; x = x + xAdd; }

} void draw(){ diam =random(5); xAdd = random(10,40); yAdd = random(10,20); reachX = random(2); reachX = round(reachX); reachX = width *reachX; reachY = height/2; stroke(r,g,b,a); fill(r,g,b,a); stroke(r,g,b,a); strokeWeight(5); ellipseMode(CENTER); ellipse(x%width, y%height, diam, diam); ellipse(y%height, x%height, diam, diam); line(x%width, y%height, reachX, reachY); line(y%width, x%height, reachY, reachX); strokeWeight(2); stroke(r,g,b,a); point(x,y,z); y=y + yAdd; x=x + xAdd; }

Using Processing

14

Using Processing