Author: CJ

CJ Walsh – Looking Outwards 07 – Data Visualization

6 charts created for (En)tangled Word Bank (2009)

The piece I chose this week is a collaboration between Stefanie Posavec and Greg McInerny. These pieces were created by analyzing insertions and deletions that occurred between six editions of The Origin of Species by Charles Darwin. On her website, Posavec outlines that McInerny completed all of the programming and gathering of data and together they worked on the visual form. While it does not describe the particulars of the programming used to analyze all of the editions, it says that C++ and R were used in terms of programming languages. My guess is that an algorithm was used that analyzed all the sentences within each edition and then checked how many times that sentence was seen again in future versions.

Posavec modeled this form after another project that she did while working on her Masters in Communication Design. She calls the structure a ‘literary organism.’ Each diagram represents an edition, which is then broken down into chapters and subchapters. After that, the subchapters are divided into the paragraph ‘leaves,’ which are then broken into sentence ‘leaflets.’ The sentences in each edition are colored to indicate whether they survive to the next edition (blue) or have removed (orange).

Banners created for Darwin Anniversary Festival at the University of Cambridge

I enjoyed this project because it’s not a dataset that would come to mind when I think about content usually depicted in data visualization. It is interesting to see the way that the content within the editions changes over time. It shows a progression in both scientific thought and how Darwin was developing his theories and knowledge. I think that the form is also pretty interesting. It feels heavily inspired by natural forms and the way that natural species are charted based on relations.

Sources: http://www.stefanieposavec.com/entangled-word-bank https://www.moma.org/interactives/exhibitions/2011/talktome/objects/145525/

CJ Walsh – Project 06 – Abstract Clock

sketch

// CJ Walsh 
// Section D
// cjwalsh@andrew.cmu.edu
// Project-06

var cx, cy;
var sunDim, hourDim, minDim, secDim;
var hx, hy;
var mx, my;
var sx, sy;
var tx = [];
var ty = [];
var starNum;
var colors = ['white', '#D8B495', '#DBD8A2'];

function setup() {
	createCanvas(480, 480);
	cx = width/2;
	cy = height/2;
	sunDim = 0.2*480; // establishing variables for the sun and orbit paths
	hourDim = 0.55*480;
	minDim = 0.85*480;
	secDim = 70;
	starNum = 150;
	
	// loop created for generation of stars
	for (i = 0; i < starNum; i++) {
		tx[i] = random(0, width);
		ty[i] = random(0, height);
	}
}

function draw() {
	background('black');

	// drawing background of stars
	for (i = 0; i < starNum; i++) {
		fill(colors[i%3]);
		ellipse(tx[i], ty[i], 5, 5);
	}

	var s = second(); // establishing variables for sec, min, hr
	var h = hour() % 12; // hours set to 12 hr day rather than 24hr
	var m = minute();

	var sAngle = s/60*2*PI - PI/2; // establishing variables for angle of hands 
	var mAngle = m/60*2*PI - PI/2 + s/60/60*2*PI;
	var hAngle = h/12*2*PI - PI/2 + m/60/12*2*PI;


	// drawing paths of orbit
	noFill();
	stroke('#919191');
	strokeWeight(2);
	ellipse(cx, cy, hourDim, hourDim);
	ellipse(cx, cy, minDim, minDim);

	// drawing sun and radiating lines
	noStroke();
	fill('#DB5858');
	ellipse(cx, cy, sunDim, sunDim);
	noFill();
	stroke('#FFC269');
	for (s = sunDim; s <= sunDim+4*12; s+=12) {
		ellipse(cx, cy, s, s);
	}

	// Hour Planet 
	hx = cx + hourDim/2*cos(hAngle);
	hy = cy + hourDim/2*sin(hAngle);
	drawHour();

	// Minute Planet 
	mx = cx + minDim/2*cos(mAngle);
	my = cy + minDim/2*sin(mAngle);
	drawMin();

	// Second Moon
	sx = mx + secDim/2*cos(sAngle);
	sy = my + secDim/2*sin(sAngle);
	drawSec();
	

}

