Instructions:
You can click your mouse to move your character, (which changes from dream to dream) – and you change dreams by pressing 1,2,3,4 or 5 on your keyboard. When you’re in dreams you can hover over certain notes to see what that dream is about – (for the green woman you hover over her mouth since there is no note).

sketch

//Isadora Krsek 
//Ikrsek@andrew.cmu.edu
//Section C
//Final Project(Project 12): "Dreamscape"

var DreamTracker = (0);

//vars scenery 
var morningStars = [];

//dream5
var clouds;
var daSky;
var daGround;
var stillMan;
var message5;
var message5X = (145.5);
var message5Y = (298);

//dream4
var bed;
var woman;
var message4;
var message4X = (401);
var message4Y = (75);

//dream3
var building;
var tree;
var moon; 
var dirt;
var groundRipples;
var message3;
var message3X = (453);
var message3Y = (330);

//dream2
var spinnyThing;
var lamp;
var touchyGuy;
var LadyWithEyes;
var weirdKid; 
var note;
var message2;
var message2X = (405);
var message2Y = (311);

//dream1
var ripples;
var girl;
var papers;
var trees;
var message1;
var message1X = (155);
var message1Y = (252);

//vars for moveable character in dream 5
var kidFramez = []; // An array to store the images
var kidPreX; // The last X location of the character
var kidPreY; // The last Y location of the character
var kidTrack = (0); //to keep kidTrack fo index in array "kidFramez"
var kidX; //the current x location of character
var kidY = 360; //the current y location of character

//vars for moveable fly
var flyFramez = []; // An array to store the images
var flyPreX; // The last X location of the character
var flyPreY; // The last Y location of the character
var flyTrack = (0); //to keep flyTrack fo index in array "flyFramez"
var flyX; //the current x location of character
var flyY; //the current y location of character

//vars for main character
var mainCharFramez = []; // An array to store the images
var mainCharPreX; // The last X location of the character
var mainCharPreY; // The last Y location of the character
var trackMain = (0); //to keep trackMain fo index in array "mainCharFramez"
var mainCharX; //the current x location of character
var mainCharY = 300; //the current y location of character

var targetX; // The X goal, from the user's click
var targetY; // The Y goal, from the user's click 

//------let the code begin------------------------------------------

function preload(){
    //These URLs are for main character's walk cycle images
    var filenames = [];
    filenames[0] = "https://i.imgur.com/hi7fjid.png" 
    filenames[1] = "https://i.imgur.com/DlkJlK6.png" 
    filenames[2] = "https://i.imgur.com/KQcAqSF.png" 
    filenames[3] = "https://i.imgur.com/PgWS8Ek.png" 
    filenames[4] = "https://i.imgur.com/S7T2PoJ.png"  
    filenames[5] = "https://i.imgur.com/lNmB0Sh.png" 
    filenames[6] = "https://i.imgur.com/6rRh9JS.png" 
    filenames[7] = "https://i.imgur.com/lNmB0Sh.png" 
    //array for the walking cycle
    for(var i=0; i < filenames.length; i++) {
        mainCharFramez.push(loadImage(filenames[i]));
    }
    
    //dream 5 load-ins
    clouds = loadImage("https://i.imgur.com/K0WuYlD.png");
    daSky = loadImage("https://i.imgur.com/xtFA8AG.png");
    daGround = loadImage("https://i.imgur.com/KVhbWTf.png");
    stillMan = loadImage("https://i.imgur.com/JRbHrTk.png");
    message5 = loadImage("https://i.imgur.com/BuNkluX.png");
    //for the walking kid
    var filenames2 = [];
    filenames2[0] = "https://i.imgur.com/8IEaEQz.png" 
    filenames2[1] = "https://i.imgur.com/eSKype2.png" 
    filenames2[2] = "https://i.imgur.com/3Jc1SAO.png" 
    filenames2[3] = "https://i.imgur.com/xD4OH72.png" 
    filenames2[4] = "https://i.imgur.com/IT7FXKF.png"  
    filenames2[5] = "https://i.imgur.com/Syn95Ib.png" 
    filenames2[6] = "https://i.imgur.com/OHlPsCf.png" 
    filenames2[7] = "https://i.imgur.com/mJMmHXz.png"
    //array for walking
    for(var z=0; z < filenames2.length; z++) {
    kidFramez.push(loadImage(filenames2[z]));
    }
    
    //dream 4 load-ins
    bed = loadImage("https://i.imgur.com/0Lc8iQs.png");
    woman = loadImage("https://i.imgur.com/bINLqta.png");
    message4 = loadImage("https://i.imgur.com/HzVhpA1.png");
    
    //dream 3 load-ins
    building = loadImage("https://i.imgur.com/rNIfdQ5.png");
    tree = loadImage("https://i.imgur.com/hgvQQsn.png");
    moon = loadImage("https://i.imgur.com/b2JY2gV.png"); 
    groundRipples = loadImage("https://i.imgur.com/12PrKWt.png");
    dirt = loadImage("https://i.imgur.com/SIdPvf1.png");
    message3 = loadImage("https://i.imgur.com/ZqzLPma.png");
    
    //dream 2 load-ins
    spinnyThing = loadImage("https://i.imgur.com/VLWV1Ri.png");
    lamp  = loadImage("https://i.imgur.com/cfaSffr.png");
    touchyGuy = loadImage("https://i.imgur.com/bcEIg2B.png");
    LadyWithEyes = loadImage("https://i.imgur.com/AHm0VMD.png");
    weirdKid = loadImage("https://i.imgur.com/AkoodGn.png");
    note = loadImage("https://i.imgur.com/PP7U6Rg.png");
    message2 = loadImage("https://i.imgur.com/hbIgCMR.png");
    
    //dream 1 load-ins
    trees = loadImage("https://i.imgur.com/WXXHuxn.png");
    girl = loadImage("https://i.imgur.com/vI3RID0.png");
    papers = loadImage("https://i.imgur.com/gdNlDPK.png");
    ripples = loadImage("https://i.imgur.com/DpPYeiP.png");
    message1 = loadImage("https://i.imgur.com/VKZcrYA.png");
    
    //These URLs are for fly's cycle
    var filenames3 = [];
    filenames3[0] = "https://i.imgur.com/MSyp1iw.png" 
    filenames3[1] = "https://i.imgur.com/lVJeXAA.png" 
    filenames3[2] = "https://i.imgur.com/GENXp9g.png"
    filenames3[3] = "https://i.imgur.com/Th6Ckap.png" 
    //fly man 
    for(var q=0; q < filenames3.length; q++) {
      flyFramez.push(loadImage(filenames3[q]));
    }
    
}
 
