abradbur – Final Project – Section C

sketch


var aSlider;
var frames = [];//stores crow images

function preload(){
  //crow cycle images uploaded to imgur
  var crowCycles = [];
  crowCycles[0] = "https://i.imgur.com/kFSBiWN.png"
  crowCycles[1] = "https://i.imgur.com/WLXwnwq.png"
  crowCycles[2] = "https://i.imgur.com/PGafnLp.png"
  crowCycles[3] = "https://i.imgur.com/kFSBiWN.png"
  crowCycles[4] = "https://i.imgur.com/WLXwnwq.png"
  crowCycles[5] = "https://i.imgur.com/PGafnLp.png"
  crowCycles[6] = "https://i.imgur.com/kFSBiWN.png"
  crowCycles[7] = "https://i.imgur.com/PrhO9gc.png"
  crowCycles[8] = "https://i.imgur.com/wIi9Q1O.png"
  crowCycles[9] = "https://i.imgur.com/ddJaFA1.png"
  crowCycles[10] = "https://i.imgur.com/PrhO9gc.png"
  crowCycles[11] = "https://i.imgur.com/wIi9Q1O.png"
  crowCycles[12] = "https://i.imgur.com/ddJaFA1.png"
  crowCycles[13] = "https://i.imgur.com/PrhO9gc.png"

  //load images into the frames array
  for (i = 0; i < crowCycles.length; i ++){
    frames[i] = loadImage(crowCycles[i]);
  }
}

function setup(){
  createCanvas(480, 480);
  //slider controls the height of the grass
  aSlider = createSlider(0, 400, 400, 0);
  aSlider.position(200, 440);
  frameRate(5);
}

function draw(){

  //the sky will change color depending on the seconds
  var s = second();
  var skyR = map(s, 0, 60, 110, 248);
  var skyG = map(s, 0, 60, 210, 105);
  var skyB = map(s, 0, 60, 230, 32);
  background(skyR, skyG, skyB);

  //create the text box + slider-button area
  var v = aSlider.value()
  fill(255);
  rect(0, 400, 479, 79);
  line(160, 400, 160, 480);
  fill(0);
  textSize(15);
  text("The time flows differently here.", 10, 410, 150, 75);
  
  //button
  fill(206, 78, 58);
  ellipse(440, 440, 70);
  fill(237, 89, 81);
  ellipse(440, 440, 60);
  
  //hills
  fill(167, 118, 59);
  arc(448, 128, 208, 84, PI, TWO_PI);
  fill(211, 164, 98);
  arc(384, 240, 416, 264, PI, TWO_PI);
  arc(72, 240, 416, 200, PI, TWO_PI);

  //farmhouse
  fill(111, 16, 29);
  rect(152, 144, 176, 96);
  fill(38, 0, 2); 
  triangle(152, 144, 240, 64, 328, 144);
  for (var i = 0; i < 4; i ++){
    line(152, 168 + (i * 12), 328, 168 + (i *12));
    i += 1;
  }
  line(152, 144 + (24 *3), 328, 144 + (24 *3));
  rect(230, 200, 20, 40);
  fill(255);
  rect(170, 200, 30, 20);
  rect(278, 200, 30, 20);
  fill(0);

  //first window crack
  beginShape();
  vertex(171, 200);
  vertex(180, 210);
  vertex(200, 210);
  vertex(190, 220);
  vertex(171, 205);
  endShape();

  //second window crack
  beginShape();
  vertex(278, 220);
  vertex(308, 210);
  vertex(298, 210);
  vertex(290, 203);
  vertex(300, 220);
  vertex(284, 200);
  endShape();

  //field
  fill(242, 224, 159);
  rect(0, 240, 480, 160);

  //tree with tire swing
  push();
  translate(448, 100);
  drawBranch(0, 10);
  pop();
  line(430, 51, 430, 80);
  noFill();
  ellipse(430, 85, 10);

  //the well
  fill(138);
  rect(364, 100, 25, 25);
  line(364, 100, 364, 80);
  line(389, 100, 389, 80);
  line(377, 90, 377, 80);
  line(377, 100, 377, 125);
  line(364, 106, 389, 106);
  line(364, 115, 389, 115);
  fill(80, 40, 50);
  beginShape();
  vertex(373, 90);
  vertex(381, 90);
  vertex(379, 95);
  vertex(375, 95);
  vertex(373, 90);
  endShape();
  triangle(364, 80, 377, 75, 389, 80);

  //grave
  fill(138);
  rect(72, 125, 12, 15, 15, 15, 2, 2);
  
  //border trees
  push();
  translate(20, 240);
  drawBranch(0, 15);
  pop();
  push();
  translate(120, 240);
  drawBranch(0, 15);
  pop();
  push();
  translate(70, 245);
  drawBranch(0, 10);
  pop();
  push();
  translate(448, 240);
  drawBranch(0, 10);
  pop();
  push();
  translate(468, 240);
  drawBranch(0, 15);
  pop();
  push();
  translate(418, 245);
  drawBranch(0, 13);
  pop();
  push();
  translate(358, 240);
  drawBranch(0, 15);
  pop();

  //path
  fill(187, 113, 59);
  rect(230, 240, 20, 160);

  //log 
  fill(112, 68, 38);
  rect(50, 246, 40, 27, 10);
  ellipse(70, 250, 40, 10);
  fill(171, 117, 79);
  ellipse(70, 250, 35, 8);
  fill(220, 182, 151);
  ellipse(70, 250, 25, 6);
  fill(112, 68, 38);
  ellipse(70, 250, 10, 3);
  
  //fence
  fill(112, 68, 38);
  rect(0, 260, 30, 140);
  rect(450, 260, 30, 140);
  rect(0, 300, 480, 30);

  //crow animation
  image(frames[frameCount % 13],320, 228, 80, 80);
  
  //overgrowth
  fill(243, 205, 127);
  var val = aSlider.value();
  for (i = 0; i < 160; i ++){
    rect(i * 10, 400, 10, -val);
    i += 1;
  }
  
}

