Final Project

In my final project, the user starts at the year 1900 where there’s only fish in the ocean happily floating around and the thermometer on the left is quite low. As the reader reads the message on the top of the screen, they click the mouse and the year changes to 1940 where there is now oil barrels floating in the ocean. This addition of similar pollutants (oil barrels, plastic water bottles, face masks, and plastic bags) continues one by one as the user continues clicking the mouse. In the final click, year 2100, the user ends up killing the earth.

To do this project, I did some research onto the type of ocean pollutants that become more and more common as time passes. For example, in 2020, my animation spawns face masks in the ocean, which is a reflection of what truly happened in the real world due to COVID-19. The expectation from the user is quite straightforward as they just have to click their mouse and the animation progresses.

I think if I had more time, I would have changed more elements like the number of fish in the ocean, the color of the ocean gets dirtier, and the fish would have had expressions that go from happy to sad. Although I was unable to add these features, I am quite satisfied with how my project turned out.

Download

// Yash Mittal
// Section D 
// Final Project 

var waveValue = []; //array for front wave
var waveValue2 = []; //array for back wave
var noiseParam = 0.0001;
var noiseParam2 = 0.0001;
var noiseStep = 0.01;
var noiseStep2 = 0.01;
var x = []; //x value of fish
var y = []; //y value of fish
var dx = []; //x direction of fish
var c = []; //color for fish
var count = 0; //variable to keep track of user mousePressed
var clouds = 'https://i.imgur.com/RLqcPK7.png' //cloud image
var cloudsX = 0; //x value for 1st cloud
var cloudsX1 = -160; //x value for 2nd cloud
var cloudsDx = 2; //x direction speed for 1st cloud
var cloudsDx1 = 1; //x direction speed for 2nd cloud
var oilBarrel = 'https://i.imgur.com/nHrLCul.png' //oil barrel image
var numBarrels = 5; //number of barrels that spawn
var oilBarrelList = []; //array for barrels
var waterBottles = 'https://i.imgur.com/Xxl9tDk.png' //water bottle image
var numBottles = 10; //number of plastic water bottles that spawn
var waterBottlesList = []; //array for bottles
var faceMasks = 'https://i.imgur.com/wgsNqdq.png' //face mask image
var numMasks = 10; //number of face masks that spawn
var faceMasksList = []; //array for face masks
var plasticBag = "https://i.imgur.com/L8v1yKk.png" //plastic bag image
var numBags = 10; //number of plastic bags that spawn
var plasticBagList = []; //number of plastic bags that spawn
var sun = 'https://i.imgur.com/ftQzVK5.png'; //sun image
var angle_sun = 0; //rotation angle variable for sun
var thermometer = 'https://i.imgur.com/zcV3Srl.png'; //thermometer image
var deadEarth = 'https://i.imgur.com/tAGCTqA.png'; //dead earth image

function preload() {

    pimg = loadImage (clouds);
    oilImage = loadImage (oilBarrel);
    bottleImage = loadImage (waterBottles);
    maskImage = loadImage (faceMasks);
    plasticImage = loadImage (plasticBag);
    sunImage = loadImage (sun);
    thermoImage = loadImage (thermometer);
    earthImage = loadImage (deadEarth);

}

function setup () {

    createCanvas (600, 400);
    frameRate (15); 

    makeOil();

    makeBottle();

    makeMask();

    makeBag();

    for (var i = 0; i < 50; i ++) { //loop for fish value

        x [i] = random (25, width - 25);
        dx [i] = random (-5, 5);
        c [i] = color (random (0, 130), random (0, 130), random (0,130));
    }
}

function draw () {

    background (220);

    sunRotate(); //rotating circle

    cloudsP (); //drawing clouds

    timelineBar ();

    drawWaves1 ();

    for (i = 0; i < 20; i = i + 1) { //loop for fish value

        fill (c[i]);
        fish (x [i], waveValue [i] + 110, dx [i]); //making y value same as waveValue [i]
        x [i] = x [i] + dx [i];
        if (x [i] >= width - 25 || x [i] < 25 ) {
            dx [i] = - dx [i];

        }
   }

    highlightRect ();

    if (count >= 1) {

        for (var i = 0; i < numBarrels; i++) {
            updateOil(i); //moves oil barrels
            showOil (); //displays oil barrels
        }

        fill ("red");
        rect (17, 194, 8, 6); //increasing avg temp
    }

    if (count >=2) {

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

            updateBottle (i);
            showBottle ();
        }

        rect (17, 185, 8, 13); //increasing avg temp
     }

     if (count >=3) {

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

            updateMask (i);
            showMask ();
        }

        rect (17, 168, 8, 17); //increasing avg temp
     }

     if (count >=4) {

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

            updateBag (i);
            showBag ();
        }

        rect (17, 155, 8, 20); //increasing avg temp
     }

    image(thermoImage, 10, 140, 30, 80);

    drawWaves2 ();

    if (count >=5) {

        fill (0);
        rect (0, 0, width, height);
        image (earthImage, width / 2 - 240, height / 2 - 150, 250, 250);
        textSize(15);
        fill (255);
        text ("Congratulations, you killed the earth!", 330, 200);
     }  
}

