sketch

//bgoeke Sec. B Final Project

var gravity = 0.3;   // downward acceleration
var spring = 0.7; // how much velocity is retained after bounce
var drag = 0.0001;    // drag causes particles to slow down
var np = 0;      // how many particles
var rpx = [];
var rpy = [];
var rpc = 10000;
var count = 0;

function preload() {
	gas = loadImage("https://courses.ideate.cmu.edu/15-104/f2021/wp-content/uploads/2021/12/greenhousegas.png")
	plant = loadImage("https://courses.ideate.cmu.edu/15-104/f2021/wp-content/uploads/2021/12/plant1.png")
	bin = loadImage("https://courses.ideate.cmu.edu/15-104/f2021/wp-content/uploads/2021/12/rcbin2.png")

}
 
function particleStep() {
    this.age++;
    this.x += this.dx;
    this.y += this.dy;
    if (this.x > width - 80 & this.y > height - 100) { // bounce off right wall
        this.x = (width - 80) - (this.x - (width-80));
        this.dx = 0;
    } else if (this.x < 0) { // bounce off left wall
        this.x = -this.x;
        this.dx = -this.dx * spring;
    }

    if (this.x < width - 180 & this.y > height - 100) { // bounce off right wall
        this.x = (width) - (this.x - (width));
        this.dx = 0;
    }


    if (this.y > height-20) { // bounce off bottom
        this.y = (height-20) - (this.y - (height-20));
        this.dy = 0;
    } else if (this.y < 0) { // bounce off top
        this.y = -this.y;
        this.dy = -this.dy * spring;
    }

    //deals with repeler
    var rpx = mouseX
    var rpy = mouseY
    	var dp = dist(this.x, this.y, rpx, rpy);
    	var f = rpc / (Math.pow(dp , 2));
    	var dirx = (this.x - rpx) / dp;
    	var diry = (this.y - rpy) / dp;
    	this.x += f * dirx;
    	this.y += f * diry;

    	this.dy = this.dy + gravity; // force of gravity
    // drag is proportional to velocity squared
    // which is the sum of the squares of dx and dy
    var vs = Math.pow(this.dx, 2) + Math.pow(this.dy, 2);
    // d is the ratio of old velocty to new velocity
    var d = vs * drag;
    // d goes up with velocity squared but can never be
    // so high that the velocity reverses, so limit d to 1
    d = min(d, 1);
    // scale dx and dy to include drag effect
    this.dx *= (1 - d);
    this.dy *= (1 - d);
}


 
 
function particleDraw() {
    image(bin,180,290,210,120);
    image(gas, this.x, this.y, 40, 40);
}
 
 
// create a "Particle" object with position and velocity
function makeParticle(px, py, pdx, pdy) {
    p = {x: px, y: py,
         dx: pdx, dy: pdy,
         age: 0,
         stepFunction: particleStep,
         drawFunction: particleDraw
        }
    return p;
}




    function countParticle() {
        count ++
        //count = (count);
    }

    function gameOver() {
        if (int(count/1000) > 80) {
            rect(width/2, height/2, width, height);
            textSize(60);
            text('YOU WIN !', 10, height/2)
            textSize(40);
            text(int((millis())/1000), 100, 250);
            text('seconds', 155, 250);
            noLoop();
    }

    }



 
var particles = [];
 
 
function setup() {
    createCanvas(400, 400);
    frameRate(10);

}
 
 
// draw all particles in the particles array
//
function draw() {
    background('lightblue');
    noStroke();
    fill(80);
    ellipse(80,100,160,50);
    ellipse(250,20,350,60);
    ellipse(100,100,100,50);
    stroke(0);
    strokeWeight(1);
    fill(255,10,5);
    textSize(15);
    text('How Fast Can You Get Rid Of The Gas?', 120,20)
    fill(0,255,0);
    rectMode(CENTER);
    textSize(50);
    text(int(count/1000), 10, height/2);

    image(plant,mouseX,mouseY,80,80);
    var newp = makeParticle(50, 50,
                                random(-10, 10), random(-10, 0));
        particles.push(newp);

    stroke(0);
    strokeWeight(10);
    newParticles = [];


    //if (mouseIsPressed) {
        //var newp = makeParticle(mouseX, mouseY,
                                //random(-10, 10), random(-10, 0));
        //particles.push(newp);
    //}
 
    // newParticles will hold all the particles that we want to
    // retain for the next call to draw() -- we will retain particles
    // if the age is < 200 (frames). Initially, newParticle is empty
    // because we have not found any "young" particles yet.

    for (var i = 0; i < particles.length; i++) { // for each particle
        var p = particles[i];
        p.stepFunction();
        p.drawFunction();

        if (p.y > height - 80 & p.x > width-180 && p.x < width-80) {
            newParticles.push(p);
            countParticle()
        }

        // since we are "looking" at every particle in order to
        // draw it, let's use the opportunity to see if particle[i]
        // is younger than 200 frames. If so, we'll push it onto the
        // end of newParticles.
        if (p.age < 3000) {
            newParticles.push(p);
        }
    }

    gameOver();
   
    // now, newParticles has EVERY particle with an age < 200 frames.
    // these are the particles we want to draw next time, so assign
    // particles to this new array. The old value of particles, i.e.
    // the entire array, is simply "lost" -- Javascript will reclaim
    // and reuse the memory since that array is no longer needed.
    particles = newParticles;



}

