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 experiencesedinburgh napier universityinterior and spatial designchris wilson40054182

Site Introduction

3

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.

This coridoor is small and narrow and is not a straight coridoorIt contains doors, alcoves and has lighting that is sensored sois always on due to the trafficof this particular walkway.

This site is narrow and will need tobe careful on the way I create theexperience and how I will go about

conducting this.

4

Site Introduction

5

Initial Research

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 youwalk 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.

Final Concept

7

swirling discs -5th october 2013

line spindles - 7th october 2013

connecting two arts - 16th october 2013

Final Concept

8

stages of light change

After some altering code changes, thelight 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 ideaof connection and bursting of ideas and possibilites between the two practices.

Below is the sequence of lighting changeover 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.

9

Final Concept

10

Final Concept

Connect working in a space thatenables people to connect from

one side of the university to another.We should use these connections in

the work we do to stregnthen ourselvesand also connect with each other.

11

Using Processing

void setup() { size(700, 700); colorMode(RGB,3000,100,400); smooth();}void draw() { background(200, 0, 100); float angle = map(dist(mouseX, mouseY, width / 2, height / 2), 0, width / 3, 0, PI); noStroke(); for(int i = 12; i > 0; i--) { fill(i * 300, 500, 100); pushMatrix(); translate(width / 2, height / 2); rotate(radians(i * frameCount * 0.2)); arc(50, 20, i * 50, i * 50, 0, angle); popMatrix(); } pushMatrix(); translate(width / 2, height / 2); 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);}

float boxSize = 2;float margin = 100;void setup() { size(500, 500, P3D); frameRate(12); noStroke();}void clearBackground() { background(0);}void draw() { clearBackground(); lights(); translate(width/2, height/2, 0); rotateY(frameCount * 0.01); rotateX(frameCount * 0.01); for (float i =- height+margin; i <= height-margin; i += margin){ pushMatrix(); for (float j =- height+margin; j <= height-margin; j += margin){ 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(); }}

12

Using Processing

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();

13

Using Processing

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

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

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

My origional code My updated code

14

Using Processing