Computational Design Portfolio (M.Arch.) by Taraneh Joorabchian

Programming and Computational Design PORTFOLIO

7ARCH015W.1 Taraneh Joorabchchian Jan 2017

CONTENTS

PROCESSING -Patterns of computation -Functaion and mouse interactivity -vision in motion -Objects and classes

PHISICAL COMPUTING -Bliking LED -Analog in - values from light sensor -Serial communication between Arduino & Processing -Creating movement

IMAGE PROCESSING AND MOTION TRACKING VISION IN MOTION(Animal movement studies)

//Processing- Rotated Square

FIRST STEP= STAITC MODE //VARIABLES float sqsize=350; float A=2; float B=3; //println(1/B)(1/A)); //println(A/B); float rangle=atan(A/B);

//VARIABLES float sqsize=350; float A=2; float B=3; //println(1/B)(1/A)); //println(A/B); float rangle=atan(A/B);

//SETUP size(550,550); background(255); smooth(); noFill(); //strokeWeight(2);

//DRAW rectMode(CENTER); translate(width/2,height/2);

for(int i=0;i<8;i++); { rect(0,0,sqsize,sqsize); rotate(rangle);

for(int i=0;i<8;i++); { rect(0,0,sqsize,sqsize); rotate(rangle); //sqsize*=A/B; sqsize=sqsize*cos(rangle);}

Using the mouse function to rotate the rectangles by the movemnt of the mouse

SECOND STEP= DYNAMIC MODE //VARIABLES float sqsize=350; float rangle; //SETUP void setup() //making a loop to repeat over and over { size(550,550); smooth(); noFill(); //strokeWeight(2); rectMode(CENTER); } //DRAW void draw() { background(255); translate(width/2,height/2); float cmousex=float(mouseX); rangle=(cmousex/width)*(PI/2); //println(mouseX); //println(rangle); for(int i=0;i<200;i++); { rect(0,0,sqsize,sqsize); rotate(rangle); sqsize=sqsize*cos(rangle); } sqsize=350; }

ADDITIONAL DICOVERY

Processing Syntax:Introducing Functoins and Mouse Interactivity

FIRST STEP= STATIC MODE

This exercise started with drawing a simple circle and choosing the position of it

//VARIABLES float xcoord; float ycoord; //SETUP size(600,600); smooth(); noFill(); strokeWeight(1.5); //DRAWING background (27,27,77); xcoord=200; ycoord=200; stroke(255); ellipse(xcoord,ycoord, 10 ,10);

ADDITIONAL DICOVERY

background (#EDA5DC);

ellipse(xcoord,ycoord, ,60 20);

rect(xcoord,ycoord, ,250 250);

SECOND STEP= TRANSLATION

THIRD STEP= DRAW GRID

//VARIABLES

float float float float float

xcoord; ycoord; npoints; xdivider; ydivider;

//SETUP size(600,600); npoints=6; //println( width/(npoints1+)); //println( height/(npoints1+)); xdivider=width/(npoints1+); ydivider=height/(npoints1+); smooth(); noFill(); strokeWeight(1.5); //DRAWING background (27,27,77); xcoord=xdivider; ycoord=ydivider; pushMatrix(); translate(xcoord, ycoord); stroke(255); ellipse(10 ,10 ,0,0); //ellipse(20 ,20 ,0,0); popMatrix();

xcoord; ycoord; npoints; xdivider; ydivider;

//SETUP size(600,600); npoints=6; //println( width/(npoints1+)); //println( height/(npoints1+)); xdivider=width/(npoints1+); ydivider=height/(npoints1+); smooth(); noFill(); strokeWeight(1.5); //DRAWING background (27,27,77); xcoord=xdivider; ycoord=ydivider; for (int j=0;j<npoints;j++) { for (int i=0;i<npoints;i++) { //DRAWS CIRCLE pushMatrix(); translate(xcoord, ycoord); stroke(255); ellipse(10 ,10 ,0,0); popMatrix(); xcoord=xcoord+xdivider; } xcoord=xdivider; ycoord=ycoord+ydivider; }

)0,0(

X Divider

//Circle Function

FOURTH STEP= FUNCTION & MOUSE INPUT

//VARIABLES float float float float float

xcoord; ycoord; npoints; xdivider; ydivider;

//SETUP void setup() { size(600,600); npoints=12; //println( width/(npoints1+)); //println( height/(npoints1+)); xdivider=width/(npoints1+); ydivider=height/(npoints1+); smooth(); noFill(); strokeWeight(1.5); }

//x-coordinate, y-coordinate void circlefunct(float x, float y) { pushMatrix(); translate(x,y); stroke(255); ellipse(0,0, mouseX/2, mouseX/2); popMatrix();}

FIFTH STEP= MOUSE INPUT DISTANCE FUNCTION

//VARIABLES float float float float float

xcoord; ycoord; npoints; xdivider; ydivider;

//SETUP void setup() { size(600,600); npoints=20; //println( width/(npoints1+)); //println( height/(npoints1+)); xdivider=width/(npoints1+); ydivider=height/(npoints1+); smooth(); //noFill(); strokeWeight(1.5); }

//DRAWING void draw() { background (27,27,77); xcoord=xdivider; ycoord=ydivider;

for (int j=0;j<npoints;j++) { for (int i=0;i<npoints;i++) { circlefunct(xcoord,ycoord); xcoord=xcoord+xdivider; }

xcoord=xdivider; ycoord=ycoord+ydivider; } }

//Circle Function //x-coordinate, y-coordinate void circlefunct(float x, float y) { pushMatrix(); translate(x,y); stroke(255); float mousedist=dist(x,y,mo useX,mouseY); float diameter=mousedist/10; ellipse(0,0, diameter, diameter); popMatrix(); }

[PCD03-:Tech] //Processing-Syntax:Introducing Arrays, Objects and Classes

STEP 02:Introducing

STEP 01:Point Objects //VARIABLES float cdiam=50; color ccolor=color(252,245,15); //SETUP void setup() { size(600,600); } //DRAW void draw() { background(0); circlefunct(width/2, height/2, cdiam, ccolor); }

[PCD03-:Tech] //Processing-Syntax:Introducing Arrays, Objects and Classes

//Circle Function

//VARIABLES

//x-coordinate, y-coordinate

float cdiam=50; color ccolor=color(252,245,15); int npoints=3;

void circlefunct(float x, float y) { pushMatrix(); translate(x,y); noStroke() phill(pcolor); ellipse(0,0, diameter, diameter); popMatrix(); }

Firstly, drawing a circle, considering a new variable ÂŤpcolorÂť and then using the circle function from previouse exercise + adding the color function

//note use of square brackets float[] xcoords=new float[npoints];for defining Array

//SETUP void setup() { size(600,600); xcoords[100=]0; xcoords[250=]1; xcoords[450=]2; } //DRAW void draw() { background(0); for (int i=0; i<npoints;i++){ circlefunct(xcoords[i], height/2, cdiam, ccolor); } }

Placing 3circles in the same row

[i] a which to be added time

new variable is going counted and one more each

STEP 03:Using a loop to assign

//VARIABLES

//VARIABLES float cdiam=50; color ccolor=color(252,245,15); int npoints=3; float xdivider; //note use of square brackets float[] xcoords=new float[npoints]; //SETUP void setup() { size(600,600);

Drawing the first circle and then moving to the next X position-

// // //

Using cdiam to control circle diameters

xcoords[100=]0; xcoords[250=]1; xcoords[450=]2;

STEP 04:Looping the loop

float cdiam=50; color ccolor=color(252,245,15); int npoints=3; float xdivider; float ydivider; //SETUP void setup() { size(600,600); xdivider=width/(npoints1+); float xc=xdivider; for (int i=0; i<npoints; i++) { xcoords[i]=xc; xc=xc+xdivider; }

xdivider=width/(npoints1+); //println(xdivider); float xc=xdivider;

}

for (int i=0; i<npoints; i++) { xcoords[i]=xc; println(xc); xc=xc+xdivider; }

//DRAW void draw() { background(0); for (int i=0; i<npoints;i++) { circlefunct(xcoords[i], height/2, cdiam, ccolor); } }

ydivider=height/(npoints1+); float yc=ydivider; for (int j=0; j<npoints; j++) { ycoords[j]=yc; yc=yc+ydivider; } }