For my program I wanted to create a falling game where you can manipulate multiple objects to get them in some sort of cup or final destination. In this game you use the plant as a repeler to direct the bad greenhouse gasses into the recycling bin. The goal is to get the counter to eighty and there’s some bonuses when you use the plant to bounce the gas around quicker. At eighty the game stops and gives you the time it took to finish the game. The ultimate competition in the game is to get the time as quickly as you can. The best time I got was 15 seconds. If I had some more time I wanted to make it so the recycling bin actually gets filled up with gases and overfills. I would’ve also liked to make more levels where there are existing obstacles that you have to get around with the plant.

sketch

//bgoeke Sec. B Final Project

var gravity = 0.3;   // downward acceleration
var spring = 0.7; // how much velocity is retained after bounce
var drag = 0.0001;    // drag causes particles to slow down
var np = 0;      // how many particles
var rpx = [];
var rpy = [];
var rpc = 10000;
var count = 0;

function preload() {
	gas = loadImage("http://localhost:8080/greenhousegas.png")
	plant = loadImage("http://localhost:8080/plant1.png")
	bin = loadImage("http://localhost:8080/rcbin2.png")

}
 
function particleStep() {
    this.age++;
    this.x += this.dx;
    this.y += this.dy;
    if (this.x > width - 80 & this.y > height - 100) { // bounce off right wall
        this.x = (width - 80) - (this.x - (width-80));
        this.dx = 0;
    } else if (this.x < 0) { // bounce off left wall
        this.x = -this.x;
        this.dx = -this.dx * spring;
    }

    if (this.x < width - 180 & this.y > height - 100) { // bounce off right wall
        this.x = (width) - (this.x - (width));
        this.dx = 0;
    }


    if (this.y > height-20) { // bounce off bottom
        this.y = (height-20) - (this.y - (height-20));
        this.dy = 0;
    } else if (this.y < 0) { // bounce off top
        this.y = -this.y;
        this.dy = -this.dy * spring;
    }

    //deals with repeler
    var rpx = mouseX
    var rpy = mouseY
    	var dp = dist(this.x, this.y, rpx, rpy);
    	var f = rpc / (Math.pow(dp , 2));
    	var dirx = (this.x - rpx) / dp;
    	var diry = (this.y - rpy) / dp;
    	this.x += f * dirx;
    	this.y += f * diry;

    	this.dy = this.dy + gravity; // force of gravity
    // drag is proportional to velocity squared
    // which is the sum of the squares of dx and dy
    var vs = Math.pow(this.dx, 2) + Math.pow(this.dy, 2);
    // d is the ratio of old velocty to new velocity
    var d = vs * drag;
    // d goes up with velocity squared but can never be
    // so high that the velocity reverses, so limit d to 1
    d = min(d, 1);
    // scale dx and dy to include drag effect
    this.dx *= (1 - d);
    this.dy *= (1 - d);
}


 
 
function particleDraw() {
    image(bin,180,290,210,120);
    image(gas, this.x, this.y, 40, 40);
}
 
 
// create a "Particle" object with position and velocity
function makeParticle(px, py, pdx, pdy) {
    p = {x: px, y: py,
         dx: pdx, dy: pdy,
         age: 0,
         stepFunction: particleStep,
         drawFunction: particleDraw
        }
    return p;
}




    function countParticle() {
        count ++
        //count = (count);
    }

    function gameOver() {
        if (int(count/1000) > 80) {
            rect(width/2, height/2, width, height);
            textSize(60);
            text('YOU WIN !', 10, height/2)
            textSize(40);
            text(int((millis())/1000), 100, 250);
            text('seconds', 155, 250);
            noLoop();
    }

    }



 