function drawHour() {
	noStroke();
	fill('#DD6C9F');
	ellipse(hx, hy, 50, 50);
	fill('#844364');
	ellipse(hx+14, hy+3, 15, 15);
	ellipse(hx-6, hy-5, 5, 5);
	ellipse(hx-10, hy+10, 10, 10);

}

function drawMin() {
	noStroke();
	fill('#4A74A5');
	ellipse(mx, my, 35, 35);
	fill('#303C6D');
	ellipse(mx-3, my-6, 17, 13);
	ellipse(mx+4, my+6, 6, 6);
}

function drawSec() {
	noStroke();
	fill('#73B3FF');
	ellipse(sx, sy, 12, 12);
}

For this project I wanted to create a clock that looked like planets orbiting a sun. Although the design is still centered around circular themes, I think its still breaking outside the idea of a clock, and definitely couldnt be identified as a clock by first glance. My process began with sketching my ideas on paper, and then translating that into a drawing using Adobe Illustrator. After that I was able to translate my sketches into code, creating both fixed and animated objects on my canvas. I used the knowledge I gained from Assignment C to help me create my new clock. I added in the ability of the planets to move slightly in the transition from minute to minute or hour to hour. As a final touch, I drew some randomly generated stars to fill the background. This was definitely a fun project to make, though one that challenged my knowledge.

CJ Walsh – Looking Outwards 06 – Randomness

8-ecke by Georg Nees

The piece that I chose to focus on for this week’s Looking Outwards is by Georg Nees. He is considered a pioneer in the world computer art and graphics. While this piece is pretty simple, I enjoyed it for a variety of reasons. I like to sketch in a lot of my notebooks, and all of the lines remind me of the things that I doodle when I’m in class. Another aspect that really stands out to me is on their own, each of the small drawings would seem insignificant. But, when combined into the large grid with all of the other generated drawings, it creates a really intriguing image. It almost feels like a diagram of some kind of language or alphabet, which is cool.

In order to create this piece, Nees set random parameters for each graphic. The rules that he set was that eight dots would be placed inside the established canvas, and then they would be connected by lines into a closed edge shape. He states that, “The program for each graphic repeats generative fundamental operations so that the mere repetitions, the aesthetic redundancy, produce the random parametric values of the aesthetic improbability of the graphic during each repetition.”

It is interesting to think about how far computer graphics and art has come since Nees first created and presented these works. Looking back at this piece now, we see it as quite simple compared to the other forms you can create using code. At the time, this work was revolutionary. This piece conveys a sense of experimentation, which reflects exactly what Nees was doing with his work. It wasnt about creating an artistically beautiful work of art. It was a part of a larger experiment into the capabilities of programming. And even if this may not be considered high art, it is a cool piece to look at and one that I admire.

CJ Walsh – Project 05 – Wallpaper

sketch

// CJ Walsh 
// Section D
// cjwalsh@andrew.cmu.edu
// Project 05 - Wallpaper

function setup() {
    createCanvas(500, 500);
    background('#83D4F3');
    noStroke(); // i dont like the stroke on objects!
}

function draw() {
	// loop used to create variety of circles 
	for (var y = 62.5; y < height + 62.5; y += 125) {
		for (var x = 62.5; x < width + 62.5; x += 125) {
			fill('#64AEFF');
			ellipse(x, y, 125, 125);
			fill('#8ACAFF');
			ellipse(x, y, 99, 99);
			fill('#8BEFA7');
			ellipse(x - 25, y - 10, 37, 37);
			fill('#609FA0');
			ellipse(x - 20, y - 20, 21, 21);
			fill('#2D4949');
			ellipse(x + 20, y + 15, 43, 43);
			fill('#FFC5FE');
			ellipse(x + 25, y - 2, 29, 29);
		}
	}
	// background set of rectangles 
	fill('#7F7FEF');
	for (var y = 114; y < height; y += 251) {
		for (var x = 30; x < width; x += 250) {
			rect(x, y, 190, 19);
		}
	}
	// foreground set of rectangles
	fill('#5756A5');
	for (var y = 29; y < height; y += 250) {
		for (var x = 115; x < width; x += 251) {
			rect(x, y, 19, 190);
		}
	}
}

