mel – [OLD FALL 2020] 15-104 • Introduction to Computing for Creative Practice

Project 15: Final Project

mel — Fri, 11 Dec 2020 21:19:51 +0000

finalYeung2020 Download

//stores all the changes
var changes={
    activism: false, //political poster on the wall, b
    cramps: false, //typing sound, c
    battery: false, //low battery, d
    voted: false, //i voted sticker on wall, e
    text: false, //text notif from friend to hangout, f
    delivery: false, //notif that grubhub is here, g
    canvasNotifs: false, //notif that new assignment was posted, h
    mask: false, //mask on wall, i
    handshake: false, //handshake homepage, j
    rust: false, //keys turn brown, k
    night: false, //outside window is night now, l
    maskBox: false, //box of masks appear on desk, m
    dino: false, //dino game, n
    zeroPercent: false, //canvas grade page with a 0, o
    parents: false, //knocking sound, p
    askText: false, //text notif to ask if you're okay, q
    grenell: false, //grenell petition, r
    netflix: false, //netflix home page, s
    tikTok: false, //tik tok home page, t
    unmuted: false, //eating sound, u
    chegg: false, //chegg home page, w
    pills: false, //pill bottle on desk, x
    muted: false, //zoom page, muted y
    zoomFatigue: false, //yawn sound, z
}

//triggers for sound
var fr1=0;
var fr2=0;
var fr3=0;
var fr4=0;

//triggers congrats
var fr5=0

//arrays to store letters and corresponding messages
var alphabet = ["a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n", "o", "p", "q", "r", "s", "t", "u", "v", "w", "x", "y", "z"];
var letterMessage = [
    "An optimistic start: you're kind of excited that spring break got extended by a week!\nyou'll be back on campus in no time", //no change
    "Black Lives Matter: you do whatever you can to help the cause",
    "Cramps: you've typed so much in the past few months that your fingers start cramping", //typing sound
    "Dying: crap, your battery is low",
    "Election: you sent in your mail-in ballot",
    "Friends: your friend asks you to hangout but you feel too guilty to do anything",
    "Grubhub: I don't feel like making food so I'll just waste $20 on a $10 meal",
    "Homework: homework assignments just seem to pile up, but you're so unmotivated",
    "I forgot a mask: you walked to the store but forgot your mask, so you had to come back",
    "Job Applications: you know you have to applying for internships,\nbut you just don't have the effort to",
    "Keys: you haven't gone outside in so long, your keys are rusting",
    "Long Hours: time seems nonexistent when you work from home",
    "Masks: your mom buys you a giant box of masks", 
    "No Internet: oh no! Your internet went out, time to play the dino game :(",
    "Oops, I forgot: without your friends to remind you,\nyou accidentally forget to do your homework",
    "Parents: even though you're in lecture,\nyour parents don't understand and still try to talk to you", //knocking sound
    "Questions: it seems like every two seconds someone's asking if you're okay",
    "Richard Grenell: you sign the petition to fire him,\neven though you're not sure if anything will happen",
    "Streaming: you feel like you've watched everything on Netflix in the past few months",
    "Tik Tok: you spend your time endlessly scrolling",
    "Unmuted: you forgot to mute yourself so your entire class heard you eat your lunch!", //eating sound
    "Vaccine: you're just hoping there's a vaccine in time for summer", //no change
    "Work: has homework always been this hard?",
    "Xanax: you start having panic attacks and your doctor prescribes you Xanax",
    "You're Muted: you try to answer a question in class but forget you're muted,\nso you just look stupid",
    "Zoom Fatigue: after hours on Zoom for lectures, you feel exhausted", //yawn sound
]

//images that need to be loaded
var blm;
var boxOfMasks;
var canvasNotification;
var cheggHomePage;
var dinoGame;
var grenellPetition;
var grubhubText;
var handshakeHomePage;
var hangOutText;
var iVotedSticker;
var lowBatteryNotif;
var netflixHomePage;
var questionText;
var tikTokHomePage;
var zeroPercentGrade;

