Final Project

Welcome to Covid Retreat!

For this project I was inspired to create a virtual escape due to the restrictions Covid-19 has created. I experimented with sound, location design, a game-like set up.

The program includes 4 locations and you can select your location of choice. Clicking on the icon allows you to enter that location, while pressing the back arrow on your keyboard returns you to the game page. Each location has a unique sound that is supposed to be ambient and relaxing so you can meditate to it. The city backdrop has stars that spin with the mouse X location and the village backdrop has snow falling. These act as additional visual aids.

The poppy field has sounds of birds and how a relaxing field would sound. The beach has the calming noise of waves and seagulls in the distance. The city has street noise as well as ambient jazz street music. The village has noise of wind chimes fluttering in the wind. The pictures of the locations act as aids to visualize the location you’re in, and then you can close your eyes and listen to the sounds to meditate.

graanak-15
//This is supposed to be a meditation simulation where you can escape to a location because 
// of the restrictions covid has placed on us. Welcome to Covid Retreat!

var homePage = true;
var gamePage = false;
var locationPoppy = false;
var locationBeach = false;
var locationCity = false;
var locationVillage = false;

//image variables
var gpage;
var poppyImg;
var cityImg;
var beachImg;
var villageImg;

//sounds variables
var field;
var beach;
var seagull;
var city;
var jazz;
var chimes;

//snow variables 
var xpos = [];
var ypos = [];
var dir = [];


function preload() {
	gpage = loadImage("https://i.imgur.com/kWIbADG.png");
	poppyImg = loadImage("https://i.imgur.com/gX6nVv0.png");
	villageImg = loadImage("https://i.imgur.com/ncTFXtG.png");
	cityImg = loadImage("https://i.imgur.com/JzdvYPw.png");
	beachImg = loadImage("https://i.imgur.com/l9hqxRW.png");

	field = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/12/135472__kvgarlic__summeropenfielddusk.wav");
	beach = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/12/320306__sophronsinesounddesign__beach-9.wav");
	seagull = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/12/353416__squashy555__seagull-on-beach.mp3");
	city = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/12/182872__klankbeeld__nightcity-hum-01-130212.mp3");
	jazz = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/12/54066__reinsamba__jazz-street-musicians.wav");
	chimes = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/12/324325__opmartin__wind-chimes.mp3");
}

function soundSetup() { 
	field.rate(0.75);
	field.setVolume(0.5);
	beach.rate(0.5);
	beach.setVolume(0.15);
	seagull.setVolume(0.1);
	city.setVolume(0.5);
	jazz.setVolume(1);
	chimes.setVolume(1.5);
}


function setup() {
    createCanvas(600, 500);
    useSound();
    //snow setup
    for(var i = 0; i < 100; i++){
    	xpos[i] = random(0, width);
    	ypos[i] = random(0, height);
    	dir[i] = random(1, 3);
    }
}

function draw() {

	//drawing the homepage using p5js commands

	if(homePage==true){
		background(230);
		noStroke();

		cube();

		fill(255);
		textSize(15);
		text('Welcome to Covid Retreat. Let us begin your relaxation journey.', 100, 350);

		fill(168, 255, 28, 200);
		rect(209, 420, 188, 58);
		fill(255);
		rect(209, 420, 181, 50);

		fill(0);
		text('Click to start.', 250, 450);

		fill(168, 255, 28);
		circle(mouseX, mouseY, 5);
		fill(168, 255, 28, 200);
		circle(mouseX, mouseY, 15);
		fill(168, 255, 28, 100);
		circle(mouseX, mouseY, 20);

//setting the backdrops for each of the locations
//setting the mouse pointer for the cursor the gamepage

	} else if(gamePage==true){
		image(gpage, 0, 0, 600, 500);
		fill(168, 255, 28);
		circle(mouseX, mouseY, 5);
		fill(168, 255, 28, 200);
		circle(mouseX, mouseY, 15);
		fill(168, 255, 28, 100);
		circle(mouseX, mouseY, 20);
		fill(0);
		textSize(10);
		text('If you would like to return to this page, press the back arrow on your keyboard.', 75, 100);

	} else if(locationPoppy==true){
		image(poppyImg, 0, 0, 600, 500);
		
	}else if(locationCity==true){
		//creating the stars that rotate with mouseX position for the city backdrop
		image(cityImg, 0, 0, 600, 500);
		stars(17, 13);
		stars(32, 36);
		stars(214, 10);
		stars(293, 30);
		stars(306, 16);
		stars(364, 59);
		stars(438, 13);
		stars(569, 21);

	}else if(locationBeach==true){
		image(beachImg, 0, 0, 600, 500);

	}else if(locationVillage==true){
		image(villageImg, 0, 0, 600, 500);
		fill(255);
		noStroke();
		//implementing the snow command
		snowing();
	}

}