function setup(){
    createCanvas(480, 375);
    background(30);
    imageMode(CENTER);
    frameRate(10);
    //Initialize main character postition & target
    mainCharPreX = 50; 
    mainCharPreY = height/2; 
    targetX = mainCharPreX;
    targetY = mainCharPreY;    
    //initialize fly's position & target
    flyPreX = 50;
    flyPreY = height/2;
    targetX = flyPreX;
    targetY = flyPreY;
        //initialize fly's position & target
    flyPreX = width/2;
    flyPreY = height/2;
    targetX = flyPreX;
    targetY = flyPreY;
    //initialize child's position & target
    kidPreX = width-50;
    kidPreY = 360;
    targetX = kidPreX;
    targetY = kidPreY;   
    
    //stars
    //# which allows for new star to appear
    StarProb = 30; 
    //morningStars inital amount 
    for (var i = 0; i < 22; i++) {
      morningStars[i] = new Star(random(width));
    } 
} 
 
function draw(){
  //cycle through dreams by pressing 1,2,3,4, or 5
    if (DreamTracker === 0){
      Dream1();  
    } else if (DreamTracker == 1){
      Dream2();
    } else if (DreamTracker == 2){
      Dream3();
    } else if (DreamTracker == 3){
      Dream4();
    } else if (DreamTracker == 4){
      Dream5();
    }
}

function Dream1(){
    push();
    scale(.81);
    noStroke();
    fill(224,196,195);
    rect(0,0,width+120,height-100); //sky
    drawStars();
    noStroke();
    fill(192,198,210);
    rect(0,height-124,width+120,height); //ground
    image(trees,302,215,trees.width*1.2,trees.height*1.2);
    image(girl,312,265,girl.width*1.1,girl.height*1.1);
    image(ripples,312,219,ripples.width*1.3,ripples.height*1.1);
    image(papers,312,255,papers.width*1.2,papers.height*1.2);
    pop();
    fly();
    //hover over note to see message
    if(dist(mouseX,mouseY,message1X,message1Y)<10){
      image(message1,width/2,height/2);
    }
}

function Dream2(){
    push();
    scale(.81);
    noStroke();
    mainCharY = 305;
    fill(223,212,119);
    rect(0,0,width+120,170); //sky
    noStroke();
    fill(252,207,185);
    rect(0,170,width+120,height); //ground
    image(spinnyThing,312,225,spinnyThing.width*1.2,spinnyThing.height*1.2);
    image(lamp,300,225,lamp.width*1.2,lamp.height*1.2);
    image(touchyGuy,312,225,touchyGuy.width*1.2,touchyGuy.height*1.2);
    image(LadyWithEyes,312,225, LadyWithEyes.width*1.2, LadyWithEyes.height*1.2);
    mainCharWalks();
    image(weirdKid,312,225,weirdKid.width*1.2,weirdKid.height*1.2); 
    image(note,312,225,note.width*1.2,note.height*1.2);
    pop();
    
    //hover over note to see message
    if(dist(mouseX,mouseY,message2X,message2Y)<15){
      image(message2,width/2,height/2);
    }
}

function Dream3(){
    push();
    scale(.75);
    mainCharY = 405;
    noStroke();
    fill(179,132,13);
    rect(0,0,width+180,height*2); //sky
    fill(51,45,29);
    rect(0,height+20,width+180,height*2); //ground
    drawStars();
    image(dirt,312,235,dirt.width*1.3,dirt.height*1.3);
    image(moon,310,250,moon.width*1.3,moon.height*1.3);
    image(tree,312,235,tree.width*1.3,tree.height*1.3);
    image(groundRipples,312,235,groundRipples.width*1.3,groundRipples.height*1.3);
    image(building,312,235,building.width*1.3,building.height*1.3);
    image(note,500,352,note.width/1.5,note.height/1.5);
    mainCharWalks();
    pop();

    //hover over note to see message
    if(dist(mouseX,mouseY,message3X,message3Y)<10){
      image(message3,width/2,height/2);
    }
}

function Dream4(){
    push();
    scale(.75);
    noStroke();
    fill(32,34,26);
    rect(0,0,width,height); //sky
    image(bed,320,250,bed.width*1.3,bed.height*1.4)
    image(woman,320,250,woman.width*1.3,woman.height*1.4)
    pop();
    fly();
    //hover over note to see message
    if(dist(mouseX,mouseY,message4X,message4Y)<10){
      image(message4,width/2,height/2);
    }
}

function Dream5(){
    push();
    scale(.75);
    //the sky is is comprised of two images
    image(daSky,320,210,daSky.width*1.6,daSky.height*1.2)
    drawStars();
    image(clouds,320,250,clouds.width*1.3,clouds.height*1.4)
    image(daGround,320,250,daGround.width*1.3,daGround.height*1.4)
    image(stillMan,585,345,stillMan.width*1.05,stillMan.height*1.05)
    image(note,90,309,note.width/1.5,note.height/1.5);
    image(mainCharFramez[5],40,412)
    pop();
    push();
    scale(.75)
    kidWalks();
    pop();
    
    //hover over note to see message
    if(dist(mouseX,mouseY,message5X,message5Y)<10){
      image(message5,width/2,height/2);
    }
    
  
}

//all of the moveable characters
function fly(){
  //--------flying conditions...
    var dx = targetX - flyPreX;
    var dy = targetY - flyPreY;
    var distanceFromCharacterToTarget = sqrt(dx*dx + dy*dy);
    //control how fly moves toward target 
    flyX = lerp(flyPreX,targetX,0.15);
    flyY = lerp(flyPreY,targetY,0.15);
    //keep looping through the images seamlessly 
    if (flyTrack >= flyFramez.length){
      flyTrack = 0; 
    }
  //--------the actual flying part & more conditions...
    if (flyX < flyPreX){
      push();
      scale(-1,1);//flip image 
      image(flyFramez[flyTrack],flyX*-1,flyY); //you multiply the X-coordinate by -1 so it walks in the right direction 
      pop();
    }
    //otherwise if it's larger, it will be flying right
    else if (flyX >= flyPreX){
      image(flyFramez[flyTrack],flyX,flyY);
    }
  //------------------Refresh values...
    flyPreX = flyX;
    flyPreY = flyY;
    //cycle through the walking images 
    flyTrack = flyTrack + 1
}    

function kidWalks(){
  //--------walking conditions...
    var dx = targetX - kidPreX;
    var dy = targetY - kidPreY;
    var distanceFromCharacterToTarget = sqrt(dx*dx);
    //control how character moves toward target 
    kidX = lerp(kidPreX,targetX,.15);
    //keep looping through the images seamlessly 
    if (kidTrack >= kidFramez.length){
      kidTrack = 0; 
    }
  //--------the actual walking part & more conditions...
  //if the current x location is smaller than last x location, walk left
    if (distanceFromCharacterToTarget < 15 && kidX < kidPreX){
      push();
      scale(-1,1);//flip image 
      image(kidFramez[2],kidX*-1,kidY);
      pop();
    } 
    else if(distanceFromCharacterToTarget < 15){
      image(kidFramez[2],kidX,kidY);
    } 
    else if(kidX < kidPreX){
      push();
      scale(-1,1);//flip image 
      image(kidFramez[kidTrack],kidX*-1,kidY); 
      pop();
    }
    //otherwise if larger, walk right
    else if(kidX >= kidPreX){
      image(kidFramez[kidTrack],kidX,kidY);
    }
  //------------------Refresh values...
    kidPreX = kidX;
    kidTrack = kidTrack + 1;
}