function sunRotate () {

    push();
    rotate (radians(angle_sun));
    imageMode (CENTER);
    image (sunImage, 0, 0, 170, 170);
    pop();
    angle_sun = angle_sun + 2; //iterating angle for sun
}

function makeBag () {

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

        tx = random (10, width - 10); //random x value for bags
        ty = 0; //unassigned y value
        plasticBagList.push ({x:tx, y:ty, show:bagDraw, move: bagMove}); //create object & pushing in array
    }
}

function updateBag (i) { //function that holds y value of bottle and move function

    plasticBagList [i].y = waveValue[i] + 120; 
    plasticBagList [i].move ();
}

function showBag () { //function to display mask

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

        plasticBagList [i].show ();
    }
}

function bagDraw() {

    image (plasticImage, this.x, this.y, 35, 35); //calling image

}

function bagMove () {

    this.x = this.x - random (0, 3);

    if (this.x < -25) { //if bags exits canvas from left, it appears on right

        this.x = width + 20;
    }
}

function makeMask () {

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

        tx = random (10, width - 10); //random x value for masks
        ty = 0; //unassigned y value
        faceMasksList.push ({x:tx, y:ty, show: maskDraw, move: maskMove}); //creating object & pushing in array 
    }
}

function updateMask (i) { //function that holds y value of bottle and move function

    faceMasksList [i].y = waveValue[i] + 100;
    faceMasksList [i].move ();
}

function showMask () { //function to display mask

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

        faceMasksList [i].show ();
    }
}

function maskDraw () {

    image (maskImage, this.x, this.y, 30, 30); //calling image
}

function maskMove () {

    this.x = this.x - random (0, 2);

    if (this.x < -25) { //if masks exits canvas from left, it appears on right

        this.x = width + 20;
    }
}

function makeBottle () {

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

        tx = random (25, width - 25); //random x value for bottles
        ty = 0; //unassigned y value
        waterBottlesList.push ({x:tx, y:ty, show: bottleDraw, move: bottleMove});//creating object & pushing in array
    }
}

function updateBottle (i) { //function that holds y value of bottle and move function

    waterBottlesList [i].y = waveValue[i] + 90;
    waterBottlesList [i].move ();
}

function showBottle () { //function to display bottles

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

        waterBottlesList [i].show ();
    }
}

function bottleDraw () {

    image (bottleImage, this.x, this.y, 30, 30); //calling the image
}

function bottleMove () {

    this.x = this.x + random (0, 2);

    if (this.x > width) { //if bottles exits canvas from right, it appears on left

        this. x = -20; 
    } 
}

function makeOil () {

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

        tx = random (25, width - 25); //random x value for barrels
        ty = 0; //unassigned y value
        oilBarrelList.push({x:tx, y:ty, show: oilDraw, move: oilMove}); //creating object & pushing in array 
    }
}

function updateOil (i) { //function that holds y value of barrel and move function

    oilBarrelList [i].y = waveValue [i] + 100; //assigning waveValue to y value 
    oilBarrelList [i].move (); //move function
}

function showOil () { //function to display oil

    for (var i = 0; i < 5; i++) { //for loop to display barrels
        oilBarrelList [i].show();
    }
}

function oilDraw (){

        image(oilImage, this.x, this.y, 35, 58); //drawing oil
}

function oilMove () { //function iterating x value of each barrel

        this.x = this.x - random (0, 2);

        if (this.x < -40) {

            this.x = 600
        } 
}

function mousePressed () {

         count = count + 1; //count increases each time mouse is pressed
    }