This is the wallpaper that I created for this week’s assignment. After looking through some examples, I decided that I just wanted to experiment with what I knew about loops and shapes and see what I could make. I drew all of my shapes in Adobe Illustrator first to understand where I wanted everything to be placed, and to also choose colors. I found this project to be really fun, especially when I expand the canvas and get to see the design on a larger scale. I could definitely see myself doing something similar to this project again in the future to make fun patterns and textures.

Illustrator Drawing

CJ Walsh – Looking Outwards 05 – 3D Computer Graphics

For this week’s Looking Outwards I decided to focus on a series of works by Mark Kirkpatrick, a digital artist and designer. What really caught my attention in these pieces was the cohesion of the color palettes. Each piece has a really unique and calming vibe that comes from the combination of the scenery and the color palette. In creating this series of works, he stated that he enjoyed the idea of solitude within the image of the barren landscape.

This series of works is produced using Cinema4D and ZBrush, and then was rendered in Octance Render. He also goes in and adds details after rendering using Photoshop.

I think that an interesting part of his work is that almost all of his professional design and artistic knowledge is self-taught. He went to school for business so he received no formal training with these mediums and practices. He states that as he continues to gain knowledge within these programs, he can create more interesting and complicated works. His practice seems to work well in this environment, the process of experimenting with the software and rendering enables him to create images that have a sense of being both planned and unplanned.

Website: https://mkcreative.co/projects

Interview: https://create.adobe.com/2015/9/15/interview_with_adobe_stock_contributor_mark_kirkpatrick.html?scid=social52542336&adbid=644189459215347712&adbpl=tw&adbpr=282130196

CJ Walsh – Project 04 – String Art

sketch

// CJ Walsh
// Section D
// cjwalsh
// Project-04

function setup() {
    createCanvas(400, 300);
}

function draw() {
	background('#8B9AF2');
	var xstep = 10;
	var ystep = 10;
	var xpos = 0;
	var ypos = 0; 
	var x1, y1;

	for (i=1; i < 40; i++) {
		x1 = xpos + xstep;
		y1 = ypos + ystep;

		// center red 
		stroke('#991D3E');
		line(200, y1, x1 + 140, height);
		stroke('#991D3E');
		line(width-200, y1, width - x1 - 140, height);

		// center pink 
		stroke('#FFB3FF');
		line(200, y1, x1 + 70, height);
		stroke('#FFB3FF');
		line(width-200, y1, width - x1 - 70, height);

		// lower large curves
		stroke('#1C4E7C');
		line(0, y1, x1, height);
		stroke('#1C4E7C');
		line(width, y1, width - x1, height);

		// center black 
		stroke('black');
		line(width-200, y1, width - x1, height);
		stroke('black');
		line(200, y1, x1, height);

		// top large curves 		
		stroke("#090170");
		line(0, y1, width-x1, 0);
		line(x1, 0, width, y1);

		// lines controlled by mouse movement 
		stroke("white");
		line(x1, 0, mouseX, mouseY);
		line(x1, height, mouseX, mouseY);

		xpos = x1;
		ypos = y1;
	}
}

For creating my string art I just wanted to experiment with different ways of making and placing my curves. After playing around with the placement and giving a lot of attention to symmetry, I wanted to create a fun color palette. I think it makes it a lot more fun to interact with. At the end of my project, I wanted to include an interactive movement element, so I added some lines that follow the position of the mouse and create fun patterns when overlapping with the curves.

CJ Walsh – Looking Outwards 04 – Sound Art

The Last Gun – Constantine Zlatev

The piece that I chose to focus on is called the Last Gun by Constantine Zlatev, with collaborators Kostadin Ilov and Velina Ruseva. Zlatev is a San Francisco based artist working primarily with disassembled materials to create sculptures.

This piece is made from a disabled shotgun and other industrial parts. The shotgun has been transformed into a double barrel flute and is played by moving compressed air through the structure. Using programming, the sculpture charts the rise and fall of US arms exports and translates that information into music. When the yearly exports of arms increases the flute is programmed to play a somber tune, and when exports drop the sculpture plays upbeat music. The piece is controlled through open source electronics, an Arduino microprocessor and a Raspberry Pi board.

