lithium flowers bloom » Week5

Pandemonium

L.J — Wed, 08 Oct 2008 22:02:11 +0000

Panda Attack!!!

Thanks Emily!

UPDATE: Story board!

UPDATE 2:

pandemonium |ˌpandəˈmōnēəm|
noun
wild and noisy disorder or confusion; uproar : pandemonium broke out.

ORIGIN mid 17th cent.: modern Latin (denoting the place of all demons, in Milton’s Paradise Lost), from pan- [all] + Greek daimōn ‘demon.’

UPDATE 3:

tweezers |ˈtwēzərz|
plural noun (also a pair of tweezers)
a small instrument like a pair of pincers for plucking out hairs and picking up small objects.

ORIGIN mid 17th cent.: extended form of obsolete tweeze [case of surgical instruments,] shortening of etweese, plural of etui .

PCom: Serial Input in Processing

L.J — Wed, 08 Oct 2008 15:42:33 +0000

I do enjoy the force sensor I got in week 5′s application class so I’ll definitely use it more in the assignment!

First I revisited the processing codes I wrote for week 2, which now seems to be a total mess. I didn’t know about the serialEvent callback then so I parsed the serial input in the draw loop, and I didn’t use BYTE output in the arduino board so I need to parse it as string. It worked pretty well but the revised the version is much better.

Codes:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52

import processing.serial.*;

Serial myPort;
int window = 800;
int[] values = new int[window - 100];
int index = 0;
int input = 0;

void setup()
{
size(window,window);
background(0,30);
smooth();
// List all the available serial ports:
//println(Serial.list());
myPort = new Serial(this, Serial.list()[0], 9600);

for (int i = 0;i<window - 100;i++)
{
values[i] = 0;
}
}

void draw()
{
background(0,20);
for (int i = 0; i < window - 100;i++)
{
int j = i + index;
if (j >= (window - 100))
{
j = j - (window - 100);
}

stroke(255,0,0,80);
line(50 + i, (window - 50), 50 + i, (window - 50) - (values[j] * (window - 100) / 1024));
stroke(255,0,0,100);
point(50 + i, (window - 50));
point(50 + i, (window - 50) - (values[j] * (window - 100) / 1024));
}
}

void serialEvent(Serial p) {
input = p.read();
println("input:" + input);
values[index] = input * 4;
index++;
if (index >= window - 100)
{
index = index - (window - 100);
}
}

Then I thought about the nature of the force sensor and really wished I could visualize the “force” in the processing. So I adopted the “string” example bundled in the processing application and integrated it with the serial input.

Codes:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97

import processing.serial.*;
// The serial port:
Serial myPort;
int input = 0;
int lastInput = -1;

// Spring drawing constants for top bar
int s_height = 16; // Height
int left = 150; // Left position
int right = 250; // Right position
int max = 300; // Maximum Y value
int min = 20; // Minimum Y value
boolean over = true; // If mouse over
boolean move = false; // If mouse down and over

// Spring simulation constants
float M = 0.8; // Mass
float K = 0.2; // Spring constant
float D = 0.92; // Damping
float R = 60; // Rest position

// Spring simulation variables
float ps = 60.0; // Position
float vs = 0.0; // Velocity
float as = 0; // Acceleration
float f = 0; // Force

void setup()
{
size(400, 400);
rectMode(CORNERS);
noStroke();
myPort = new Serial(this, Serial.list()[0], 9600);
}

void draw()
{
background(102);
updateSpring();
drawSpring();
}

void drawSpring()
{
// Draw base
fill(0.2);
float b_width = 0.5 * ps + -8;
rect(width/2 - b_width, ps + s_height, width/2 + b_width, 350);
}