function cloudsP () {

    image (pimg, cloudsX, 50, 160, 160);
    image (pimg, cloudsX1, 20, 150, 150);

    cloudsX = cloudsX + cloudsDx;
    cloudsX1 = cloudsX1 + cloudsDx1;

    if (cloudsX >= width) {

        cloudsX = -160;
    }

    if (cloudsX1 >= width) {

        cloudsX1 = -160;
    }
}

function fish (x, y, dx) { //fish function

    fill (c);
    ellipse (x, y, 20, 10);

    if (dx < 0) { //if fish is going left

        triangle (x + 10, y, x + 15, y + 5, x + 15, y - 5);

    } else if (dx >= 0) { //if fish is going right

        triangle (x - 10, y, x - 15, y + 5, x - 15, y - 5);

    }
}

function highlightRect () {

    if (count == 0) { 

        fill ("green");
        rect (85, 57, 20, 40); //1900

    }  

    if (count == 1) {

        fill("green");
        rect (165, 57, 20, 40); //1940

    }  

    if (count == 2) {

        fill ("green");
        rect (245, 57, 20, 40); //1980
    }

    if (count == 3) {

        fill ("green");
        rect (325, 57, 20, 40); //2020
    }

    if (count == 4) {

        fill ("green");
        rect (405, 57, 20, 40); //2060
    }

    if (count == 5) {

        fill ("green");
        rect (485, 57, 20, 40); //2100
    }

    print(count);
}

function drawWaves1 () { // water wave 1 function

    for (var i = 0; i < width / 5 + 1; i++) {

        var n = (noise(noiseParam));

        var value = map (n, 0, 1, 80, height);

        waveValue.push(value); 

        noiseParam = noiseParam + noiseStep;
    }

    beginShape (); // drawing randomised wave

    vertex (0, height); // point 1 

    for (var i = 0; i <= width / 5; i++) { // point 2 random

        fill (116, 205, 235, 200); //water with alpha value
        noStroke();

        vertex (i * 5, waveValue [i] + 80); // randomised wave

    }

        waveValue.shift (); // making wave move by removing first element
        waveValue.push (map (noise (noiseParam), 0, 1, 80, height)); // adding random array value
        noiseParam = noiseParam + noiseStep;

        vertex (width, height); // point 3

        endShape (CLOSE);

    }

function drawWaves2 () { // water wave 2 function

        for (var i = 0; i < width / 5 + 1; i++) {

        var n1 = (noise(noiseParam2));

        var value2 = map (n1, 0, 1, 40, height);

        waveValue2.push(value2); 

        noiseParam2 = noiseParam2 + noiseStep2;
    }

    beginShape (); // drawing randomised wave

    vertex (0, height); // point 1 

    for (var i = 0; i <= width / 5; i++) { // point 2 random

        fill (116, 205, 235, 90); //water with alpha value
        noStroke();

        vertex (i * 5, waveValue2 [i] + 40); // randomised wave 2

    }

        waveValue2.shift (); // making wave move by removing first element
        waveValue2.push (map (noise (noiseParam), 0, 1, 40, height)); // adding random array value
        noiseParam2 = noiseParam2 + noiseStep2;

        vertex (width, height); // point 3

        endShape (CLOSE);

    }

function timelineBar () { //timeline function

        stroke (0);
        strokeWeight(5);
        line (20, 40, 20, 70); //left line
        line (20, 55, 580, 55); //middle line
        line (580, 40, 580, 70); //right line

        for (var a = 0; a < 6; a++) { // for loop for date rectangles 

            noFill();
            strokeWeight(1);
            rect (a * 80 + 85, 57, 20, 40);
        }

        textSize (30);
        fill (0);
        text ("Click mouse to time travel", 120, 40);

        textSize (15);
        text ("1900", 78, 115);
        text ("1940", 158, 115);
        text ("1980", 238, 115);
        text ("2020", 318, 115);
        text ("2060", 398, 115);
        text ("2100", 478, 115);

    }

Project 10: Sonic-Story

sketch

// Yash Mittal
// Section D
//I made a basic 1v1 fighting game where two figures are fighting with swords
//The health bar of the two figures is shown at the bottom of the screen 

var count = 0; //variable for tracking frame count