function mainCharWalks(){
  //--------walking conditions...
    var dx = targetX - mainCharPreX;
    var dy = targetY - mainCharPreY;
    var distanceFromCharacterToTarget = sqrt(dx*dx );
    //control how character moves toward target 
    mainCharX = lerp(mainCharPreX,targetX,.15);
    theY = lerp(mainCharPreY,targetY,.15);
    //keep looping through the images continuously/seamlessly 
    if (trackMain >= mainCharFramez.length){
      trackMain = 0; 
    }
  //--------the actual walking part & more conditions...
    //if the current x location is smaller than last x location, walk left
    if(distanceFromCharacterToTarget < 15 && mainCharX < mainCharPreX){
      push();
      scale(-1,1);//flip image 
      image(mainCharFramez[7],mainCharX*-1,mainCharY);
      pop();
    } 
    else if(distanceFromCharacterToTarget < 15){
      image(mainCharFramez[7],mainCharX,mainCharY);
    } 
    else if (mainCharX < mainCharPreX){
      push();
      scale(-1,1);//flip image 
      image(mainCharFramez[trackMain],mainCharX*-1,mainCharY); 
      pop();
    }
    //otherwise if larger, walk right
    else if (mainCharX > mainCharPreX){
      image(mainCharFramez[trackMain],mainCharX,mainCharY);
    }
  //------------------Refresh values...
    mainCharPreX = mainCharX;
    mainCharPreY = theY;
    trackMain = trackMain + 1;
}

//other stuff
function mousePressed(){
    targetX = mouseX;
    targetY = mouseY;
}

function keyPressed(){
    if (key == "1"){
      DreamTracker = (0);
    } else if (key == "2"){
      DreamTracker = (1);
    } else if (key == "3"){
      DreamTracker = (2);
    } else if (key == "4"){
      DreamTracker = (3);
    } else if (key == "5"){
      DreamTracker = (4);
    }
}    

function drawStars(){
  //when random # is smaller than probability then new start occurs  
  if (StarProb > random(0,100)) {
    morningStars.push(new Star(width));
  }
  for (var i = 0; i < morningStars.length; i++) {
    morningStars[i].move(); //update star array
    morningStars[i].display(); 
  //if star goes out of boundary, remove it
    if (morningStars[i].x < 0) { 
      morningStars.splice(i, 1);
    }    
  }
}

//generate morningStars
function Star(xLocation){
    var randoOpa = random(80,180); //have the brightness of stars vary 
    var randoSize = random(0.5,2); //have star size vary 
    strokeWeight(randoSize);
    this.x = xLocation;//controlled above by random width 
    this.y = random(1,380); //range for stars to appear
    this.speed = (-1.5); //speed       
    this.move = function() {
      this.x += this.speed; //move the stars
    }
    this.display = function() {
	  //draw the stars here 
	    stroke(202,195,232,80);
      fill(202,195,232,randoOpa);
	    ellipse(this.x, this.y,randoSize,randoSize);
    }
}

Conclusion:
Overall this project was exhausting to complete – but I’m pleased with the way it looks. Each image was hand drawn in photoshop with a one pixel brush so as to have the utmost control over my vision.  I spent all of my free-time working on this, trying to bring it to life as best I could. There is still much more I would’ve liked to do with it, such as adding smoother transitions between dream sequences or adding more notes but overall it really sticks close to how I envision it in my head. In terms of the notes, I intended for them to be difficult to read to act as a parallel to the ambiguity and hazy quality of dreams – how things can seem so fuzzy and vague but you still can understand what’s going on perfectly.

Here’s a video of a play through with all the actions:

Here are some photos of each scene and the corresponding note:

If you want to know what each of the notes say, here is a quick copy of each of them:

Note from dream 1:
“I remember a young girl desparately searching for something… she was wading through papers in a clear blue body of water. There were pathetic and skinny little trees that grew around and behind her directly from the water which was a bit of an odditiy… I remeber trying to call out to her – ask her what she was looking for or if I could help… but she ignored me. The more I tried to screm the less I seemed to make a sound and I was quickly becoming panicked – it was at that point that I realized thtat I was just a fly. She couldn’t hear or understand me no matter how hard I would try and I was nothing more than a buzzing nuisance. I resigned to watch after realizing this and was surprised by the fact that she was so involved in her task – that she was completely unbothered by the annoying buzzing coming from me.”

Note from dream 2:
“There were three people all standing or sitting around, it was outside – but I’m not exactly sure where – mostly because we were in the grass but there was also a lamp plugged in outside? I tried to turn it on, but the lamp was broken. The sky in combination with the color of the ground reminded me of an anemic watermelon – maybe this is summer then? Anywho I remember seeing a girl sitting down and a gentlemen beside her -only he wasn’t much of a gentleman… his hands were crawling up her leg and I could see her whole face go black (well, everything but her eyes which remained a piercing white color). There was also a strange you child – just watching. Everyone had eyes but the only one with a mouth was Mr.Touchy feely.. I still don’t understand this.”

Note from dream 3:
“This dream I don’t remember all too well – all I remember is how it looked and felt to be there, the way the stars moved across the sky (as they always do in my dreams for some reason) and the odd abandoned structure sitting still beneath a blossomig tree – It looked so rickety, like it could’nt possibly hold anyone up inside of it… but somehow in that absence of another person – you could feel them there… I don’t know who exactly, just that there was supposed to be someone there. There is some presence in absence here…”

Note from dream 4:
“I remember this dream so vividly – it was beautiful – the plush bed reminded me of the way that cloth is rendered in paintings of Vesnus by TItian or other great artsists who inspired the classical period – the colors were off though – the women, although supple and lush was a gastly shade of green and somehow upon looking at her I knew she was dead. Dead people aren’t usually green – I know, but it was that weird “dreamer’s intuition” where you know nothing makes sense but somehow you are able to piece things together and just know things somehow. What didn’t know was why or how. Maybe there’se something to be said for the fact that I appeared asa fly in this dream as well…”

Note from dream 5:
“It was dark – like time was moving backward . The sky shifted from a deep red to dark blue – almost like a sunset? But not quite. The clouds draped down the sky and had an overwhleming presence – they were almost too big – and I remember the way the stars moved behind the clouds – like they were being projected in motion across the sky – but the strangest part were the two people I saw – one not even moving, but entranced by the sky – the other walked backwards and refused to make eye-contct. I couldn’t move at all – I was trapped like the one looking to the sky and I only remember the fear that filled my body at the younger one moved closer – I was unsure of what they would do”

*fyi: there are 3 inspiring projects listed here, and I felt each one of them was important to explaining my inspiration and because of that I couldn’t exclude one of them, so here they are…