//sounds that need to be loaded
var eating;
var knockKnock;
var tired;
var type;

function preload(){
    //loads images
    blm=loadImage("https://i.imgur.com/JFLSHwn.jpg");
    boxOfMasks=loadImage("https://i.imgur.com/XEQ2DIE.png");
    canvasNotification=loadImage("https://i.imgur.com/iI0fpJP.png");
    cheggHomePage=loadImage("https://i.imgur.com/hdPz4NX.png");
    dinoGame=loadImage("https://i.imgur.com/tvKCVyP.png");
    grenellPetition=loadImage("https://i.imgur.com/i7QTQyK.png");
    grubhubText=loadImage("https://i.imgur.com/YROzHtr.png");
    handshakeHomePage=loadImage("https://i.imgur.com/K36qX37.png");
    hangOutText=loadImage("https://i.imgur.com/Nqt81BJ.png");
    iVotedSticker=loadImage("https://i.imgur.com/SfQn4pk.png");
    lowBatteryNotif=loadImage("https://i.imgur.com/cC8hsTT.png");
    netflixHomePage=loadImage("https://i.imgur.com/N9BohE8.jpg");
    questionText=loadImage("https://i.imgur.com/rQHSMwT.png");
    tikTokHomePage=loadImage("https://i.imgur.com/DlDOeHF.png");
    zeroPercentGrade=loadImage("https://i.imgur.com/exTf7NY.png");
    zoomMeeting=loadImage("https://i.imgur.com/RcF2XKO.jpg");
    xanaxBottle=loadImage("https://i.imgur.com/EcRn3JI.png");
    maskMessage=loadImage("https://i.imgur.com/qR7W3rv.png");

    //loads sounds
    eating=loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/12/crunch.wav");
    knockKnock=loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/12/knock.wav");
    tired=loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/12/yawn.wav");
    type=loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/12/typing.wav");
}
//setup functions
function setup() {
    createCanvas(600, 550);
    useSound();
    frameRate(1);
}

function soundSetup(){
    eating.setVolume(0.5);
    knockKnock.setVolume(0.5);
    tired.setVolume(0.5);
    type.setVolume(0.5);
}

function draw() {
    covid(); //changes the booleans
    drawRoom(); //draws the room

    typeAlphabet(); //types the alphabet and messages
    typeMessages();

    ifStatements(); //adds all the if statements to make the images and sounds appear/play
}

function covid(){ //when a key is pressed, boolean changes
    if (key == 'b') {
        changes.activism =true;
    }
    if (key == 'c') {
        changes.cramps =true;
    }
    if (key == 'd') {
        changes.battery =true;
    }
    if (key == 'e') {
        changes.voted =true;
    }
    if (key == 'f') {
        changes.text =true;
    }
    if (key == 'g') {
        changes.delivery =true;
    }
    if (key == 'h') {
        changes.canvasNotifs =true;
    }
    if (key == 'i') {
        changes.mask =true;
    }
    if (key == 'j') {
        changes.handshake =true;
    }
    if (key == 'k') {
        changes.rust =true;
    }
    if (key == 'l') {
        changes.night =true;
    }
    if (key == 'm') {
        changes.maskBox =true;
    }
    if (key == 'n') {
        changes.dino =true;
    }
    if (key == 'o') {
        changes.zeroPercent =true;
    }
    if (key == 'p') {
        changes.parents =true;
    }
    if (key == 'q') {
        changes.askText =true;
    }
    if (key == 'r') {
        changes.grenell =true;
    }
    if (key == 's') {
        changes.netflix =true;
    }
    if (key == 't') {
        changes.tikTok =true;
    }
    if (key == 'u') {
        changes.unmuted =true;
    }
    if (key == 'w') {
        changes.chegg =true;
    }
    if (key == 'x') {
        changes.pills =true;
    }
    if (key == 'y') {
        changes.muted =true;
    }
    if (key == 'z') {
        changes.zoomFatigue =true;
    }
}

