## Shannon Case Looking Outwards – 07

Anna Powell-Smith is a web developer who specializes in data analysis and data visualization. She was frustrated with the way she was finding shoes while shopping online, so she created her own search engine for shoes online that can gather products from all across the UK. (view the site HERE). I really admire that she saw a problem with the way things were, so she invented a solution to fix it and help women who would struggle with the same issue. I don’t really know how the algorithm for this would work, but I would assume that it is similar to other search engines which optimize the results to answer exactly what the question asked it. I think that Anna’s artistic sensibilities are shown in the way that the page represents something that was bothering her, and the solution suits her own needs (as well as the needs of others).  Her other work can be viewed on her website.

## Shannon Case- Project 06 – Clock

For this project I decided to try to represent time as dripping water droplets. I wanted to show the hours, minutes, and seconds dripping down from the top of my canvas. I was thinking about water evaporating and dripping as a way to tell the passage of time. I chose to do a 24 hour time because thats what the assignment asked for and I think that the chance for that row to be longer will be a cool visual effect. I used loops to create the vertical columns of drips and add one drip for each second/minute/hour. The first column is hours, the middle is minutes, and the last is seconds.

``````//Shannon Case
//Section D
//scase@andrew.cmu.edu
//project 06

function setup() {
createCanvas(300,800);
background(0);
}

function draw() {

background('#9fdbdd');
var m = minute();
var s = second();  //sets variables
var h = hour();
var size = 10;
var yOffset = 10;
var spacing = 10;

for(var i = 0; i<h; i++){

ellipse(40, yOffset+i*spacing, size, size);
}

for(var i = 0; i<m; i++){

ellipse(120, yOffset+i*spacing, size, size);
}

for(var i = 0; i<s; i++){

fill('#0f025e');
ellipse(200, yOffset+i*spacing, size, size);
}

}

``````

## Shannon Case Looking Outwards- 06

John Cage was an American composer, writer, artist, and music theorist. Cage was a leader of the post-war avant-garde and one of the first to explore aleatoric music, non-standard use of musical instruments, and electroacoustic music. Aleatoric music is music in which some element of the composition is left to chance, or some primary elements of the work is left to be determined by the performers. He created many of these pieces so that others could perform them and interpret his instructions. I admire these works because they are instructional yet leave open to interpretation of the performer. This allows for a level of randomness that varies from performance to performance, making a body of work that can never really be replicated in the same way.