function preload(){
    pimg = loadImage ("https://i.imgur.com/Fn5pkxI.jpg"); //background arena image
    thunderimg = loadImage ("https://i.imgur.com/VAJWvZZ.png"); //thunder image
    countdownThree = loadSound("http://localhost:8000/countdown_three.wav");
    countdownTwo = loadSound("http://localhost:8000/countdown_two.wav");
    countdownOne = loadSound("http://localhost:8000/countdown_one.wav");
    countdownFight = loadSound("http://localhost:8000/countdown_fight.wav");
    thunder = loadSound("http://localhost:8000/thunder_1.wav");
    sword = loadSound("http://localhost:8000/sword_1.wav");
    ouch = loadSound("http://localhost:8000/ouch_1.wav");
}

function soundSetup () {
    countdownThree.setVolume(0.5);
    countdownTwo.setVolume(0.5);
    countdownOne.setVolume(0.5);
    countdownFight.setVolume(0.5);
    thunder.setVolume(0.5);
    sword.setVolume(0.5);
    ouch.setVolume(0.9);
}

function setup () {
    createCanvas (480, 300);
    frameRate (10); 
    pimg.resize (480, 300); //resizing background image to canvas
    thunderimg.resize(480,300);
    useSound();
}

function draw () {

    image(pimg,0,0,width,height); //drawing background

    if (count>0 & count<9) { //countdown
        textSize(100);
        fill(255);
        stroke(255);
        text("3",width/2-40,height/2)
    }

    if (count>1 & count<3) {
        countdownThree.play();
    }

    if (count>=10 & count<19) { //countdown
        text("2",width/2-40,height/2)
    }

    if (count>10 && count < 12) {
        countdownTwo.play();
    }

    if (count>19 & count<28) { //countdown
        text("1",width/2-40,height/2)
    }

    if (count>19 && count<21) {
        countdownOne.play();
    }

    if (count>28 & count <38) { //fight
        text("FIGHT!",width/2-170,height/2)
    }

    if (count>28 && count<30) {
        countdownFight.play();
    }

    if (count>56 & count<=60) { //thunder
        image(thunderimg,45,-55,400,400)
    }

    if (count>56 && count <=58) {
        thunder.play();
    }

    if (count>=43) { //UI bars appear
        leftCharacterUI(0,0)
        rightCharaterUI(0,0)
    }
 
    if (count>=43 & count<=65) { //left player appears
        leftPlayer(160,122)
        swordLeft(0,0)
    }

    if (count>=43 && count<=75) { //right player appears
        rightPlayer(300,122)
        swordRight(0,0)
    }

    if (count>=43 && count<75) { //right player health bar shows up
        push();
        strokeWeight(0);
        fill (0,255,0)
        rect(320,270,70,5)
        pop();
    }

    if (count>=43 & count<105) { //left player health bar shows up 
        push();
        strokeWeight(0);
        fill(255,0,0);
        rect(90,270,70,5);
        pop();
    }

    if (count>=66 & count<=105) { //left player moves  right
        leftPlayer(245,122)
        swordLeft(60,60)
    }

    if (count>=75 && count<=105) { //right player moves right & health decreases
        rightPlayer(380,122)
        swordRight(-57,-57)
        fill(0,255,0)
        rect(320,270,40,5) //green health bar
    }

    if (count>70 && count<76) {
        sword.play();
    }

    if (count>=105 & count<=120) { //right & left player move left
        rightPlayer(280,122)
        swordRight(14,14)
        leftPlayer(145,122)
        swordLeft(-10,-10)
        fill(255,0,0)
        rect(90,270,70,5) //red health bar
        fill(0,255,0)
        rect(320,270,40,5) //green health bar
    }

    if (count>=121 && count<=145) { //right player moves left and hits left player
        rightPlayer(203,122)
        swordRight(69,69)
        leftPlayer(145,122)
        swordLeft(-10,-10)
        fill(0,255,0)
        rect(320,270,40,5) //green health bar
        fill(255,0,0)
        rect(90,270,30,5) //red health bar decreases
        sword.play();
    }

    if (count>=146 & count<=170) { // players move to bottom floor
        rightPlayer(300,196)
        swordRight(-54,52)
        fill(0,255,0)
        rect(320,270,40,5) //green health bar
        leftPlayer(230,192)
        swordLeft(0,100)
        fill(255,0,0)
        rect(90,270,30,5)
    }

    if (count>=171 && count<=195) { //left player kills right player
        rightPlayer(300,196)
        swordRight(-54,52)
        leftPlayer(271,192)
        swordLeft(28,128)
        fill(255,0,0)
        rect(90,270,30,5) //red health bar
    }

    if (count>169 && count<171) {
        sword.play();
    }

    if (count>196 & count<198) {
        ouch.play();
    }

    if (count>=196 & count<=270) { //player falls on ground and text appears
        leftPlayer(271,192)
        swordLeft(28,128)
        fill(255,0,0) 
        rect(90,270,30,5) //red health bar
        rightPlayerDead(330,220);
        textSize(13)
        fill(0)
        stroke(0)
        strokeWeight(0.5)
        text("Winner",100,287)
        text("Loser",335,287)
    }

    count++;
}