//creating the logo on the homepage
function cube(){
	fill(255);
	beginShape();
	vertex(300, 70);
	vertex(390, 145);
	vertex(390, 248);
	vertex(300, 320);
	vertex(209, 248);
	vertex(209, 145);
	endShape();

	fill(220);
	beginShape();
	vertex(300, 70);
	vertex(390, 145);
	vertex(300, 210);
	vertex(209, 145);
	endShape();
}

//causing the screen changes and sound changes for each screen
function mousePressed(){
	var my = mouseY;
	var mx = mouseX;

	if(homePage){
		if(mx > 209 & mx < 390 & my > 420 & my < 470){
			gamePage = true;
			homePage = false;
		}
	}else if(gamePage){
		if(mx > 54 & mx < 139 & my > 132 & my < 217){
			locationPoppy = true;
			gamePage = false;
			field.play();
			field.setLoop(true);
		} else if(mx > 54 & mx < 139 & my > 336 & my < 421){
			locationCity = true;
			gamePage = false;
			city.play();
			city.setLoop(true);
			jazz.play();
			jazz.setLoop(true);
		} else if(mx > 338 & mx < 423 & my > 132 & my < 217){
			locationBeach = true;
			gamePage = false;
			beach.play();
			beach.setLoop(true);
			seagull.play();
			seagull.setLoop(true);
		} else if(mx > 338 & mx < 423 & my > 336 & my < 421){
			locationVillage = true;
			gamePage = false;
			chimes.play();
			chimes.setLoop(true);
		}
	}


}	

//function to return to the gamepage 

function keyPressed(){
	if (keyCode === LEFT_ARROW){
		gamePage = true;
		locationPoppy = false;
		locationBeach = false;
		locationCity = false;
		locationVillage = false;
		field.stop();
		beach.stop();
		seagull.stop();
		city.stop();
		jazz.stop();
		chimes.stop();
	}
}

function snowing(){
	for (var i=0; i < xpos.length; i++){
		circle(xpos[i], ypos[i], 2);
		ypos[i] += dir[i];

		if(ypos[i] >= height){
			ypos[i] = 0;
		}
	}
}

function stars(xp, yp){
	stroke(255, 239, 143);
	push();
	translate(xp, yp);
	rotate(radians(mouseX));
	line(-3, 0, 3, 0);
	line(0, -3, 0, 3);
	pop();
}

Project-11-Landscape

I choose to do a picture I took in Pakistan so I created the images in Illustrator and then created variation in the landscape. and ultimately wanted variation of falling bananas and cows in the distance.

Picture I took in Pakistan.
graanak-11
//Graana Khan 
//Section B

var noiseParam = 0;
var noiseStep = 0.05;
var weeds = []; 
var bananaGuy;
var bananas = [];
var cows = [];

function preload(){
	bananaGuy = loadImage("https://i.imgur.com/QlEAbwn.png");
	bananas[0] = "https://i.imgur.com/DGbCivK.png";
	bananas[1] = "https://i.imgur.com/kYS7JBv.png";
	bananas[2] = "https://i.imgur.com/oLWOnSw.png";
	cows[0] = "https://i.imgur.com/DbRWV09.png";
	cows[1] = "https://i.imgur.com/IDXjr5m.png";
	cows[2] = "https://i.imgur.com/rHLRVkb.png";

	for(var i=0; i < bananas.length; i++){
		bananas[i] = loadImage(bananas[i]);
	}

	for(var i=0; i < cows.length; i++){
		cows[i] = loadImage(cows[i]);
	}
}