void updateSpring()
{
// Update the spring position
if(!move) {
f = -K * (ps - R); // f=-ky
as = f / M; // Set the acceleration, f=ma == a=f/m
vs = D * (vs + as); // Set the velocity
ps = ps + vs; // Updated position
}
if(abs(vs) < 0.1) {
vs = 0.0;
}

// Test if mouse is over the top bar
/*
if(mouseX > left && mouseX < right && mouseY > ps && mouseY < ps + s_height) {
over = true;
} else {
over = false;
}
*/

// Set and constrain the position of top bar
if(move) {
ps = map(input,0,255,min,max) - s_height/2;
if (ps < min) { ps = min; }
if (ps > max) { ps = max; }
}
}

void serialEvent(Serial p) {
input = p.read();
println("input:" + input);

if (input > lastInput)
{
move = true;
}
else if (lastInput > input + 10 || input < 10)
{
move = false;
}

lastInput = input;
}

Scent visualization preparation

L.J — Tue, 07 Oct 2008 07:56:04 +0000

Just spent a whole afternoon browsing for different visualizations and to my surprise I didn’t find many cases directly dealing with the smell. This week’s case is to visualize the data collected in an experiment by Dr. Vosshall’s research group on the navigation of genetically modified drosophila larvae through an odor field. It started to be a little bit overwhelmed when it comes to a specific case to visualize, and actually the visualization work used in the paper are pretty comprehensive to me already. Anyway I still tried to write down the different alternatives to visualize each element in the experiment for next week.

2 Paths (unilateral and bilateral olfactory).

In the experiment actually 4 different groups of larvae were used.

a) Or83b^–/– mutant, non-functional in detecting the odor used in the experiment;

b) unilateral left (only left olfactory organ is functioning);

c) unilateral right;

d) full functional wild type.

We rule out the case a and combine b & c together just to simplify the visualization to support the conclusion from the experiment. This is where we start the “illusion” by trimming down the source data from the experiment. However, some of the features should not be ignored in the different behaviors:

The Difference

First of all, the two different types of behaviors should be splitted on the final visualization. The paths should remain looking like a path, or course, to avoid unnecessary confusion, but they should be clearly marked with (at least) 2 different colors, or placed in different levels to differentiate. The sample image is the North American Subways Map from http://www.radicalcartography.net/?subways. The path could even be assigned a non-opaque alpha value so that we could later see the accumulation of color for a certain type of larva. This would also be discussed later.

The Route

The navigation of the larva could be told by its movement, and we need to keep track of this route.

The starting and ending point should be indicated in the visualization. They should be either marked clearly on a static image, or be presented in a video through time.

I found the work from an experiment in which different cognitive styles of Chinese, Koreans and Americans were compared. In the report, Eye Tracking Data Visualization (pic1, pic2, pic3) were presented to indicate user attention to a certain web page through time. Different colors are used for different period of browsing time. This technique could also be applied to the larva navigation, for instance, the route starts with a lighter version of the base color (which indicates its type) and throughout its journey the routh grows darker. Or, in the simplest form, a small triangle in the front indicating the direction.

The Weighed

I would also like to emphasize on the “expected” decision of the larva. If a step it took was expected (towards the odor), this step should be weighed more than an incorrect step (away from the odor). The “correctness” of a step could be compared by the angle between current larva direction (by calculating the previous and current position) and the vector of that location (which points to the stronger odor source). A weighed “correct” step could be thicker in shape, or having different texture on it. Sample image from TeleGeography by Timothy J. Stronge.

The Group

The group average behavior of a certain type of larvae let us see beyond individual exceptions, so that I think a heatmap could be a good idea to present that. This technique is also used in Dr. Vosshall’s paper. Due to the fact that the larvae location was captured rather low-res, the heatmap was pixelated. A 3D histogram over the surface might also help, but I will try to look for more simple solution in 2D first. If the path was at first place rendered as a semi-transparent line, we might be able to get a self-accumulated heatmap automatically at the end of whole rendering.

Odor (particle and odorant gradients)