function leftPlayer(x,y) {

    noStroke();
    fill(232,190,172); //light head fill
    circle(x,y,20); //head of left character

    fill(200,0,0); //body fill
    beginShape(); //main body of left character
    curveVertex(x,y+22);
    curveVertex(x-10,y+8);
    curveVertex(x,y+13);
    curveVertex(x+10,y+8);
    endShape(CLOSE);

    fill(0,0,200); //feet fill
    beginShape(); //lower body of left character
    vertex(x,y+20);
    vertex(x-8,y+35);
    vertex(x,y+30);
    vertex(x+8,y+35);
    endShape(CLOSE);
}

function rightPlayer(x,y) {

    noStroke();
    fill(68,59,49); //dark head fill
    circle(x,y,20); //head of right character

    fill(255,215,0); //body fill
    beginShape(); //main body of right character
    curveVertex(x,y+22);
    curveVertex(x-10,y+8);
    curveVertex(x,y+13);
    curveVertex(x+10,y+8);
    endShape(CLOSE);

    fill(192,96,168); //feet fill
    beginShape(); //lower body of right character
    vertex(x,y+20);
    vertex(x-8,y+35);
    vertex(x,y+30);
    vertex(x+8,y+35);
    endShape(CLOSE);
}

function rightPlayerDead(x,y) {

    noStroke();
    fill(68,59,49); //dark head fill
    circle(x,y,20); // head of right character

    fill(255,215,0); //body fill
    beginShape(); //main body of right character
    curveVertex(x-22,y);
    curveVertex(x-8,y+10);
    curveVertex(x-13,y);
    curveVertex(x-8,y-10);
    endShape(CLOSE);

    fill(192,96,168); //feet fill
    beginShape(); //lower body of right character
    vertex(x-20,y);
    vertex(x-35,y-8);
    vertex(x-30,y);
    vertex(x-35,y+8);
    endShape(CLOSE);
}

function swordLeft(x,y) {

    push();
    translate(155,130);
    angleMode(DEGREES);
    rotate(315);
    noStroke();
    fill(0,230,40);
    rect(x+10,y+9,13,4); //bottom rectangle of sword
    fill(30,50,80);
    rect(x+20,y+5,4,12);//middle rectangle of sword
    fill(125,125,125);
    beginShape();//blade of sword
    vertex(x+24,y+13);
    vertex(x+39,y+13);
    vertex(x+43,y+11);
    vertex(x+39,y+9);
    vertex(x+24,y+9);
    endShape(CLOSE);
    pop();
}

function swordRight(x,y){

    push();
    translate(305,130);
    angleMode(DEGREES);
    rotate(45);
    scale(-1,1);
    noStroke();
    fill(0,250,0);
    rect(x+10,y+9,13,4); //bottom rectangle of sword
    fill(30,50,80);
    rect(x+20,y+5,4,12);//middle rectangle of sword
    fill(125,125,125);
    beginShape();//blade of sword
    vertex(x+24,y+13);
    vertex(x+39,y+13);
    vertex(x+43,y+11);
    vertex(x+39,y+9);
    vertex(x+24,y+9);
    endShape(CLOSE);
    pop();
}

function leftCharacterUI(x,y) {

    push();
    translate(80,250);
    fill(232,190,172);
    circle(x,y,30);
    fill(255);
    rect(x+10,y+20,70,20);
    pop();
}

function rightCharaterUI(x,y) {

    push();
    translate(310,250);
    fill(68,59,49);
    circle(x+90,y,30);
    fill(255);
    rect(x+10,y+20,70,20);
    pop();
}

For this project, I wanted to have the the sound of swords colliding with each other, and some environmental sounds like the thunder and the announcer voice at the beginning of the animation.

Project 9: Computational portrait

sketchDownload

// Yash Mittal
// Section D

function preload(){
    Pimg = loadImage ("https://i.imgur.com/PLF0Wbf.jpg"); // load image
}

