For my final project, I was inspired by the capitalist need for consumption over all else. Specifically, I’ve been concerned with over-fishing (I even wrote one of my essays to apply to CMU about fishing net pollution). So, I created a game that simulates capitalist motives in regards to fishing.

In the game, your cursor becomes a fishing hook which you can use to click on the fish and catch them. This will momentarily make the screen flash green and increase the amount of money you’ve made. However, once all the fish are caught, the coral dies off and the ocean becomes much less vibrant than it was before. Finally, a message will pop up warning the player about the effects of over-fishing. However, if the player goes for a minute and a half without killing all the fish, a message will pop up to congratulate them on being a conscious consumer.

I added everything I intended for the program, but I can definitely see how I could add more aspects to make this a more complete and polished screen, like a system to replenish the fish gradually. Also, moving seaweed or bubbles might be nice. But I am happy with this outcome.

sketch

//Elise Chapman
//ejchapma
//ejchapma@andrew.cmu.edu
//Section D

f=[]; //array for the fish
fClick=[]; //array for tracking the clicked 
var sandy = []; //for the sand
var noiseParam = 5; //for the sand
var noiseStep = 0.005; //for the sand
//color variables so that the coral can turn gray
var tube1;
var tube2;
var tube3;
var brain1;
var brain2;
var gray1=125;
var gray2=100;
var moneyCount=0; //counts the money
var timer=0; //for tracking after fish die
var timerLive=0; //for tracking time for player for being good

function setup() {
    createCanvas(600, 300);
    rectMode(CENTER);
    strokeJoin(ROUND);
    textAlign(CENTER,CENTER);
    noCursor();
    frameRate(10);
    //fish setup
    for (var i=0; i<20; i+=1) {
        f[i]=new Object();
        f[i].x=random(30,width-31);
        f[i].y=random(75,height-31);
        f[i].dx=random(-10,11); //change in x
        r=int(random(0,256));
        //g=int(random(0,256));
        b=int(random(0,256));
        f[i].c=color(r,0,b); //fish color
    }

    //for the sand
    noiseSeed(87);
    for (var i=0; i<(width/5)+1; i+=1) {
        var n=noise(noiseParam);
        var value=map(n,0,1,0,height);
        sandy[i]=value;
        noiseParam+=noiseStep;
    }

    //tube colors
    tube1=color(67,87,173) //blue
    tube2=color(242,160,242); //pink
    tube3=color(239,99,81); //red
    brain1=color(97,208,149); //green
    brain2=color(249,199,132); //yellow
}

function draw() {
    if (f.length<1 & timer>90) {
        background(122,161,187); //darker ocean blue
    } else {
        background(74,225,255); //ocean blue
    }
    sandscape();
    coral();
    seaweed(15,100);
    seaweed(40,175);
    seaweed(250,200);
    seaweed(275,75);
    seaweed(300,125);
    seaweed(450,225);
    seaweed(550,175);
    seaweed(575,100);
    //fish
    for (var i=0; i<f.length; i+=1) {
        fish(f[i].x,f[i].y,f[i].dx,f[i].c);
        f[i].x+=f[i].dx;
        if (f[i].x<15 || f[i].x>width-15) {
        f[i].dx=-f[i].dx;
        }
    }
    //bad ending
    if (timer>120 & f.length<1) {
        push();
        translate(width/2,height/2)
        noStroke();
        fill(0,0,0,200);
        rect(0,0,600,300);
        strokeWeight(1);
        stroke(255);
        fill(255);
        text("You've chosen greed over the fish.\nOver-fishing is one of the greatest causes \nof devastation for our oceans.\nDoes making a quick buck make killing the coral worth it?\nI should hope not.\nAlways choose the environment."
            ,0,0);
        pop();
    }
    //money
    noStroke();
    fill(255); //white
    rect(75,30,100,50,10,10,10,10);
    strokeWeight(2);
    stroke(0,122,4); //green
    fill(0,122,4); //green
    textSize(20);
    text("$"+str(moneyCount),75,30);
    //fish hook
    if (f.length>0) {
        fishHook(mouseX,mouseY);
    }
    if (f.length<1) {
        timer++;
    }
    //good ending
    if (timerLive>6300 & f.length>1) {
        push();
        translate(width/2,height/2)
        noStroke();
        fill(0,0,0,200);
        rect(0,0,600,300);
        strokeWeight(1);
        stroke(255);
        fill(255);
        text("Congrats!\nYou've chosen to fish sustainably, or not at all.\nAs over-fishing continues to be a source of \ndevastation for our oceans, please continue\nto advocate for healthy fishing!\n:)"
            ,0,0);
        pop();
    }
    timerLive++;
}

