John Brieger — Looking Outwards 2 (Info Visualization)

by John Brieger @ 7:46 pm 25 January 2012

Information visualization is a tricky art. I picked a few I liked and thought other people might like to see.

Snake Oil: Visualizing Health Supplement Data

Link To Interactive Visualization

Click the picture to go through to the interactive visualization.

Cinemetrics

[vimeo=https://vimeo.com/26584083 w=600]
Similar to Wattenberg’s shape of song, Cinemetrics is a way to visualize the entirety of film at once. I liked the comparisons between multiple works by the same director in particular.

Luke Loeffler – 13/9/65

by luke @ 3:32 pm 24 January 2012

Luke Loeffler – Looking Outwards (Info Visualizations)

by luke @ 3:29 pm

This amazing image was made from a super-long exposure by a pinhole camera facing the sun. You can see the summer and winter arcs as well as cloud cover and sunny days and the visualization has a special aura about it since it is purely the result of a physical process. More of these types of images are at http://www.solargraphy.com

The Clock by Christian Marclay

In this film, Marclay cuts together all the scenes featuring a clock such that the time seen is the same as the current local time. It is an interesting way to visualize the appearance of various times of day in film.

Visualization through Photographic Collections

Often amusing, sometimes disturbing, http://everyday-carry.com features items the (predominantly male) readership carries on a daily basis.

“Women laughing alone with salad,” visualizing the atmosphere of stock photography purveyors and consumers through this common meme.

 

Terrain/topography

One last set of images… These photos blow my mind. They are long exposure photographs of a regular geometric shape projected on massive landscapes, revealing the underlying shape. (You really have to see these large to get it).

Luci Laffitte – 13-9-65

by luci @ 10:25 am

Below is a jpg captured from my interpretation of the 13-9-65 artwork.

 

This is the program running in real-time:

 

While working on this piece I went through many different methods of creating horizontal lines that I found to be accurate and appealing. Then, I proceeding the adding in the vertical lines and ellipses. Looking back, I wish I had considered the overall artwork earlier, because I found it difficult to work the vertical lines into the method I had chosen.

Overall, this project was a good jump back into coding.

 

 

Here is the code


//vectors and globals

////////////////////////////////////////////////////////

PVector v1, v2, v3, v4, v5, v6, v7, v8;
int sizex=600;
int sizey=600;
float t;

 

//setup
////////////////////////////////////////////////////////
void setup() {
size(sizex,sizey);
smooth();
background(255);
stroke(0);
strokeWeight(1);
frameRate(.5);

//draw
////////////////////////////////////////////////////////
}

void draw() {

drawhorizontals();

}

 

 

void drawhorizontals() {

//draw horizontal lines
////////////////////////////////////////////////////////
fill(255);
noStroke();
rect(0,0,width,height);

for (float i=0; i<height; i = i+ random(50,120)) {

float a= 0;
float var1= 0;
float var2= 40;

v1 = new PVector(0, a + random(var1,var2));
v2 = new PVector(.2*width, a + random(var1,var2));
v3 = new PVector(.4*width, a + random(var1,var2));
v4 = new PVector(.6*width, a + random(var1,var2));
v5 = new PVector(.8*width, a + random(var1,var2));
v6 = new PVector( width, a + random(var1,var2));

stroke(1);
line(v1.x, v1.y+i, v2.x, v2.y+i);
line(v2.x, v2.y+i, v3.x, v3.y+i);
line(v3.x, v3.y+i, v4.x, v4.y+i);
line(v4.x, v4.y+i, v5.x, v5.y+i);
line(v5.x, v5.y+i, v6.x, v6.y+i);
//draw circles
////////////////////////////////////////////////////////

ellipseMode(CENTER);
noFill();

int numCircles = int (random(4,12));

for (float k=0; k < numCircles;k= k + (random(0,100))){
int radius = int(random(10,70));
ellipse(random(radius,width-radius), random(radius,width-radius), radius, radius);

float xc = random(v1.x + radius, (v1.x+ width -radius));

}

//draw crossings
////////////////////////////////////////////////////////

int vary = int(random(-10,10));
int vary2 = int(random(0,10));
int var3 = int (random (0,20));

line(v2.x + vary, v2.y + var3, v2.x + vary2, v3.y + vary2);
line(v1.x + vary, v1.y+i + var3, v1.x + vary2, v2.y+i + vary2);
line(v3.x + vary, v3.y+i + var3, v3.x + vary2, v4.y+i + vary2);
line(v4.x + vary, v4.y+i + var3, v4.x + vary2, v5.y+i + vary2);
line(v5.x + vary, v5.y+i + var3, v5.x + vary2, v6.y+i + vary2);

}}
void mousePressed() {

saveFrame("luci13-9-65.jpg");
}

Rothera-howSupermanFlys

by alex @ 10:06 am

Why doesn't Superman blink?

I created a game that would more realistically portray superman’s ability to fly.

FaceOsc recognizes smiley faces

by mahvish @ 10:00 am

:) It works pretty consistently.

Some samples:

-m

Luci Laffitte – FaceOCS

by luci @ 9:40 am