var particles = [];
 
 
function setup() {
    createCanvas(400, 400);
    frameRate(10);

}
 
 
// draw all particles in the particles array
//
function draw() {
    background('lightblue');
    noStroke();
    fill(80);
    ellipse(80,100,160,50);
    ellipse(250,20,350,60);
    ellipse(100,100,100,50);
    stroke(0);
    strokeWeight(1);
    fill(255,10,5);
    textSize(15);
    text('How Fast Can You Get Rid Of The Gas?', 120,20)
    fill(0,255,0);
    rectMode(CENTER);
    textSize(50);
    text(int(count/1000), 10, height/2);

    image(plant,mouseX,mouseY,80,80);
    var newp = makeParticle(50, 50,
                                random(-10, 10), random(-10, 0));
        particles.push(newp);

    stroke(0);
    strokeWeight(10);
    newParticles = [];


    //if (mouseIsPressed) {
        //var newp = makeParticle(mouseX, mouseY,
                                //random(-10, 10), random(-10, 0));
        //particles.push(newp);
    //}
 
    // newParticles will hold all the particles that we want to
    // retain for the next call to draw() -- we will retain particles
    // if the age is < 200 (frames). Initially, newParticle is empty
    // because we have not found any "young" particles yet.

    for (var i = 0; i < particles.length; i++) { // for each particle
        var p = particles[i];
        p.stepFunction();
        p.drawFunction();

        if (p.y > height - 80 & p.x > width-180 && p.x < width-80) {
            newParticles.push(p);
            countParticle()
        }

        // since we are "looking" at every particle in order to
        // draw it, let's use the opportunity to see if particle[i]
        // is younger than 200 frames. If so, we'll push it onto the
        // end of newParticles.
        if (p.age < 3000) {
            newParticles.push(p);
        }
    }

    gameOver();
   
    // now, newParticles has EVERY particle with an age < 200 frames.
    // these are the particles we want to draw next time, so assign
    // particles to this new array. The old value of particles, i.e.
    // the entire array, is simply "lost" -- Javascript will reclaim
    // and reuse the memory since that array is no longer needed.
    particles = newParticles;



}

For my program I wanted to create a falling game where you can manipulate multiple objects to get them in some sort of cup or final destination. In this game you use the plant as a repeler to direct the bad greenhouse gasses into the recycling bin. The goal is to get the counter to eighty and there’s some bonuses when you use the plant to bounce the gas around quicker. At eighty the game stops and gives you the time it took to finish the game. The ultimate competition in the game is to get the time as quickly as you can. The best time I got was 15 seconds. If I had some more time I wanted to make it so the recycling bin actually gets filled up with gases and overfills. I would’ve also liked to make more levels where there are existing obstacles that you have to get around with the plant.

My process for this project was to design a way for each created image to be unique. The double clicked function allows one to create and vibrant background that can then be drawn over with the original image. My face in the original is a surprised face so I used that text to allow one to create funny moments where certain parts of the image can be filled in more than other parts. I was unable to embed the code as the embeding instructions do not work.

A particular artist that inspires me is Eva Schindling. Schindling is a master in digital art, creating hardware and software solutions within the fields of art and technology, reaching far past the typical staticness of graphic design. She studied Art and Technology gaining masters from Chalmers University as well as a degree in Interaction and Media Design from FH Joanneum. She currently works in Montreal and has seemingly studied all around the world. Broadly speaking, she’s very interested in the dynamics of non-linear processes with her work ranging from robotics, art, and sculpture, creating complex algorithms that drive her projects. One project I found particularly inspiring was her project called “Liquid Sound Collision”. This project is a sculpture she made with a very unique modeling process after which she 3D printed the structure in an ABS plastic. Using a 2D fluid to create data sets that she interacts with sound files. The amplitude information of the sound files affects the velocity field of the fluid and as sounds move toward the center of that field Schindling manually chose moments before they collide, storing the velocity field data at that point. The values of the velocity field are then “mapped to a height value to create a 3-dimensional landscape.” This is then wrapped around a cylindrical form to create the final sculptures displayed. I admire the extensive processes she takes in order to create her artwork, using deep analysis to create form. This type of work allows for a really complex piece of work with a strong underlying context that grounds her project.

Link: http://www.evsc.net/home/liquid-sound-collision