//swimming fish
function fish(x,y,dx,c) {
    noStroke();
    fill(c);
    ellipse(x,y,40,30);
    //moving left
    if (dx<0) {
        triangle(x+15,y,x+30,y+15,x+30,y-15);
        triangle(x-20,y,x+10,y-25,x+10,y);
        triangle(x-20,y,x+10,y+25,x+10,y);
        fill(0);
        ellipse(x-7,y-3,9);
    //moving right
    } else if (dx>=0) {
        triangle(x-15,y,x-30,y+15,x-30,y-15);
        triangle(x+20,y,x-10,y-25,x-10,y);
        triangle(x+20,y,x-10,y+25,x-10,y);
        fill(0);
        ellipse(x+7,y-3,9);
    }
}

//landscape made of sand
function sandscape() {
    //sets up the sand
    strokeWeight(3);
    stroke(242,231,189); //beige
    fill(242,231,189); //beige

    //creates the sand
    push();
    translate(0,10);
    beginShape();
    vertex(0,height);
    for (var i=0; i<(width/5)+1; i+=1) {
        vertex(i*5,sandy[i]);
    }
    vertex(width,height);
    endShape();
    pop();
}

//coral reef has got to have coral
function coral() {
    //tube coral
    if (f.length<1 & timer>70) {
        fill(gray1);
        stroke(gray1);
    } else {
        fill(tube1);
        stroke(tube1);
    }
    strokeWeight(8);
    var place = 500; //easier to adjust coral placement
    quad(place,200,place+20,200,place+30,70,place,70);
    quad(place-30,210,place,210,place-10,100,place-30,100);
    quad(place-60,190,place-40,190,place-30,50,place-70,40);
    quad(place-90,200,place-60,200,place-70,130,place-80,130);
    if (f.length<1 & timer>20) {
        fill(gray1);
        stroke(gray1);
    } else {
        fill(tube2);
        stroke(tube2);
    }
    place = 150;
    quad(place-30,250,place-50,250,place-50,120,place-20,120);
    quad(place+30,260,place,260,place+10,150,place+30,150);
    quad(place+60,240,place+40,240,place+30,100,place+70,90);
    quad(place-90,250,place-60,250,place-70,180,place-80,180);

    //brain coral
    if (f.length<1 & timer>10) {
        fill(gray2);
        stroke(gray2);
    } else {
        fill(brain1);
        stroke(brain1);
    }
    ellipse(400,200,100,70);
    if (f.length<1 & timer>50) {
        fill(gray2);
        stroke(gray2);
    } else {
        fill(brain2);
        stroke(brain2);
    }
    ellipse(10,150,100,70);

    //another tube coral
    if (f.length<1 & timer>30) {
        fill(gray1);
        stroke(gray1);
    } else {
        fill(tube3);
        stroke(tube3);
    }
    place = 300;
    quad(place+30,340,place,360,place+10,200,place+30,190);
    quad(place+60,360,place+40,360,place+30,250,place+70,250);
}

//makes the cursor look a certain way
function fishHook(x,y) {
    noFill();
    stroke(255);
    strokeWeight(10);
    beginShape();
    vertex(x+40,y-50);
    vertex(x+40,y-50);
    vertex(x+40,y);
    curveVertex(x+20,y+10);
    curveVertex(x,y);
    vertex(x,y);
    endShape();
    fill(80);
    triangle(x-5,y+10,x+10,y-10,x-5,y-10);
}

//underwater has to have seaweed
function seaweed(x,height) {
    strokeWeight(5);
    stroke(0,122,4); //green
    fill(0,122,4); //still green
    triangle(x,350,x+20,350,x+10,height);
}