function setup() {
    createCanvas(480, 300);
    background(220);
    frameRate(10);

    strokeWeight(5);

    //initializing the noise and array
    for(var i=0; i <= 100; i++){
    	var n = noise(noiseParam);
    	var value = map(n, 0, 1, 100, height);
    	weeds.push(value);
    	noiseParam += noiseStep; 
    }

}

function draw() {
	background(232, 208, 156);

//terrain moving in the background
	weeds.shift();
	var n = noise(noiseParam);
	var value = map(n, 0, 1, 100, height);
	weeds.push(value);
	noiseParam += noiseStep; 

	stroke(135, 119, 76);
	fill(135, 119, 76);
	beginShape();
	curveVertex(0, height);
	curveVertex(0, height);
	for(var i=0; i < 100; i++){
		vertex(i*30, weeds[i]);
	}
	vertex(width, height);
	vertex(width, height);
	endShape();
//dirt road
	noStroke();
	fill(96, 78, 41);
	rect(0, 229, 480, 71);

//banana truck 
	image(bananaGuy, 0, 0, 480, 300);

	image(bananas[2], 260, 260);
	scale(0.5);
	image(cows[0], 120, 370);

}

LO-11-Women Practitioners

Jenny Sabin Studio, Ada, 2018-2019. 

Jenny Sabin, Ada, 2018-2019. Source.

Ada is a project by Jenny Sabin’s studio for the Microsoft Research Artist in Residence program. The project was named after Ada Lovelace, one of the first computer programmers and a woman as well. This project uses AI and architecture to create an interactive pavilion using responsive photo-luminescence. The project uses 3d printed nodes to connect fiberglass rods, with a knitted main structure that contains the responsive aspects of the pavilion.  

This project was fascinating to me in its manipulation of what architecture tends to be– static. The pavilion constantly changes in response to the clients it is made for–humans. Thus, the pavilion explores the bounds on which architecture can morph in real time as a response to human stimulus and movements. By integrating the light responsive aspect, the pavilion has yet another transformative variable that generates constant new experiences of Ada. The exploration Jenny Sabin does in this project introduces the possibilities of architecture that become fluid and almost free form to an extent using real time data sets that respond to the environment. It is inspiring in the ways Jenny Sabin uses Ada and artificial intelligence to connect humans to material forms and thus forming an intimate conversation between the pavilion and us where we are able to communicate through interpreted data.

Project-10: Sonic Story

For this assignment I chose to create an environment with a somber ambience so I drew a series of images in illustrator to accompany the sounds. The woman is smoking out her window and you can hear her television in the background, her cat meowing, the pigeons cooing, her blowing the smoke out, and lastly the street traffic and sounds of a busy city.

graanak-10
//Graana Khan
// Project 10 Section B 

//My story is a woman smoking out her window with noises of her cat meowing, 
// pigeons cooing, the TV playing in the back, noise of her exhaling the smoke,
// and the traffic of the busy city she is in. I wanted a lot of ambiance. 

//image variables I made in illustrator
var backdrop;
var woman1;
var woman2;
var pigeons1;
var pigeon2;

//sound variables
var meow;
var coo;
var tele;
var traffic;
var smoke;

var counter = 0; 

function preload() {
    // calling images
    backdrop = loadImage("https://i.imgur.com/iYYNGb3.png");
    woman1 = loadImage("https://i.imgur.com/2Kt4BvK.png");
    woman2 = loadImage("https://i.imgur.com/Qj2xRJz.png");
    pigeons1 = loadImage("https://i.imgur.com/XIXBGYQ.png");
    pigeons2 = loadImage("https://i.imgur.com/XYaJDPO.png");

    //calling sound
    meow = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/110011__tuberatanka__cat-meow.wav");
    coo = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/319512__squashy555__pigeon.wav");
    tele = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/185605__dementan__japanese-news.wav");
    traffic = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/345948__knufds__city-ambiance-new-york.wav");
    smoke = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/491053__sleepskraper__smoke.wav");
}


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