//create trees
function drawBranch(depth, len) {
    line(0, 0, 0, -len);
    push();
    translate(0, -len);
    drawTree(depth + 1, len);
    pop();
}

function drawTree(depth, len) {
    if (depth < 8) {
        rotate(radians(-10));
        drawBranch(depth, len);
        rotate(radians(20));
        drawBranch(depth, len);
    }
}

//if you push the red button
function mouseInsideRedButton(){
  return mouseX > 410 & mouseX < x + 60 && mouseY > 410 && mouseY < 470;
}
function mousePressed(){
  if (mouseInsideRedButton){
    fill(205, 90, 85);
    ellipse(440, 440, 60);
    text("Congrats you found the button.", 310, 350, 150, 75);
  }

}

For my project I ended up focusing on the feeling of finding an abandoned place (in this case an old barn). You push aside the overgrown weeds and use the odds and ends in that location to construct a story of your own. I drew the little crow myself, and the sky changes with every second in a way that I intended to be a little unsettling.

abradbur – Project – 12

For my final project I would like to make a simple point and click game, with a friendly animated crow as your guide. There are different levels of the project that I would like to accomplish, the basic level being the bare minimum, and all levels after being extras that I would love to implement if I have the time. At the basic level, I will create a scene in an eerie field with a broken down farmhouse in the background, among other scattered objects. Clicking the crow will initiate the start of the “game”. He will give the beginnings of a story(probably a spooky one), and clicking on different objects on the screen will get him to tell you different things. The crow itself will be a series of images that I draw by hand and set to a simple animation. The second level will have the objects make a sound when clicked, and possibly have clickable items light up. The third level will allow the crow to say different flavor text depending on the circumstances of the player, such as time of day, if they’ve found and clicked on every object, or if they’ve clicked on the crow more times than necessary. The fourth level would be to make the scene a landscape that scrolls with the mouse, which would allow me to add more objects and elements to the story.

Here is a simple sketch of how I would like the initial scene to look.

abradbur – Looking Outwards – 12

For this Looking Outwards post I specifically wanted to find projects that integrated writing or storytelling, since I already knew that that was the direction I wanted to take my project. The first work I found is actually a simple point and click style game which you can download for free at the the artist’s web page here .

Since an extremely simple(as in far more simple than Desert Fox’s work) point and click game struck me as something I could conceivably accomplish for my final project, I admired the developer’s simplistic art style and their way of conveying the mood of the scene. In the “Bad Dream” series by Desert Fox, published in its early stages back in December of 2013, the player walks through a morbid dreamscape and attempts to wake up. One of the challenges of a point and click is to make the story interesting even though for the most part images are stagnant and pacing is entirely dependent on the player’s ability to solve a puzzle. For this purpose, intriguing backgrounds, good writing, and interesting puzzles are necessary. Desert Fox accomplishes most of these things, but though I enjoy their simple art style, it can become a little bland to look at after a while, even with gory details. As a result I would like the visuals in my final project to be just a little more dynamic.