Molly Wright Steenson has studied artificial intelligence and its relation to architecture. In her talk at Eyeo in 2017 she goes back to the origins of artificial intelligence and explains how this process is new at all. She’s a professor here at CMU in the School of Design. She studied Architecture at Princeton and then got a master’s in environmental design at Yale. As a historian she studied artificial intelligence and traced how it’s poured over into various aspects over the last 50 years. She describes herself as a writer, professor, historian, and designer. Most recently she works as a professor researching the “history of design, architecture, computation and artificial intelligence.” Steenson studies the past very deeply in order to understand how the topic will affect the future. Specifically, in her Eyeo talk she highlights the importance of the history of artificial intelligence by understanding the ideas of influential people within the field since the beginning. She looks at three architects, Cedric Price, Nicholas Negroponte, and Christopher Alexander, that connect to artificial intelligence. One more recent project that’s interested me is her connection of the internet to the pneumatic postal service starting in the late 19th century. In her essay, “A Series of Tubes”, she goes into depth about the history of the internet and computation, going as far back in time to the beginnings of the postal service. The way she presents her ideas is really effective because she shifts people’s perspective from all the things they presently hear on the topic and boils it down to the history of her ideas. In this way she connects the audience to a larger context of the topic and creates a base understanding that supports her beliefs. I could learn from this on my own projects by digging deep into the roots of my topic or issue, understanding the complexities within the history to see the underlying connections that would help reach an audience, giving them a larger outlook before going into specifics. 

Website Link: http://www.girlwonder.com/

Essay Link: https://muse.jhu.edu/article/780725

Martin Wattenberg works with computational information visualizations and one project that was particularly interesting to me was the one about machine learning. In this project he used the Embedding Projector, which is a visualization tool for high-dimensional data which he helped create. The algorithms generate the work by using the input data to computational visualize and display the information. Martin co-founded Google People + AI Research which has worked toward further understanding and improving human / AI interaction. The key goals of his research and projects into machine learning are to broaden interaction within AI and computational representation tools. The Embedding Projector is what’s shown above and is a key for creating interactive exploration into high-dimensional data. This type of interaction allows new patterns and connections can be made within the data as it’s visualized in various ways. Ultimately the artist’s sensibilities are able to be specific to each data set as it can be visualized in different ways.

http://bewitched.com/machine-learning.html

Randomness within art and all other aspects of life is extremely interesting. There are different types of random numbers and each type can be used in different cases. One person who’s interested me in expressing randomness is Rami Hammour. Rami Hammour is an architectural designer who created a digital piece of artwork centered toward the idea of randomness. I’m not sure of the algorithms used to create the piece although the artwork itself is not random. Like pseudo-random numbers his work has limitations and expectations that don’t make his work truly ‘random’. But the overall idea of the work is to not directly express randomness but to describe the complex relationship between human experience, “digital media, authorship, and even conceptions of reality and the divine”. The artist’s sensibilities lie in the parameters behind the artwork and the understanding that randomness is prevalent everywhere, even in nature, yet it can be completely elusive in a digital system, in which they’re designed with all the forces and processes are known and quantifiable.

Link: https://www.fastcompany.com/3052333/the-value-of-randomness-in-art-and-design

Within 3D computer graphics there are many different applications and possible uses for the various modeling programs that are used to create them. One person who works in 3D computer graphics is Mike Winkelmann, also known as “beeple”. Beeple is a digital artist who works with many different programs to create 3D images as well as drawing 3D images himself. He has been a digital artist for over 20 years and has done projects like “Everydays” since. Specifically, these “everydays” are digital art pieces in which he forces himself to create a new one everyday. I admire these projects because they’re all so different and oftentimes very bizarre. The algorithms that he uses are in programs like ‘Blender’ or ‘Toon Boom’. These programs are so powerful and allow him to model very precise things and produce high quality renderings at the end. He’s a very unique and outgoing artist and these sensibilities really manifest themselves in the crazy ideas that he creates. This specific image is one of those everydays that I like most. 

Link: https://www.nytimes.com/2021/02/24/arts/design/christies-beeple-nft.html

This is my dynamic drawing which rotates and scales objects in the canvas. The dynamic drawing ends up making a sad face when the mouse is placed in the right x and y position.

A computational project that inspires me is an architectural project done by Thilo Frank called EKKO. This project is located in Denmark and is a continuous walkway that consists of 200 wooden frames that incrementally change dimensions to create a long and contorted structure. The structure was computational in its design as the exterior shape was shaped by keyframes and the computer filling in the frames in between. The design also incorporates microphones within the wood to record and playback the sounds of the people walking through the structure. This type of work is done with parametric modeling in which the set of processes to create design is laid out by the person and the computer interprets it in many different ways. The artists’ sensibilities manifest themselves in the experience that one has inside the structure and the elaborate design the artist laid out in order to give the user a feeling of what the artist senses.

https://www.dezeen.com/2012/10/29/ekko-installation-by-thilo-frank/