function drawRoom(){
    background(230, 234, 245);
    noStroke();
    fill(74, 40, 2);
    rect(0, 350, 600, 130);
    drawWindow();
    fill(77, 77, 77);
    rect(0, 200, 400, 280);
    fill(0);
    rect(0, 215, 385, 270);
    fill(220);
    rect(0, 425, 600, 175);
    drawKey();
    push();
    translate(150, 40);
    scale(0.15);
    drawClock();
    pop();

    //draws sign with instructions
    fill(255, 255, 204);
    rect(15, 15, 80, 70);

    fill(0, 0, 51);
    textAlign(CENTER);
    textSize(12);
    text("Press keys\nin ABC order\nto finish", 55, 35);

}

function drawWindow(){
    //changes background to show time elapsed
    if (changes.night==true){
        fill(0, 20, 37);
        rect(300, 40, 300, 250);
    }
    if (changes.night==false){
        fill(81, 174, 255);
        rect(300, 40, 300, 250);
    }

    //grass
    fill(0, 102, 0);
    rect(300, 220, 300, 70);

    //mountains
    stroke(135, 126, 138);
    strokeWeight(1);
    for (var x=300; x5){
            textAlign(CENTER);
            textSize(25);
            text("Congrats, you finished 2020!", width/2, height-50);
        }
    }
    
}

//types the alphabet on screen
function typeAlphabet() {
    for (var i = 0; i < 26; i ++) {
        textAlign(CENTER);
        textSize(20);
        noStroke();
        var yLocation = 540;
        var x = map(i, 0, alphabet.length, 50, width - 30);
        if (keyCode === 65 + i) { //when key is down, letter turns grey
            fill(100);
            text(alphabet[i], x, yLocation);
        } else {
            fill(0, 0, 51);
            text(alphabet[i], x, yLocation);
        } 
    }
}

function keyReleased() { //replaces already clicked letters and their info with spaces in the respective arrays
    for (var i = 0; i < 26; i ++) {
        if (keyCode == 65 + i) {
            alphabet.splice(i, 1, " ");
            letterMessage.splice(i, 1, " ");
        }       
    }
}

//types the messages on screen
function typeMessages() {
    textAlign(CENTER);
    textSize(15);
    fill(0, 0, 51);
    for (var i = 0; i < 26; i ++) {
        if (keyCode === 65 + i) {
            text(letterMessage[i], width / 2, height - 60);  
        } 
    }   
}

//draws accurate clock on the wall
function drawClock(){
    //from https://p5js.org/examples/input-clock.html
    var cx;
    var cy;
    var secR;
    var minR;
    var hrR;
    var cD;
  
    var radius=width/2;
    secR=radius*0.71;
    minR=radius*0.6;
    hrR=radius*0.5;
    cD=radius*1.7
  
    cx=width/2;
    cy=height/2;
  
    noStroke();
    fill(15);
    ellipse(cx, cy, cD+25, cD+25);
    fill(255);
    ellipse(cx, cy, cD, cD);
  
    var s=map(second(), 0, 60, 0, TWO_PI)-HALF_PI;
    var m=map(minute()+norm(second(), 0, 60), 0, 60, 0, TWO_PI)-HALF_PI;
    var h=map(hour()+norm(minute(), 0, 60), 0, 24, 0, TWO_PI*2)-HALF_PI;
  
    stroke(0);
    strokeWeight(1);
    line(cx, cy, cx+cos(s)*secR, cy+sin(s)*secR);
    strokeWeight(2);
    line(cx, cy, cx+cos(m)*minR, cy+sin(m)*minR);
    strokeWeight(4);
    line(cx, cy, cx+cos(h)*hrR, cy+sin(h)*hrR);
  
    strokeWeight(2);
    beginShape(POINTS);
    for(var i=0; i<360; i+=6){
        var angle=radians(i);
        var x=cx+cos(angle)*secR;
        var y=cy+sin(angle)*secR;
        vertex(x, y);
    }
    endShape();
  }