function mousePressed() {
    for (var i=0; i<f.length; i+=1) {
        if (dist(mouseX,mouseY, f[i].x,f[i].y)<30) {
            f.splice(i,1);
            fill(0,122,4,100); //green
            rect(width/2,height/2,600,300);
            moneyCount+=10000;
            break;
        }
    }
}

I’ve been missing my grandparents recently, so I knew I wanted to do something that reminds me of them. That means mountains. My grandfather is Austrian and he and my grandmother live in Colorado currently, so I wanted to make the scene feel like I was riding in the car in some mountainous area, complete with rolling hills, pine trees, a nice wooden fence, and a couple goats. I used a noise function for the mountains and hills at different amplitudes. The hill noise function gave me a little trouble when I started implementing my trees, but by lowering the amplitude more and limiting the range for the random tree generation, I was able to mitigate most of the floating trees. Originally, I was thinking about making the goat change color as well, but I couldn’t successfully implement it, so I left it out. Overall, I’m happy with how my landscape came out. I think that if I had more time, there are certainly more tweaks I would make, but with the time that was available to me this week I’m happy with what I made.

sketch

//Elise Chapman
//ejchapma
//ejchapma@andrew.cmu.edu
//Section D

var goats = [];
var hill = [];
var mountain = [];
var fence = [];
var trees = [];
var noiseParam = 1; //for the mountains
var noiseStep = 0.05; //for the mountains
var noiseParam2 = 5; //for the hills
var noiseStep2 = 0.005; //for the hills

function preload() {
    treeImg = loadImage("https://i.imgur.com/eI7dRxU.png");
    fenceImg = loadImage("https://i.imgur.com/8f0PfZu.png");
    goatImg = loadImage("https://i.imgur.com/TX6vImS.png");
}

//the mountains
function mountains() {
    //sets up the mountains
    strokeWeight(3);
    stroke(100); //dark gray
    fill(100); //dark gray

    //creates the mountains
    translate(0,0.5);
    beginShape();
    vertex(0,height);
    for (var i=0; i<(width/5)+1; i+=1) {
        vertex(i*5,mountain[i]);
    }
    vertex(width,height);
    endShape();
    mountain.shift();
    var n=noise(noiseParam);
    var value=map(n,0,1,0,height);
    mountain.push(value);
    noiseParam+=noiseStep;
}

//the hills
function hills() {
    //sets up the hills
    strokeWeight(3);
    stroke(27,81,45); //dark green
    fill(27,81,45); //dark green

    //creates the hills
    translate(0,10);
    beginShape();
    vertex(0,height);
    for (var i=0; i<(width/5)+1; i+=1) {
        vertex(i*5,hill[i]);
    }
    vertex(width,height);
    endShape();
    hill.shift();
    var n=noise(noiseParam2);
    var value=map(n,0,1,0,height);
    hill.push(value);
    noiseParam2+=noiseStep2;
}

//the goats
function makeGoat(gx) {
    var g = {x: gx,
        goatSpeed: -3.0,
        goatSizeMod: random(0,51),
        move: goatMove,
        display: goatDisplay}
    return g;
}
function goatDisplay() {
    image(goatImg, this.x+200,90-this.goatSizeMod, 100+this.goatSizeMod,100+this.goatSizeMod);
}
function goatMove() {
    this.x += this.goatSpeed;
}
function updateGoats() {
    //update the goat positions and display them
    for (var i=0; i<goats.length; i+=1) {
        goats[i].move();
        goats[i].display();
    }
}
function removeGoats() {
    //remove goat when no longer on screen
    var goatOnScreen = [];
    for (var i=0; i<goats.length; i+=1) {
        if (goats[i].x + 400 > 0) {
            goatOnScreen.push(goats[i]);
        }
    }
    goats = goatOnScreen;
}
function addNewGoats() {
    var newGoatChance = 0.004;
    if (random(0,1) < newGoatChance) {
        goats.push(makeGoat(width));
    }
}