function setup () {
    createCanvas (310, 480);  
    frameRate (100000000000000);
    background (0);
    Pimg.resize (310, 480);
}

function draw () {

    var a = random (width);
    var b = random (height);
    var pixela = constrain (floor (a), 0, width - 1);
    var pixelb = constrain (floor (b), 0, height - 1);
    var sw = random (0, 0.5); // randomising stroke weight
    var pixelColorLocationXY = Pimg.get (pixela, pixelb);

    strokeWeight (sw); // randomised stroke weight
    fill (pixelColorLocationXY);

    beginShape (); // making a new hexagonal shape
    vertex (a, b);
    vertex (a + 4, b);
    vertex (a + 7, b + 4);
    vertex (a + 5, b + 8);
    vertex (a, b + 8);
    vertex (a - 2, b + 4);
    endShape (CLOSE);

}


For this project, I wanted to develop a somewhat abstract self portrait that is made of hexagonal shapes that appear on screen in a linear fashion.

LO: A focus on women and non-binary practitioners in computational art

For this week’s blog post, I chose to analyze Ayah Bdeir’s work. Ayah Bdeir is the creator of LittleBits, a software that consist of small circuit boards with specific functions that the user can interact with and learn about these elements without any programming experience.

I really admire Bdier because her work has centered around empowering everyone to be an inventor, she’d had a particular focus on empowering underrepresented communities with the tools to become tomorrow’s change makers. Bdier is a graduate of MIT and has raised over $70 million for LittleBits from prominent investors in Silicon Valley and New York. Today, more than 20 million LittleBits are in the hands of kids around the world and are being used to learn about fundamental elements of technology.

Link to her website – http://ayahbdeir.com/

Project 7: Composition with curves

sketch

// Yash Mittal
// Section D

nPoints = 100;

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


function drawLemniscateCurve () { // coding the curve

    var x;
    var y;

    var a = 180;
    var h = mouseX; // X axis interaction
    var w = map (mouseY, 0, 480, 0, 240) // Y axis interaction

    stroke (205, 0, 11);
    strokeWeight (5);
    fill (255);

    beginShape ();

    for (var i = 0; i < nPoints; i = i + 1) {

        var t = map (i, 0, nPoints, 0, TWO_PI);

        x = (a * cos (t + w)) / (1 + pow(sin (t), 2)); // iterating x
        y = (a * sin (t + h)) * (cos (t)) / (1 + pow(sin (t), 2)); // iterating y

        vertex (x + w / 3, y + h / 3);
    }

    endShape (CLOSE);
}

function draw() { 

    background (0);

    push ();
    translate (width / 2, height / 2);
    drawLemniscateCurve ();


    }

After I chose my curve, I realized that it somewhat looks like Spiderman’s eyes from into the spider-verse and I wanted to experiment more with that so I tried to iterate different eyes based on the X and Y location of the mouse. I struggled with drawing the curve at first but once I understood the concept, iterating became pretty easy.

LO: Information Visualisation

For this weeks blog, I chose to analyze a project called “Melting memories – Drawing neural mechanisms of cognitive control” by Refik Anadol Studios. This project revolves around visualizing brain activity of participants when they were asked to recall a specific childhood memory. This childhood memory is not mentioned but it’s really interesting to think how different elements of these memories will have visually different representations. The technical workings of how these memories were displayed in a visual way are quite complex and it was hard for me to understand but the basics is that researchers took EEG data from the participants brains and converted that data into 3D models that we see. This sort application of data visualization can have en enormous on our society in different fields like healthcare, education etc.

Link to the project – https://www.creativeapplications.net/vvvv/melting-memories-drawing-neural-mechanisms-of-cognitive-control/

Visualization of brain activity

Project 6: Abstract Clock

Download

// Yash Mittal
// Section D

var r1; // road 1
var r2; // road 2
var r3; // road 3
var secondscarwidth;
var minutecarwidth;
var hourcarwidth;

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

function road1 (r1) {

    noStroke();

    fill (50);

    rect (0, (height / 2 - 30), width, (height / 2 - 160)); // road 1

    fill (250);

    rect (40, (height / 2 + 3), 50, 10);  // white stripe 1

    rect (150, (height / 2 + 3), 50, 10); // white stripe 2

    rect (260, (height / 2 + 3), 50, 10); // white stripe 3

    rect (370, (height / 2 + 3), 50, 10); // white stripe 4

    fill ("yellow");

    rect (0, (height / 2 - 30), width, 5); // yellow stripe 1

    rect (0, (height / 2 + 45), width, 5); // yellow stripe 2

}
    