The second work I found is “Fabulous/Fabuleux” by Heather Kelley. It debuted in 2008.

Here is Heather Kelley’s web page.

This project uses interactive software to tell a story according to the movements of the people who participate. I admire the use of sound, motion, and simple game mechanics to communicate the story, as well as the enchanting visual effect of creating a constellation that forms key objects in that story. However, if I were to change the project, not necessarily for improvement but to be more suited to my tastes, I would make the system of interaction itself relevant to the story, so that if you just replaced the story they used with a different one, it wouldn’t work as well. For this project the story itself doesn’t matter as much as the technology behind it, and I would like the writing in my project to have more of an impact.

 

abradbur – Looking Outwards – 11

For this Looking Outwards I wanted to find some musical pieces that couldn’t be reproduced with physical instruments and would instead need to be played entirely electronically. I started out looking for some artists who had perhaps made a specialized synthesizer when I came across an artist that, although utilizing a program that they hadn’t created themselves, they instead created a new genre of music. “Black Midi” is a music genre defined in that if you were to write the sheet music of a song in that genre, you would end up with a black piece of paper because so many notes are played in the song. It’s not just the magnitude of the music that makes Black Midi so interesting, but also the visual aspect of it. Rendering the notes in such a way that in video the music is mesmerizing to look at. “Pi, The Song With 3.1415 Million Notes” by TheSuperMarioBros2 on Youtube, is a particularly mesmerizing piece. Uploaded on March 14, 2015, the visuals include the symbol of Pi itself, morse code, and swirling visuals composed of the notes on Synthesia. It’s truly impressive, and while the music may not be everyone’s cup of tea, I find it enjoyable. It’s like video game music.

(The song duration is also 3:14)

abradbur – Project – 11

sketch


function setup() {
    createCanvas(480, 480);
    frameRate(5);

}


function draw() {
    //sunset palette
    var r = 255 + 25 * sin(millis() / 1000.0 );
    var g = 200 + 25 * sin(millis() / 1000.0 + HALF_PI);
    var b = 150 + 25 * sin(millis() / 1000.0 - HALF_PI);
    background (r,g,b);
    //make a hill
    noStroke();
    fill(0);
    arc(235, 480, 500, 200, PI, 0, OPEN);

    //tree
    t1 = makeTurtle(240,380);
    t2 = makeTurtle(240, 230);
    t3 = makeTurtle(240, 230);
    t4 = makeTurtle(240, 230);
    t5 = makeTurtle(240, 230);
    t6 = makeTurtle(240, 230);
    t7 = makeTurtle(240, 230);
    t8 = makeTurtle(200, 230);
    t1.setColor(0);
    t1.setWeight(10);
    t2.setWeight(4);
    t2.setColor(0);
    t3.setWeight(2);
    t3.setColor(0);
    t4.setColor(0);
    t4.setWeight(4);
    t5.setColor(0);
    t5.setWeight(5);
    t6.setColor(0);
    t6.setWeight(3);
    t7.setColor(0);
    t7.setWeight(4);
    t8.setColor(255);
    t8.setWeight(3);
    t7.left(95);
    t7.forward(100);
    t1.left(90);
    t1.forward(150);
    t2.left(150);
    t2.forward(100);
    t3.right(175);
    t3.forward(130);
    t4.left(175);
    t4.forward(130);
    t5.left(5);
    t5.forward(130);
    t6.left(25);
    t6.forward(140);
    t8.left(25);
    t8.forward(140);
    var i = 0;
    while(i < 10){
    
        
        t2.right(random(82, 90));
        t2.forward(60);
        t2.back(random(60, 70));
        t2.left(55);
        t2.forward(20);

        
        t3.right(90);
        t3.forward(random(40,60));
        t3.back(30);
        t3.left(45);
        t3.forward(30);
        
        t4.right(90);
        t4.forward(60);
        t4.back(60);
        t4.left(45);
        t4.forward(30);
        
        t5.left(90);
        t5.forward(60);
        t5.back(60);
        t5.left(45);
        t5.forward(30);
        
        t6.left(90);
        t6.forward(60);
        t6.back(60);
        t6.left(45);
        t6.forward(30);
        
        t7.right(90);
        t7.forward(60);
        t7.back(random(30,60));
        t7.left(130);
        t7.forward(30);

        t8.right(90);
        t8.forward(60);
        t8.back(60);
        t8.left(130);
        t8.forward(random(10,30));

        i ++;
    }
    

    
    
}
//turtle graphics template
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;}