use of square brackets float[] xcoords=new float[npoints]; float[] ycoords=new float[npoints];

//DRAW void draw() { background(0); for (int j=0; j<npoints;j++) { for (int i=0; i<npoints;i++) { circlefunct(xcoords[i], ycoords[j], cdiam, ccolor); } }

}

STEP 05:Introducing the point class //Ciass Cpoint

//Circle Function

//VARIABLES

{ float x,y; float diameter; color pcolor;

//x-coordinate, y-coordinate

float cdiam=50; color ccolor=color(252,245,15); int npoints=3; float xdivider; float ydivider;

//CONSTRUCTOR feeding the variables CPoint(x,y,diameter,color) CPoint(float CPx, float CPy, float CPdiam, color CPcolor) { x=CPx; y=CPy; diameter=CPdiam; pcolor=CPcolor; } //DISPLAYING FUNCTION void display() { pushMatrix(); translate(x,y); noStroke(); fill(pcolor); ellipse(0,0,diameter,diameter); popMatrix();

void circlefunct(float x, float y) { pushMatrix(); translate(x,y); noStroke() phill(pcolor); ellipse(0,0, diameter, diameter); popMatrix(); }

//note use of square brackets //float[] xcoords=new float[npoints]; //float[] ycoords=new float[npoints];

//DRAW void draw() { background(0); {

for (int i=0; i<npoints; i++) cpoints[i].display();

} } If instead of [i], we put [2], the third circle will be only shown