My final project was inspired by working from home as a full time student last semester and this semester. Like many other students, I experienced a lot of difficulties and setbacks we don’t usually have at school and I wanted to show all the tiny things that happen to us everyday. I also wanted it to reflect the political unrest that was happening at the same time due to the rise of the Black Lives Matter movements, the election, and for CMU students the hiring of Richard Grenell.
My program is interactive and each change is triggered by the keyboard. Users are supposed to follow the alphabet and something will change on the screen or a sound will be played. Since there are some sounds, you will need to use a localhost in order to hear them or view it from WordPress.

Project 11: Landscape

mel — Sat, 14 Nov 2020 19:46:33 +0000

sketch Download

var sushi=["https://i.imgur.com/O6Q4Nml.png", "https://i.imgur.com/oi1loKM.png", "https://i.imgur.com/dGGroAU.png", "https://i.imgur.com/ycZcW4p.png"];

var sushi1;
var sushi2;
var sushi3;
var sushi4;

var plate=[];
var inChopstick=false;
var nSushi=100;
var x=80;
var speed=7;


function preload(){
    sushi1=loadImage(sushi[0]);
    sushi2=loadImage(sushi[1]);
    sushi3=loadImage(sushi[2]);
    sushi4=loadImage(sushi[3]);
}

function setup() {
    createCanvas(480, 360);
    var n = 0;
    for (var i = 0; i < 1000; i++){ //continually creates (1000) plates of sushi 
        plate[i] = makePlate(n);
        n -= 200;
    }
    frameRate(15);
}

function draw() {
    //draws conveyor belt
    background(0, 0, 70);
    noStroke();
    fill(100);
    rect(0, 0, 480, 250);
    fill(90);
    rect(0, 250, 480, 30);

    //draws plate + soysauce
    fill(215);
    ellipse(500, 400, 400, 200);
    ellipse(250, 340, 100, 75);
    fill(51, 25, 0);
    ellipse(250, 345, 80, 60);

    plateShow();

    //draws chopsticks
    fill(102, 51, 0);
    quad(mouseX-50, mouseY-2, mouseX-45, mouseY, mouseX-55, mouseY+200, mouseX-62, mouseY+198);
    quad(mouseX+50, mouseY-2, mouseX+45, mouseY, mouseX+55, mouseY+200, mouseX+62, mouseY+198);
}

function plateGo(){
    this.x+=this.dx;
}

function plateShow(){
    for(var i = 0; i < plate.length; i++){
        plate[i].go();
        plate[i].show();
        plate[i].mP();
    }
}

function makePlate(px){
    var plate={x: px, y:150, w:150, h:100,
    dx: 7, go:plateGo, show:drawPlate,
    sushi: random([sushi1, sushi2, sushi3, sushi4]),
    mP: mousePressed
    }
    return plate;
}

function drawPlate(){
    push();
    fill(215);
    noStroke();
    ellipse(this.x, this.y, this.w, this.h);
    stroke(185);
    noFill();
    ellipse(this.x, this.y, 0.75*this.w, 0.75*this.h);

    if (inChopstick==false){
        if (this.sushi==sushi1){
            image(sushi1, this.x-50, 95);
        }
        if (this.sushi==sushi2){
            image(sushi2, this.x-50, 95);
        }
        if (this.sushi==sushi3){
            image(sushi3, this.x-50, 95);
        }
        if (this.sushi==sushi4){
            image(sushi4, this.x-50, 95);
        } 
    }

    if (inChopstick==true){
        if (this.sushi==sushi1){
            image(sushi1, mouseX-50, mouseY-50);
        }
        if (this.sushi==sushi2){
            image(sushi2, mouseX-50, mouseY-50);
        }
        if (this.sushi==sushi3){
            image(sushi3, mouseX-50, mouseY-50);
        }
        if (this.sushi==sushi4){
            image(sushi4, mouseX-50, mouseY-50);
        } 
    }
    pop();
}