I started out by wanting to draw some spooky skeletal trees, but then I got bored of drawing straight lines the whole time and decided to make it a Dr. Seus-esque tree instead. I enjoyed making circular pathways with different branches. Best Quality: Its wiggles.

abradbur- Project 10 – Landscape

sketch

var buildings = [];

var terrainSpeed = 0.0005;
var terrainDetail = 0.005;

function setup(){
    createCanvas(480, 240);
    // create an initial collection of buildings
    for (var i = 0; i < 10; i++){
        var rx = random(width);
        buildings[i] = makeBuilding(rx);
    }
    frameRate(20);
}

function draw(){
    background(98, 45, 107);
    noStroke();
    //moon + moonshine
    fill(216, 214, 243);
    ellipse(340,50,50);
    fill(216, 214, 243, 51);
    ellipse(340, 50, 60);
    //stars
    fill(255);
    for (var i = 0; i < 1000; i++) {
        ellipse(random(width), random(height), 1);
    }
    //mountains
    push();
    beginShape(); 
    fill(40, 17, 53);
    vertex(0,height);
    for (var x = 0; x < width; x++) {
        var t = (x * terrainDetail) + (millis() * terrainSpeed);
        var y = map(noise(t), 0, 1, 0, height);
        vertex(x, y); 
    }
    vertex(width, height);
    endShape();
    pop();

    //cabins
    updateAndDisplayBuildings();
    removeBuildingsThatHaveSlippedOutOfView();
    addNewBuildingsWithSomeRandomProbability(); 



}   

function updateAndDisplayBuildings(){
    // Update the building's positions, and display them.
    for (var i = 0; i < buildings.length; i++){
        buildings[i].move();
        buildings[i].display();
    }
}


function removeBuildingsThatHaveSlippedOutOfView(){
    // If a building has dropped off the left edge,
    // remove it from the array.
    var buildingsToKeep = [];
    for (var i = 0; i < buildings.length; i++){
        if (buildings[i].x + buildings[i].breadth > 0) {
            buildingsToKeep.push(buildings[i]);
        }
    }
    buildings = buildingsToKeep; // remember the surviving buildings
}


function addNewBuildingsWithSomeRandomProbability() {
    // With a very tiny probability, add a new building to the end.
    var newBuildingLikelihood = 0.007; 
    if (random(0,1) < newBuildingLikelihood) {
        buildings.push(makeBuilding(width));
    }
}


// method to update position of building every frame
function buildingMove() {
    this.x += this.speed;
}
    

// draw the building and some windows
function buildingDisplay() {
    var floorHeight = 20;
    var bHeight = this.nFloors * floorHeight; 
    fill(0); 
    stroke(0); 
    push();
    translate(this.x, height);
    rect(0, -bHeight, this.breadth, bHeight);
    stroke(200); 
    for (var i = 0; i < this.nFloors; i++) {
        fill(254, 242, 103);
        rect(5, -15 - (i * floorHeight), this.breadth - 40, 10);
    }
    pop();
}


function makeBuilding(birthLocationX) {
    var bldg = {x: birthLocationX,
                breadth: 50,
                speed: -1.0,
                nFloors: round(random(0,2)),
                move: buildingMove,
                display: buildingDisplay}
    return bldg;
} 

I had a pretty difficult time parsing out the example code for this project, so I didn’t make it as extravagant as I had first hoped. As you can (kind of) see from my original sketch, I’d wanted to include trees and little creatures that popped out every once in a while. I wanted to make something that reminded me of the landscape back home, which is basically just mountains over mountains with tiny little lights blinking out from the homes of rich people. I have a lot of fond memories of driving through mountain neighborhoods at night. I actually made myself a little homesick with this project.

Original concept

abradbur – Looking Outwards – 10

Entangled by Camille Utterback (2015)

I was really drawn to this piece because of the magical imagery behind it. The images produced from projections onto three diaphanous screens give both a sense of volume and depth as well as a sort of ghostly feeling at the same time. The idea of two people connecting on other sides of the screen to make a collaborative piece of art is also very poetic. Since the images produced appear on both sides and are affected by both participants, no one has total control.

Camille Utterback has a BA in art from Williams College, and a Masters from The Interactive Telecommunications Program at New York University’s Tisch School of the Arts. She says that her art tries to bring the focus back to the richness of the human body in contrast to a world that is consistently digitized. Her work “explores the aesthetic and experiential possibilities of linking computational systems to human movement and physicality in visually layered ways.”(Bio)

Here is her website.

