The two projects that I have chosen to discuss relate to climate change discuss this topic in different ways.
The first project is called Entropy, which was created by ecological artist Lloyd Godman in 2010. I find this project inspiring because it was made as a response to the fire that affected Australia in 2009. The projection was written in C++ and begins by selecting one of 30 composite images and randomly generates a pathway to a single image. The project is a randomized sequence based on images in the data bank. I think this project could have been improved by making it interactive and allowing viewers to click on certain images for more information.
Entropy displayed at the TarraWarra Muesum of Art in Australia, 2010.
The next project is a game called Climate Quest that was developed in 2015 at the University of Washington. The purpose of this game is to promote environmental awareness. The story behind the game is that climate disasters are occurring across the country, but the heroes must save lives and protect ecosystems. I admire this project because it conveys an important message in a non-conventional way. The idea of storytelling through a video game seems interesting and creative.
Link to an interview with one of the creators of Climate Quest
// Alec Albright
// aalbrigh@andrew.cmu.edu
// Section B
// Project 11
var time = 0; // time of day (by frame rate)
var timeRate = 1; // rate of time passing
var angle = 0; // rotation angle of sun/moon system
var angleRate = 180 / 255; // rate of change of the angle
var birdsX = []; // xcoords of birds on the screen
var birdsY = []; // ycoords of birds on the screen
var birdsSpeed = []; // speeds of all birds on the screen
var birdsColor = []; // colors of all birds on the screen
function setup() {
createCanvas(480, 400);
ellipseMode(CENTER);
frameRate(30);
angleMode(DEGREES);
// birds
for (var i = 0; i <= 30; i ++){
birdsSpeed.push(random(1, 10));
birdsX.push(600);
birdsY.push(random(70, 320));
birdsColor.push(color(random(0, 255), random(0, 255), random(0, 255)));
}
}
function draw() {
// managing time
time += timeRate;
if (time == 255) {
timeRate = -1;
} else if (time == 0) {
timeRate = 1;
}
// coloring sky
colorSky(time);
// drawing sun/moon
push();
translate(240, 250);
rotate(angle);
drawSun(0, 200);
drawMoon(0, -200);
pop();
angle -= angleRate
// ground
ground();
for (var i = 0; i < birdsY.length; i ++){
drawBird(birdsX[i], birdsY[i], birdsColor[i]);
birdsX[i] -= birdsSpeed[i];
if (birdsX[i] < -10) {
birdsX[i] = 600;
}
}
}
function drawSun(x, y) {
// draws sun
noStroke();
fill("yellow");
ellipse(x, y, 100);
}
function drawMoon(x, y) {
// draws moon
noStroke();
fill("grey");
ellipse(x, y, 70);
}
function colorSky(time) {
// draws the sky according to the time of day
var blue = time;
var green = map(time, 0, 255, 0, 204);
noStroke();
fill(0, green, blue);
rect(0, 0, width, height);
}
function drawBird(x, y, color) {
fill(color);
noStroke();
triangle(x, y, x - 3, y + 5, x, y + 5);
triangle(x + 7, y, x + 13, y - 7, x + 11, y)
rect(x, y, 15, 5);
triangle(x + 5, y, x + 8, y - 7, x + 8, y);
}
function ground() {
fill("darkgreen");
beginShape();
for (var x = 0; x < width; x++) {
var t = (x * .005) + (millis() * .0005);
var y = map(noise(t), 0, 1, 150, 350);
vertex(x, y);
}
vertex(width + 100, height);
vertex(0, height);
endShape();
}
For this project, I wanted to depict something creative based in something very realistic. Thus, I came up with the idea of doing a rolling landscape that depicted the passing of days in a logical manner but featuring an assortment of randomly placed and colored birds. In this way, I am also able to emphasize the pop on the screen that the birds have in an interesting way.
The process was very difficult for me in automating everything correctly while still maintaining readability of code while debugging. Thankfully, however, I was able to get past that! Below are some initial sketches from my laptop as to what my first idea was.
Sketch from my laptop (please excuse the poor birds)
/* Rachel Shin
reshin@andrew.cmu.edu
15-104 Section B
Project 11 - Landscape
*/
var terrainSpeed = 0.0005;
var terrainDetail = 0.0195;
var terrainDetail1 = 0.04;
var stars = [];
function setup() {
createCanvas(400, 300);
frameRate(15);
for (var i = 0; i < 70; i++){
var starX = random(width);
var starY = random(0, height/4);
stars[i] = makeStar(starX, starY);
}
}
function draw() {
background(0);
displayStars(); //bottom layer
darkTerrain(); //next layer
terrain(); //second to top layer
bottomTerrain(); //top layer
}
function terrain() {
noStroke();
fill(220);
beginShape();
for (var x = 0; x < width; x ++) {
var t = (x * terrainDetail) + (millis() * terrainSpeed);
var y = map(noise(t), 0, 1, 200, 100);
vertex(x, y);
}
vertex(width, height);
vertex(0, height);
endShape();
}
function darkTerrain() {
noStroke();
fill(17, 25, 36);
beginShape();
for (var x = 0; x < width; x ++) {
var t = (x * terrainDetail1) + (millis() * terrainSpeed);
var y = map(noise(t), 0, 2, 0, 300);
vertex(x, y);
}
vertex(width, height);
vertex(0, height);
endShape();
}
function bottomTerrain() {
noStroke();
fill(255);
beginShape();
for (var x = 0; x < width; x ++) {
var t = (x * terrainDetail1) + (millis() * terrainSpeed);
var y = map(noise(t), 0, 1, 50, 300);
vertex(x, y);
}
vertex(width, height);
vertex(0, height);
endShape();
}
function drawStar() {
noStroke();
fill(230, 242, 174);
push();
translate(this.x, this.y);
ellipse(5, 10, 5, 5);
pop();
}
function makeStar(starX, starY) {
var makeStar = {x: starX,
y: starY,
speed: -1,
move: moveStar,
draw: drawStar}
return makeStar;
}
function moveStar() {
this.x += this.speed;
if (this.x <= -10){
this.x += width;
}
}
function displayStars() {
for(i = 0; i < stars.length; i ++) {
stars[i].move();
stars[i].draw();
}
}
As a kid, I often went on trips to Reno or Lake Tahoe with my family and family friends. If I wasn’t playing video games in the car, I would stare at the mountains that we drove past and was mesmerized by the stars that I couldn’t see in Cupertino because of all the light pollution there. I decided to create 3 different terrains to create more depth in my production and put many stars in it to represent the countless number of stars that I saw during the drive.
For my landscape project, I chose to make a basic underwater scene containing water, sand, bubbles, and fish. I think this project was a great opportunity to play around with objects and setting different types of parameters. I definitely came out of this with a much better understanding of how to use objects in code. One of the elements that I had trouble with is setting the color using the color() function (which is why I ended up using grayscale). Some things I wish I could have added are: coral/seaweed, other types of animals, and lines to represent water flow.
Video demonstration of “Knee Deep” by Emily Gobeille
In Emily Gobeille’s interactive children’s work, “Knee Deep”, she provides a playground for children to immerse themselves in other worlds, be it the ocean, outer space, or an animated nature scene. This project is admirable because it teaches children the potential joy that can be brought about by experimenting with creative computing. It gives them a taste of augmented reality that is probably unlike anything they’ve ever seen before. It also is a very good demonstration of live green-screening and image manipulation, detecting depth in order to properly place the children in a world, not just on a world.
As an artist, Emily Gobeille has a strong background in immersive visual design, and is an avid integrator of creative design and visual technologies. She often has a playful yet meaningful approach to her works, which is well-presented in “Knee Deep”. She is from Amsterdam, but she now resides in Brooklyn where she studies visual design, motion graphics, and interaction.
For my final project, I’ve decided to create an “Interactive drawing pad.” Basically, users can click on the buttons on the left to select different backgrounds, brushes and add more special effects. The pad will have the following functions for users to create their own paintings.
Change background:
basic function: change into pure colors
advanced: use patterned background (I will refer to wallpaper, nested loop, use sin and cos to make curves, turtle pattern, etc.)
Change type of brush:
basic “pencil” function:change stroke width and color by pressing “L” (large) / “S” (small) / “R” (red) / “B” (blue) / “Y” (yellow)
special brush 1: Chinese brush (I will refer to mouse dragging function)
special brush 2: zigzags (random lines)
special brush 3: make new balls (objects function)
special brush 4: change into a flower and record traces of movements
Add randomness:
add random stars at night (tie making of random spot with seconds),
add colorful balls (add moving particles),
* moving mountains (make terrain animation),
Add other shapes:
moving star (make a star that’s changing shape randomly),
rotating rectangles (rotate and translate rectangles)
Geraldline Juarez is a Mexican and Swedish visual artist. She likes to use time-based media, sculpture and performance to consider the materials, histories, technics, politics and economics shaping the dominant narratives and contexts in contemporary media culture.
I am intrigued by one of her 2019 “collection”, here are 4 of the pieces she created known as “non-functional jewelry” mainly made with porcelain, silver clay re-materialized from photographic waste and broken screens from smartphones. The ironic property allows us to reflect upon the durability and add-values of jewelry.
“Jewels are ornaments but also markers of time, what kind of memories will these jewels evoke in the future?” – Geraldline Juarez
Screenware is a method for glazing ceramics using refuse from smartphones and computer LCD’s screens as glass former.
Ice Blue Ring Bisque black Porcelain and screenglaze Screenware Mineral Black Ring Black Porcelain and screenglaze Screenware Silver Pearl Ring Silver clay and screen pearl Screenware Screen pearls
Emily Gobeille is a visual design, motion graphics, and interactions artist based in Brooklyn, New York and from Amsterdam, Netherlands who produces high-end installations for children. As an artist that values interaction with the audience, Gobeille sought to produce technology-based art that invited her audience members to directly interact with the piece. One of her interactive pieces, “Knee Deep,” invites children to “explore unexpected worlds of different proportions with their feet” (zanyparade.com).
Gobeille created “Knee Deep” with openFrameworks and combined real-time greenscreening with stomp detection to produce an interactive space that revealed seemingly impossible scales of different landscapes like those on Earth and those in space. The stomp-detection aspect of “Knee Deep” allows children to interact with the piece physically, making it more than a visual thing to admire but a fun activity to spend time in.
I particularly liked this piece because it focuses its attention on children. Art is usually viewed as something for adults, but Gobeille breaks that stigma by steering the piece’s attention towards children and creating a space that allows them to interact with a seemingly impossible scenario. As a child, I often enjoyed the interactive, stomp-detection spots in Korean malls, not wanting to leave the mall for that sole reason. Artists like Gobeille provide children with a spark of curiosity that allow them to imagine beyond a real-time setting.
//Julia Nishizaki
//Section B
//jnishiza@andrew.cmu.edu
//Project 11 - Generative Landscape
var landscapeScale = 0.005; //detail in hills
var landscapeSpeed = 0.00075; //speed of hills going by
var hillColor = '#92CA6D'; //light green
var houses = []; //array for houses
var trees = []; //array for trees
var train = { ////train variables
wY: 200, //Y of windows
wW: 325, //width of windows
wH: 275, //height of windows
corners: 30, //roundness of window corners
wWeight: 25, //stroke weight of light gray
backgroundColor: 255, //white
mainColor: '#475AA8', //light blue
wColor: '#2A357A', //dark blue, color of window and seats
divXL: 61, //X coordinate of left divider
divXR: 419, //X coordinate of right divider
}
function setup() {
createCanvas(480, 480);
for (var i = 0; i < 5; i ++) { //first houses
var rx = random(width);
houses[i] = makeHouses(rx);
}
for (var i = 0; i < 3; i ++) { //first trees
var tx = random(width);
trees[i] = makeTrees(tx);
}
frameRate(30);
}
function draw() {
background('#8ED9EF'); //blue sky
//creates hills in the background
stroke(hillColor);
for (var x = 0; x < width; x ++) {
var l = (x * landscapeScale) + (millis() * landscapeSpeed);
var y = map(noise(l), 0, 1, 100, 230); //constrains hills
line(x, y, x, height); //creates vertical lines, forming a solid shape
}
displayHouses(); //houses
removeOldHouses();
addHouses();
displayTrees(); //trees
removeOldTrees();
addTrees();
drawTrain(); //train
}
function displayHouses() { //displays and updates house location
for (var i = 0; i < houses.length; i ++) {
houses[i].move();
houses[i].draw();
}
}
function removeOldHouses() { //gets rid of old houses, puts the houses that are still on the canvas in a new array
var housesToKeep = [];
for (var i = 0; i < houses.length; i ++) {
if (houses[i].x + houses[i].breadth > 0) {
housesToKeep.push(houses[i]);
}
}
houses = housesToKeep;
}
function addHouses() { //adds new houses into the array
if (random(0, 1) < 0.02) {
houses.push(makeHouses(width));
}
}
function moveHouses() { //moves the houses
this.x += this.speed;
if (this.x < -this.breadth) {
this.x == width + this.breadth;
}
}
function drawHouses() { //draws the houses
noStroke();
rectMode(CORNER);
fill(this.r, this.g, this.b); //randomizes color
push();
translate(this.x, this.y);
rect(0, -this.height, this.breadth, this.height); //house rectangle
//roof
fill(255);
triangle(-2, -this.height + 1, this.breadth + 2, -this.height + 1, this.breadth / 2, -this.height - this.roofH);
//door
rect(this.doorX, - this.doorH, this.doorW, this.doorH);
pop();
}
function makeHouses(locationX) { //house variables
var hse = {x: locationX,
y: random(225, 275),
r: random(255),
g: random(255),
b: random(255),
roofH: round(random(10, 25)),
height: round(random(25, 50)),
breadth: round(random(30, 60)),
doorX: random(10, 20),
doorW: 10,
doorH: 15,
speed: -6.0,
move: moveHouses,
draw: drawHouses}
return hse;
}
//trees
function displayTrees() { //dispays and updates tree locations
for (var i = 0; i < trees.length; i ++) {
trees[i].movet();
trees[i].drawt();
}
}
function removeOldTrees() { //gets rid of old trees
var treesToKeep = [];
for (var i = 0; i < trees.length; i ++) {
if (trees[i].xt + trees[i].breadtht > 0) {
treesToKeep.push(trees[i]);
}
}
trees = treesToKeep;
}
function addTrees() { //adds new trees
if (random(0, 1) < 0.1) {
trees.push(makeTrees(width));
}
}
function moveTrees() { //moves trees
this.xt += this.speedt;
if (this.xt < -this.breadtht) {
this.xt == width + this.breadtht;
}
}
function drawTrees() { //draws trees
noStroke();
rectMode(CORNER);
colorMode(HSB, 100); //switches color mode to HSB to assist with random colors
fill(this.ht, 55, this.bt); //random colors between yellow-green to green
push();
translate(this.xt, height * 3 / 4);
rect(0, -this.heightt, this.breadtht, this.heightt, 50, 50, 0, 0);
pop();
}
function makeTrees(locationX) { //tree variables
var trs = {xt: locationX,
bt: random(50, 85),
ht: random(17, 25),
heightt: round(random(50, 160)),
breadtht: round(random(100, 130)),
speedt: -10.0,
movet: moveTrees,
drawt: drawTrees}
return trs;
}
//train
function drawTrain() {
colorMode(RGB);
drawWindow(width / 2); //draws center window
drawWindow(-118); //draws left window
drawWindow(width + 118); //draws right window
//light blue panels
noStroke();
rectMode(CORNER);
fill(train.mainColor);
rect(0, 0, width, train.wY - (train.wH / 2) - 10); //top panel
rect(0, train.wY + (train.wH / 2) + 10, width, height - (train.wY + (train.wH / 2)) - 10); //bottom panel
//seats
drawSeats(train.divXL, 0, 0, 40); //left seat
drawSeats(train.divXR, width - 200, 40, 0); //right seat
//table
rectMode(CENTER);
rect(width / 2, height - 105, 150, 20, 5, 5, 5, 5);
//section dividers, light gray
drawDividers(train.divXL);
drawDividers(train.divXR);
}
function drawWindow(x) { //creates center window
rectMode(CENTER);
noFill();
stroke(train.backgroundColor); //creates light gray area around the windows
strokeWeight(train.wWeight);
rect(x, train.wY, train.wW + train.wWeight, train.wH + train.wWeight, train.corners, train.corners, train.corners, train.corners);
stroke(train.wColor); //creates blue window border
strokeWeight(10);
rect(x, train.wY, train.wW, train.wH, train.corners, train.corners, train.corners, train.corners);
}
function drawSeats(x1, x2, UL, UR) {
fill(train.wColor);
rect(x1 - 45, height - 200, 90, 200, 30, 30, 0, 0); //seat back
rect(x2, height - 50, 200, 50, UL, UR, 0, 0); //left seat cushions
}
function drawDividers(x) {
strokeWeight(5);
stroke(200);
line(x, train.wY - (train.wH / 2) - 7.5, x, height); //line dividing sections
}
For this project, I wanted to create a landscape outside of a train window. I decided to use three layers, some bushes or trees in the foreground, houses in the middle ground, and hills in the background. I tried to change the speeds of the different layers, with the tree layer the fastest and the hill layer the slowest, in order to give the illusion of perspective, and that you’re looking out of a window as everything flies by.