function mousePressed(){
    if (inChopstick==false){
        if (dist(this.x, this.y, mouseX, mouseY)<=50){
            inChopstick=true;
            print("false");
        }
    }
    if (inChopstick==true){
        if (dist(500, 400, mouseX, mouseY)<=50){
            inChopstick=false;
            print(true);
        }
    }
}

I decided to make a sushi conveyor belt for my generative landscape. The sushi pieces were drawn by me in ProCreate on my iPad.

The drawings of sushi I made

my sketch

After I figure out what I was going to do, I created an object for the sushi and plate to move across the screen on the belt. Then I made an array of the plates so they would always regenerate. I made chopsticks the same width apart as the pieces of sushi and then I called mousePressed within the function so you should take the chopsticks and move them over the sushi piece to pick all of them up. When you bring the chopsticks to the corner where the plate is, the sushi regenerates on the plate like you ate it.

Looking Outwards 11: A Focus on Woman Practitioners

mel — Sat, 14 Nov 2020 19:32:52 +0000

Andrea Ackerman is an American artist who specializes in New Media artworks. She graduated from Harvard Medical School and teaches 3D computer modeling at Pratt Institute. She is also a co-director of ISEA2011, an international nonprofit that combines art, technology and science, where she is the associate editor of Uncontainable, the catalog of the electronic art exhibition. The piece I’m going to be looking at is called “Momentum: an experiment in the unexpected” which was showcased in the San Jose Museum of Art. I admire her artwork because she was one of the first to integrated digital technology and art and her piece fabricates a synthetic nature by manipulating human facial features.

Momentum: an experiment in the unexpected

Project 10: Sonic Story

mel — Sat, 07 Nov 2020 22:48:38 +0000

nighttime Download

var my=270;
var mdy=1;
var windowOpen=true;
var star;
var monster;
var windowSound;
var clock;
var fr=0;

function preload(){
    clock=loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/clockticksound.wav");
    star=loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/star.wav");
    windowSound=loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/window.wav");
    monster=loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/growl-1.wav");
}

function setup() {
    createCanvas(480, 480);
    useSound();
    frameRate(1);
}

function soundSetup() {
    clock.setVolume(0.5);
    star.setVolume(0.2);
    windowSound.setVolume(0.5);
    monster.setVolume(1);
}

function draw() {
    background(38, 39, 59);
    drawStatic();
    //monster
    fill(0);
    if (fr>7 & fr<=17){
        monster.play();
        ellipse(260, my, 80, 60);
        rect(220, my, 80, 300-my);
        fill(255, 0, 0);
        triangle(235, my-13, 255, my-10, 245, my-5);
        triangle(285, my-13, 265, my-10, 275, my-5);
        //claws
        for (var i=0; i<3; i++){
            fill(0);
            quad(175+(i*10), 300, 180+(i*10), 295, 185+(i*10), 300, 180+(i*10), 330);
          }
        if (fr>8 & fr<=12){
            my-=5;
        }
        if (fr>12 & fr<=16){
            my+=5;
        }
    }

    //clock
    clock.play();
    push();
    translate(355, 40);
    scale(0.22);
    drawClock();
    pop();

    //star
    push();
    if (fr<5){
        star.play();
    }
    switch(fr){
        case 0: translate(290, 100); scale(0.05); break;
        case 1: translate(280, 105); scale(0.2); break;
        case 2: translate(260, 110); scale (0.3); break;
        case 3: translate(240, 115); scale(0.2); break
        case 4: translate(220, 120); scale(0.05); break;
        case 5: translate(200, 125); scale(0); break;
        default: scale(0); break;
    }

    noStroke();
    fill(255);
    drawStar();
    pop();

    //windowPane
    drawWindow();
    if (fr>6 & fr<=16){
        windowOpen=false;
    }
    if (fr==7){
        windowSound.play();
    }
    if (fr>16){
        windowOpen=true;
    }
    if (fr==17){
        windowSound.play
    }

    fr++;
    if (fr>=22){
        fr=0;
    }
}