Here is the page with this particular work.

abradbur – Project – 09

sketch

var myFace; //image of my face
var skeleton; //skeleton image
var currentImageIndex;

function preload(){
    //load my face and the skeleton
    myFace = loadImage("https://i.imgur.com/m10glof.jpg");
    skeleton = loadImage("https://i.imgur.com/9cviAOv.jpg");
    currentImageIndex = 0;
}

function setup() {
    createCanvas(360, 480);
    background(0);
    fill(218, 172, 75);
    textSize(50);
    text("We are all Skeletons Underneath", 50, 120, 310, 340);
    currentImage = myFace;
    currentImage.loadPixels();

}

function draw() {
    var px = random(width);
    var py = random(height);
    //keeps the color within the constraints of the image
    var ix = constrain(floor(px), 0, width);
    var iy = constrain(floor(py), 0, height);
    var col = currentImage.get(ix, iy); //color of the image
    strokeWeight(0.1);
    stroke(218, 174, 75);
    fill(col);
    //draw random triangles
    triangle(px, py, px + random(6, 12), py + random(-8, 8),
    px + random(6, 12), py);
    
    //just draw on the triangles if you're bored
    var mouseCol = currentImage.get(mouseX, mouseY);//color at the moouse
    stroke(mouseCol);
    triangle(mouseX, mouseY, mouseX + random(6, 12), mouseY + random(-8, 8),
    mouseX + random(6, 12), mouseY);
}

//flip between myFace and skeleton
//when you press the mouse
function mousePressed(){
    currentImageIndex = (currentImageIndex +1)%2;
    if (currentImageIndex === 0){
        currentImage = myFace;
    } else{
        currentImage = skeleton;
    }
}

For this project I decided to use my own face because I wanted to use a silly photo I’ve been unable to as of yet show the world. I also wanted to keep with the theme of the Halloween season and make something a little spooky. Random triangles pop up to make the image but if you click on it, instead of my face, a skeleton may begin to emerge. (Not actually my skeleton, all credit to Evil Sheila the skeleton in my High School art department, whom I love). I’d actually hoped to switch between shapes (triangles to circles) as well as images, but I couldn’t quite get it to work. So I settled.

Here are the original images I used.

Me
Evil Sheila

And here are some screen shots if you don’t want to sit through the creation process. (You can also use the mouse to speed things up)

A Spooky Truth
The Illusion
Spooky Reality

abradbur – Looking Outwards- 09

beyond the edge

A post shared by agatha (@eggbadger) on

alchan-Looking Outwards 05

I chose this post by alchan(andrew ID leaves their true name a mystery), because I really enjoyed the style of artwork she chose to write about. I’m a big fan of low poly, soft colored, images and animations and works of art, and “Crystal Shore” (February 21, 2017) by Agatha Yu was especially soothing for me to look at. Usually video games are criticized or made fun of for low poly graphics, but in reality this style makes for some very intriguing art pieces and graceful animations. I would agree with alchan in that low poly lends itself to create entirely new art styles instead of video game or true to life graphics. Said simply, low poly images like this one and all others by Agatha Yu have a bouncy, fun, simplicity to them, while also remaining strikingly elegant.

Here is Agatha Yu’s Instagram.

Here is Crystal Shore.

abradbur – Looking Outwards – 08

Zach Lieberman at Eyeo 2011

Zach Lieberman actually holds a degree in the fine arts, and says that it was mostly by accident that he fell into working with technology. He’s become somewhat of a giant in the art and coding industry, as he was one of the co-creators of openFrameworks and open source C++. As an interactive new media artist, he describes his three muses as drawing, movement, and magic.

I chose to watch Zach’s first Eyeo presentation firstly because I remembered watching clips of his earlier presentation in lecture, and I recalled really enjoying his presentation style. However after watching this first presentation I’ve come to truly admire him for the creativity combined with the innovation of his works. A throughline comparing his projects would demonstrate that a common theme in his work is the relationship with and the effect it has on people. He stresses the humanity behind his work, and creates these sort of exhibits where people can come together. This is also evident in his Open Source materials and his Poetic School for computation.

I enjoyed Zach’s presentation because you felt how sincerely he cared about his work. He wasn’t professional and cold on stage, performing with gimmicks and flashy graphics like some might. He let his work and the reactions people had to it speak for itself. He conversed with the audience in his speech, rather than talking down at them, and he let his humor show through. That’s why his talk was able to pull me in for an entire 50 minutes, rather than bore me to death in the first 15.

Night Lights 2009