Inspiration Project 1
Awkward Dimensions Redux:

Awkward dimensions Redux is a game available on steam as of October 21st,2016, meant for computers. It is a game that explores dreams and their ever-confusing, ever-scattered logic (or lack thereof) but convincing and astoundingly real-feeling qualities. It capitalizes on the unpredictability, perplexing, and looping qualities that all dreams seem to retain.  The game itself is made by a Denver based high school student in college, Steven Harmon, who’s studies focus on psychology and theater (both of which shine through in the actual game). The game itself relies heavily on metaphors to make points and many of the functions from dreamscape to dreamscape are representative of this. For example The interactions are limited to walking, jumping, inspecting, picking up stuff, and solving some small puzzles. But, the amount that one can interact or the amount of control they have varies from scene to scene, and on occasion they have no control at all.

Here’s a link to a video for it:   https://www.youtube.com/watch?v=3gQr39Pmx5E

Inspiration Project 2
That Dragon, Cancer

That Dragon, Cancer  is a game dedicated to and based on a true story which revolves around the lives of a couple and their newborn child. Their son was diagnosed with terminal brain cancer at only 12 months old leaving him partially blind, and unable to speak. The game documents his struggle and fight with cancer as well as the emotional ups and downs for the parents during they time they had with Joel (the son), before he died. Through a mixture of first and third person perspective you are led through an extremely touching, but heartbreaking narrative and are invited to slow down for a moment to immerse yourself in the intimate narrative of another person’s life. There is an ambiguity maintained throughout the game as to who you are, leaving a hefty amount of room for interpretation and allegory. There is also a distance maintained between you and the characters in the way they are visually represented – blockish, with very few details across faces, however – regardless the story and the game play pull you in – it absorbs you and becomes you in the sense that you start to experience what Joel’s parents went through as though you yourself are going through it. There’s not a lot that can be said about it that matches how it feels to play, so I suggest if you really want to understand the game that you play it and experience it for yourself.

Embedded video:

Inspiration Project 3
The Game: The Game

Angela Washko’s installation/game  is unusual in both what it represents, and how it plays. It was first exhibited August, 2016 and is a continuation of a series  called ‘BANGED’ done by the artist revolving around her interactions with player/pick-up artist/overall misogynist, manosphere figurehead, Roosh V.  This game is not about him, but about exposing and discussing the practices used by several prominent pick-up artists (or seduction coaches as they like to be known as). In the game the player is a character to undergoes interactions with each of the coaches (all of whom are trying to bust a move on the player), in a dialogue-based format similar to a lot of dating sims. The coaches are all trying to seduce the player using the techniques and practices mentioned in their respective instructional guides and video materials. This allows for a fascinating conversation to take place on the social construction of dating and the experience of being a woman and exploring this confusing and often uncomfortable terrain.

Link to a video of the artist speaking about her work and the background behind it (videos of the actual piece are in this): https://vimeo.com/225466353

Comparison: 
Each of these games have something big  in common: they all address pressing issues or big themes with a relative subtlety or creative sensitivity, in very different ways. I think that is what I admire most about them – how they take something touchy, hurtful, or confusing – and then couple our experience with them and comfort/capabilities for idea-intimacy in gaming. The way that each of the games do it is so different as well, which is be-fitting considering they are each discussing very different concepts. Overall I hope to draw a lot from each of the projects that I mentioned and that I am able to communicate that same level of intimacy with my ideas allowing the player to become emotionally invested or even just sympathetic to what occurs in the game or what happens to the character. I hope to also be able to accurately match certain ideas or concepts regarding things just through the gameplay and format/construction of the ways the game can be played. In all honesty, I’m not sure that any of the games missed out on opportunities – they each seemed to hit the nail on the head in how effectively they were able to get players to really let go and become attached to the events transpiring (particularly That Dragon, Cancer).

I had two ideas overall:

The first idea is a bit ambitious, but I was thinking that for the final project I would like to create a video game. I’ve been thinking a lot about sexual assault considering all of the events and exposés that have occurred even just within the past two months amongst celebrities and stars – and in thinking about that I also was brought to ponder the way that we teach kids or even explain it to adults. The game I wanted to create would explore how to explain the idea of it and what it is/what it feels like in a subtle and sensitive way while simultaneously not trivializing it – as someone who has experienced it, I know it’s not an easy topic to discuss. I would use P5.js, and a combination of sound and animation to make this an RPG. It’s a very serious and touchy topic, but I also feel that it’s important to think about and playing through the perspective of someone who experiences it, can create a gateway to being able to sympathize if you haven’t experienced it first hand. I think that is the power of games. Obviously this is a tough subject and needs a lot ofthought and consideration, but I am invested in exploring this idea.

The second idea is somewhat more simple, though also a interactive game – and I wanted it to act as a code-based, explorable/episodic moving painting of the nightmares I experienced through my freshman year. To give some background/context – from the months covering end of fall semester in freshman year to the begging of the spring semester – every night I woke up periodically from a series of terrible nightmares, and it got to the point where towards the end, I tried to avoid going to bed at all – so as to avoid having the nightmares – I also wrote extensively about the dreams I would have since they were always so vivid. At the time I was going through some traumatic things at the time and the 3 months of nightmares that ensued were partially a result of that. Now that some time has passed I think I would like to revisit that time from a different perspective, and try to take the opportunity for creating a game out of this experience to try and explore it as well as take some time to understand this situation from my past a little better. It will be made in p5.js with some images/animations pulled from photoshop or illustrator or wherever I decide to make them, and I think that I will include some ambient sound, but beyond that the piece will rely on text (if there is anything said at all in it).

I don’t think I will be collaborating with anyone else for either of these ideas, as these are both such powerful/personal thing – and both of them are of course subject to change. It would be great to get some feedback on each of these ideas and what seems manageable so that I can narrow down the project scope and figure out what to focus on for the final project.

My original idea was to create a field of sunflowers using turtles that changed the way that they faced based on the the location of the sun (which is attached to the mouse), but unfortunately I had so much other work that I couldn’t spend as much time as I wanted on this and I had to simplify my idea and so I stuck with the sunflower aspect and just had the little buds and smaller petals around the center be modified by the mouse location (just circle the mouse around the center and it will draw more buds).

I hope that I get the chance to expand on this code and actually make sunflowers that change the way that they face based on the location of the mouse/sun, or even more time in the future to modify these

screenshots

sketch

//Isadora Krsek 
//Ikrsek@andrew.cmu.edu
//Section C
//Project 11: "Sunflower center"

var ang = (90);
var leng = (3);
var gold = (137.507764); //golden angle 
var space = (1);
var transX = (140);
var transY = (160);
var turtle;
var turtle2;
var r; 
var g; 
var b; 
var randG;
var randB;
 