function drawClock(){
  //from https://p5js.org/examples/input-clock.html
  var cx;
  var cy;
  var secR;
  var minR;
  var hrR;
  var cD;

  var radius=width/2;
  secR=radius*0.71;
  minR=radius*0.6;
  hrR=radius*0.5;
  cD=radius*1.7

  cx=width/2;
  cy=height/2;

  noStroke();
  fill(15);
  ellipse(cx, cy, cD+25, cD+25);
  fill(200);
  ellipse(cx, cy, cD, cD);

  var s=map(second(), 0, 60, 0, TWO_PI)-HALF_PI;
  var m=map(minute()+norm(second(), 0, 60), 0, 60, 0, TWO_PI)-HALF_PI;
  var h=map(hour()+norm(minute(), 0, 60), 0, 24, 0, TWO_PI*2)-HALF_PI;

  stroke(0);
  strokeWeight(1);
  line(cx, cy, cx+cos(s)*secR, cy+sin(s)*secR);
  strokeWeight(2);
  line(cx, cy, cx+cos(m)*minR, cy+sin(m)*minR);
  strokeWeight(4);
  line(cx, cy, cx+cos(h)*hrR, cy+sin(h)*hrR);

  strokeWeight(2);
  beginShape(POINTS);
  for(var i=0; i<360; i+=6){
      var angle=radians(i);
      var x=cx+cos(angle)*secR;
      var y=cy+sin(angle)*secR;
      vertex(x, y);
  }
  endShape();
}

function drawStatic(){
  //window
  noStroke();
  fill(64, 65, 90);
  square(25, 25, 300);
  fill(12, 13, 42);
  square(50, 50, 250);
  //bed frame and mattress
  fill(55, 34, 26);
  strokeWeight(3);
  stroke(32, 17, 11);
  rect(240, 375, 240, 105);
  rect(240, 350, 25, 130);
  noStroke();
  fill(192, 157, 167);
  quad(270, 400, 480, 400, 480, 480, 300, 480);
  fill(120, 82, 93);
  triangle(270, 480, 270, 400, 300, 480);
  //moon
  fill(248, 216, 8);
  ellipse(100, 100, 60, 60);
}