function road2 (r2) {

    fill (50);

    rect (0, (height / 2 + 140), width, (height / 2 - 160)); // road 1

    fill (250);

    rect (40, (height / 2 + 173), 50, 10);  // white stripe 1

    rect (150, (height / 2 + 173), 50, 10); // white stripe 2

    rect (260, (height / 2 + 173), 50, 10); // white stripe 3

    rect (370, (height / 2 + 173), 50, 10); // white stripe 4

    fill ("yellow");

    rect (0, (height / 2 + 140), width, 5); // yellow stripe 1

    rect (0, (height / 2 + 215), width, 5); // yellow stripe 2

}

function road3 (r3) {

    fill (50);

    rect (0, (height / 2 - 200), width, (height / 2 - 160)); // road 1

    fill (250);

    rect (40, (height / 2 - 167), 50, 10);  // white stripe 1

    rect (150, (height / 2 - 167), 50, 10); // white stripe 2

    rect (260, (height / 2 - 167), 50, 10); // white stripe 3

    rect (370, (height / 2 - 167), 50, 10); // white stripe 4

    fill ("yellow");

    rect (0, (height / 2 - 200), width, 5); // yellow stripe 1

    rect (0, (height / 2 - 125), width, 5); // yellow stripe 2
}

function draw() { 

    background (10);

    var sc = second(); // seconds
    var mt = minute(); // minutes
    var hr = hour(); // hours

    road1 (r1);
    road2 (r2);
    road3 (r3);

    var secondscarwidth = map (sc, 0, 59, -5, width - 3); // variable for seconds
    var minutecarwidth = map (mt, 0, 59, -5, width - 3); // variable for minutes
    var hourcarwidth = map (hr, 0, 23, -5, width - 3); // variable for hours


    // car 1 - seconds car

    fill (150, 0, 0);
    rect (secondscarwidth, 60, 70, 40); // base of car
    fill (100, 0, 0);
    triangle (secondscarwidth + 35, 80, secondscarwidth + 70, 60, secondscarwidth + 70, 100); // window highlight
    fill (250, 0, 0);
    rect (secondscarwidth + 18, 70, 35, 20); // roof of car
    fill (255, 255, 0);
    rect (secondscarwidth + 70, 65, 2, 10); // headlight 1
    rect (secondscarwidth + 70, 85, 2, 10); // headlight 2
    fill (200, 0, 0);
    rect (secondscarwidth + 50, 57, 10, 3); // side mirror 1 
    rect (secondscarwidth + 50, 100, 10, 3); // side mirror 2
    

    // car 2 - minutes car

    fill (173, 216, 230);
    rect (minutecarwidth, 230, 70, 40); // base of car
    fill (30, 144, 255);
    triangle (minutecarwidth + 35, 250, minutecarwidth + 70, 230, minutecarwidth + 70, 270); // window highlight 
    fill (70, 130, 180);
    rect (minutecarwidth + 18, 240, 35, 20); // roof of car
    fill (255, 255, 0);
    rect (minutecarwidth + 70, 235, 2, 10); // headlight 1
    rect (minutecarwidth + 70, 255, 2, 10); // headlight 2 
    fill (135, 206, 255);
    rect (minutecarwidth + 50, 227, 10, 3); // side mirror 1
    rect (minutecarwidth + 50, 270, 10, 3); // side mirror 2

    // car 3 - hours car

    fill (0, 255, 127);
    rect (hourcarwidth, 400, 70, 40); // base of car
    fill (150, 205, 50); 
    triangle (hourcarwidth + 35, 420, hourcarwidth + 70, 400, hourcarwidth + 70, 440); // window highlight
    fill (0, 165, 0);
    rect (hourcarwidth + 18, 410, 35, 20); // roof of car
    fill (255, 255, 0);
    rect (hourcarwidth + 70, 405, 2, 10); // headlight 1
    rect (hourcarwidth + 70, 425, 2, 10); // headlight 2 
    fill (152, 251, 152);
    rect (hourcarwidth + 50, 397, 10, 3); // side mirror 1
    rect (hourcarwidth + 50, 440, 10, 3); // side mirror 2

    }

I wanted to keep my idea simple yet creative so I decided to make three roads with each car assigned to seconds, minutes, and hours respectively. The concept is very basic but I am happy with how the execution turned out because I was afraid that the car wouldn’t actually represent a car but I think it turned out well.