The Muppet-Puppet
[youtube https://www.youtube.com/watch?v=o5BdglycvZ4&w=560&h=315]

For my FaceOCS Project I made a digital Kermit puppet. The head movement of the puppet is controlled by the head of the user, as are the facial features. Further the puppet with “sing” once the user opens their mouth.
If I were to go further with this project I would want to enhance the puppet (3D modeling, better movement of parts?) or maybe even make it karaoke style with rolling text on the side.

 

13/9/65 Rules

by eli @ 8:57 am

http://dada.compart-bremen.de/node/2875

Luke Loeffler – FaceOSC

by luke @ 8:36 am

FaceOSC

This project follows another recent interactive project, Brain Blur, a program that blurs the screen of your monitor if you’re thinking too much (as determined by the presence of beta activity on an EEG), and makes it sharp again after you’ve closed your eyes and meditated rendering the use of your computer nearly impossible.

Too much caffeine, too little sleep, too much distraction, so much going on.. Staying stoked can be hard even for Craig Fahner. Thus, I introduce Superstöker, the first app designed to keep you as optimally stoked. Harnessing advanced facial recognition, it precisely measures the number of dekastokes per second (S*10/s) and alternates playing two scientifically chosen songs in a negative feedback loop to keep you optimally stoked. Should you be under-stoked, the stoker automatically kicks in and attempts to restore balance with some grindcore metal. Should you become over-stoked, the soothing melodies of Getz and Gilberto will bring you back to earth.

 

 

 

VarvaraToulkeridou-13-9-65

by varvara @ 8:34 am
import java.util.ArrayList;
import java.util.Random;
 
import processing.core.*;
 
public class FNakeRemake extends PApplet {
	int xSubDiv = 7; //# of subdivisions horizontally
	int ySubDiv = 10; //# of subdivisions vertically
	int offset = 15; //range for offset to vary the regular subdivisions
	float circleStroke = 2; float gridLineStroke = (float) 1.50; float lineStroke = (float) 1.3;
 
	//arrays to store randomly generated breakpoints on the x,y axis
	ArrayList xBreakPoints;
	ArrayList yBreakPoints;
	//two-dimensional array to store the y coordinates of the grid
	float[][] grid = new float[ySubDiv+1][xSubDiv+1];
 
	public void setup() {
		size(700, 700);
		frameRate((float) 0.5);
	}
 
	public void draw() {
		background(255);
		//get randomly generated breakpoints for x and y axis of canvas
		xBreakPoints = subDivide(width, xSubDiv);
		yBreakPoints = subDivide(height, ySubDiv);
 
		//compute random points for the y coordinates for the interior points
		//of the grid; the x coordinates remain the same for every column of points
		for (int j = 0; j &lt; yBreakPoints.size(); j++) {
			int y = yBreakPoints.get(j);
			int py;
			for (int i = 0; i &lt; xBreakPoints.size(); i++) {
				strokeWeight(gridLineStroke);
				if (i == 0) {
					grid[j][i] = y;
				} else if (i != 0 &amp;&amp; (j == 0 || j == yBreakPoints.size()-1)) {
					grid[j][i] = y;
					line(xBreakPoints.get(i-1),y,xBreakPoints.get(i),y);
				} else {
					py = y + (int)random(-offset,offset);
					grid[j][i] = py;
					line(xBreakPoints.get(i-1),y,xBreakPoints.get(i),py);
					y = py;
				}
			}
		}
 
		for (int j = 1; j &lt; yBreakPoints.size(); j++) {
			for (int i = 1; i &lt; xBreakPoints.size(); i++) {
				Random randomGenerator = new Random();
				//randomly pick if the grid cell will be empty or not
				boolean isEmpty = randomGenerator.nextBoolean();
				if (!isEmpty) {
					strokeWeight(lineStroke);
					//randomly pick if the grid cell will contain straight lines or not
					boolean areStraight = randomGenerator.nextBoolean();
					if (areStraight) {
						for (float k = 0; k &lt; 1; k += 0.03){
							boolean drawLine = randomGenerator.nextBoolean();
							if (drawLine) {
								//for the upper limit line
								float x1 = lerp((float)xBreakPoints.get(i-1), (float)xBreakPoints.get(i), k);
								float y1 = lerp((float)grid[j-1][i-1], (float)grid[j-1][i], k);
								//for the lower limit line
								float x2 = x1;
								float y2 = lerp((float)grid[j][i-1], (float)grid[j][i], k);
								line(x1,y1,x2,y2);
							}
						}
					} else {
						for (float k = 0; k 9) {
					float randX = random(xBreakPoints.get(i-1), xBreakPoints.get(i));
					float randY = random(grid[j-1][i], grid[j][i]);
					float randDiam = random(30,100);
					noFill();
					strokeWeight(circleStroke);
					ellipse(randX, randY, randDiam, randDiam);
				}
			}
		}
	}
 
	/**
	 * Randomly subdivides a distance into parts; the subdivision occurs
	 * by varying (adding or subtracting from) the regular subdivision
	 * given an allowed range equal to the 1/3 of the regular subdivision.
	 *
	 * @param size the size of the distance to be subdivided in pixels
	 * @param subDiv the number of subdivisions
	 * @return an ArrayList containing the start point, the breakpoints
	 *         and the end point of the line
	 */
	public ArrayList subDivide(int size, int subDiv) {
		//an array to store the randomly generated breakpoints
		ArrayList breakPoints = new ArrayList();
 
		int defaultSubDiv = (int) (size / (float)subDiv);
		int tempThreshold = defaultSubDiv/3;
 
		//add the start point to the array
		breakPoints.add(0);
		//get randomly generated subdivisions given the defined threshold
		for (int i = 1; i &lt; subDiv; i++) {
			int breakPoint = breakPoints.get(i-1) + defaultSubDiv + (int)random(-tempThreshold, tempThreshold);
			breakPoints.add(breakPoint);
		}
		//add the end point to the array
		breakPoints.add(size);
		return breakPoints;
	}
}
« Previous PageNext Page »
This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License.
(c) 2023 Interactive Art and Computational Design, Spring 2012 | powered by WordPress with Barecity