The visualization of the odor is mostly about the intensity. In 3D the visual effect could be easily achieved by placing more particles in certain space to suggest higher density. In 2D we usually indicate the intensity by changing opacity and lightness of the color. In this case, the stronger the odor is, the thicker and brighter the color should be. That is still a lazy solution though. I’m actually pretty much into the idea (in the paper) of putting vectors everywhere to point out where a stonger odor is. And the vector could combine with the idea to give a visual feedback while the larva travels away from the expected direction.

I thought of using the lifted plane to indicate a higher density of odor, but that would be too much like a metaphor for mountain, which does not make much sense in this case. Larvae pursuing height? So … better keep the old fashion in this case.

Larvae

The visualization given in the paper might actually be restricting the creativity while I think about this experiment. I felt pleased when I realized that I could throw away the odor field and think about only the larvae. I thought too much about the experiment itself so that I previously focused mostly on the path and almost abstracted the larva to a single point myself. This is not necessary the case.

I saw this on the new york times website while I was looking around and it was definitely a shock. It gave me an idea that the larvae could also be visualized in a statistical way. They could be categorized by success/failure evaluation of pursuing the odor, or by the steps they took before reaching the expected destination.

Define space of experiment

In my personal interest I would like to keep the space 2D, since the sampled data were no more than 2D and I feel like keep that simplicity. Even 3D might be spectacular for user interaction but I don’t see much point here to introduce the 3D space for this experiment, unless in the sketch next week I add multi-layer information so that I have to introduce 3D. The visualization for the odor substances filling in the space was already covered above, and they would take up all spaces of experiment. So the point here is to define a clear boundary of the experiment area, and express the idea that whenever the larva touches the boundary its game is over. Simple geometry shapes or difference in color would do it fine.

Here is a very interesting visualization work for football match done in 1986. More at http://www.susken-rosenthal.de/fussballbilder/indexen.html.

One visualization you like that effectively communicates its subject matter

Strife and Power in the New Middle East. 2006 by New York Times

Let’s just look at the first illustration. I believe that most people including me would not be one hundred percent clear what’s really going on in the middle east. Different countries, armies, ethnic groups, religious and economic issues. And this illustration, no matter dated or not (not surprising if it’s dated since it’s made in 2006), provides a nice and clear big picture of the middle east.

Its amazing simplicity is shown in the legends: red weighed stripes for conflicts, circles for groups, oil tower icon for oil control. Those symbols are cast on the simplified map of middle east, on which you could basically tell the outline of Europe, Africa and Asia. The circles representing groups are so cleverly used that so many different features are concluded in the simple symbol: the color is used to differentiate ethnic group, the size refers to the population, and the thick outline means government background.

The main purpose of this visualization is to illustrate relationships and show conflicts, as the title suggests. That’s why the conflicts (which are represented in red stripes) are emphasized as the center of the illustration, and also in a most noticable color. The width of the stripe is a nice metaphor for the severeness of the conflict. The secondary conflicts are marked in much thinner stripes, which is also quite self-explained.

I would also like to talk a lot more simply because there are so many wonderful visualization projects out there, yet maybe next time. Among them my favourate is “We Feel Fine“. I have to post something about it here now that I’m talking about viz project I “like”. It’s an amazing idea combined with fantastic implementation, by crawling over the web, collecting people’s “feeling”, and showcase them in a dramatic way. Go visit now if you haven’t done so!

One visualization that is about a sense

I tried to find one for each sense, but didn’t make it.

Sound: The Shape of Song, Pop Sketch Series (actual piece link broken, use visualcomplexity post instead), Digital Acoustic Cartography,

Smell: New York Smell Map (but the actual viz work seems broken, maybe it’s just me), London Air Pollution in 3D (not sure whether it’s about smell?)

Vision: Eyescapes, A Working Brain Model, A Cross-Cultural Comparative Study of Users’ Perceptions of a Webpage: With a Focus on the Cognitive Styles of Chinese, Koreans and Americans , Millennium Simulation,

Touch and Taste: no luck

Just for fun: FM RADIO MAP (mapping radio station according to geo location and embed the radio to the viz work), Cascade on Wheels (visualizing traffic and using noise as metaphor for traffic).