//the trees
function makeTree(tx) {
    var t = {x: tx,
        y: 90-random(0,50),
        treeSpeed: -5.0,
        treeSizeMod: random(0,51),
        move: treeMove,
        display: treeDisplay}
    return t;
}
function treeDisplay() {
    image(treeImg, this.x+200, this.y, 50+this.treeSizeMod,75+this.treeSizeMod);
}
function treeMove() {
    this.x += this.treeSpeed;
}
function updateTrees() {
    //update the tree positions and display them
    for (var i=0; i<trees.length; i+=1) {
        trees[i].move();
        trees[i].display();
    }
}
function removeTrees() {
    //remove tree when no longer on screen
    var treesOnScreen = [];
    for (var i=0; i<trees.length; i+=1) {
        if (trees[i].x + 400 > 0) {
            treesOnScreen.push(trees[i]);
        }
    }
    trees = treesOnScreen;
}
function addNewTrees() {
    var newTreeChance = 0.1;
    if (random(0,1) < newTreeChance) {
        trees.push(makeTree(width));
    }
}

function setup() {
    createCanvas(480,200);
    frameRate(25);
    
    //for the mountains
    for (var i=0; i<(width/5)+1; i+=1) {
        var n=noise(noiseParam);
        var value=map(n,0,1,0,height);
        mountain[i]=value;
        noiseParam+=noiseStep;
    }
    //for the mountains
    for (var i=0; i<(width/5)+1; i+=1) {
        var n=noise(noiseParam2);
        var value=map(n,0,1,0,height);
        hill[i]=value;
        noiseParam2+=noiseStep2;
    }
    //inital collection of trees
    for (var i=0; i<10; i+=1) {
        var rx = random(width);
        trees[i]=makeTree(rx);
    }
}

function draw() {
    background(123, 196, 227); //sky blue

    //sun
    noStroke();
    fill(255, 255, 227); //very light yellow
    ellipse(40,30,25);

    mountains();
    hills();

    //trees
    updateTrees();
    removeTrees();
    addNewTrees();

    //goats
    updateGoats();
    removeGoats();
    addNewGoats();

    //fence
    var fenceX=0;
    for (var i=0; i<5; i+=1) {
        image(fenceImg, fenceX+(i*200),115, 200,100);
    }
}

NFTs have always felt like an infringement on artists’ work in general, but “NFTs and Copyright” has given me a better understanding of why I feel that way. A good quote from the article to understand the initial hope for NFTs is “NFTs are an attempt for digital creators to try and capture some of the uniqueness and scarcity that producers of physical works have naturally”, although where an NFT fails is returning value to its original creator: the artist. I assumed that NFTs had to be created by the original seller, but that isn’t even the case: they can be sold by a buyer of the original artwork. This means that an artist can put their hardest work into a piece of artwork, just to have it resold by another person at minimal effort for potentially very high reward. Photographs can be made into NFTs, making even the likeness of another person something to capitalize off of. Although the artist is still noted with the original copyright, copyright is a tricky thing for artists in the NFT space. Maybe someone would buy an original work after having seen the NFT, but a copyright doesn’t pay for groceries.

“NFTs and Copyright”, https://www.plagiarismtoday.com/2021/03/16/nfts-and-copyright/, 2021

sketch

//Elise Chapman
//ejchapma
//ejchapma@andrew.cmu.edu
//Section D

// Storyline: a mouse comes out of its hole, sees some cheese,
// then goes over to nibble on it. It sees the shadow of a cat,
// then scurries back to its hole.

var xPos; //x position of the mouse
var yPos; //y position of the mouse 
var timer=0; //for animation timing purposes
var yPosCat; //y position for cat shadow

function preload() {
    squeak = loadSound("https://courses.ideate.cmu.edu/15-104/f2021/wp-content/uploads/2021/11/squeak.wav");
    aha = loadSound("https://courses.ideate.cmu.edu/15-104/f2021/wp-content/uploads/2021/11/aha.wav");
    nibble = loadSound("https://courses.ideate.cmu.edu/15-104/f2021/wp-content/uploads/2021/11/nibble.mp3");
    scream = loadSound("https://courses.ideate.cmu.edu/15-104/f2021/wp-content/uploads/2021/11/scream.wav");
}

function soundSetup() {
    squeak.setVolume(0.5);
    aha.setVolume(0.5);
    nibble.setVolume(0.5);
    scream.setVolume(0.5);
}