function setup() {
    createCanvas(480, 480);
    background(219,240,253);
    
    petals();
    petals2();
    petals3();
    petals4();
    petals5();
}
 
 
function draw() {
    var a = atan2(mouseY-height/2, mouseX-width/2);
    var b = atan2(mouseY-height/2, mouseX-width/2);
  
    push();
    translate(233,230);
    rotate(b);
    scale(.15,.15);
    mousePetals();
    pop();
  
    
    push();
    translate(233,230)
    rotate(a);
    scale(.1,.1);
    sunflowerOuterBuds();
    pop();
    
    push();
    translate(transX,transY+2);
    sunflowerCenterBack();
    scale(.24,.24);
    translate(145,68);
    sunflowerCenter(); 
    pop();
    
    
        
    push();
    translate(transX+98,transY-25);
    scale(.25,.25);
    sunflowerOuterBuds2();
    rotate(90);
    translate(390,-540);
    sunflowerOuterBuds3();
    rotate(180);
    translate(-270,-630);
    sunflowerOuterBuds2();
    rotate(270);
    translate(-60,-20);
    sunflowerOuterBuds3();
    pop();
    
    
}
 
//sunflower center turtle 
  //draw that sunflower center
function sunflowerCenter(){
    turtle = makeTurtle(width/2, height/2);
    turtle.penDown();
    //colors for gradient 
    var brownColor  = color(226,145,7); // 226,145,7 //62, 42, 20
    var greenColor  = color(73,161,3);
    
    turtle.setWeight(10);
    //turtle square placement rendering 
    for( var i = 0; i< 300; i++){ 
      //color gradient for center 
      turtle.setColor(lerpColor(greenColor, brownColor, i/350));
      turtSquare(turtle, ang, leng); //my turtle function
        turtle.penUp();
        turtle.forward(space*i); //spacing between stuff
        turtle.left(gold); 
        turtle.penDown();
  }
} 
  //shape of the turtle each time it loops
function turtSquare(turtle, ang, leng){ //hexagons because my octagon refused to cooperate
        turtle.right(ang);
        turtle.forward(leng);
        turtle.right(ang);
        turtle.forward(leng);
        turtle.right(ang);
        turtle.forward(leng);
        turtle.right(ang);
        turtle.forward(leng);
}

function sunflowerCenterBack(){
   var radius = (93);
   noStroke();
    fill(39, 20, 13);
    ellipse(93,72,radius,radius);
   
}


//little buds outside the sunflower center 
function sunflowerOuterBuds(){
    r = random(193,255);
    g = random(98,211);
    b = random(4,67);
    
    turtle = makeTurtle(width/2-100, height/2+100);
    turtle.penDown();
    turtle.setColor(color(r,g,b));
    turtle.setWeight(2);
    //turtle bud placement rendering 
    for( var i = 0; i< 200; i++){ 
      //darker yellow = (237,183,,4); &  //brighter yellow = (252,198,,21);
      budShape(turtle); //my turtle function
        turtle.penUp();
        turtle.left(gold);
        turtle.forward(space*width/1.5); //spacing between stuff
        if (i % 2 == 1 ){
        turtle.penDown();
        }
  }
}

function sunflowerOuterBuds2(){
    turtle = makeTurtle(width/2-100, height/2+100);
    turtle.penDown();
    turtle.setColor(color(237,183,4));
 
    turtle.setWeight(2);
    //turtle bud placement rendering 
    for( var i = 0; i< 200; i++){ 
      //darker yellow = (237,183,4); &  //brighter yellow = (252,198,21);
      budShape(turtle); //my turtle function
        turtle.penUp();
        turtle.left(gold);
        turtle.forward(space*width/1.5); //spacing between stuff
        if (i % 2 == 1 ){
        turtle.penDown();
        }
  }
}

function sunflowerOuterBuds3(){
    turtle = makeTurtle(width/2-100, height/2+100);
    turtle.penDown();
    turtle.setColor(color(255,229,142));
 
    turtle.setWeight(2);
    //turtle bud placement rendering 
    for( var i = 0; i< 200; i++){ 
      //darker yellow = (237,183,4); &  //brighter yellow = (252,198,21);
      budShape(turtle); //my turtle function
        turtle.penUp();
        turtle.left(gold);
        turtle.forward(space*width/1.5); //spacing between stuff
        if (i % 2 == 1 ){
        turtle.penDown();
        }
  }
}

function budShape(turtle){
  var angle = 90;
  var lengg = 10;
        turtle.right(angle);
        turtle.right(angle+60);
        turtle.forward(lengg+1);
        turtle.right(angle+20);
        turtle.forward(lengg);
        turtle.left(angle-65);
        turtle.forward(lengg);
        turtle.right(angle+20);
        turtle.forward(lengg);
        turtle.left(angle-40);
        turtle.forward(lengg);  
        turtle.right(angle+25);
        turtle.forward(lengg);  
        turtle.left(angle-45);
        turtle.forward(lengg); 
        turtle.right(angle+25);
        turtle.forward(lengg); 
        turtle.left(angle-45);
        turtle.forward(lengg);
        turtle.right(angle+25);
        turtle.forward(lengg);
        
}

//petals
function petals(){
    turtle = makeTurtle(width/2, height/2);
    turtle.penDown();
    
    turtle.setWeight(4);
    //turtle square placement rendering 
    for( var i = 0; i< 9; i++){ 
      //color gradient for center 
      turtle.setColor(color(254,209,40));
      petalShape(turtle); //my turtle function
        turtle.penUp();
        turtle.forward(space*i); //spacing between stuff
        //turtle.left(gold); 
        turtle.penDown();
  }
} 

function petalShape(turtle){
  var angle = 90;
  var lengg = 140;
      turtle.right(angle-10);
      turtle.forward(lengg);
      turtle.right(25);  
      turtle.forward(lengg/2);
      turtle.right(145);  
      turtle.forward(lengg/2);
      turtle.right(30);
      turtle.forward(lengg);
}

//petals set 2
function petals2(){
    turtle = makeTurtle(width/2, height/2);
    turtle.penDown();
    turtle.setWeight(4);
      for( var z = 0; z< 9; z++){ 
      //color gradient for center 
      turtle.setColor(color(255,233,109));
      petalShape2(turtle); //my turtle function
        turtle.penUp();
        turtle.forward(space*z); //spacing between stuff
        //turtle.left(gold); 
        turtle.penDown();
  }
} 

function petalShape2(turtle){
  var angle = 60;
  var lengg = 140;
      turtle.right(angle-10);
      turtle.forward(lengg);
      turtle.right(25);  
      turtle.forward(lengg/2);
      turtle.right(145);  
      turtle.forward(lengg/2);
      turtle.right(30);
      turtle.forward(lengg);
}

//petals set 3
function petals3(){
    turtle = makeTurtle(width/2, height/2);
    turtle.penDown();
    turtle.setWeight(4);
      for( var z = 0; z< 9; z++){ 
      //color gradient for center 
      turtle.setColor(color(252,224,72));
      petalShape3(turtle); //my turtle function
        turtle.penUp();
        turtle.forward(space*z); //spacing between stuff
        //turtle.left(gold); 
        turtle.penDown();
  }
} 

