“A Love Hate Downpour”: A Data Visualization

“A Love Hate Downpour” is a data visualization of real time Twitter data, selecting tweets that contain “love” and tweets that contain “hate”, then conveying the number of times each is tweeted in a visually pleasing way.

Heavily influenced by artists like Jonathon Harris and Aaron Koblin, the visualisation was created with the aim of provoking thought among viewers with regards to how we view and use social media today. A display of how people convey emotions and contrast in their actions online.

“Autonomous Connections”: A Generative Audio-Visual Display

“Autonomous Connections” is and audio-visual display that was created using the processing development environment. The aesthetic is inspired by research into the work and processes of a number of respected artists in the field of generative art. Heavily influenced by the idea of emergence, the resulting visualization of this algorithm is created through the interconnectivity of a number of autonomous objects, invisible to the eye but freely floating on screen. The final result is an exploration of the phenomena of the natural world, generating autonomous agents (dots) that interact to create contrasting and interesting visuals throughout their interaction.

Processing: working with images

PImage image1;
int w, h;
float oldRed, oldGreen, oldBlue, average;
float newRed, newGreen, newBlue;
color oldColour, newColour;
image1 = loadImage(“C:/Users/SFogo93/Desktop/Dock.jpg”);
w = image1.width;
h = image1.height;
size(w, h);
print(“Image resolution: width ” + w + ” * height ” + h);
for (int i = 0; i < w; i++)
{
for (int j = 0; j < h; j++)
{
oldColour = image1.get(i, j);
oldRed = red(oldColour);
oldGreen = green(oldColour);
oldBlue = blue(oldColour);
if (j <= h/2 && i <= w/2) // Quadrant 1
{
newRed = random(255);
newGreen = oldGreen;
newBlue = oldBlue;
}
else if (j <= h/2 && i >= w/2) // Quadrant 2
{
newRed = 255 – oldRed;
newGreen = 255 – oldGreen;
newBlue = 255 – oldBlue;
}
else if (j >= h/2 && i <= w/2) // Quadrant 3
{
newRed = oldRed;
newGreen = oldGreen – 50;
newBlue = oldBlue;
}
else // Quadrant 4
{
newRed = (oldRed * .393 + oldGreen * .769 + oldBlue * .189);
newGreen = (oldRed * .349 + oldGreen * .686 + oldBlue * .168);
newBlue = (oldRed * .272 + oldGreen * .534 + oldBlue * .131);
}
if (newRed > 255) newRed = 255;
if (newGreen > 255) newGreen = 255;
if (newBlue > 255) newBlue = 255;
if (newRed < 0) newRed = 0;
if (newGreen < 0) newGreen = 0;
if (newBlue < 0) newBlue = 0;
newColour = color(newRed, newGreen, newBlue);
image1.set(i, j, newColour);
}
}

image(image1, 0, 0, w, h);

Getting the hang of processing

int x=0, y=0;
int shapeWidth, shapeHeight;

void setup()
{
size(200, 200);
shapeWidth=width/10;

}

void draw(){
for (int i=0; i<10; i++)
{
for (int j=0; j<10; j++)
{
if (i%2==0 && j%2==0)
fill(0);
else if (i%2==0 && j%2 !=0)
fill (255);
else if (i%2 !=0 && j%2==0)
fill(255);
else
fill (0);
x=i*shapeWidth+shapeWidth/2;
y=j*shapeHeight+shapeHeight/2;
ellipse(x, y, shapeWidth, shapeHeight);
}
}
shapeHeight=height/10;

noLoop();
}