function setup() {
    createCanvas(600,400);
    frameRate(4); //speed of story
    xPos=(width/2)+180;
    yPos=(height/2)+78;
    yPosCat=600;
    rectMode(CENTER);
    noStroke();
    useSound();
}

function setting() {
    //wall
    background(240); //light gray
    fill(156,56,72); //red
    rect(width/2,25,width,100);

    //mouse hole
    fill(131,122,117); //lighter grayish brown for the hole wall
    rect((width/2)+90,(height/2)+50, 110,200, 80,80);
    fill(96,91,86); //grayish brown for the hole
    rect((width/2)+100,(height/2)+50, 100,200, 80,80);

    //floor
    fill(107,58,15); //brown
    rect(width/2,400,width,200);
}

function cheese() {
    fill(242,205,96); //yellow
    quad(100,350, 200,310, 200,235, 100,250);
    fill(242,232,99); //lighter yellow
    quad(100,350, 60,320, 60,240, 100,250);
    fill(228,186,62); //darker yellow
    triangle(60,240, 100,250, 200,235);

    //holes
    fill(242,205,96); //yellow
    ellipse(70,300,10,30);
    ellipse(90,280,15,40);
    ellipse(80,320,10,20);
    ellipse(75,260,10,20);
}

function mousey(x,y) {
    stroke(170); //gray
    noFill();
    strokeWeight(5);
    curve(x+35,y,x+35,y,x+70,y,x+100,y-50);
    noStroke();
    fill(170); //gray
    rect(x,y, 70,40, 0,80,80,0);
    arc(x-35,y+20, 70,80, PI,0);
    fill(150); //darker gray
    ellipse(x-40,y+20,20,12);
    ellipse(x+15,y+20,20,12);
    ellipse(x-30,y-20,40);
    fill(216,130,157); //pink
    ellipse(x-30,y-20,30);
    ellipse(x-70,y+15,10,10);
    fill(0); //black
    ellipse(x-50,y,10,10);
}

function catShadow(x,y) {
    fill(50,50,50, 80);
    ellipse(x,y,400,200);
    ellipse(x,y+200,200,400);
    triangle(x+50,y-100, x+200,y-25, x+150,y-150);
    triangle(x-50,y-100, x-200,y-25, x-150,y-150);
}

function draw() {
    setting();
    cheese();
    mousey(xPos,yPos);

    //to conceal mouse entering hole
    fill(240); //light gray
    rect((width/2)+200,(height/2)+50, 100,100);
    fill(107,58,15); //brown
    rect(width/2+225,400, 150,200);

    //mouse movement
    if (xPos>260) {
        xPos-=10;
    }

    //cat shadow
    catShadow(width/2,yPosCat);
    if (yPosCat>(height/2) & timer>23) {
        yPosCat-=20;
    }

    if (timer>32) {
        setting();
        cheese();
        push();
        translate(width,0);
        scale(-1,1);
        mousey(xPos+90,yPos);
        pop();
        fill(240); //light gray
        rect((width/2)+225,(height/2)+50, 150,100);
        fill(107,58,15); //brown
        rect(width/2+225,400, 150,200);
        catShadow(width/2, yPosCat);
        if (xPos>30) {
            xPos-=20;
        }
    }

    //sound
    if (timer==0) {
        aha.play();
    }
    if (timer==16 || timer==10) {
        aha.stop();
        squeak.play();
    }
    if (timer==19) {
        nibble.play();
    }
    if (timer==33) {
        scream.play();
    }

    timer+=1;
}

When thinking of a story I could use for this assignment, I thought back to children’s stories and cartoons. Some notable cartoons came to mind, like Tom and Jerry and Looney Tune’s Tweety Bird, and based off of these I decided to do a cat and mouse theme. The basic story I decided on using was: “a mouse comes out of its hole, sees some cheese, then goes over to nibble on it. It sees the shadow of a cat, then scurries back to its hole.” To facilitate this story, I used an aha sound (for when the mouse sees the cheese), a squeak noise (to make the mouse more mousey), a nibble noise (for when the mouse is eating the cheese), and a scream (for when the mouse sees the cat). I think the story is cute and very readable.