function petalShape3(turtle){
  var angle = 70;
  var lengg = 140;
      turtle.right(angle-10);
      turtle.forward(lengg);
      turtle.right(25);  
      turtle.forward(lengg/2);
      turtle.right(145);  
      turtle.forward(lengg/2);
      turtle.right(30);
      turtle.forward(lengg);
}


//petals set 4
function petals4(){
    turtle = makeTurtle(width/2, height/2);
    turtle.penDown();
    turtle.setWeight(4);
      for( var z = 0; z< 9; z++){ 
      //color gradient for center 
      turtle.setColor(color(255,233,109));
      petalShape4(turtle); //my turtle function
        turtle.penUp();
        turtle.forward(space*z); //spacing between stuff
        //turtle.left(gold); 
        turtle.penDown();
  }
} 

function petalShape4(turtle){
  var angle = 40;
  var lengg = 140;
      turtle.right(angle-10);
      turtle.forward(lengg);
      turtle.right(25);  
      turtle.forward(lengg/2);
      turtle.right(145);  
      turtle.forward(lengg/2);
      turtle.right(30);
      turtle.forward(lengg);
}

//petals set 5 
function petals5(){
    turtle = makeTurtle(width/2, height/2);
    turtle.penDown();
    turtle.setWeight(4);
      for( var z = 0; z< 9; z++){ 
      //color gradient for center 
      turtle.setColor(color(255,233,109));
      petalShape5(turtle); //my turtle function
        turtle.penUp();
        turtle.forward(space*z); //spacing between stuff
        //turtle.left(gold); 
        turtle.penDown();
  }
} 

function petalShape5(turtle){
  var angle = -18;
  var lengg = 140;
      turtle.right(angle-10);
      turtle.forward(lengg);
      turtle.right(25);  
      turtle.forward(lengg/2);
      turtle.right(145);  
      turtle.forward(lengg/2);
      turtle.right(30);
      turtle.forward(lengg);
}

//mouse petals 
function mousePetals(){
    turtle = makeTurtle(width/2, height/2);
    turtle.penDown();
    turtle.setWeight(4);
      for( var z = 0; z< 1; z++){ 
      //color gradient for center 
      //orangeCol = (242,139,0);
      //lightOranCol = (242,178,62);
      //var randR = random();
      randG = random(139,178);
      randB = random(0,62); 
      
      
      turtle.setColor(color(242,randG,randB));
      mousePetalShape(turtle); //my turtle function
        turtle.penUp();
        turtle.forward(space*z); //spacing between stuff
        //turtle.left(gold); 
        turtle.penDown();
  }
} 

function mousePetalShape(turtle){
  var angle = -18;
  var lengg = 140;
      turtle.right(angle-10);
      turtle.forward(lengg);
      turtle.right(25);  
      turtle.forward(lengg/2);
      turtle.right(145);  
      turtle.forward(lengg/2);
      turtle.right(30);
      turtle.forward(lengg);
}





function turtleLeft(d){this.angle-=d;}function turtleRight(d){this.angle+=d;}
function turtleForward(p){var rad=radians(this.angle);var newx=this.x+cos(rad)*p;
var newy=this.y+sin(rad)*p;this.goto(newx,newy);}function turtleBack(p){
this.forward(-p);}function turtlePenDown(){this.penIsDown=true;}
function turtlePenUp(){this.penIsDown = false;}function turtleGoTo(x,y){
if(this.penIsDown){stroke(this.color);strokeWeight(this.weight);
line(this.x,this.y,x,y);}this.x = x;this.y = y;}function turtleDistTo(x,y){
return sqrt(sq(this.x-x)+sq(this.y-y));}function turtleAngleTo(x,y){
var absAngle=degrees(atan2(y-this.y,x-this.x));
var angle=((absAngle-this.angle)+360)%360.0;return angle;}
function turtleTurnToward(x,y,d){var angle = this.angleTo(x,y);if(angle< 180){
this.angle+=d;}else{this.angle-=d;}}function turtleSetColor(c){this.color=c;}
function turtleSetWeight(w){this.weight=w;}function turtleFace(angle){
this.angle = angle;}function makeTurtle(tx,ty){var turtle={x:tx,y:ty,
angle:0.0,penIsDown:true,color:color(128),weight:1,left:turtleLeft,
right:turtleRight,forward:turtleForward, back:turtleBack,penDown:turtlePenDown,
penUp:turtlePenUp,goto:turtleGoTo, angleto:turtleAngleTo,
turnToward:turtleTurnToward,distanceTo:turtleDistTo, angleTo:turtleAngleTo,
setColor:turtleSetColor, setWeight:turtleSetWeight,face:turtleFace};
return turtle;}

My example of computer music is interesting in it’s creativity and alternative utilization of a computer based music program which ends in a pretty interesting way. Using an MIDI editor, Andrew Huang drew a unicorn on the digital score sheet and took a video of the music it played. He used the MIDI as a drawing device and literally gave a voice to a drawing he made, allowing it to sing for itself in a sense. The only date available is the date the artist posted the video to YouTube which is Feb. 20th, 2017 – so this is a very recent piece.

There’s not a lot I can say about it considering it’s not really meant to be viewed as a formal art piece, aside from mentioning how I just found this whole concept to be quite funny and clever, and the music itself sounds surprisingly good. It’s easy to imagine how something like this could turn into somebody’s art practice, and in fact it’s actually inspired many other people to create drawings that double as musical compositions using MIDI as a medium/interface – there are even tutorials that help you learn how to do it yourself.
In terms of the algorithms associated work the work, I’m not so sure how heavy of an aspect it is in the creation of these sound drawings, and the algorithms lie in the MIDI program itself.

Here’s a link to the video:

“When Pigs Fly”

sketch

//Isadora Krsek
//Ikrsek@andrew.cmu.edu
//Section C
//Project 10: Landscape
//"When Pigs Fly"

var morningStars = [];
var terrainZoom = 0.0099;
var waterZoom = 0.0005;
var terrainSpeed = 0.0004;
var mistZoom = 0.004;

var pigsThatFly = []; // An array to store the images
var pigX;  // The last X location of the character
var pigY;  // The last Y location of the character
var targetX;     // The X goal, from the user's click
var targetY;     // The Y goal, from the user's click
var track = (0); //to keep track fo index in array "pigsThatFly"
var theX; //the current x location of character
var theY; //the current y location of character
 