function drawStar(){
    //same code as star example from arrays lecture
    var starX=[50, 61, 83, 69, 71, 50, 29, 31, 17, 39];
    var starY=[18, 37, 43, 60, 82, 73, 82, 60, 43, 37];
    var nPoints=starX.length;
    beginShape();
    for (var i=0; i





For this project I wanted to have a scene where someone goes to bed and wakes up in the middle of the night to see a monster for the spooky vibes. I struggled a bit trying to figure out all of the objects I was going to animate so I added a shooting star in the beginning.



I got the clock from the p5.js reference site and I used the same code for the star that we had in our Arrays lecture previously in the semester.



Looking Outwards 10: Computer Music
mel — Sat, 07 Nov 2020 22:43:09 +0000

I choose to look into Michel Waisvisz and his work “Hyper Instruments.” Waisvisz was a Dutch composer and performer and invented many experimental musical instruments. He worked at STEIM in Amsterdam from 1981 until 2008. I admire Waisvisz because of his innovation and the way he blends technology and music theory together to make new instruments. I wouldn’t be able to think of half of the things he does. He uses a lot of oscillators to get his sounds and has also taken sensor data and converted it into MIDI way back in 1984, the first to do so. Waisvisz was always trying to challenge people’s definition of music by looking to new electronic instruments, and you have definitely see that in this piece.









Project 09: Computational Portrait
mel — Sat, 31 Oct 2020 20:58:44 +0000

For my computation project, I took a photo my friend took of me throwing an apple in the air. I eventually settled on using points to display my photo, but I used randomGaussian() to make the points condense at the apple and spread out from there. That way, there’s more points around the apple and less around the edges.



Original photo
Phase 1
Phase 2
Final Phase



Looking Outwards 09: On Looking Outwards
mel — Sat, 31 Oct 2020 20:52:04 +0000

For this week’s Looking Outwards, I looked at Shaun’s (I worked with him in lab) LO for week 7 on Information Visualization. Shaun talked about Stefanie Posavec’s collaboration project with Greg McInerny titled, “(En)tangled Word Bank.” I agree with Shaun that this project is a very cool way to portray evolution, and I think that the six different editions of the project show how Darwin’s “On the Origin of Species.” One thing I would add is that Posavec is very interested in wearable art/art that can be interacted with and utilized in common settings, so it makes sense that she’s interested in evolution and the study of biological life.



(En)tangled Word Bank
Greg McInerny (British, born 1977) of Microsoft Research, Cambridge (UK, est. 1997) Stefanie Posavec (American, born 1981)
2009



Project 07: Composition with Curves
mel — Sat, 17 Oct 2020 18:10:05 +0000

I decided to go with a butterfly curve because I thought it looked cool. Because of the name, I decided to make my project a butterfly flying in the sky. For the background, I just reused my clouds that I made for last week’s deliverables. Instead of having them move depending on what minute it was, I just set a constant to add to the x values of the ellipses the clouds were made of. 



butterflyDownloadvar translateX;
var translateY;
var nPoints=1000;
var butterfly=true;
var cloudScale=[0.5, 0.75, 1, 1.25, 1.5];
var x=0;
var dx=0.1;

function setup() {
    createCanvas(480, 480);
    translateX=width/2;
    translateY=height/2;
}

function draw() {
    background(222, 245, 253);
    drawClouds();
    push();
    translate(translateX, translateY);
    drawButterfly();
    pop();
}

function drawButterfly(){
    //Butterfly curve https://mathworld.wolfram.com/ButterflyCurve.html
    //this draws a butterfly curve to make the butterfly
    beginShape();
    scale(50);
    strokeWeight(0.02);
    stroke(255, 200);
    var x;
    var y;
    var angle=radians(map(mouseY, 0, height, 0, 360)); //rotation depends on mouseY
    rotate(angle);
    var m=map(mouseX, 0, width, 0, 25); //the size/extent of the curve of the butterfly depends on mouseX
    for (var i=0; iwidth){
        x=0;
    }
}




It rotates depending on where mouseY is and also draws the curve as mouseX goes from left to right.



You can also click to change the origin of the image and move the butterfly around.



Looking Outwards 07: Information Visualization
mel — Sat, 17 Oct 2020 17:59:43 +0000

This week, I decided to look at Chris Harrison’s Amazon Book Map He looked at 735,323 books and captured similarity data between them based on what Amazon recommended. He then color coded them depending on genre and created a visualization of his findings. I really admire the effort he put into it and the way it all came together in a mosaic like pattern. The algorithms he used created the layout and clustering but he noted that his algorithm didn’t work well for unstructured graphs. Harrison has created a lot of these visualizations and is trying to look at a new way to display data, and I think he was very successful with this. Especially color coding, it allows the user to see how different genres mesh together in a more user-friendly way.



Chris Harrison, Amazon Book Map



Project-06: Abstract Clock
mel — Sat, 10 Oct 2020 18:18:19 +0000

treeDownload/// 

var lineLength = 75;
var x = 120;
var y = 240;
var branchAngle = 0;
var strokeGreenColor = 255;
var branchThickness = 10;
var bailout = 10;
var cloudScale=[0.5, 0.75, 1, 1.25, 1.5];
var move;
var b=25;
var h;

function setup() {
    createCanvas(480, 480);
    stroke(0, strokeGreenColor, 0);
    strokeWeight(branchThickness);
}

function draw() {
    //the color of the sky changes depending on what hour it is, if it's before noon, the color turns bluer and after noon it gets darker
    h=hour();
    if (h<12){
        background(51, 15, 20.8*h);
    } else {
        background(51, 15, 255-20.8*(h-12));
    }
    push();
    //the clouds are the minute hand, they move to the left depending on what minute it is
    move = map(minute(), 0, 60, 0, width);
    translate(move, 0)
    drawClouds();
    pop();
    push();
    translate(width / 2, height);
    translate(0, 120-2*second());
    //makes the tree spread out with seconds
    branchAngle = map(second(), 0, 60, 1, 100);
    drawTree(lineLength);
    pop();
}

function drawClouds(){
    //smallest cloud--cloud 1
    push();
    fill(250, 250);
    noStroke();
    scale(cloudScale[0]);
    translate(500,100);
    cloud();
    pop();

    //cloud 2
    push();
    fill(250, 250);
    noStroke();
    scale(cloudScale[1]);
    translate(100, 250);
    cloud();
    pop();

    //cloud 3
    push();
    fill(250, 250);
    noStroke();
    scale(cloudScale[2]);
    translate(400, 350);
    cloud();
    pop();

    //cloud 4
    push();
    fill(250, 250);
    noStroke();
    scale(cloudScale[3]);
    translate(0, 50);
    cloud();
    pop();

    //cloud 5
    push();
    fill(250, 250);
    noStroke();
    scale(cloudScale[4]);
    translate(-50, 250);
    cloud();
    pop();
}

function cloud(){
    ellipse(30, 10, 60, 40);
    ellipse(40, 40, 90, 50);
    ellipse(0, 40, 100, 50);
    ellipse(0, 15, 55, 35);
}

function drawTree(lineLength) {
    //Coloring leaves
    if (lineLength < 15) {
        strokeGreenColor = map(lineLength, 0, 150, 1, 255);
        stroke(0, 150, 0, 150);
        strokeWeight(9);
    }
  //Coloring the branch
    if (lineLength > 15) {
        strokeGreenColor = map(lineLength, 0, 150, 1, 255);
        stroke(139, 69, 19, strokeGreenColor+100);
        branchThickness = map(lineLength, 0, 150, 0, 25);
        strokeWeight(branchThickness);
    }
    if (lineLength >= bailout) {
        line(0, 0, 0, -lineLength * 2);
        translate(0, -lineLength * 2);

        //Right branch 1
        push();
        rotate(radians(branchAngle));
        line(0, 0, 0, -lineLength);
        drawTree(lineLength * 0.65);
        pop();

        //Left branch 1
        push();
        rotate(radians(-branchAngle));
        line(0, 0, 0, -lineLength);
        drawTree(lineLength * 0.65);
        pop();

        //Right branch 2
        push();
        rotate(radians(branchAngle * 0.5));
        line(0, 0, 0, -lineLength);
        drawTree(lineLength * 0.5);
        pop();

        //Left branch 2
        push();
        rotate(radians(-branchAngle * 0.5));
        line(0, 0, 0, -lineLength);
        drawTree(lineLength * 0.7);
        pop();

      }
}




For my project I decided to use a tree, clouds, and the sky as my clock. The tree grows and spreads out with what second it is, and I used the map function to change the angle proportionally to the seconds. The clouds move from left to right based on what minute it is, and at each hour the sky changes color. I wanted to use something organic like a plant to represent my clock but I originally sketched a vine, not a tree. 



I decided to use a tree after seeing what someone made on GitHub. I was researching how to make plants that show growth in p5.js and found a tree which uses recursion to add branches. I used the same technique and changed the colors so it looked like how I wanted it to.