//Object array CPoint[] cpoints=new CPoint[npoints];

cpoints=Name of the array

//SETUP void setup() { size(600,600);

Display function for showing the each circle

[0]

xdivider=width/(npoints1+); float xc=xdivider; for (int i=0; i<npoints; i++) { // xcoords[i]=xc; cpoints[i]=new CPoint(x c,width/2,cdiam,ccolor); xc=xc+xdivider; }

INDEX VALUES

[0]

[1]

[2]

[1]

[2]

STEP 06 :Array of points (2D) // VARIABLES float cdiam=50; color ccolor=color(252,245,15); int npoints=5; float xdivider; float ydivider; //Object array CPoint[][] cpoints=new For adding circles to the other direction CPoint[npoints][npoints]; //SETUP void setup() { size(600,600); xdivider=width/(npoints1+); float xc=xdivider; ydivider=height/ (npoints1+); float yc=ydivider; for (int j=0; j<npoints; j++) { for (int i=0; i<npoints; i++) { cpoints[i][j]=new CPoint(xc,yc,cdiam,ccolor); xc=xc+xdivider; } xc=xdivider; yc=yc+ydivider; }

//DRAW void draw() { background(0); for (int j=0; j<npoints; j++) { for (int i=0; i<npoints; i++) { cpoints[i][j].display(); } }

STEP 07:Accessing individual point attributes // VARIABLES float cdiam=50; color ccolor=color(252,245,15); int npoints=5; float xdivider; float ydivider; //Object array CPoint[][] cpoints=new CPoint[npoints][npoints]; //SETUP void setup() { size(600,600); xdivider=width/(npoints1+); float xc=xdivider; ydivider=height/ (npoints1+); float yc=ydivider; for (int j=0; j<npoints; j++) { for (int i=0; i<npoints; i++) { cpoints[i][j]=new CPoint(xc,yc,cdiam,ccolor); xc=xc+xdivider; } xc=xdivider; yc=yc+ydivider; }

cpoints[3[]2]. pcolor=color(255,255,0) cpoints[1[]1].diameter=20; } changing the color and size of circles,named by their position in index values

//DRAW void draw() { background(0); for (int j=0; j<npoints; j++) { for (int i=0; i<npoints; i++) { cpoints[i][j].display(); } } stroke(255); strokeWeight(3); line(cpoints[1[]2].x,cpoints[0[]2 .y,cpoints[3[]4].x,cpoints[3[]4]. y);}

[PCD03-:Tech] //Processing-Syntax:Object Oriented Programming 3D STEP 01:Introducing First Point //VARIABLES float radius=200; CPoint cpoints; color ccolor=color(255); //SETUP void setup() { size(600,600); smooth(); cpoints=new CPoint(radius,0,40,ccolor); } //DRAW void draw() { background(27,27,77); translate(width/2,height/2); ellipse(0,0,5,5); }

cpoints.display();

//Point Class // VARIABLES float x,y; float diameter; color pcolor; //CONSTRUCTOR CPoint(float CPx, float CPy, float CPdiam, color CPcolor) { x=CPx; y=CPy; diameter=CPdiam; pcolor=CPcolor; } //DISPLAYING FUNCTION void display() { pushMatrix(); translate(x,y); noStroke(); fill(pcolor); ellipse(0,0,diameter,diameter); popMatrix(); } }

STEP 02:Introducing Array //VARIABLES float radius=200; color ccolor=color(255); int npoints=24; float inc_angle=(2*PI)/ float(npoints);

//DRAW void draw() { background(27,27,77); translate(width/2,height/2); ellipse(0,0,5,5);

CPoint[] cpoints=new CPoint[npoints]; //SETUP void setup() { size(600,600); smooth(); float xcoord=0; float ycoord=0; float angle=0; for (int i=0;i<npoints;i++) { xcoord=radius*cos(angle); ycoord=radius*sin(angle); cpoints[i]=new CPoint(xcoor d,ycoord,20,ccolor); angle+=inc_angle; } cpoints[2]. pcolor=color(255,0,0); }

}

for (int i=0;i<npoints;i++) { cpoints[i].display(); }

STEP 04:Introducing 3D

STEP 03:Introducing separate view rotation //VARIABLES float radius=200; color ccolor=color(255); int npoints=24; float inc_angle=(2*PI)/float(npoints); CPoint[] cpoints=new CPoint[npoints];

//SETUP void setup() { size(600,600,P3D); smooth(); sphereDetail(15);

float xcoord=0; float ycoord=0; float angle=0; for (int i=0;i<npoints;i++) { xcoord=radius*cos(angle); ycoord=radius*sin(angle); cpoints[i]=new CPoint(xcoord,ycoord,20,ccolor); angle+=inc_angle; } cpoints[2].pcolor=color(255,0,0);

//DRAW void draw() { background(27,27,77); translate(width/2,height/2); rotate(viewrot); ellipse(0,0,5,5);

}

for (int i=0;i<npoints;i++) { cpoints[i].display(); }

int npoints=24; float inc_angle=(2*PI)/ float(npoints); //CPoint cpoints; CPoint3d[] cpoints=new CPoint3d[npoints];

//SETUP void setup() { size(600,600); smooth();

}

//VARIABLES float radius=200; color ccolor=color(255);

//Mouse Dragged Function

To change rotation angle float viewrot=0; void mouseDragged() { float mouseangle=atan2(mouseXwidth/2,mouseY-height/2); viewrot=(-mouseangle); negative sign for working anticlockwise

//DRAW void draw() { background(27,27,77); translate(width/2,height/2); camera(1-,400,400,400,0,0,150,0,0); rotate(viewrot); lights(); ellipse(0,0,5,5); for (int i=0;i<npoints;i++) { cpoints[i].display(); }

float xcoord=0; float ycoord=0; float zcoord=0;

(0,0,150)Place of object

150; a bit above the center (1-.0,0) The vector

float angle=0; for (int i=0;i<npoints;i++) { xcoord=radius*cos(angle); ycoord=radius*sin(angle); cpoints[i]=new CPoint3d(xcoor d,ycoord,zcoord,20,ccolor); angle+=inc_angle; } cpoints[2].pcolor=color(255,0,0); } }

}

In this step of the exercise 2 more tabs defined; -Mouse dragged function, to change the rotation direction -Introducing 3d mode (P3D)to use 3d graphics Using light function for rendering the sphares

STEP 04:Change display function and add Z coodinate

STEP 05: Spiral 3D //VARIABLES float radius=250; float spheight=400; color ccolor=color(255); int npoints=150; float loops=3; float inc_angle=(2*PI*loops)/ float(npoints); float inc_height=spheight/ float(npoints); float inc_radius=radius/ float(npoints); CPoint3d[] cpoints=new CPoint3d[npoints];

class CPoint { //VARIABLES float x,y; float diameter; color pcolor; //CONSTRUCTOR CPoint(float CPx, float CPy, float CPdiam, color CPcolor) { x=CPx; y=CPy; diameter=CPdiam; pcolor=CPcolor; }

//SETUP void setup() { size(600,600,P3D); smooth(); sphereDetail(15); strokeWeight(1.5);

//DISPLAYING FUNCTION void display() { pushMatrix(); translate(x,y); noStroke(); fill(pcolor); sphare(diameter/2) for translating to radius popMatrix(); } }

//DRAW void draw() { background(27,27,77); translate(width/2,height/2); came ra(1-,400,400,400,0,0,150,0,0); rotate(viewrot); lights(); ellipse(0,0,5,5); for (int i=0;i<npoints;i++) { cpoints[i].display(); stroke(255,0,0); line(0,0,0,cpoints[i].x,cpoints [i].y,cpoints[i].z);

float xcoord=0; float ycoord=0; float zcoord=0; float angle=0; for (int i=0;i<npoints;i++) { xcoord=radius*cos(angle); ycoord=radius*sin(angle); cpoints[i]=new CPoint3d(xcoord,yco ord,zcoord,20,ccolor); angle+=inc_angle; zcoord+=inc_height; radius-=inc_radius; }

}

cpoints[2].pcolor=color(255,0,0);}

STEP 06:Change display function and add Z coodinate //VARIABLES float radius=250; float spheight=400; color ccolor=color(255); int npoints=150; float loops=3; float inc_angle=(2*PI*loops)/ float(npoints); float inc_height=spheight/ float(npoints); float inc_radius=radius/float(npoints);

//DRAW void draw() { background(27,27,77); translate(width/2,height/2); camera(1-,400,400,400,0,0,0,0,0); rotate(viewrot); lights(); ellipse(0,0,5,5); for (int i=0;i<npoints;i++) { cpoints[i].display(); stroke(255,0,0); line(0,0,0,cpoints[i].x,cpoints[i].y,cpoi } viewrot=PI/90

CPoint3d[] cpoints=new CPoint3d[npoints]; //SETUP void setup() { size(600,600,P3D); smooth(); sphereDetail(15); strokeWeight(1.5); float float float float

xcoord=0; ycoord=0; zcoord=0; angle=0;

for (int i=0;i<npoints;i++) { xcoord=radius*cos(angle); ycoord=radius*sin(angle); cpoints[i]=new CPoint3d(xcoord,ycoo rd,zcoord,20,ccolor); angle+=inc_angle; zcoord+=cos(angle)*30; radius-=inc_radius; } cpoints[2].pcolor=color(255,0,0); }

}

nts[i].z);

viewrot=PI/90 Changing the roatation speed, as much as the number increased, the speed decreased Changing Stroke and background

By changing the angle and Npoints ,rootation angle and number the of sphares changed

FURTHER VIDEOS OF THIS EXERCISE HAVE BEEN UPLOADED IN THE FOLDER

University of Westminster Faculty of Architecture and the Built Environment

[PCD- 04:Tech]

[PCD_04:Tech] Programming and Computational Design

ARDUINO

7ARCH015W

Physical Computing One of the key issues addressed by this course is the notion that we can create an architecture that is dynamically responsive, and is in some way shaped by the conditions and events which take place around it. Often this relates directly to the behaviour of a human subject and the psychological engagement we have with our environment– in other words, that it should be interactive. Over the next couple of weeks we will begin to experiment with the tools and software required. As we will discover, the emphasis in this kind of work is on ingenuity and ideas – not necessarily on complex programming or electronics – but some technical skill is required Interactive pieces usually require 3/4 basic elements: 1. A way of getting input, sensing or recording data. Datastreams such as weather data and stock market share values provide examples of data from remote sensors and databases but it could also be something more local and engaged with user input – such as pressure pads, or proximity sensors. 2. Then you need some way of getting that data into the computer. In the case of remote sensor devices, it can be about connecting to data feeds across the internet. But with local sensors, this is more likely a proprietary interface board. We will look primarily at Arduino but there is also the Raspberry Pi, BBC Micro bit and the Intel Galileo (there are others). At a more basic level, one can often adapt existing input devices such as keyboards. 3. Next we need to be able to interpret and process the data received before outputting to control an application, display or external device. Processing will be our primary tool for this– which we will take a look at soon. But you can also, potentially, use a programmable application such as Flash, or the unique environment offered by MAX/MSP/JITTER. Today we will look at programming the Arduino board itself. (4.) Finally, your project may require the control of some external devices such as LEDs, or other electro-mechanical devices. We will also look at some these, and the basic electronics that goes with them. Richard Difford difforr@wmin.ac.uk

PHYSICAL COMPUTING Georgios Dimitrakopoulos, 2011

Next Tasks:

Step 01 - Blinking LED //VARIABLES

To standardise the equipment we have – you should ideally use the Arduino Uno / Genuino Uno

int ledpinA=12;

(See http://arduino.cc/en/Main/Boards) and maybe buy some suitable sensors (see Maplin or equivalent vendors). Alternatively buy the DFRobot Beginners Kit from the Fab Lab.

//SETUP void setup() { pinMode(ledpinA,OUTPUT); } //LOOP

or an Arduino clone such as the DFRobot equivalent.

Start experimenting with the technology. We will be learning some of these techniques over the next few weeks. But you will also need to do some of your own research and there are many resources available on this subject. (see below)

Some References: Lucy Bullivant, Responsive Environments, 2006. Dan O’Sullivan and Tom Igoe, Physical Computing, 2004. Massimo Banzi, Getting Started with Arduino, 2008. Joshua Noble, Programming Interactivity, 2009. Jonathan Oxer / Hugh Blemings, Practical Arduino, Apress, 2009. Michael Margolis, Arduino Cookbook, O’Reilly, 2010. Charles Platt, Make Electronics: Learning Through Discovery, Pragma, 2010. and many more… Links to information and suppliers: http://www.delicious.com/MAADM/

void loop() { digitalWrite(ledpinA, HIGH); // sets the LED on delay(1000); digitalWrite(ledpinA, LOW); // sets the LED off delay(1000); }

PHYSICAL COMPUTING

Step 02 - TWO Blinking LEDs //VARIABLES

Step 03 - Using Boolean //VARIABLES int ledpinA 12; int ledpinB 13; int switchpin 8; boolean switchstate=0;

int ledpinA=12; int ledpinB=13; //SETUP void setup() { pinMode(ledpinA,OUTPUT); pinMode(ledpinB,OUTPUT); } //LOOP void loop() { digitalWrite(ledpinA, delay(1000); digitalWrite(ledpinA, digitalWrite(ledpinB, delay(1000); digitalWrite(ledpinB, }

PHYSICAL COMPUTING

HIGH); LOW); HIGH); LOW);

//SETUP void setup() { pinMode(ledpinA,OUTPUT); pinMode(ledpinB,OUTPUT); pinMode(switchpin,INPUT); } //LOOP void loop() { switchstate=digitalRead(switchpin); if (switchstate==true) { digitalWrite(ledpinA, HIGH); delay(1000); digitalWrite(ledpinA, LOW); delay(1000); } else { digitalWrite(ledpinB, HIGH); delay(1000); digitalWrite(ledpinB, LOW); delay(1000); } }

PHYSICAL COMPUTING

Analog in - values from light sensor

PHYSICAL COMPUTING

Serial communication between Arduino & Processing

//VARIABLES #define ledpinA 10 // PWM pin #define sensor 1 int val=0; int bright=0; //SETUP Analog In void setup() { pinMode(ledpinA,OUTPUT); // Note - Analogue in pins automatically set as input Serial begin(9600); Gnd Serial.begin(9600); } //LOOP void loop() { PWM Pin 0.1 Îźf val=analogRead(sensor); Serial.println(val); //values typically 550-0 val = constrain(val, 550 ,0); Gnd 300 â&#x201E;Ś ( , , ); bright=map(val,0,550,0,255); analogWrite(ledpinA,bright); delay(10); }

ARDUINO

Reads values from light sensor and writes to serial shows max values about 900-200 int rval=0; void setup() { Serial.begin(9600); } void loop() { Serial. write(map(analogRead(,)1 0,1023,0,255)); delay(20); } Two experiments were tested: 1. using the potentialmeter to change the color of screen (0,255)

The video has been placed in the folder

PRCOCESSING

import processing.serial.*: Serial port; int data; void setup() { sixe(500,500); port=newSerial (this, Serial. list()[9600,]0); } void draw() { if(port.available()>0){ data=port.read() } background (100,0,data); }

PHYSICAL COMPUTING

Serial communication between Arduino & Processing (second experiment)

ARDUINO

int rval=0; int rval=0; void setup() { Serial.begin(9600); } void loop() { Serial.write(map( analogRead(0,1023,0,250 ,)1)); delay(20); }

Changing the color of a background and moving a shape with a potentiometer through Serial Communication between Processing and Arduino

PRCOCESSING