For my portrait, I knew I wanted to do something where the user of my program could participate in while creating the portrait. I really enjoy active interactions in my pieces within design, so I’ve been trying to bring that into my coding work as well. So, I decided that the way to do that was to create a click and drag style generator, where the user drags around their mouse to “paint” my portrait. From there, I created randomly generated “pixels” within a certain radius of the mouse, to add an element of randomization to the “painting”. Finally, because it was taking me a long time to actually paint the portrait and I found that annoying, I added in a larger “brush” size through the use of larger random pixels. I think the final outcome is pretty cool, I like how it came out.

sketch

//Elise Chapman
//ejchapma
//ejchapma@andrew.cmu.edu
//Section D

var erSelfie; //image storage

//loads the image to be used
function preload() {
    erSelfie = loadImage('https://i.imgur.com/GbuQVul.jpg?1');
}

function setup() {
    createCanvas(340,480);
    imageMode(CENTER);
    noStroke();
    background(200);
}

function draw() {
    // gives radius to the area in which random pixels can appear
    var xPos=random(-10,10);
    var yPos=random(-10,10);
    // gives the mouse access to the entire image's pixels
    var x = map(mouseX, 0, width, 0, 2117);
    var y = map(mouseY, 0, height, 0, 3000);
    var pixSize;
    var pix = erSelfie.get(x, y); //color of pixel
    if (mouseIsPressed) {
        push();
        translate(mouseX,mouseY);
        fill(pix);
        // option for large or small pixel generation
        if (keyIsPressed) {
            pixSize=random(10,20);
        } else {
            pixSize=random(1,10);
        }
        ellipse(xPos, yPos, pixSize);
        pop();
    }
}

For this assignment, I was excited to see a creator I was familiar with on the list: Angela Washko. Angela Washko is currently a visiting assistant professor of art here at CMU, but normally she’s based in NYC. Washko has received two degrees: a Bachelor of Fine Arts from Temple University and a Masters of Fine Arts from UC San Diego. Her work focuses on feminist perspectives, especially in media and video games. The project I’m particularly interested in is her All The Places You’ll Go (Women As Place). This is an “interactive hypertext point-and-click narrative adventure game” where the player explores different geographic locations by clicking. However, the geographic locations are described as women, derived from postcards of each place, described as  “sights” to see. I am personally very interested in feminist topics, so this video game is one that I admire quite a bit. It’s witty, charming, and has a distinctly vintage feel, yet still feels very contemporary. It’s also a slightly unnerving experience where the women in these postcards gradually become more and more objectified, more part of the place, less like people at all the more you play. The entire thing feels very well done. 
Angela Washko, All The Places You’ll Go (Women As Place), 2016, https://angelawashko.com/artwork/3907233-All-The-Places-You-ll-Go-Women-As-Place.html

Meow Wolf is an art collective that specializes in, and is best known for, creating large-scale immersive art installations, although they also produce streaming content, music videos, and arts and music festivals. They formed in February of 2008 in Santa Fe, New Mexico, and presented their first large-scale installation, House of Eternal Return, in the same year. They have since expanded to several permanent installation exhibits across the nation, including Omega Mart in Las Vegas and Convergence Station in Denver. I was initially drawn towards watching Meow Wolf’s lecture simply because I had heard of them from a friend, but their work is so much more interesting now that I know more about it. It’s incredibly admirable how much attention to detail there is and there has to be. To have such an interactive exhibit that people can go as far as to climb on it, the entire installation has to be incredibly well built and well thought out. This became even more clear through Meow Wolf’s presentation. They had a very casual presentation, but they were also able to show how passionate they were about the art installations. I can tell that they care a lot about what they do, but they know that their work also speaks for itself.

https://meowwolf.com/

sketch

//Elise Chapman
//ejchapma
//ejchapma@andrew.cmu.edu
//Section D

var nPoints = 100; //number of points along the curve
var noiseParam=5;
var noiseStep=0.1;
var petalNum=1; //number of petals on curve
var x; //for points along curve
var y; //for points along curve

function setup() {
    createCanvas(480,480);
    frameRate(10);
}