function preload(){
    // These URLs are for the individual walk cycle images,
    // stored in the imgur album http://imgur.com/a/85DTu
    var filenames = [];
    filenames[0] = "https://i.imgur.com/yHI2wXX.png";
    filenames[1] = "https://i.imgur.com/yHI2wXX.png"
    filenames[2] = "https://i.imgur.com/Z5T1eCI.png";
    filenames[3] = "https://i.imgur.com/xPr6ucE.png";
    filenames[4] = "https://i.imgur.com/knjfg9E.png";
    filenames[5] = "https://i.imgur.com/uh2mgbF.png";
    filenames[6] = "https://i.imgur.com/k76ZBzT.png";
    filenames[7] = "https://i.imgur.com/nfG9mkZ.png";
    filenames[8] = "https://i.imgur.com/UXGbXhS.png";
    filenames[9] = "https://i.imgur.com/UXGbXhS.png";
    filenames[10] = "https://i.imgur.com/yHI2wXX.png";
    
    // PUT CODE HERE TO LOAD THE IMAGES INTO THE frames ARRAY,
    for(var z=0; z < filenames.length; z++) {
    pigsThatFly.push(loadImage(filenames[z]));
    }
}

function setup() {
    createCanvas(640, 240);
    imageMode(CENTER);
    frameRate(35);//natural rate 
  
    // Initialize the character and target positions. 
    pigX = width / 2; 
    pigY = height / 2; 
    targetX = pigX;
    targetY = pigY;
   
    //# which allows for new star to appear
    StarProb = 20; 

  //morningStars inital amount 
    for (var i = 0; i < 22; i++) {
      morningStars[i] = new Star(random(width));
    }  
}


function draw() {
    background(255);
    noStroke();
    
    gradientBack();
    drawStars();
    drawMount();
    drawWater();
    drawPig();
}


function drawStars(){
        //when random # is smaller than probability then new start occurs  
  if (StarProb > random(0,100)) {
    morningStars.push(new Star(width));
  }

  for (var i = 0; i < morningStars.length; i++) {
    morningStars[i].move(); //update star array
    morningStars[i].display(); 

    if (morningStars[i].x < 0) { //if star goes out of boundary, remove it
      morningStars.splice(i, 1);
    }    
  }
}

function drawMount(){
    //first mountain
    push();
    fill(0, 180);
    beginShape(); 
    noStroke();
    for (var x = 0; x < width; x++) {
        var t = (x * terrainZoom) + (millis() * terrainSpeed);
        var y = map(noise(t), 0,1, height/2, height*3/4);
        vertex(x, y); 
    }
    vertex(width, height);
    vertex(0,height);
    endShape();
    pop();
}

function drawWater(){
  //water
    //water main
    push();
    fill(173,216,255,100); 

    beginShape(); 
    noStroke();
    for (var x = 0; x < width; x++) {
        var t = (x * waterZoom) + (millis() * terrainSpeed);
        var y = map(noise(t), 0,1, height/2, height*3/4);
        vertex(x+.2, y+70); 
    }
    vertex(width, height);
    vertex(0,height);
    endShape();
    pop();
    //water layers
    fill(173,216,255,115); 
    beginShape(); 
    for (var a = 0;  a < width; a++) {
        var b = (a * waterZoom) + (millis() * terrainSpeed);
        var c = map(noise(b), 0,1, height/2, height*3/4);
        vertex(a+.2, c+75); 
    }
    vertex(width, height);
    vertex(0,height);
    endShape();
    pop();
        beginShape(); 
    for (var d = 0;  d < width; d++) {
        var e = (d * waterZoom) + (millis() * terrainSpeed);
        var f = map(noise(e), 0,1, height/2, height*3/4);
        vertex(d+.2, f+80); 
    }
    vertex(width, height);
    vertex(0,height);
    endShape();
    pop();
    
    
    

}

function drawPig(){
      // PUT CODE HERE TO MOVE THE CHARACTER TOWARDS THE TARGET
    var dx = targetX - pigX;
    var dy = targetY - pigY;
    var distanceFromCharacterToTarget = sqrt(dx*dx + dy*dy);
    //control how character moves toward target 
    theX = lerp(pigX,targetX,.15);
    theY = lerp(pigY,targetY,.15);
    //keep looping through the images continuously/seamlessly 
    if (track >= pigsThatFly.length){
      track = 0; 
    }
    
    // PUT CODE HERE TO DISPLAY THE CHARACTER, CYCLING THROUGH THE FRAMES.
    // WHEN YOU GET THAT WORKING, FLIP THE IMAGE IF THE CHARACTER'S HEADING LEFT. 
   //if the current x location is smaller than the last x location, it will be walking left 
    if (theX < pigX){
      push();
      scale(-1,1);//flip image 
      image(pigsThatFly[track],theX*-1,theY); //you multiply the X-coordinate by -1 so it walks in the right direction 
      pop();
    }
    //otherwise if it's larger, it will be walking right
    else if (theX >= pigX){
      push();
      image(pigsThatFly[track],theX,theY);
      pop();
    }
    
    //re-fresh values of pigX & pigY (which keep track of last place of character)
    pigX = theX;
    pigY = theY;
    
    //cycle through the walking images 
    track = track + 1
    
    
}

function gradientBack(){
  //Create gradient color for the background
    topGrad = color(117, 118, 195); //top gradient 
    bottomGrad = color(250, 207, 194); //bottom gradient 

    //gradient color steps
    var gradientSteps = (height);
    var gradientSteps2 = (30);

    for (var i = 0; i <= gradientSteps; i++) { //for each gradient strip
      fill(lerpColor(topGrad, bottomGrad, i/height)); //fill color inerpolation
      rect(0, (i/height * height) - (1/height * height), width, 1/height * height); //use the color draw boxes
    }
    
    //other gradient 
    /*
    for (var q = 0; q <= gradientSteps2; q++) { //for each gradient strip
      var sizeHeight = ((1/height * height)/2);
      noStroke();
      fill(lerpColor(topGrad2, bottomGrad2, q/gradientSteps2),80); //fill color inerpolation
      rect(0, (q/height * height) - sizeHeight +195, width, sizeHeight); //use the color draw boxes
      
      fill(lerpColor(topGrad3, topGrad2, q/gradientSteps2),80);
      rect(0, (q/height * height) - sizeHeight+164, width, sizeHeight);
    }  
    */
}

function mousePressed() {
    targetX = mouseX;
    targetY = mouseY;
}

//generate morningStars
function Star(xLocation){
  var randoOpa = random(80,180); //have the brightness of stars vary 
  var randoSize = random(.5,2); //have star size vary 
  
  this.x = xLocation;//controlled above by random width 
  this.y = random(1, 180); //range for stars to appear
  this.speed = (-1.5); //speed       

  this.move = function() {
  	  this.x += this.speed; //move the stars
  }

  this.display = function() {
	//draw the stars here 
	  fill(255,255,255,randoOpa);
	  ellipse(this.x, this.y,randoSize,randoSize);
  }
}

This time around I wanted to do something a little more fun than usual. I had some trouble deciding on what I wanted to do, but eventually decided to just do a pig flying across the water in the early early morning (early enough when you can still see stars). The reason why is because I was inspired by the phrase “when pigs fly”, but not in the traditional sense of the phrase. I was more interested in where pigs would go and what they would do when they fly – why would pigs fly? So I ended up deciding a pig would take the time to go on an early morning flight, beneath the glow of the stars at dawn.
I wanted to do something humorous and beautiful and this is the result.