I find the experience of this piece to be really interesting. Obviously, the shotgun cannot fire, but the mechanism used to push compressed air through the flute does have a very jarring sound. The combination of these quick shot like noises combined with the tune of the flute makes for a very interesting sound environment.

The artist writes in his bio that his work is heavily grounded in historical, social and political significance, in addition to his own personal life experiences. What I found very interesting was that he states that a lot of his work is about having ideas and then having an irresistible need to see them realized. This piece definitely feels like a spur of the moment idea that came to fruition, so I think that it’s cool that his process doesnt seem too serious.

CJ Walsh – Looking Outward 03 – Computational Fabrication

Nervous System is a design studio that focuses on the intersection of science, art and technology. Their primary interest is creating forms inspired by natural phenomena, and they have created some really amazing structures by generating algorithms inspired by nature. One really neat project that I found was Floraforms.

Floraform is a generative design system that they created using inspiration from the way that leaves and flowers grow. They first created a simulation that they could observe growing, and that information was used to translate into 3D forms. The studio calls it a kind of digital gardening where they are cultivating algorithms.

This is a super cool project to me. The sculptural forms really catch my attention, but it is also really interesting to see the different ways that they are exploring growth through computational models.

In addition to this specific project, the studio has a lot of really cool research happening around these topic areas, and it is exciting to see so many different forms being generated around the idea of exploring natural forms through technological advances.

CJ Walsh – Project 3 – Dynamic Drawing

sketch

var radLarge = 37.797;
var radSmall = 20.643;

function setup() {
	createCanvas(640, 480);
	noStroke();
	colorMode(HSB, 480);
}