function draw() {
    background(0);
    //draws the epitrochoid curve
    //Cartesian Parametric Form  [x=f(t), y=g(t)]
    push();
    translate(width/2, height/2);
    var a = 90;
    var b = a/petalNum;
    var h = constrain(mouseY / 8.0, 0, b);
    var ph = mouseX / 50.0;
    fill(mouseY,0,mouseX);
    noStroke();
    beginShape();
    for (var i = 0; i<nPoints+1; i++) {
        var t = map(i, 0, nPoints, 0, TWO_PI); //theta mapped through radians
        //Cartesian Parametric Form  [x=f(t), y=g(t)]
        x = (a + b) * cos(t) - h * cos(ph + t * (a + b) / b);
        y = (a + b) * sin(t) - h * sin(ph + t * (a + b) / b);
        var nX = noise(noiseParam); //noise for x values
        var nY = noise(noiseParam); //noise for y values
        nX=map(mouseX,0,width,0,30);
        nY=map(mouseY,0,height,0,30);
        vertex(x+random(-nX,nX),y+random(-nY,nY));
    }
    endShape(CLOSE)
    pop();
}

//click to increase number of petals on the curve
function mousePressed() {
    petalNum+=1;
    if (petalNum==6) {
        petalNum=1;
    }
}

To begin, I liked the movement that was created by Tom’s example epitrochoid curve, so I went to the link he provided on Mathworld and read about the curve. I understood that I could make the petals interactive by adding a click into the program and changing the value of b in the curve equation. So at this point, my program allowed from 1 to 5 petals depending where in the click cycle the user is.

Then, I thought back to one of the previous labs, where we would draw circles with variable red and blue fill values, which I really enjoyed aesthetically. So, I made the blue value variable dependent upon the mouseX value and the red value variable upon the mouse Y value.

Finally, I really enjoyed the jittery star from the class example from our lecture on Randomness and Noise, so I decided I wanted to add noise. Because the curve is drawn with a series of points, I added noise randomness to each of the points, affecting both the x scale and the Y scale. Overall, I enjoy how the final project came out. I think it would be a cool addition to the header of a website, especially if I’m able to make the background transparent.

Immediately, I was intrigued by Moritz Stefaner’s work, specifically his Project Ukko: a visualization of seasonal wind prediction data. Project Ukko presents a thematic map of wind data using lines of varying opacity (prediction accuracy), thickness (wind speed), tilt and color (trend of wind speed). Stefaner outsources his computational data from clients, which is processed by another group called RESILIENCE, so unfortunately I cannot find much about the algorithm behind his work, but I can tell that Stefaner put a lot of effort into the process of his visualization. He asks questions like “What are the main views?”, “What needs to be available immediately, what on demand?”, and “How important is each part?”. I admire that he keeps the design process, that I myself have to go through in my major, central to his work. Furthermore, the final piece is both beautiful and highly functional. For someone not entrenched in the data, it is still an easy visualization to process; but it can easily become a deeply detailed source. It is minimalistic in that it includes only the necessary parts, yet it still feels so rich.  

Moritz Stefaner, Project Ukko

Going into this project, I first started thinking about my favorite ways to physically tell time. How does my body determine what time it is? I eventually settled on the changing daylight. From there, I decided that I both wanted to create a landscape and didn’t want to directly show the sun or the moon (that feels overdone). In the end, I like the effect that I got with all the different elements in my desert landscape. I think the bird could be a little more accurate to a buzzard and I think it would have been cool if the tumbleweed could have rotated, but I just didn’t have time to complete either of those. Perhaps I’ll go back into my code later and fix them to be the best version I can get them.

sketch

//Elise Chapman
//ejchapma
//ejchapma@andrew.cmu.edu
//Section D

function setup() {
    createCanvas(480,300);
    rectMode(CENTER);
}

function draw() {
    background(200); //background is white
    //draws a buzzard that flies across the screen every minute
    noStroke();
    var dx=430/60;
    var xPos=dx*second(); //x position of the buzzard
    var yPos=50; //y position of the buzzard
    fill(75);
    ellipse(xPos,yPos,25,15);
    ellipse(xPos+15,yPos,15);
    triangle(xPos+20,yPos-5,xPos+20,yPos+5,xPos+30,yPos);
    //the buzzard will move its wings every second
    if (second()%2==0) {
        triangle(xPos-10,yPos-3,xPos+10,yPos-3,xPos,yPos-20);
    } else {
        triangle(xPos-10,yPos+3,xPos+10,yPos+3,xPos,yPos+20);
    }
    landscape(0,0);
    tumbleweed(0,0);
    sky(0,0);
}