function soundSetup() { 
	meow.setVolume(0.1);
	coo.setVolume(0.1);
	tele.setVolume(3);
	traffic.setVolume(0.25);
	smoke.setVolume(8);

}


function draw() {
    background(200);

    image(backdrop, 0, 0, 480, 600);

//playing the image and some sounds graphics on specific frame counts
    switch(counter){
    	case 0: W1(); P2(); break;
    	case 1: W1(); P1(); break;
    	case 2: W1(); P2(); break;
    	case 3: W2(); P1(); break;
    	case 4: W1(); P2(); break;
    	case 5: W1(); P1(); break;
    	case 6: W2(); P2(); break;
    	case 7: W1(); P1(); break;
    	case 8: W1(); P2(); break;
    	case 9: W2(); P1(); break;
    	case 10: W1(); P2(); break;
    	case 11: W1(); P1(); break;
    	case 12: W2(); P2(); break;
    	case 13: W1(); P1(); break;
    	case 14: W1(); P2(); break;
    	case 15: W2(); P1(); break;
    	case 16: W1(); P2(); break;
    	case 17: W1(); P1(); break;
    	case 18: W1(); P2(); break;
    	case 19: W2(); P1(); break;
    	case 20: W1(); P2(); break;
    	case 21: W1(); P1(); break;
    	case 22: W2(); P2(); break;
    	case 23: W1(); P1(); break;
    	case 24: W1(); P2(); break;
    	case 25: W2(); P1(); break;
    	case 26: W1(); P2(); break;
    	case 27: W1(); P1(); break;
    	case 28: W2(); P2(); break;
    	case 29: W1(); P1(); break;
    	case 30: W2(); P1(); break;
    }

    counter++; 

    //reset the counter after 15 frames 

    if(counter >= 30){
    	counter = 0;
	}

	if(counter <= 30){
		tele.play();
		traffic.play();
	}

}

function W1(){
	image(woman1, 0, 0, 480, 600);
}

function W2(){
	image(woman2, 0, 0, 480, 600);
	smoke.play();
	meow.play();
}

function P1(){
	image(pigeons1, 0, 0, 480, 600);
}

function P2(){
	image(pigeons2, 0, 0, 480, 600);
	coo.play();
}

LO-10-Computer Music

Laurie Spiegel, Unseen Worlds, 1991. 

Laura Spiegel with her analog synthesizer. Source.

Laurie Spiegel is one of the pioneers of electronic-music and even had one of her compositions sent into space on the Voyager spacecraft for aliens if they were to come in contact with it. Spiegel also created her own algorithmic compositions called Music Mouse. Her album, Unseen Worlds, uses computation electronic music to experiment and convey unfamiliar yet comfortingly ambient music. Even the album cover art seems to resemble this blend of computational generation and abstracted geometries that evoke the mystery and unfamiliarity of the music itself. 

Her program Music Mouse was created on a Macintosh 512k that generated tones based on the movement of the mouse. Spiegel’s album is inspiring in its pursuit to use electronic music and artificial sounds to create foreign ambiances that still sounds futuristic and distant even while being made 30 years ago. Spiegel created other-wordly compositions in the album with her software Music Mouse that allowed an accessible way to compose electronic music faster. Perhaps most importantly, Spiegel’s early explorations of synths and electronic music was inspiring for women and people who wanted to do music without the harsh borders of classic training. In an interview Spiegel says, “electronic instruments were a great democratizing force.” It becomes clear how her albums and work with electronic music expressed the transition of a more accessible music form that invites the unexpected and unusual.

Laura Spiegel’s album, Unseen Worlds, 1991.

Project-09-Portrait

I chose to do a portrait of myself when I was little. I chose to use symbols that represent the astrology of my birthday. I did my zodiac sign which is Virgo, and I did what the moon looked like on my birthday (Sep 10 2001), a waning gibbous. When you press the up arrow the symbols get larger, and if you press the down arrow they get smaller. Additionally, if you click then there will be a blur filter applied to the image.