function draw() {
	// color changes as mouse moves in vertical directions
	background(mouseY);
	//controls the reverse of my mouse movement
	var reverseX = width - mouseX

// background circles to create changing backdrop
	fill('#71BCFF');
	ellipse(320, 240, mouseX, mouseY);
	ellipse(480, 240, mouseX, mouseY);
	ellipse(150, 240, mouseX, mouseY);

// left larger circles
	fill('#E83F63');
	ellipse(mouseX, 33, radLarge, radLarge);
	ellipse(mouseX, 108, radLarge, radLarge);
	ellipse(mouseX, 184, radLarge, radLarge);
	ellipse(mouseX, 260, radLarge, radLarge);
	ellipse(mouseX, 335, radLarge, radLarge);
	ellipse(mouseX, 410, radLarge, radLarge);

// left small circles 
	fill('#6171E5');
	ellipse(mouseX, 449, radSmall, radSmall);
	ellipse(mouseX, 373, radSmall, radSmall);
	ellipse(mouseX, 298, radSmall, radSmall);
	ellipse(mouseX, 222, radSmall, radSmall);
	ellipse(mouseX, 146, radSmall, radSmall);
	ellipse(mouseX, 70, radSmall, radSmall);

// right large circles
	fill('#E83F63');
	ellipse(reverseX, 449, radLarge, radLarge);
	ellipse(reverseX, 373, radLarge, radLarge);
	ellipse(reverseX, 298, radLarge, radLarge);
	ellipse(reverseX, 222, radLarge, radLarge);
	ellipse(reverseX, 146, radLarge, radLarge);
	ellipse(reverseX, 70, radLarge, radLarge);

// right smaller circles 
	fill('#6171E5');
	ellipse(reverseX, 33, radSmall, radSmall);
	ellipse(reverseX, 108, radSmall, radSmall);
	ellipse(reverseX, 184, radSmall, radSmall);
	ellipse(reverseX, 260, radSmall, radSmall);
	ellipse(reverseX, 335, radSmall, radSmall);
	ellipse(reverseX, 410, radSmall, radSmall);

// far left larger 
	fill('#E83F63');
	ellipse(mouseX - 100, 33, radLarge, radLarge);
	ellipse(mouseX - 100, 108, radLarge, radLarge);
	ellipse(mouseX - 100, 184, radLarge, radLarge);
	ellipse(mouseX - 100, 260, radLarge, radLarge);
	ellipse(mouseX - 100, 335, radLarge, radLarge);
	ellipse(mouseX - 100, 410, radLarge, radLarge);

	ellipse(mouseX - 300, 33, radLarge, radLarge);
	ellipse(mouseX - 300, 108, radLarge, radLarge);
	ellipse(mouseX - 300, 184, radLarge, radLarge);
	ellipse(mouseX - 300, 260, radLarge, radLarge);
	ellipse(mouseX - 300, 335, radLarge, radLarge);
	ellipse(mouseX - 300, 410, radLarge, radLarge);

// far left smaller
	fill('#6171E5');
	ellipse(mouseX - 200, 449, radSmall, radSmall);
	ellipse(mouseX - 200, 373, radSmall, radSmall);
	ellipse(mouseX - 200, 298, radSmall, radSmall);
	ellipse(mouseX - 200, 222, radSmall, radSmall);
	ellipse(mouseX - 200, 146, radSmall, radSmall);
	ellipse(mouseX - 200, 70, radSmall, radSmall);

	ellipse(mouseX - 400, 449, radSmall, radSmall);
	ellipse(mouseX - 400, 373, radSmall, radSmall);
	ellipse(mouseX - 400, 298, radSmall, radSmall);
	ellipse(mouseX - 400, 222, radSmall, radSmall);
	ellipse(mouseX - 400, 146, radSmall, radSmall);
	ellipse(mouseX - 400, 70, radSmall, radSmall);

// far right larger 
	fill('#E83F63');
	ellipse(reverseX + 100, 449, radLarge, radLarge);
	ellipse(reverseX + 100, 373, radLarge, radLarge);
	ellipse(reverseX + 100, 298, radLarge, radLarge);
	ellipse(reverseX + 100, 222, radLarge, radLarge);
	ellipse(reverseX + 100, 146, radLarge, radLarge);
	ellipse(reverseX + 100, 70, radLarge, radLarge);

	ellipse(reverseX + 300, 449, radLarge, radLarge);
	ellipse(reverseX + 300, 373, radLarge, radLarge);
	ellipse(reverseX + 300, 298, radLarge, radLarge);
	ellipse(reverseX + 300, 222, radLarge, radLarge);
	ellipse(reverseX + 300, 146, radLarge, radLarge);
	ellipse(reverseX + 300, 70, radLarge, radLarge);

// far right smaller
	fill('#6171E5');
	ellipse(reverseX + 200, 33, radSmall, radSmall);
	ellipse(reverseX + 200, 108, radSmall, radSmall);
	ellipse(reverseX + 200, 184, radSmall, radSmall);
	ellipse(reverseX + 200, 260, radSmall, radSmall);
	ellipse(reverseX + 200, 335, radSmall, radSmall);
	ellipse(reverseX + 200, 410, radSmall, radSmall);

	ellipse(reverseX + 400, 33, radSmall, radSmall);
	ellipse(reverseX + 400, 108, radSmall, radSmall);
	ellipse(reverseX + 400, 184, radSmall, radSmall);
	ellipse(reverseX + 400, 260, radSmall, radSmall);
	ellipse(reverseX + 400, 335, radSmall, radSmall);
	ellipse(reverseX + 400, 410, radSmall, radSmall);

// more right large
	fill('#E83F63');
	ellipse(reverseX - 100, 449, radLarge, radLarge);
	ellipse(reverseX - 100, 373, radLarge, radLarge);
	ellipse(reverseX - 100, 298, radLarge, radLarge);
	ellipse(reverseX - 100, 222, radLarge, radLarge);
	ellipse(reverseX - 100, 146, radLarge, radLarge);
	ellipse(reverseX - 100, 70, radLarge, radLarge);

	ellipse(reverseX - 300, 449, radLarge, radLarge);
	ellipse(reverseX - 300, 373, radLarge, radLarge);
	ellipse(reverseX - 300, 298, radLarge, radLarge);
	ellipse(reverseX - 300, 222, radLarge, radLarge);
	ellipse(reverseX - 300, 146, radLarge, radLarge);
	ellipse(reverseX - 300, 70, radLarge, radLarge);

// more right small 
	fill('#6171E5');
	ellipse(reverseX - 200, 33, radSmall, radSmall);
	ellipse(reverseX - 200, 108, radSmall, radSmall);
	ellipse(reverseX - 200, 184, radSmall, radSmall);
	ellipse(reverseX - 200, 260, radSmall, radSmall);
	ellipse(reverseX - 200, 335, radSmall, radSmall);
	ellipse(reverseX - 200, 410, radSmall, radSmall);

	ellipse(reverseX - 400, 33, radSmall, radSmall);
	ellipse(reverseX - 400, 108, radSmall, radSmall);
	ellipse(reverseX - 400, 184, radSmall, radSmall);
	ellipse(reverseX - 400, 260, radSmall, radSmall);
	ellipse(reverseX - 400, 335, radSmall, radSmall);
	ellipse(reverseX - 400, 410, radSmall, radSmall);

// more left larger 
	fill('#E83F63');
	ellipse(mouseX + 100, 33, radLarge, radLarge);
	ellipse(mouseX + 100, 108, radLarge, radLarge);
	ellipse(mouseX + 100, 184, radLarge, radLarge);
	ellipse(mouseX + 100, 260, radLarge, radLarge);
	ellipse(mouseX + 100, 335, radLarge, radLarge);
	ellipse(mouseX + 100, 410, radLarge, radLarge);

	ellipse(mouseX + 300, 33, radLarge, radLarge);
	ellipse(mouseX + 300, 108, radLarge, radLarge);
	ellipse(mouseX + 300, 184, radLarge, radLarge);
	ellipse(mouseX + 300, 260, radLarge, radLarge);
	ellipse(mouseX + 300, 335, radLarge, radLarge);
	ellipse(mouseX + 300, 410, radLarge, radLarge);

// more left smaller
	fill('#6171E5'); 
	ellipse(mouseX + 200, 449, radSmall, radSmall);
	ellipse(mouseX + 200, 373, radSmall, radSmall);
	ellipse(mouseX + 200, 298, radSmall, radSmall);
	ellipse(mouseX + 200, 222, radSmall, radSmall);
	ellipse(mouseX + 200, 146, radSmall, radSmall);
	ellipse(mouseX + 200, 70, radSmall, radSmall);

	ellipse(mouseX + 400, 449, radSmall, radSmall);
	ellipse(mouseX + 400, 373, radSmall, radSmall);
	ellipse(mouseX + 400, 298, radSmall, radSmall);
	ellipse(mouseX + 400, 222, radSmall, radSmall);
	ellipse(mouseX + 400, 146, radSmall, radSmall);
	ellipse(mouseX + 400, 70, radSmall, radSmall);
}