//draws the tumbleweed, that will eventually move
function weed(x,y) {
    push();
    translate(x,y);
    stroke(241,208,160); //beige
    strokeWeight(5);
    line(-15,-20,25,10);
    line(-15,20,20,-15);
    line(-25,0,25,-10);
    line(0,-25,0,25);
    line(-20,10,20,15);
    line(10,20,15,-20);
    line(-10,20,-15,-20);
    line(-20,-10,5,-15);
    pop();
}

//makes the weed tumble, moving every minute
function tumbleweed(x,y) {
    var xPos=0; //x position of tumbleweed
    var yPos=(height/3)+140; //y position of tumbleweed
    var dx=width/60; //how much the tumbleweed moves by
    weed(xPos+(dx * minute()),yPos);
}

//draws the main background
function landscape(x,y) {
    push();
    translate(width/2,height/2);
    noStroke();
    //background plateau
    fill(249,160,63); //orange sand color
    rect(width/4,height/4,100,height,30,30);
    rect(width/4+50,height/3,50,height,30,30);
    rect(width/4+100,height/2.25,100,height);
    rect(width/4-25,height/2.5,100,height,30,30);
    rect(width/4-75,height/1.75,100,height,30,30);
    //even further background plateu
    fill(255,193,100); //lightened orange sand color
    rect(-width/4-50,height/3,75,height,30,30);
    rect(-width/4-10,height/2.25,75,height,30,30);
    rect(-width/4-100,height/1.75,50,height,30,30);
    //foreground
    fill(212,122,19); //red sand color
    rect(0,height/3,width,height/3);
    //cactus
    fill(122,132,80); //green
    rect(-width/5+10,0,30,200,30,30,30,30);
    rect(-width/5+40,0,80,30,30,30,30,30);
    rect(-width/5+65,-20,30,60,30,30,30,30);
    rect(-width/5-20,-40,50,30,30,30,30,30);
    rect(-width/5-35,-70,30,85,30,30,30,30);
    pop();
}

//changes the color of the sky (and ambiance) every hour
function sky(x,y) {
    noStroke();
    if (hour()==0) {
        fill(18,27,103,150);
    } else if (hour()==1) {
        fill(67, 49, 82,150);
    } else if (hour()==2) {
        fill(107, 66, 65,150);
    } else if (hour()==3) {
        fill(146, 84, 48,150);
    } else if (hour()==4) {
        fill(176, 97, 35,150);
    } else if (hour()==5) {
        fill(216, 115, 18,120);
    } else if (hour()==6) {
        fill(255, 132, 1,120);
    } else if (hour()==7) {
        fill(208, 147, 48,90);
    } else if (hour()==8) {
        fill(170, 159, 86,90);
    } else if (hour()==9) {
        fill(113, 177, 142,60);
    } else if (hour()==10) {
        fill(57, 195, 199,60);
    } else if (hour()==11) {
        fill(0, 212, 255,60);
    } else if (hour()==12) {
        fill(23, 186, 235,60);
    } else if (hour()==13) {
        fill(46, 159, 215,60);
    } else if (hour()==14) {
        fill(92, 106, 175,60);
    } else if (hour()==15) {
        fill(115, 80, 155,60);
    } else if (hour()==16) {
        fill(138, 53, 135,60);
    } else if (hour()==17) {
        fill(161, 27, 115,90);
    } else if (hour()==18) {
        fill(183, 0, 95,120);
    } else if (hour()==19) {
        fill(136, 8, 97,120);
    } else if (hour()==20) {
        fill(113, 12, 98,120);
    } else if (hour()==21) {
        fill(89, 16, 99,150);
    } else if (hour()==22) {
        fill(50, 22, 101,150);
    } else if (hour()==23) {
        fill(8, 17, 94,150);
    }
    rect(width/2,height/2,width,height);
}