graanak-09
//Graana Khan 
//Section B
//Custom Pixels

var img;

//my zodiac sign is a Virgo and the moon was a waning gibbous on my birthday Sep 10 2001
let skyView = ['♍︎', '🌔︎']; 


function preload(){
	img = loadImage("https://i.imgur.com/VuQGYhY.jpg");
}

function setup() {
    createCanvas(480, 480);

    //setting the image in the center and resizing it to the canvas size
    imageMode(CENTER);
    img.loadPixels();
    img.resize(480,480);
    frameRate(20000);

    //orange backdrop
    background(252, 226, 119);
}

function draw() {

	//getting pixel colors and location
	let x = floor(random(img.width));
	let y = floor(random(img.height));
	let pix = img.get(x, y);
	//setting the color to be the pixel locations of the image
	fill(pix);

	// up arrow makes the symbols larger, down arrow makes them smaller
	if(keyIsDown(UP_ARROW)){
		textSize(random(10, 15));
	}else if(keyIsDown(DOWN_ARROW)){
		textSize(random(3, 5));
	}else{
		textSize(8);
	}

	text(random(skyView), x, y);

}

//this blurs the image further everytime the mouse is pressed
function mousePressed(){
	filter(BLUR, 1);
}

Initial generation.
Almost fully generated without blur.
Generated with blur added.
The original photo.

LO-09- On Looking Outwards

Ying Gao, Flowing Water, Standing Time, 2019. Original LO-03 by Isabel Xu. 

I found this work fascinating because of my peer Isabel Xu’s description of how the artist Ying Gao blends robotics and fabric to create ever changing clothing. Ying Gao uses color and light sensors to make clothes that respond to the chromatic spectrum using a raspberry PI and small cameras. 

What stood out to me was that Gao described the clothing line to display “perpetual metamorphosis”. Comparing the changing qualities of technology as it is used, for example a running code, clothing is quite static and existent as a sculptural piece that can be worn. By blending the two as Gao has done, you get clothing that is constantly in a state of changing. More humorously, this clothing line reminded me of a solution to our indecisive nature when deciding what to wear for the day as our clothes appear the same throughout the day. This provides a solution for those indecisive moments where the clothing is transforming and responding to its chromatic surroundings. 

This clothing line demonstrates how robotics can turn something definite in form to something responsive to the environment. Much of life is constantly changing and so the integration of AI and machine learning allows for previously static objects to evolve like a life form in response to worldly stimuli. 

LO – 08 – Refik Anadol

Refik Anadol, Space in the Mind of a Machine, 2019. 

Refik Anadol, Melting Memories.

Refik Anadol is a media artist from Istanbul, Turkey who works on site-specific public art, parametric computer design, and interactive audio performances in his installations. Anadol currently has a Masters of Fine Arts from both California and Istanbul. Anadol works on creating installations that encompass aspects of architecture, media arts, and machine learning to create uniquely interactive art pieces that respond to a multitude of combinations of machine learning and traditional media.  

Anadol’s dedication to creating site-specific art is inspiring because it uses public spaces as his canvas and muse for his designs. He mentions in the talk how a public space often has no formal entrance, beginning, or end, but rather exists with the environment around it. Taking that idea and then using interactive computation design for his installations allows for his work to not simply be on display, but become a part of the space in which it exists and interacts with the people passing by. 

Specifically, his piece Melting Memories, a data sculpture, fascinated me in how it visualizes one of our most private data, our memories. Anadol found common patterns in the results of our brain activity and used this data set for the programming of the sculpture by using noise functions. This project was super interesting in how it adapts frontal lobe activity in the brain into a painting that creates a variety of moves and patterns through noise. Using computational design, Anadol is able to reflect our thoughts in a language that is not verbal, and thus makes intimate moments in a public abstracted performance. 

Anadol presents his work by defining his explorations and goals for spatial thinking and translation before discussing each project. By understanding his intentions for a project, it becomes clear to us how he uses his media background to execute those ideas.