Here is a link to a video of some students performing his “Imaginary Landscape No.4” (https://www.youtube.com/watch?v=A0BNsBlzQII )

## Shannon Case – Project 05 – Wallpaper

``````//Shannon Case
//Section D
//scase@andrew.cmu.edu
//project 05

//sets global variables
var RingSize = 50;
var spacing = 125;
var innerRing = RingSize-10;
var x = 50;
var y = 50;
var bitX = 0;
var bitY = 0;

function setup() {
createCanvas(600,600);
background(0);
}

function draw() {

for(var bitX=0; bitX < width; bitX+=90) { //sets x location of bits
for(var bitY= 0; bitY < height; bitY+=30){ //sets y location of bits
bit(bitX, bitY); //draw bits
}

}

}

function bit(x,y) {
push();
translate(x,y);
fill(150); //creates left and right rings
ellipse(x,y,RingSize,RingSize);
ellipse(x+spacing,y,RingSize,RingSize);

fill(0); //fills the inner part of the rings
ellipse(x,y,innerRing,innerRing);
ellipse(x+spacing,y,innerRing,innerRing);

fill(150); //creates the mouth piece
rect(x+10,y-5,105,10,20);
ellipse(x+60,y,20,20);
pop();
}

``````

For this project I was inspired by a horse bit, which is a piece of equipment used in a horse’s mouth to aid in steering when they are ridden.  So I chose to make a loop that creates a pattern out of these bits. Below is a reference photo:

## Shannon Case Looking Outwards – 04

Google has created a virtual reality paintbrush called the TiltBrush, which now is able to react to sound. This means artists can create works that react to different sounds, and literally create musical paintings. Artists are able to create within the 360 VR experience and create layered sound reactive experiences. I find this project super interesting and inspiring because this is something I never imagined that would exist. I am not able to find the algorithm that creates these works, but through a bit of research I would assume that it has to do with code driven visuals that automatically adapt to a live audio input.

Here is a link to the project:

https://www.tiltbrush.com/

## Looking Outwards – 04 – Shannon Case

``````//Shannon Case
//Section D
//scase@andrew.cmu.edu
//Project 04

function setup() {
createCanvas(640,480);
background(200);
}

function draw() {

var x0 = 130; //initial x position
var y0 = height/2 - 60; //initial y position
var x1 = 130; //end initial x position
var y1 = height/2 + 60; //end initial y position
var incX = 22.5; //how much x moves by
var incY = 20; //how much y moves by

var nextBox = 180; //moves to next box

background('pink');
strokeWeight(3);
stroke('green');
for (i = 0; i<3; i++){
line(x0,y0,x1,y1);
x0 += nextBox; //moves to second gift box
x1 += nextBox;
}

//horizontal line
x0 = 130 + incX;
y0 = height/2 - 2*incY;
x1 = 130 - incX;
y1 = height/2 + 2*incY;
stroke('red');
for (i = 0; i<3; i++){
line(x0,y0,x1,y1);
x0 += nextBox; //moves to second gift box
x1 += nextBox;
}

//first red line
x0 = 130 + 2*incX; //moves to right by increment*2
y0 = height/2 - incY;
x1 = 130 - 2*incX;
y1 = height/2 + incY;
stroke('red');
for (i = 0; i<3; i++){
line(x0,y0,x1,y1);
x0 += nextBox;
x1 += nextBox;
}

//vertical green line
x0 = 130 + 3*incX;
y0 = height/2;
x1 = 130 - 3*incX;
y1 = height/2;
stroke('green');
for (i = 0; i<3; i++){
line(x0,y0,x1,y1);
x0 += nextBox;
x1 += nextBox;
}

//box
stroke('white')
noFill();
x0 = 0;
for (i = 0; i < 3; i++){
rect(60+x0, height/2 - 60, 140, 120);
x0 += nextBox;
}

noLoop();

println();
}
``````

For this assignment I chose to use for loops to do a string drawing of some presents. I wanted to experiment with making string drawings that were representative of real things. I’m also super excited for the holidays to come and wanted to make a piece about it 🙂

## Shannon Case – Looking Outwards- 03

Still Life (Vanitas) 2009

In this piece, Jason Salavon renders in a 17th century Dutch style, a constantly changing in animal skull and candlestick. As the skull evolves though animal type, such as: bear, human, baboon, and boar, the intermediate forms create many interesting fictional hybrids. I really admire the attention to detail, and the way that the transformation of the skull slowly evolves to create so many different combinations of features. I also love the metaphor it serves to animal and human evolution as well as the evolution of art and technology. The allusion to 17th century Dutch art portrayed in a modern medium was super interesting, and provokes a strong sense of evolution in the viewer.

Video of project:

## Shannon Case – Project-02 – Dynamic Drawing

``````

function setup() {
createCanvas(480, 640);
ellipseMode(CENTER);
}

function draw() {
background(0);
fill(255);

var m = max(min(mouseX, 640), 0); //mouse X min/max
var l = max(min(mouseY, 480),0); //mouse Y min/max
var sizeX = m * 350 / 400; //size of ellipses
var sizeY = l * 350 / 400; // size of ellipses
var colA = random(0,255);
var colB = random(0,255);
var colC = random(0,255); // all these create flashing black and white colors
var colD = random(0,255); //strobe light effect
var colE = random(0,255);
var colF = random(0,255);

//creates groups of flashing ellipses that strech and shrink with movements of the mouse
fill(colA);
ellipse(10+m*190/300, 300, sizeX, sizeX);
ellipse(30+m*80/460, 80+l*400 / 400, sizeX,sizeY);

fill(colB);
ellipse(200+m*50/200, 250,sizeX,sizeY);
ellipse(26+m*300/600, 70+l*400 / 500,sizeX,sizeX);

fill(colC);
ellipse(20+m*90 / 400, 280,sizeY,sizeX);
ellipse(30+m*40 / 400, 85+l*450 / 40,sizeX,sizeY);

fill(colE);
ellipse(200+m*90 / 400, 200, sizeX, sizeY);
ellipse(30+m*40 / 430, 80+l*45 / 400,sizeY,sizeX);
ellipse(30+m*40 / 400, 85+l*450 / 40,sizeX,sizeX);

fill(colE);
ellipse(100+m*75 / 400, 50, sizeY,sizeY);
ellipse(50+m*20 / 460, 550, sizeX,sizeY);
ellipse(30+m*40 / 400, 600, sizeY,sizeX);

fill(colF);
ellipse(20+m*90 / 400, 100,sizeY,sizeY);
ellipse(30+m*407 / 440, 65+l*350 / 400,sizeX,sizeY);

}
``````

For this project I decided to make a dynamic drawing that stretches and shrinks a series of ellipses when the mouse is moved around the canvas. I was listening to music while I was coding it and it made me think that the shapes were almost dancing around on the screen 🙂

## Shannon Case – Looking Outwards 02

The project I admire is called “The Johnny Cash Project”, a continuous work of generative art by Aaron Koblin. In the project, users can submit their own drawings of frames for the “Ain’t No Grave” music video by Johnny Cash. Users can draw any frame they want to, and submit it to the website. They are able to then choose between all the submitted frames and create a version of the video that they customize. The project is to pay tribute to Cash through connecting fans around the world. I really like this project because it connects people all over the world to work on a common collaborative project. I think that this is uniting for the world, and also a fitting tribute to Cash as he lives on through the work. I like that it is generated by humans, all working together to create a unique and customizable product.

Below are some images of frames from the video, as well as a link to a video about the project, and the actual project webpage.

Project Website: http://www.thejohnnycashproject.com/#

## Shannon Case- Project 02- Variable Face

``````// Shannon Case
// Section D
// scase@andrew.cmu.edu
// Project 02

//set variables
var eyeSize = 20;
var faceWidth = 100;
var faceHeight = 150;
var mouthX = 15;
var mouthY = 15;

function setup() {
createCanvas(640,480);
}

function draw() {
background(255,8,127); // makes the background hot pink

//faceshape
fill(238,90,200); //makes the face purple
ellipse(width / 2, height / 2, faceWidth,  faceHeight); //creates the face

//sets eye variables
var eyeLX = width / 2 - faceWidth * 0.25;
var eyeRX = width / 2 + faceWidth * 0.25;

//eyes
fill(255);  // Set fill to white
ellipse(eyeLX, height / 2, eyeSize, eyeSize);
ellipseMode(CENTER);
fill(127,255,12); //makes pupils lime green
ellipse(eyeLX, height / 2, eyeSize, eyeSize);

fill(255);  // Set fill to white
ellipse(eyeRX, height / 2, eyeSize, eyeSize);
ellipseMode(CENTER);
fill(127,255,12); // lime green color
ellipse(eyeRX, height / 2, eyeSize, eyeSize);

//mouth
fill(151,255,255); //fill the mouth blue
ellipse((width/2)+10,(height/2)+30, mouthX, mouthY); //adds a mouth

//eyebrows
fill(255);
rect(eyeLX-15, eyeLX-95, 30, 5); // left eyebrow
rect(eyeRX-15, eyeRX-150, 30, 5); //right eyebrow

}

function mousePressed() {
// when the user clicks, these variables are reassigned
// to random values within specified ranges.
faceWidth = random(80, 150);
faceHeight = random(100, 200);
eyeSize = random(10, 25);
mouthX = random(1,20);
mouthY = random(1,20);
}
``````

For this project I started with the simple template given. I wanted to create a face that showed a surprised emotion, as it is surprising when the face changes with each click. I chose to show this with wide open eyes, an open mouth, and raised eyebrows, one slightly above the other. I chose to give the background and face fun colors to make a more interesting shape. The hardest part of this assignment for me was keeping the shapes on the face, as sometimes they tended to fly out into random places.