LO: Randomness

For this weeks blog, I chose to analyze Bogdan Soban’s artwork, which is generated through random generative processes. Each art pieces, although follows a similar workflow, look very unique and different compared to each other. His overall art style can be seen as a common theme in all his work but the way he depicts this theme is differed by elements like color palette and level of abstraction. Soban uses complex mathematical formulas to develop these highly abstract and complicated pieces. He also uses a programming language called Visual Basic for most of his abstract work and then uses a random number generator to calculate the seed start time for the generative process. On his website, you can see some of the programs he has used to create these art pieces.

Link to his website – http://www.soban-art.com/index-ang.asp

Example of Soban’s generative art

LO: 3D Graphics

For this week’s project, I chose a project is the 2009 sci-movie called Avatar by James Cameron. I chose this project because I am really astonished by the hyperrealistic yet magical graphics present in this project. For example, the facial graphics of Avatars, the ‘Pandora’ environment, the majestical animals present in this said environment etc. All these amazing photorealistic graphics present in the movie are computer generated using technologies like motion capture animation, which were developed with a lot of effort and thought. The facial expressions of the Avatars were created by designing customized skull caps for each individual actor which different small scaled technological objects embedded in these caps, which collect data and transmit it to the computers.
Elements like the environmental lighting for ‘Pandora’ and highlights and shadows etc. are made using new systems that were developed using computational algorithms and motion and performance capture tech.

Link to the movie ‘Avatar’ by James Cameron – https://www.avatar.com/movies/avatar/

Project 5: Wallpaper

sketchDownload

// Yash Mittal
// Section D

var x = 95;
var y = 95;

function setup() {
    createCanvas(600, 600);
    background (232, 217, 203);

    noLoop();
}

function draw() { 

    for (var col = 0.95; col <= 10; col = col + 2) {

        for (var row = 1.3; row <= 9; row = row + 2) {

           lion (x * 0.8 * col, y * row); 
        }
    }

}


function lion (x, y) {

    noStroke();

    fill (250, 68, 9);
    ellipse (x - 35, y + 35, 50, 50); // mane circle 1
    ellipse (x - 55, y + 2, 43, 45); // mane circle 2
    ellipse (x - 43, y - 39, 55, 50); // mane circle 3
    ellipse (x - 10, y - 63, 53, 53); // mane circle 4
    ellipse (x + 32, y - 50, 53, 53); // mane circle 5
    ellipse (x + 52, y - 10, 50, 50); // mane cirlce 6
    ellipse (x + 40, y + 30, 50, 50); // mane circle  7
    ellipse (x + 5, y + 50, 55, 55); // mane circle 8

    fill (254, 146, 9); // orange face 
    ellipse (x, y, 96, 90); // background of face  

    fill (59, 23, 9); // dark brown  
    ellipse (x - 25, y, 8, 12); // left eye
    ellipse (x + 25, y, 8, 12); // right eye

    fill (255, 209, 53); 
    ellipse (x, y + 5, 16, 35); // nose highlight 

    fill (255);
    ellipse (x, y + 20, 33, 22); // mouse background 

    fill (53, 22, 3);
    ellipse (x, y + 13, 20, 8); // nose

    rect (x - 1, y + 13, 1, 9); // line from nose to mouth

    strokeWeight (1);
    stroke (53, 22, 3);
    line (x - 6, y + 23, x + 6, y + 21); // mouth smile

    fill (255);
    noStroke ();
    ellipse (x - 26.5, y - 3, 3, 5); // left eye highlight
    ellipse (x + 23.5, y - 3, 3, 5); // right eye highlight

    fill (255, 170, 187); 
    ellipse (x - 25, y + 15, 12, 12); // left cheek highlights
    ellipse (x + 25, y + 15, 12, 12); // right cheek highlights

    fill (254, 146, 9);
    ellipse (x - 30, y - 40, 18, 18); // left ear base 
    ellipse (x + 30, y - 40, 18, 18); // right ear base

    fill (255, 209, 53);
    ellipse (x - 30, y - 40, 10, 10); // left ear highlight
    ellipse (x + 30, y - 40, 10, 10); // right ear highlight

     
}

I made a lion wallpaper for this project. I started off with drawing my ideas out and then I started making the different elements of the face. Next, I created the loops to repeat the pattern, which took a little bit of time because I got confused with the numbers.