Refik Anadol, Vimeo Eyeo 2019.

Project-07-Curves

For this project I explored the conchoid of de Sluze curve. I thought this curve was interesting because it reflects different curves across a vertical access depending on if the equation is multiplied by a positive or negative “a”. This reminded me of a galaxy being pinched and forming from space matter so I added a rocket and stars into the background. It also looks like a planet is forming from space matter. The colors change based on the mouse position, the sizes of the curves also change based on mouse position, and when you keep your mouse pressed you can make the right half of the curve (changed “a” value).

graanak-07
//Graana Khan 
//Section B 
// 07 - Project - Curve Composition 

var p = 500; //number of points
var x;
var y;
var a;

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

function draw() {

//drawing the conchoid curve
	push();
	translate(width/2, height/2);
	scale(25);
	conchoid();
	pop();

//adding the stars in the background 
	stars(50, 50);
	stars(230, 350);
	stars(400, 400);
	stars(380, 100);
	stars(200, 150);
	stars(460, 240);
	stars(70, 430);
	stars(100, 270);
	stars(300, 300);

//rocket in corner
	x = 70;
	y = 400;
	rocket();
	
}

//function for the conchoid of de Sluze 
function conchoid(){
	beginShape();
	stroke(mouseX-200, mouseY-100, 200); //color changes on mouse position 
	strokeWeight(0.01);
	noFill();

	//creating loop for the curves 
	for(var i =0; i < p; i++){
		var t = map(i, 0, p, 0, 2*PI);

		if(mouseIsPressed){  //a values switch from positive to negative if mouse is pressed
			a = mouseX/100;
		} else {
			a = -1*(mouseX/50);
		}

		//equations are from https://mathworld.wolfram.com/ConchoidofdeSluze.html
		x = ((1/cos(t)) + (a*cos(t)))* cos(t);
		y = ((1/cos(t)) + (a*cos(t)))* sin(t);
		vertex(x,y);
	}
	endShape();
}

//function for making the stars 
function stars(x,y){
	stroke(255);
	line(x, y-5, x, y+5);
	line(x-5, y, x+5, y);
}

//rocket in the corner 
function rocket(){
	push();
	translate(x,y);
	rotate(radians(45));
	noStroke();
	fill(255);
	rect(0, 0, 14, 28, 2);
	triangle(0, 0, 7, -13, 14, 0);
	triangle(0, 8, 0, 16, -4, 16);
	triangle(14, 8, 14, 16, 18, 16);
	stroke(255, 0, 0);
	line(2, 30, 2, 40);
	line(11, 30, 11, 42);
	stroke(244, 128, 11);
	line(5, 30, 5, 45);
	stroke(244, 238, 11);
	line(8, 30, 8, 37);
	noStroke();
	fill(0);
	circle(7, 10, 8);
	pop();
}

LO – 07 – Information Visualization

Fernanda Viegas, Wind Map, 2012. 

Fernanda Viegas’ “Wind Map”.

This project creates a real-time, or a “living portrait”, wind map of the United States during the winter months and uses the data to visualize an art piece in the process. The project uses motion of white lines over a black map of the U.S. to show the wind motions and heaviness by layering the white wind lines. 

Viegas notes that while it was an artistic endeavor originally, the map provides a variety of functions where people have used it for bird migration patterns, bicyclists, etc. Viegas uses data for this project from the National Digital Forecast Database and combines it with computational circulations that project the data in an abstracted, artistic way. The Wind Map uses “comet-like trails” to show the motion of the wind lines. The map is made entirely in HTML and JavaScript. 

Hurricane Sandy, October 30 Wind Map.

This project is successful in its multi-purpose presentation of wind data in the U.S. and its additional artistic purpose. Computationally creating the Wind Map creates a direct way to have updates to the data sets as the wind directions, intensity, etc. changes from day to day. This conveys accurate data for the day but also creates an art piece that is mesmerizing because of its constant movement. The Wind Map additionally impressively communicates the forecast data in a simplistic and easy to understand map consisting of two main elements; the base map and the wind lines.