For my dynamic drawing I wanted to play with the creation of patterns. As you move the mouse in the x plane you can create different textures by positioning the circles. Additionally, you can use both x and y mouse movements to change the background circles, which I though added a nice element to help create more combinations of the image. This assignment was a little difficult to figure out at first, and I definitely want to keep playing with my code on this image to see what else I could do.

CJ Walsh – Looking Outwards – 02

Blooms by John Edmark

The generative art that I was super drawn to was the work of John Edmark. I have seen his projects, and every time things he has created amaze me. What interests me is the combination of media and the way he is able to confuse the viewers, while also instilling a sense of wonder. In some artworks, when the work is confusing it is hard to keep a viewers interest. But, his work leaves us wanting to know more. The other important element is the use of different media. His work utitilizes 3D making, light, movement and often sound edited over the finished videos.

His work is made using the golden ratio, the algorithmic ratio that is present in spirals within natural objects, ie. pinecones. Once he generates the forms, he coordinates the rate at which the object spins and the rate of the strobe to create the illusion of movement. Each of his objects utilizes unique and specific rates and combinations of forms within the golden ratio.

He outlines in his artist statement that a lot of his work explores patterns of space and growth, so it makes sense that utilizing a natural ratio is of interest to him. In my opinion, the work truly speaks to the creation of an innovative process and its exciting to see a piece of artwork that is unique from other works I have seen.

Artist Website: http://www.johnedmark.com/