Also, fun fact:
If you click on the screen, the pig will move to your mouse location.

Here is a picture of the original sketch.

Alka Cappellazzo is an artist and creative coder whose body of work seems to center around code-based animations. She doesn’t have a website, or any interviews and it was generally pretty difficult to find information regarding her. In a way she seems like the type of artist who likes to step out of the spotlight and let her work take center-stage for those who are interested in it. From what I was able to find however, I can say that she is currently based out of Italy and graduated from the Brera Academy of Fine Arts with degrees in New Art Technologies and Network Medias. She is also the current vice-president and co-founder of Invalid Code – an Italy based collective of “artists and programmers born to explore and spread the potential of the code.”

I want to take the time to talk about a body of work of hers, as opposed to an individual work, the series is called White Transparency and consists of a variety of animations or static images which are repetitions of graphics creating an ornamental and visually intriguing design. These patterns cleanly represent her interest in exploring the repetition of images and patterns in nature through the medium of code. Using Processing to facilitate these designs, she frequently codes these patterns while including random and noise functions so as to get some real/interesting or unexpected designs, similar to the unpredictability that nature holds with code. She also makes sure to make the code available to the audience, as she believes that code is something to be shared and expanded upon instead of huddled away and to be jealous of.

Below I am including some links to the processing pieces in addition to screenshots because I believe they are better experienced in real-time than seen in a still image.

White Transparency IV Link https://www.openprocessing.org/sketch/187998/embed/?width640&height=480&border=true

White Transparency II Link https://www.openprocessing.org/sketch/173726/embed/?width=640&height=480&border=true

sketch

for this Project I experimented alot with the way that stroke were rendered by the program and how the user could interfere with that and in the end I decided on creating something slightly pixelated. I chose to have the program automatically render the photo in the form of  rectangles because of it’s interesting pixelated quality. I then decided to that the user’s stroke be rendered as empty ellipses so as to give the user the ability to make the image a little more interesting and the overlapping and intermixing of colors (without changing opacity) was something that struck me as rather pretty- the ellipses add a quality that I feel is reminiscent of rain drops on a body of water, or even just ripples across a small puddle.
I didn’t have a particular goal in mind at the beginning aside from encouraging the program to add a more painterly quality to images as it redrew them pixel by pixel

I feel the the top right and left corners as well as the bottom left corner look particularly watery in a good way.

Image with intervention from the user:

Here is what the image looks like without any interference:

For this Looking Outwards, I decided to look into one of the projects that Ashley Chan wrote about. She decided to talk about some of the colorful illustrated works of John De Cesare – specifically about how he renders visual interpretations of musical scores through first studying music theory and creating a “complex algorithmic language” to interpret said musical scores. I’d say that I agree with much of her commentary on his work in the way it looks and acts as a visual representation of music – and the quote she gave from an analysis done on his work by Cooper Hewitt was extremely insightful regarding the way that he works. Particularly regarding her commentary on how Cesare’s work is unique from that of other artists who decide to visually represent score.

I’d venture to say however, that she left out some very fascinating information regarding the artist himself, for example the fact that he didn’t start doing this work until he was in his 60’s or so – he was born in Italy in 1890 and immigrated to the United States when he was a child. It should also be noted that De Cesare was not a musician, nor had he any musical training at the time he decided on doing this and that’s when he really dove himself into the deep history musical theory and the basics of such. As a notorious problem-solver, he couldn’t help but pick away at the complex idea of translating something entirely auditory into a visual art form, whilst still managing to maintain an aesthetically pleasing design and doing the score itself justice.

Link to the Looking Outwards:
https://courses.ideate.cmu.edu/15-104/f2017/author/ashleyc1andrew-cmu-edu/

For this Looking Outwards, I couldn’t help but do research on more than one artist – and I felt like in discussing one of the projects I saw and loved, it was essential to discuss the histories of each artist instead of just focusing on one thing.

Georgia Lupi is an information designer, artist, and author from Italy who utilizes data as her medium through which to tell stories and spread information. She originally started out as an architecture student, but transferred into design. She is also the co-founder of Accurat, a New York City based data-driven design firm. Her body of work reflects her job as a data-designer, and much of her work literally pertains to figuring out intuitive ways to visualize data to viewers that are disconnected from the meaning of such information. One such piece is permanently installed in the MoMA at the moment which acts as an interpretive landscape for a fashion exhibition that occurred earlier this year

Stephanie Posavac is also a designer based out of the UK (but U.S. born) who tends to favor data as a medium for her work (specifically language, literature, and science) and earned her MFA in communication design, while her background lies in book design and text visualization. She focuses majorly on the visual representation of language or numbers and both have had their work exhibited in the Museum of Modern Art. Her body of work also greatly reflects the way that she uses data and design (but focuses more on the design aspect in her work). An example of one of her pieces would be this collaborative project she did with David McCandless, where he provided content and text and she decided how to visually present the idea. Her main focus was getting people to want to look at something they normally would care to look at, and I think that drawing attention to things people don’t notice or avoid is very important to her practice as a designer and data analyst.

Now “Dear Data”, a project that is still going on, and which they collaborated to create is a project in which you can clearly see both of their interests lying in. “Dear Data” is a collaboration not only amongst themselves, but among the people who want to be involved as well – anyone who chooses to contribute becomes a part of this project.  In short, the dear data project is a serious of postcards detailing how their week was regarding one topic (i.e. love life, pet life, work, etc.) sent between these two artists, on the front is the data which could be seen as just nice illustrations by anyone who does not understand, and then on the back lies the key, or in other words – how to read the drawing on the front. The idea was to create a collection of data that not only had some coherency but that could support hundreds of different kinds of stories form anyone who decides to participate. For them, it became a way of looking at their lives, and trying to put different aspects into a  new context both visually, and in terms of meaning. The discussion topics themselves became performances, and art projects. This project is something that I genuinely admire because of the intricacy and care it holds for the artists, and even for those looking in from the outside. All of the information is personal, and it was started in an attempt to really connect with another person – what it’s led to is even more beautiful in that it not only fulfills everything the artists wanted from it, but goes beyond and inspires new ideas/realizations regarding the visualization of data and in a way brings back some magic for each of these artists in their respective fields.

They started off the presentation by talking about themselves/who they are how they met, which is a great segway into their collaborative piece considering it is not only their first collaboration but it is how they are getting to know one-another. They were also extremely confident and used some humor in discussing themselves and their work, which is something that’s important when you present if you want to be sure to grab an audience’s attention and respect. They go on to talk about the way they relate to design and their methods of working before actually discussing the project itself, allowing for a lot of build-up and a good foundation in terms of why this project was even of interest to them. They set the audience up to listen and think about data-design and how the work they discuss addresses it in a clever way through giving insight into the way that they work.

Speaker Websites
Giorgia Lupi:
http://giorgialupi.com

Stephanie Posavec:
http://www.stefanieposavec.com

Lecture video: