資訊設計 Information Design (since 2012)

2013年4月15日星期一

week 8. Design ID with codes

http://www.thegreeneyl.com/mit-media-lab-identity-1

2:00 演講

2013年4月11日星期四

2013資訊設計 processing 製作/ m10110302 林秉毅

太極旋轉球!!!!

兩顆球
一個順時針往畫面中心旋轉漸漸縮小
一個逆時針往畫面中心旋轉漸漸縮小

Car myCar1;
Car myCar2; // Two objects!
float xc, yc;

void setup() {
size(600,600);
xc=width/2;
yc=height/2;
// Parameters go inside the parentheses when the object is constructed.
myCar1 = new Car(color(255,255,255),300,20,0.05,100);
myCar2 = new Car(color(0,0,0),-300,20,0.05,100);
}

void draw() {
background(70);
myCar1.drive();
myCar1.display();
myCar2.drive();
myCar2.display();

}

// Even though there are multiple objects, we still only need one class.
// No matter how many cookies we make, only one cookie cutter is needed.
class Car {
color c;
float xi;
float yi;
float N;
float R;
float speed;
float count=0;
float jen;
float jenS;
float size;

// The Constructor is defined with arguments.
Car(color tempC, float Ri, float Ni,float speedi, float sizei) {
c = tempC;
N = Ni;
R=Ri;
speed=speedi;
jen=R/(N/speed);
size=sizei;
jenS=size/(N/speed);
}

void display() {
stroke(1);
fill(c);

ellipse(xc+R*cos(count*2*PI/N),yc+R*sin(count*2*PI/N),size,size);
}

void drive() {
R-=jen;
size-=jenS;
count +=speed;

if (count >= N) {
count = 0;
R=jen*(N/speed);
size=jenS*(N/speed);
}
}
}

2013年4月8日星期一

week 7. feature artist: John Whitney

http://postscapes.com/awards/category/design-fiction

The Underground Library from Keri Tan on Vimeo.

object-oriented programming

2013年4月1日星期一

week 6. public poetry

http://www.psfk.com/2013/03/rap-lyrics-street-signs.html

learning processing:

sample codes:

float xc, yc;
float R;
int N;
void setup(){
size(600, 600);
xc = width/2;
yc = height/2;
R = 250;
N = 36;
}
void draw(){
background(0);
stroke(255);

R = dist(mouseX,mouseY, xc, yc);
for (int i = 0; i< N; i++){
ellipse(xc+R*cos(i*2*PI/N), yc+R*sin(i*2*PI/N), 20, 20);

}
}

2013資訊設計作業2/ m10110302 林秉毅

概念是以高度去將原本256階的灰階顯示轉換成現實立體的狀態，以方塊的堆疊方式或者是以等高二維方塊佇立起來的鐵絲，插上球體，而球體因為對應不同的灰階色彩而產生出不同種的高度與關係，而當色彩變化同時則可以產稱不同的升降情形(我是希望他能在鐵絲上面爬動拉)，假若對應到黑白影片或許那動態會很有意思，我是在思考說假若我將色彩明暗的變化改由高度來去表達那會有什麼樣的衝擊性

這我是自思考一種圖像化去顯示程式的運轉方式，來達到一個虛擬實體化，我感覺程式就是由許多的圈圈(FOR 或者 WHILE)所組成，以及不同的交錯(IF或者Else)，然後在這些螺旋狀的線條路徑上轉動著他們是每個迴圈裏頭運作的指令，那我們的執行就會在這蜿蜒的道路裡面走動著，會經過不同色彩的圈圈就像景色地標一樣，另外我也在思考說能不能程式=城市，程式的運作就像在一座城市裏頭行走

想要顛覆傳統的電腦影像/圖像或者繪畫去以一個實體的方式去呈現表達，我將RGB色彩分成兩個部分一個是純色一個是他的明暗，首先是以2D的方式來看，塗滿純色乾淨的狀態(紅色)，3D以立體的方式在不同區塊上對應到不同明暗的純色紅，這3D就代表著明暗，他沒有顏色(白色或者透明的)，由上往下看時他就像是image的線條部分(上視圖)，以及像現在這角度去看時都會是一個立體的狀態，就以這2D方式以及3D方式去表達這個image，當你把純色塗上3D或者是疊上去，會不會看起來像原本的image一樣，是我在好奇的地方

2013 資訊設計作業二 / 葉雅筑 M10110304

1. Languages of New York

English (in grey above) is by far the most popular with Spanish (in blue above) taking the top spot amongst the other language groups.

http://flowingdata.com/2013/02/27/languages-of-new-york-via-twitter/

2. Nine Point Five

You can browse the earthquakes by the date and magnitude, display them using three different visualizations types and enjoy the beauty of our planet in astonishing fullscreen mode.

http://marcinignac.com/projects/nine-point-five/

3.Gun deaths since Sandy Hook

Circles represent the number of deaths in a city, and the larger a circle the higher the count. A bar chart on the bottom shows the data over time and serves as a navigation device. Click on a day or a location, and the names of victims appear on the right with a link to the related news story.

http://flowingdata.com/2013/03/28/gun-deaths-since-sandy-hook/

---------------------------------------------------------------------------------------------

data: 情緒，藉由記錄方式觀察自己每一天情緒的變化。

表現方式1：快樂指數

紀錄每一天的快樂指數，右上方是快樂指數分數，當分數越高，粒子也會越多，
代表很快樂。

表現方式2：振動頻率

紀錄每一天的振動頻率，人的振動頻率高，充滿正面能量，線就會隨著數值波動，
數值越高波動數度也快，顏色也會變成彩色。

振動頻率低，充滿負面能量，顏色就會變成黑色，也波動不起來。

表現方式3：心情紀錄

記錄每一天的心情，顏色會隨著紀錄的心情做變化。

2013 資訊設計作業二 / 陳柏英

Project 1:

Check at least 3 projects in "references"

Determine the data you want to visualize and embody.

Sketch 3 possible ways of data representation

Deadline: 4/2, 2013

1. Eve Numbercult in Dataisnature

Numbercult has created a series of visual music pieces that explore the use of Voronoi tessellation, and intersecting nodal networks using VVVV. The works are marked by a refined use of colour, and a cross-wiring of sound and video resulting in narratives of pure geometric abstraction.

In ‘Eve’ crisp microscopic sounds augment the movement of a central polygon who appears to be agitated, and simultaneously courted, by a group of nodal circles each of which exert attractive forces over one another through mutual proximity. The delicate use of natural colours, shading and scaling implies the formation of crystals, or the hermetic dynamics of a reactive geo-chemical system in process.

‘Collision Music’ uses the detection of particle collisions within a shifting Voronoi triangulation- mesh to actuate percussive sounds. Each cycle of sound generation is preceded by the motion of an errant particle who acts as a destabiliser to the system – a Glass Bead Game with running commentary from outlandish Delaunay entites.

‘Connected’ uses the multi-directionality flow of data to create what Numbercult describes as a ‘graphical/musical sequencer system with a three way flow of information between graphics, sound and external triggers’.

2. Everyday of My Life

http://marcinignac.com/projects/everyday-of-my-life/

[marcinignac.com] by Polish artistic programmer / programming artist Marcin Ignac represents his computer usage from the last 2.5 years.

Each horizontal line represents a single day, while each block stands for a specific use of the computer, such as the color of the most foreground app running at a given moment, a mouse click (red poster), or a keyboard hit (yellow poster). Accordingly, black areas are those periods when the computer is turned off.

Sleeping patterns (or lack of them) and time of holidays and travel (longer gaps) can be therefore easily identified.

All data was gathered using Tapper - a small OSX app logging my application usage written by Dean McNamee. It was later visualized by me using Plask environment

3. US Presidential Inauguration Speeches: How Does Obama's Second Compare?

http://infosthetics.com/archives/2013/01/comparing_the_words_spoken_at_us_presidential_inauguration_speeches.html

[guardian.co.uk], designed by data visualization wizard Santiago Ortiz, compares the US Presidential Inauguration Speeches since Richard Nixon became president in 1969.

One can filter for those words spoken by one single president by selecting the respective president name in the color legend below. One should also note how this legend changes into a dynamic bar graph when interacting with the graph. In addition, each word can be hovered to reveal those words that are closely connected to it, or one can search and filter for specific words in the search box.

==========================================

減肥日記XD

data:

飲食/運動/睡眠

自己界定的目標可能有
時、量、質

1. Stature Goal Graph

藍 / 綠→睡眠 / 飲食
黑色的輪廓→運動

一條線→一天
由下而上→從減肥開始日到減肥結束日

只要影像中身材一有走樣就是有些事情沒做到