import processing.serial.*; Serial port; int data; void setup() { size(250,250); port= new Serial (this,Serial. list()[9600,]0); } void draw() { if (port.available()>0) { data=port.read(); } background(255); stroke(0,0,200); //using RGB colors line(data100-,height/2 ,data,height/2); //details of the start/end points of the line }

PHYSICAL COMPUTING

EXPERIMENT WITH FULL ROTATION SERVO #include <Servo.h> Servo myservo; int pos = 0; //variable to store the servo position void setup() { myservo.attach(9); //attaches the servo on pin 9 to the servo object } void loop() { for(pos = 0; pos <= 360; pos += 1) //goes from 0 degrees to 180 degrees { myservo.write(pos); //tell servo to go to position in variable ‹pos› delay(15); //waits 15ms for the servo to reach the position } for(pos = 180; pos>=0; pos-=1) { myservo.write(pos); //tell servo to go to position in variable ‹pos› delay(15); }

EXPERIMENT WITH SERVO MOTOR (180 DEGREES) CONTROLLED BY POTENTIALMETER #include <Servo.h> int potpin = 0; int val; //variable to read the value from the analog pin void setup() { myservo.attach(9); } void loop() { val = analogRead(potpin); //reads the value of the potentiometer (value between 0 and 1023) val = map(val, 180 ,0 ,1023 ,0); //scale it to use it with the servo (value between 0 and 180) myservo.write(val); delay(15); }

[PCD-05:Tech] //Image Processing and motion tracking

Movement & Interactiont OpenCV Brightest Point

OpenCV Face Detection

import gab.opencv.*; import processing.video.*;

impo import gab.opencv.*; import processing.video.*; import java.awt.*; Capture firstcam; OpenCV opencv;

Capture firstcam; OpenCV opencv; void setup() { size(400,400); firstcam=new Capture(this,320,240); opencv=new OpenCV(this,320,240); firstcam.start(); frameRate(15); fill(0); stroke(0); }

void setup() {size(320,240); firstcam=new Capture(this,320,240); opencv=new OpenCV(this,320,240); opencv.loadCascade(OpenCV.CASCADE_ FRONTALFACE); firstcam.start(); frameRate(15); noFill(); stroke(255,0,0); strokeWeight(2);}

void draw() { opencv.loadImage(firstcam); PVector loc=opencv.max(); pushMatrix(); translate(width,0); scale(1,1-); image(firstcam,0,0,width,height); ellipse(loc.x,loc.y,60,60); popMatrix(); } void captureEvent(Capture c) { c.read(); }

The first step focoused on experimenting on issues of light, size and color of the bright point.

void draw() {opencv.loadImage(firstcam); Rectangle[] faces=opencv.detect(); pushMatrix(); translate(width,0); scale(1,1-); mage(firstcam,0,0,width,height); for (int i=0;i<faces.length;i++) {rect(faces[i].x,faces[i].y,faces[i]. width,faces[i].height);} popMatrix(); } void captureEvent(Capture c) { c.read(); }

University of Westminster Faculty of Architecture and the Built Environment

[PCD_02:Design] Programming and Computational Design: AADM700 Vision in Motion

INTRODUCING ANIMAL BEHAVIOUR

A key feature of any interactive art or architecture is the ability to adapt and change over time. In parallel with learning the technicalities of interactive graphics and physical computing we will therefore consider some particular forms of movement and behaviour inspired by nature and technology. Arguably, our contemporary understanding of motion has been defined by the way that technology has fragmented continuous movement into a series of discreet moments. This is exemplified by the way motion in cinematography is created out of a sequence of still images or frames. But motion can also be explored in a way that considers, not just the instantaneous moment, but the sequence and form of the whole movement. For example, using motion as a way of generating form that can be seen as a dynamic expression. Examples of such images can be found in the work of Etienne-Jules Marey and in the artists, Moholy-Nagy, Gabo and Boccioni. Marey’s work, takes complex organic movement and reduces it to a machine. Like Marey, we will also begin our exploration of movement and interactivity by analysing movement in animals. Richard Difford difforr@wmin.ac.uk

Marcel Duchamp, Figure Descending a Stair, 1912

Your first task in this part of the module, is to choose an animal and begin to study the forms of movement and locomotion that it employs. You should research and collect data including still images and video footage. Begin to analyse the movement through images and drawings. Options include multiple exposures overlaid and motion paths. Use your imagination and artistic expression to obtain an insight into the nature of the movement. Bring your drawings and research material to next week’s class

References: Marta Braun, Picturing Time. Univ. of Chicago Press, 1992. Siegfried Giedion, Mechanization Takes Command, Oxford University Press, 1955. László Moholy-Nagy, Vision in Motion, Academy Editions, 1969. Eadweard Muybridge, Muybridge's complete human and animal locomotion, New York : Dover 1979. Krisztina Passuth, Moholy-Nagy, Thames and Hudson, 1985.

Tomopteris For this part of our modul, we were asked to choose an animal and, throughut the research by analyzing the movement, design a conceptual model in a way that it could captures the movement by further use of scripting and motors. Tomopteris is a genus of rather attractive, pelagic polychaetes. In other words, bristleworms who swim in the ocean. «Tomopteris» means «cut wing», alluding to how their parapods form a kind of fin for swimming. There›s almost no information available about them! A shame, because they look sort of mesmerising; if you›re to be hypnotised. They only reach a few centimeters long, though the remarkably long tail on some of them must surely add to that. And then there›s the pair of long, slim antennae, which I imagine is pretty useful in the dark. At least some of them reside in the deep sea and are remarkably transparent until they glow a beautiful, bioluminescent blue. One of them glows yellow, which is rare for sea creatures, and they can even fire bioluminescent mucus. The stuff shines in the darkness as a distraction for predators while the actual worm makes its getaway.

The Tomopteris spiecies generally employs three types of crawling modes: a forward run, a reversal and a turn. In the absence of sensory cues such as chemical or thermal gradients, frequent reversals and turns are used to induce random orientation. However, in the presence of attractants, worms are able to track gradients using a biased random walk. in the absence of food, they switches from a local search behavior of frequent reversals and turns to a long-range roaming behavior characterized by persistent forward movement in attempts to find a new lawn of food. Tomopteris uses several different strategies of reorientation,These modes include the well-known omega turn, in which the worm makes a sharp angle turn,and the reversal, in which the worm draws itself backwards. In these two modes of reorientation, Tomopteris strongly disrupts its propagating sinusoidal wave, either in form or in direction, leading to abrupt directional change. However, a third mode of reorientation, the shallow turn, involves a gentler disruption of the locomotory gait.

In order to quantify the individual reorientation maneuvers, i first analyzed the amplitude of the turn characterized by the turning angle, where a reversal is assigned a turning angle of zero because it does not involve a real turning motion.

MOVEMENT ANALYSIS

Frequency distributions of shallow turns, reversals and omega turns plotted as a function of time for the 30min of observation binned into 3min intervals. During the entire period, shallow turns had the consistently highest occurrence frequency compared with the other two modes (means ± s.e.m., n 7 worms).

The main movement of this creature can be captured as a Sine wave with several points. For further analysis, one point of the movement was selected in order to be translated and used in Processing language. STATIC MODE void setup (){ ssize(600,600); background(357#BC4); stroke(050102#); line(0,50,width,50); line(0,150,width,150); line(0,250,width,250); stroke(255); float X=0; while(X<width) { point(X,+50random(10 ,10-)); random(10,10-): between 10- and 10 point(X,20+150*noise(X/10)); noise(): between 0 and 1 point(X,30+250*sin(X/20)); sin(): between 1- and 1 X=X1+; } DYNAMIC MODE void setup (){ size(600,600); noStroke(); fill(255,50); } void draw(){ background(0); for (float x = 0; x < 3*TWO_ PI; x+=0.02) { float y = sin(x+frameCount*0.1); by changing 0.1, different angular velocities were tested ellipse(x*21,height/2 +y * 5 0 , 1 6 , 1 6 ) ; The function for illustratin sin wave in continues mode }

MOVEMENT SCRIPT int xspacing = 16; int w; float theta = 0.0; Startibg point float amplitude = 75.0; float period = 500.0; float dx; float[] yvalues; void setup() { size(1000,1000); w = width16+; dx = (TWO_PI / period) * xspacing; one complete periode of the sin wave yvalues = new float[w/xspacing];} void draw() { background(0); calcWave(); renderWave(); } void calcWave() { theta += float x = for (int i yvalues[i] x+=dx;

0.02; theta; = 0; i < yvalues.length; i++) { = sin(x)*amplitude;

} } void renderWave() { noStroke(); fill(255); for (int x = 0; x < yvalues.length; x++) { e l l i p s e ( x * x s p a c i n g , height/+2yvalues[x], 16 ,16); } }

for the next step one ellipse selected for further studie of movement

CONCEPT

EXPERIMENT

The experiment part of this research took its staring point by testing and simulating the movement of Tomopteris in conceptual way. The best solution to illustrate the movement was to demonstrate Sine Wave. Therefore, after testing few models with different materials and scales the final model was made.

The aim of making early models was based on testing. Therefore, sample models were quite simple and small. the material which were used in both of the models are Balsa and MDF. one of the main concern of designing the models was the joints and how to attach the legs to the main part in way which is free of movement and it could be rotated easily.

Fig1. Early sketches of the movement

Fig2. simple sketches of the details(concept)

FINAL MODEL(DRAWINGS)

VIEW-1front

VIEW-2 right side

VIEW -3 Perspective

The recent model was mostly made with Acrycilc, which represents the transparency of the Tomopteris Body. A thicker Mdf was used for the sides in order to increase the tolerance and for the joints, little cricles with 8mm diameter were made from acrylic to keep the parts and avoid any free movement from still pieces.

FINAL MODEL

FINAL MOVEMENT SCRIPTING The motor which has been used for this model was Servo Full Rotation, which is conected to the rod. #include <Servo.h> Servo myservo; int pos = 0; void setup() { myservo.attach(9); } void loop() { for(pos = 0; pos <= 360; pos += 1) { myservo.write(pos); delay(15); for(pos = 360; pos>=0; pos-=1) { myservo.write(pos); delay(15); }