Final Project: Monument to the Lost Year

The program that I created for the final project is the Memorial to the Lost Year, a group of digital monuments about the year 2020. I was inspired to create this memorial because I was reflecting on previous pandemics in world history and how we remember those today, and I was curious as to how future generations would reflect upon the Covid-19 Pandemic and the behavioral and cultural changes that came with it. Aesthetically, the collages I created as for each scene were inspired by the work of Cruz Garcia and Nathalie Frankowski and the collages I made while taking a class taught by them this summer.

A local host is needed to run the program. The program starts at a floor plan of the different areas. If the user clicks on the red marker associated with an area they are transported to that scene. At the Entrance Gallery, the user can flip through a selection of images related to life in the year 2020 by clicking the canvas. In the Zoom Monument Scene the user can place candles by clicking on the pedestal. At the Covid-19 Statue, the user is invited to focus on the spinning rings and to meditate or reflect on the pandemic. At the 2020 Election Memorial, users can click the Vote button to submit a mail-in ballot. To move between scenes, the user can press the left arrow key to return to the floor plan and then click on a different red marker.

If I had more time, I would have liked to add more exhibits to the memorial that covers more aspects of life in the year 2020.

monumentDownload

/*Image Sources:
	Zoom Monument Collage:
		Background: https://1.bp.blogspot.com/-clsypiRLZo4/XOPVE1F8TgI/AAAAAAAGZm4/3NzoNNpDCuo5w66qzYwf75csYIhacaj8QCLcBGAs/s1600/Worthington-Whittredge-Foothills-Colorado.jpg
		Zoom Logo: https://humtech.ucla.edu/wp-content/uploads/2018/08/zoom-560x560.png
		Pedestal: https://kingdomhigh.com/image/cache/data/orlandi/provence-riser-stand-pedestal-statue-base-15in-stone-statue-fs8216-orn-fs8216-200142557-700x700.jpg
	Covid-19 Statue Collage
		Background: https://www.thewadsworth.org/wp-content/gallery/hudson-river-school/copy_0_1868.3.jpg
		Sky: https://www.artfixdaily.com/images/fl/july2_cropsey1500x813.jpg
		virus: https://source.wustl.edu/wp-content/uploads/2018/12/flu.jpg
		column: https://victoriafrederick.files.wordpress.com/2014/09/loadbearing-polystone-columns-architectural-columns-roman-corinthian-fluted-columns.jpg
		marble texture: https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fwww.decomurale.ca%2Fwp-content%2Fuploads%2F2015%2F10%2FS_shutterstock_132172547.jpg&f=1&nofb=1
		Sound: https://freesound.org/people/HerbertBoland/sounds/78448/
	Election Memorial Collage:
		Background: https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fwww.thewadsworth.org%2Fwp-content%2Fgallery%2Fhudson-river-school%2F1948.190.jpg&f=1&nofb=1
		Biden Head: https://www.kindpng.com/picc/m/560-5606161_joe-biden-head-hd-png-download.png
		Trump Head: https://basicgestalt.files.wordpress.com/2017/07/trumphead2.png?w=356&h=509
		Bronze Texture 1: https://media.istockphoto.com/photos/bronze-metal-texture-background-picture-id453084961?k=6&m=453084961&s=612x612&w=0&h=AdlZR8A8q8ZXtdDb7aKmYY7rO0iS5Th3OLFKPLUPGFU=
		Bronze Texture 2: https://cdn.wallpapersafari.com/34/19/qP0HSo.jpg
	Image Gallery:
		Collage:
			Background: https://d2jf00asb0fe6y.cloudfront.net/hudson-river-school_05_0abb3e55e0fc49ea59240af9e6e1b9cd.jpg
			Brick Wall: https://jooinn.com/images/brick-wall-154.jpg
		Gallery Images:
			Pence Fly: https://www.india.com/wp-content/uploads/2020/10/mike-pence-debate-1602128479.jpg
			BLM Protest: https://milwaukeerecord.com/wp-content/uploads/2020/06/BLM_PRIDE_MKE_612020-23.jpg
			Biden-Kamala: https://i.dailymail.co.uk/1s/2020/08/21/05/32204630-8649691-Hand_in_hand_Kamala_Harris_and_Joe_Biden_joined_hands_in_the_air-a-16_1597985527220.jpg
			Masks: https://images.assettype.com/swarajya/2020-03/0d8cd05f-25be-4429-b1af-93495e880fef/EThrpG_UwAEEYuA.jfif?w=1280&q=100&fmt=pjpeg&auto=format
			Joe Exotic: https://www.licc.org.uk/app/uploads/2020/05/Tiger-King-Web-MJ-Edit-700x540.png
			Dr. Fauci: https://cspinet.org/sites/default/files/49809803361_8cb800f519_o.jpg
			White House Picket Signs: https://www.vidaenelvalle.com/news/politics-government/ijdvpj/picture247039187/alternates/LANDSCAPE_1140/319913bf2ae577f9ea2d18b8560f6f8b8b025745
			Trump vs Biden: https://stevechabot.com/blog/admin/wp-content/uploads/2020/05/052720-2033-05-500.jpg
			Zoom Meeting: https://d.newsweek.com/en/full/1580408/zoom-meeting.jpg
			Social Distancing: https://qual360.com/wp-content/uploads/2020/04/social-distancing.jpg
*/

var zoomMon;
var floor;
var covidStatue;
var candleColors = ["blue","white","black","green","red"];
var candles = [];
var sceneNumber = 0;
var wind;
var sceneEnter = false;
var election;
var ballots = [];
var wall;
var galleryLinks = ["https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/12/bidenkamala.jpg",
					"https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/12/blmprotest.jpg",
					"https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/12/fauci.jpg",
					"https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/12/joeexotic.jpg",
					"https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/12/masks.jpg",
					"https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/12/pencefly.jpg",
					"https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/12/socdist.jpg",
					"https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/12/trumpbiden.jpg",
					"https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/12/whitehousepicket.jpg",
					"https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/12/zoommeeting.jpg"];
var galleryImages = [];
var chooseImg;
var angle = 0;


function preload() {
    // call loadImage() and loadSound() for all media files here
    //Zoom Monument Scene Background
    zoomMon = loadImage("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/12/zoommonument.jpg");
    //Starting Floor Plan
    floor = loadImage("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/12/floorplan.jpg");
    //Covid-19 Statue Background
    covidStatue = loadImage("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/12/covidstatue.jpg");
    //Wind Sound
    wind = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/12/wind.mp3");
    //Election Memorial Background
    election = loadImage("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/12/election.jpg");
    //Image Gallery Background
    wall = loadImage("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/12/imagewall.png");
    //Gallery Images
    for (var i = 0; i < galleryLinks.length; i++){
    	var g = galleryLinks[i];
    	galleryImages.push(loadImage(g));
    }


}



function setup() {
    // you can change the next 2 lines:
    createCanvas(400, 400);
    background(255);
    useSound();
    chooseImg = int(random(0,galleryImages.length));

}

function soundSetup() {
	wind.setVolume(.5);

}


function draw() {
	if (sceneNumber == 0){
		image(floor,0,0,400,400);
		//Zoom Monument Marker
		noStroke();
		fill("red");
		circle(150,170,10);
		//Covid statue marker
		circle(150,290,10);
		//Election Memorial Marker
		circle(250,290,10);
		//Entrance Gallery Marker
		circle(250,170,10);
		fill("black");
		text("Click a Marker to go to that Location",10,20);

	} else if (sceneNumber == 1) {
		zoomMonument();

	} else if (sceneNumber == 2) {
		if (sceneEnter == true){
			wind.loop();
			sceneEnter = false;
		}
		nineteenStatue();
	} else if (sceneNumber == 3){
		electionScene();
		noStroke();
		fill("yellow");
		text("Click 'VOTE!' to Cast Ballot",10,20);
		text("Press the Left Arrow to Return",10,30);
		text("2020 ELECTION MEMORIAL",width/2 + 40,height-20);
	} else if (sceneNumber == 4){
		gallery();
	}

	if (sceneNumber != 2){
		wind.stop();
	}
	if (sceneNumber != 3){
		//empty ballots array when you leave election memorial
		ballots = [];
	}
	if (sceneNumber != 1){
		//empty candles array when you leave zoom monument
		candles = [];
	}

}

function mousePressed(){
	//go to Zoom Monument
	if (mouseX >= 140 & mouseX <= 160 && mouseY >= 160 && mouseY <= 180 && sceneNumber == 0 ){
		sceneNumber = 1;
	}
	//go to Covid Statue
	if (mouseX >= 140 & mouseX <= 160 && mouseY >= 280 && mouseY <= 300 && sceneNumber == 0){
		sceneNumber = 2;
		sceneEnter = true;
	}
	//Candle Object Creation
	if (mouseX >= 132 & mouseX <= 245 && sceneNumber == 1){
		var ca = makeCandles(mouseX,302);
		candles.push(ca);
	}
	//go to Election Memorial
	if (mouseX >= 240 & mouseX <= 260 && mouseY >= 280 && mouseY <= 300 && sceneNumber == 0){
		sceneNumber = 3;
	}
	//Ballot object creation
	if(mouseX >= 5 & mouseX <= 45 && mouseY >= 305 && mouseY <= 345 && sceneNumber == 3){
		var mail = makeMailBallots();
		ballots.push(mail);
	}
	//go to Entrance Gallery
	if (mouseX >= 240 & mouseX <= 260 && mouseY >= 160 && mouseY <= 180 && sceneNumber == 0){
		sceneNumber = 4;
	}
	//Click through Image Gallery
	if (sceneNumber == 4){
		choosingImage();
	}


}

function keyPressed (){
	if (keyCode == LEFT_ARROW){
		sceneNumber = 0;
	}
}

function zoomMonument(){
		image(zoomMon,0,0);
		fill("yellow");
		text("Click Pedestal to Place Candle",10,20);
		text("Press the Left Arrow to Return",10,30);
		text("ZOOM MONUMENT",width/2 + 70,height-20);
		for (var i = 0; i < candles.length; i++){ 
			var c = candles[i];
			c.candleDraw();
		}
}

function nineteenStatue(){
	image(covidStatue,0,0);
	fill("white");
	text("Stare Into the Rings and Reflect",10,20);
	text("Press the Left Arrow to Return",10,30);
	text("COVID-19 STATUE",width/2 + 70,height-20);
	hypnoticRing();
}

function makeCandles(candleX,candleY){
	var candle = {x: candleX, y: candleY,
					candleDraw: drawCandles,
					color: candleColors[int(random(0,candleColors.length))]};
	return candle;
}

function drawCandles(){
	//candle base
	noStroke();
	fill(this.color);
	rect(this.x,this.y,5,-10);
	//flame
	fill("yellow");
	beginShape();
		vertex(this.x + 2.5,this.y - 10);
		curveVertex(this.x,this.y - 15);
		vertex(this.x + 2.5, this.y - 21);
		curveVertex(this.x + 5,this.y - 15);
	endShape();
}

function electionScene() {
	image(election,0,0,);
	voterBox();
	for (i = 0; i < ballots.length; i++){
		var b = ballots[i];
		b.drawMail();
		b.moveMail();
	}
}

function voterBox() {
	noStroke();
	fill(0,255,255);
	rect(0,400,50,-100);
	fill(0,90);
	square(0,300,50);
	fill("red");
	circle(25,325,40);
	fill(0);
	text("VOTE!",9,329);
}

function makeMailBallots() {
	var mail = {x: random(60,width - 20), y: 0,
				dy: random(3,5), color: color(random(0,255),random(0,255),random(0,255)),
				drawMail: mailDraw, moveMail: mailMove,};
	return mail;
}

function mailDraw() {
	strokeWeight(1);
	stroke(0);
	fill(this.color);
	rect(this.x,this.y, 20,10);
	noFill();
	triangle(this.x,this.y,this.x + 20, this.y, this.x + 10, this.y + 5);
}

function mailMove() {
	this.y += this.dy;
}

function gallery() {
	image(wall,0,0);
	fill("white");
	text("Click To Change Image Displayed",10,20);
	text("Press the Left Arrow to Return",10,30);
	text("ENTRANCE GALLERY",width/2 + 70,height-20);
	image(galleryImages[chooseImg],100,height*.5,150,150);
}

function choosingImage() {
	var randImg = 0;
	var newImage = 0;
	//make sure new image that shows isn't the same as the previous
	while(newImage < 1){
		randImg = int(random(0,galleryImages.length));
		if (randImg != chooseImg){
			chooseImg = randImg;
			newImage++;
		}
	}
	return chooseImg;
}

function hypnoticRing() {
	noFill();
	strokeWeight(2);
	var ringColors = [];
	for(var i = 0; i < 4; i++){
		var c = color(random(0,255),random(0,255),random(0,255));
		ringColors.push(c);
	}
	push();
		translate(width/2,height/2);
		stroke(ringColors[0]);
		circle(-20*cos(degrees(angle)),0,100);
		stroke(ringColors[1]);
		circle(20*cos(degrees(angle)),0,100);
		stroke(ringColors[2]);
		circle(-20*cos(degrees(angle)),50*sin(degrees(angle)),100);
		stroke(ringColors[3]);
		circle(20*cos(degrees(angle)),50*sin(degrees(angle)),100);
	pop();

	angle += 10;
}

Project 11

Continuing my inspiration from the artwork associated with Vaporwave, I decided to pursue my generative landscape project using the aesthetics, color palette, and symbols associated with the genre. Furthermore, to add to the surrealist atmosphere of the piece, I stylistically juxtaposed the Vaporwave landscape with a minimalist depiction of a train and dog. The interior of the train serves as the non-moving element of the drawing and has a window by which the Vaporwave setting can be seen. The two javascript objects that I used were telephone poles, a common symbol in Vaporwave art, that vary in thickness, height, and number of cross beams, and imported images of a marble bust, the Windows 95 logo, and an error message that vary in position and speed. Additionally, I used a noise function to generate a mountain in the background to complete the scene.

sketch – CopyDownload

var telephonePoles = [];
var images = [];
var showImage = [];
var mountainValue = [];
var noiseParam = 0;
var noiseStep = .1;

function preload() {
    // call loadImage() and loadSound() for all media files here
    images[0] = loadImage("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/error-1.png");
    images[1] = loadImage("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/floralshoppe-1.png");
    images[2] = loadImage("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/windows-1.png")
}


function setup() {
	frameRate(100);
    // you can change the next 2 lines:
    createCanvas(480, 480);
    //frameRate(20);
    //create telephonePoles
    for (var i = 0; i < 5; i++){
    	var tx = random(width);
    	var tt = random(1,5);
    	var th = random(50, height/2 - 70);
    	var tb = floor(random(1,4));
    	var pole = makePoles(tx,tt,th,tb);
    	telephonePoles.push(pole);
    	var image = makeImages(random(width/2,width),random(130,310));
    	showImage.push(image);
    }
    for(var i = 0; i <= width/5; i++){
    	var n = noise(noiseParam);
    	var value = map(n,0,1,0,height/2);
    	mountainValue.push(value);
    	noiseParam += noiseStep;
    }
}

var chooseColor;
function draw() {
    // you can replace any of this with your own code:
    //var chooseColor = random(floor(0,5));
    if (chooseColor == 0){
    	background(255,113,206);
    } else if (chooseColor == 1){
    	background(1,205,254);
    } else if (chooseColor == 2){
    	background(5,255,161);
    } else if (chooseColor == 3){
    	background(185,103,255);
    } else {
    	background(255,251,150)
    }
    drawGrid();
    drawMountain();
    for (var i = 0; i < 5; i++){
    	var t = telephonePoles[i];
    	t.move();
 		t.drawPole();
    }
    for (var i = 0; i < showImage.length; i++){
    	var m = showImage[i];
    	m.moveImg();
    	m.drawImage();
    }
    //image(images[0],random(0,width),height/2);
    drawTrain();
    drawChair();
    drawLegs();
    push();
    translate(width,0);
    scale(-1,1);
    drawChair();
    pop();
    drawDog();
    newPole();
    newImage();
    removeImage();
    removePole();
    moveMountain();
    if (frameCount % 100 == 0){
		chooseColor = floor(random(0,5));
    }
}

function drawTrain() {
	noStroke();
	fill(193,143,171);
	rect(0,0,width,120);
	rect(0,320,width,height);
	fill(221,194,59);
	//window
	beginShape();
		vertex(0,110);
		vertex(width,110);
		vertex(width,330);
		vertex(0,330);
	beginContour();
		vertex(10,320);
		vertex(width-10,320);
		vertex(width-10,120);
		vertex(10,120);
	endContour();
	endShape(CLOSE);
}

function drawChair() {
	noStroke();
	fill(84,68,70);
	beginShape();
		vertex(20,height);
		vertex(20,280);
		curveVertex(40,300);
		curveVertex(50,height);
	endShape(CLOSE);
	rect(30,height - 50, 100, height, 5);
}

function drawDog() {
	fill("white");
	noStroke();
	//head
	circle(400,340,50);
	//body
	fill("white")
	ellipse(400,400,60,100);
	//tail
	fill("black");
	beginShape();
		vertex(395,445);
		curveVertex(405,460);
		vertex(375,470);
		curveVertex(415,460);
		vertex(405,450);
	endShape(CLOSE);
	//ears
	push();
	translate(32,-20);
	quad(350,340,355,370,335,350,347,345);
	pop();
	push();
	translate(287,-20);
	translate(width,0);
	scale(-1,1);
	quad(350,340,355,370,335,350,347,345);
	pop();
}

function drawLegs() {
	//legs
	fill("black");
	rect(370,400,20,50,40);
	push();
	translate(40,0);
	rect(370,400,20,50,40);
	pop();
}

function drawGrid() {
	stroke("white");
	strokeWeight(.5);
	for (var yShift = 0; yShift < height/2; yShift += 10){
		line(0,height/2 + yShift,width,height/2 + yShift);
	}
	for (var xShift = -width*40; xShift < width*40; xShift += 60){
		line(width/2,height/2,xShift,height);
	}
}

function poleDraw() {
	noStroke();
	fill("black");
	//trunk
	push();
	translate(0,-this.tall);
	rect(this.x,height/2,this.thickness, this.tall);
	//beams
	for (var i = 0;i < this.beamNumber; i++){
		rect(this.x - 20,height/2, 40, this.thickness/2);
		translate(0, this.thickness);
	}
	pop();
}

function poleMove (){
	this.x += this.speed;
}

function newPole() {
	var newPoleProb = .7;
	if (random(0,1) < newPoleProb){
		telephonePoles.push(makePoles(width,random(1,5),random(50, height/2 - 70),
			floor(random(1,4))));
	}
}

function removePole() {
	var polesToKeep = [];
	for (var i = 0; i < telephonePoles.length; i++){
		if(telephonePoles[i].x > 0){
			polesToKeep.push((telephonePoles[i]));
		}
	}
	telephonePoles = polesToKeep;
}

function removeImage() {
	var imageKeep = [];
	for (var i = 0; i < showImage.length; i++){
		if(showImage[i].x > 0) {
			imageKeep.push(showImage[i]);
		}
	}
	showImage = imageKeep;
}

function newImage() {
	var newImageProb = .009;
	if (random(0,1) < newImageProb){
		showImage.push(makeImages(width,random(130,310)));
	}
}
function makePoles(poleX, poleThick, poleHeight,poleBeam) {
	var telephonePole = {x: poleX, thickness: poleThick,
				speed: -1.0, drawPole: poleDraw,
				tall: poleHeight, beamNumber: poleBeam,
				move: poleMove}
	return telephonePole;
}

function imageDisplay(){
	image(images[this.chooseImage],this.x,this.y);
}

function imageMove(){
	this.x += this.speed;
}
function makeImages(imageX,imageY) {
	var m = {x: imageX, y: imageY,
			speed: random(-6.0,-1.0),
			chooseImage: floor(random(0,images.length)),
			drawImage: imageDisplay, moveImg: imageMove};
	return m;
}

function drawMountain() {
	noStroke();
	fill(0,100);
	for( var i = 0; i < width/5; i++){
	beginShape();
		vertex(0,height/2);
		for( var i = 0; i <= width/5; i++){
			vertex(5*i,mountainValue[i]);
			vertex(5*(i+1),mountainValue[i+1]);
		}
		vertex(width,height/2);
	endShape(CLOSE);
	}
}

function moveMountain() {
	mountainValue.shift();
	var n = noise(noiseParam);
	var value = map(n,0,1,0,height/2);
	mountainValue.push(value);
	noiseParam += noiseStep;
}

Looking Outwards 11

A project that I find inspiring is the Ideogenetic Machine (2011) by Nova Jiang. The project is an installation that uses a custom software to combine the artist’s drawings with portraits of people interacting with the installation. The installation features a camera that captures images of the people and draws them into panels of the comic. I admire this installation because it elevates any person into the hero of a unique story. With this installation, anybody can be the protagonist of an epic tale.

Nova Jiang is an artist that creates sculptures and installations, many of which are interactive. She studied at UCLA to get her Master of Fine Arts in Media Art. She currently works in Los Angeles, but has exhibited her work throughout the world.

Image created by Nova Jiang’s Ideogenetic Machine

Project 10

For Project 10, I decided to create a collage based story inspired by the aesthetic of Vaporwave. My process began by creating background collages in Photoshop and displaying them in p5-js. Then, I added in the characters within p5-js so that they could be animated. Due to the surreal nature of the world I ended up creating with the collages, I decided to incorporate Alice from Alice in Wonderland as the main character of the story traveling through this “Vaporwave Land.”

My first sound was a piece of music I found that reminded me of startup sounds from old computers. The next sound I used was the error message sound to coincide with the error message character’s appearance. The third sound I used was an ominous drone sound I found to bring life to the All-Seeing-Eye character. The fourth sound I used was the Windows 95 shutdown sound to coincide with the end of the story and the Windows 95 logo character. The last sound was a piece of “80s” inspired music that I used as credit music.

sketch – CopyDownload

//Story Concept: Alice from Alice in Wonderland wakes up stuck in the glitched out world
//of Vaporwave. First, she wakes up in the MS Paint canvas and sees the marble bust from
//Macintosh Plus's Floral Shoppe album floating above her as startup music plays. Next,
//as she explores this new world trying to find a way out she discovers and incessant error
//message that blocks her path. Then, she visits the All-Seeing-Eye for guidance, but the
//eye just floats around aimlessly making an ominous drone. Finally, she arrives at the 
//original frontier and manages to shut down the Windows 95 logo that runs this world.

var sceneOne;
var sceneTwo;
var sceneThree;
var sceneFour;
var error;
var alice;
var soundOne;
var blink = true; //helps make error message disappear and reappear
var soundError;
var eye;
var eyeDrone;
var windows;
var logoFlip = true;//helps flip and reflip Windows 95 logo
var vaporwave;
var sleepalice;
var sitalice;
var windowSound;
var marbleBust;


function preload() {
    // call loadImage() and loadSound() for all media files here
    sceneOne = loadImage("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/2-scaled.jpgmu.edu/15-104/f2020/wp-content/uploads/2020/11/1-scaled.jpg");
    sceneTwo = loadImage("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/2-scaled.jpg");
    sceneThree = loadImage("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/3-scaled.jpg");
    sceneFour = loadImage("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/4-scaled.jpg");
    //source: https://i.pinimg.com/originals/c8/0b/29/c80b290d6ea187abe624cd42c4b44014.png
    windows = loadImage("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/windows.png")
    //source: https://freshsparks.com/wp/wp-content/uploads/2015/06/generic-error-message-microsoft.jpg
    error = loadImage("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/error.png");
    //source: http://2.bp.blogspot.com/-cM30a7xxeMg/TplisvJ0QYI/AAAAAAAAABk/DUgdfkhhq0c/s320/Alice%2B2.gif
    alice = loadImage("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/alice.gif"); 
    //source: https://freesound.org/people/kjartan_abel/sounds/542453/
    soundOne = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/japansky-1.wav"); 
    //source: https://freesound.org/people/AbdrTar/sounds/519422/
    soundError = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/error-1.wav"); 
    //source: https://freemasoninformation.com/wp-content/uploads/2014/05/all-seeing-eye-of-god-796x1024.jpg
    eye = loadImage("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/eye.png");
    //source: https://freesound.org/people/pointparkcinema/sounds/407241/
    eyeDrone = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/eyedrone-1.wav");
    //source: https://freesound.org/people/Doctor_Dreamchip/sounds/523808/
    vaporwave = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/vaporwave.wav"); 
    //source: https://www.disneyclips.com/images/images/alice1small.gif
    sleepalice = loadImage("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/sleepingalice.gif");
    //source: https://www.disneyclips.com/images/images/alice-small.png
    sitalice = loadImage("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/alicesit.png");
    //source: https://www.myinstants.com/instant/windows-xp-shutdown/
    windowSound = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/preview_4.mp3")
    //source: https://ih0.redbubble.net/image.236642016.7494/ap,550x550,12x16,1,transparent,t.png
    marbleBust = loadImage("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/floralshoppe.png");

}


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


function soundSetup() { // setup for audio generation
    soundOne.setVolume(.2);
    soundError.setVolume(1);
    eyeDrone.setVolume(.7);
    vaporwave.setVolume(.5);
    windowSound.setVolume(.5);
}

var soundplay = true;
var marbleAngle = 0;

function draw() {
	var eyeX = random(0,3500);
	var eyeY = random(220,500);
    var marbleRadius = 600;
    // you can replace any of this with your own code:
    background(200);
    text("p5.js 15104 fall 2019 v1", 10, 15);
    print(soundplay);
    if (frameCount < 27){
    	soundplay = true;
    	image(sceneOne,0,0,400,400);
    	push();
    	scale(.25,.25);
    	image(sitalice,90,775);
    	pop();
        push();
        imageMode(CENTER);
        scale(.5,.5);
        image(marbleBust,marbleRadius*cos(radians(marbleAngle)),250);
        marbleAngle += 20;
        pop();
    	stroke("black");
    	fill("black");
    	text("Chapter One: Alice Wakes Up in the Internet",5,390);
    	soundOne.play();
    } else if (frameCount >= 27 & frameCount < 50){
    	soundOne.stop();
    	image(sceneTwo,0,0,400,400);
	    push();
	    scale(.1,.1);
	    drawAlice(3000,3000);
	    pop();
	    if (blink == true){ //makes error message appear and disappear
	    	push();
	    	scale(.8,.8);
	   		drawError(0,height/4);
	    	pop();
	    	soundError.play();
	    } else if (blink == false){
	    	soundError.stop();
	    	background(0,0);
	    }
	    blink = !blink;
	    stroke("black");
    	fill("black");
    	text("Chapter Two: Alice Encounters an Error",5,390);
    } else if (frameCount >= 50 & frameCount < 70) {
    	image(sceneThree,0,0,400,400);
		push();
		scale(.4,.4);
		drawAlice(650,300);
		pop();
		push();
		scale(.1,.1);
		drawEye(eyeX,eyeY); //All-Seeing-Eye moves randomly on canvas
		eyeDrone.play();
		pop();
		stroke(255);
    	fill(255);
    	text("Chapter Three: Alice Asks the All-Seeing-Eye for Help",5,390);
    } else if (frameCount >= 70 & frameCount < 90){
    	eyeDrone.stop();
    	image(sceneFour,0,0,400,400);
    	push();
    	scale(.1,.1);
    	drawAlice(3300,3300);
    	pop();
    	push();
    	scale(.5,.5);
    	if (logoFlip == true){
    		drawLogo(width/2,height/2);
    		windowSound.play();
    	} else if (logoFlip == false){
    		windowSound.stop();
    		scale(-1,1);
    		drawLogo(-1.5*width,height/2);
    	}
    	pop();
    	logoFlip = !logoFlip; 
    	stroke(120);
    	fill(120);
    	text("Chapter Four: Alice Faces the Original Frontier",10,390);

    } else {
    	//text(frameCount,0,0);
    	if (soundplay == true){
    		vaporwave.play(); //Cheesy end credit music plays
    		soundplay = !soundplay; //prevents song from restarting each time draw loops
    	}
    	background(0);
    	push();
    	scale(3,3);
    	fill(255,255,0);
    	stroke(255,255,0);
    	text("Alice in Vaporwave Land",1,height/9 + 10);
    	if (frameCount> 95){
    		text("Click to Start Again",1,(height/9)+20);
    	}
    	pop();
    	push();
    	scale(.5,.5);
    	image(sleepalice, 400,400);
    	pop();
    }


}

function mousePressed(){
	if (frameCount > 95){ //restarts story
		vaporwave.stop();
		frameCount = 0;
	}
}


function drawAlice(x,y){
	image(alice,x,y);
}

function drawError(x,y){
	image(error,x,y);
}


function drawEye(x,y){
	image(eye,x,y);
}

function drawLogo(x,y){
	image(windows,x,y);
}

Looking Outwards 10

A project in the area of computational music that I find interesting is “The Holophone (2015)” by Daniel Iglesia. “The Holophone” is a digital instrument that generates music and projects three-dimensional animations in response to inputs on its interface. The projected animations are abstracts and are in sync with the music generated. The animations can be viewed in 3D if one wears 3d glasses. The instrument generates sounds based off of tactile inputs on the screen or vocal inputs. I assume that “the Holophone” has algorithms that generate sounds based off of different paramaters define by the tactile inputs. There is most likely a slider for the bpm, time signature, key, etc. Additionally, “the Holophone” must have an algorithm that listens and records the vocal inputs and converts it into MIDI to imitate it. The artist intended to create an instrument that creates sound and three-dimensional shapes, and while “the Holophone” merely produces projections that appear three-dimensional when viewed with 3D glasses, I think the result is accurate to the artist’s vision.

Project 09: Computational Portrait

Screenshot 1 of the Computational Portrait

Inspired by the fact that this project was due on Halloween and by the string of words Ryan Alexander uses to draw his portraits, I decided to use the words of Edgar Allan Poe’s poem “The Raven” as the elements to draw the portrait. Additionally, the photograph that the portrait is based off of has an eerie quality due to it being generated by the AI program of thispersondoesnotexist.com. My process began with me inputting each word of “The Raven” into an array that the code could access. Next, inspired by the code we used to generate particles during last week’s lab session, I created objects out of the words that could move around the canvas. Lastly, using the image.get() function, I was able to have the words change color as they move around the canvas.

sketchDownload
//Anishwar Tirupathur
//atirupat
//Section B
//Computational Portrait (Custom Pixel)

var face;

//Words of The Raven by Edgar Allan Poe
//Source:  https://www.poetryfoundation.org/poems/48860/the-raven
var theRaven = ["Once","upon","a","midnight","dreary,","while","I","pondered,","weak", "and","weary,",
  				"Over","many","a","quaint","and","curious","volume","of","forgotten", "lore—",
      			"While","I", "nodded,", "nearly", "napping,", "suddenly ","there", "came", "a", "tapping,",
  				"As", "of", "some", "one", "gently", "rapping,", "rapping", "at", "my", "chamber", "door.",
  				"“’Tis", "some", "visitor,”", "I", "muttered,", "“tapping", "at", "my", "chamber", "door—",
              	"Only", "this", "and", "nothing", "more.”",
     			 "Ah,", "distinctly", "I", "remember", "it", "was", "in", "the", "bleak", "December;",
 				 "And", "each", "separate", "dying", "ember", "wrought", "its", "ghost", "upon", "the", "floor.",
     			 "Eagerly", "I", "wished", "the", "morrow;","—vainly", "I", "had", "sought", "to", "borrow",
     			 "From", "my", "books", "surcease", "of", "sorrow—","sorrow", "for", "the", "lost", "Lenore—",
  				 "For", "the", "rare", "and", "radiant", "maiden", "whom", "the", "angels", "name", "Lenore—",
                 "Nameless", "here", "for", "evermore.",
     			 "And", "the", "silken,", "sad,", "uncertain", "rustling", "of", "each", "purple", "curtain",
  				 "Thrilled", "me—","filled", "me", "with", "fantastic", "terrors", "never", "felt", "before;",				 
     			 "So", "that", "now,", "to", "still", "the", "beating", "of", "my", "heart,", "I", "stood", "repeating",
      			 "“’Tis", "some", "visitor", "entreating", "entrance", "at", "my", "chamber", "door—",
  				 "Some", "late", "visitor", "entreating", "entrance", "at", "my", "chamber", "door;—",
              	 "This", "it", "is", "and", "nothing", "more.”",
      			 "Presently", "my", "soul", "grew", "stronger;", "hesitating", "then", "no", "longer,",
  				 "“Sir,”", "said", "I,", "“or", "Madam,", "truly", "your", "forgiveness", "I", "implore;",
      			 "But", "the", "fact", "is", "I", "was", "napping,", "and", "so", "gently", "you", "came", "rapping,",
      			 "And", "so", "faintly", "you", "came", "tapping,", "tapping", "at", "my", "chamber", "door,",
 				 "That", "I", "scarce", "was", "sure", "I", "heard", "you”—","here", "I", "opened", "wide", "the", "door;—",
              	 "Darkness", "there", "and", "nothing", "more.",
      			 "Deep", "into", "that", "darkness", "peering,", "long", "I", "stood", "there", "wondering,", "fearing,",
 				 "Doubting,", "dreaming", "dreams", "no", "mortal", "ever", "dared", "to", "dream", "before;",
      			 "But", "the", "silence", "was", "unbroken,", "and", "the", "stillness", "gave", "no", "token,",
      			 "And", "the", "only", "word", "there", "spoken", "was", "the", "whispered", "word,", "“Lenore?”",
  				 "This", "I", "whispered,", "and", "an", "echo", "murmured", "back", "the", "word,", "“Lenore!”—",
              	 "Merely", "this", "and", "nothing", "more.",
              	 "Back", "into", "the", "chamber", "turning,", "all", "my", "soul", "within", "me", "burning,",
  				 "Soon", "again", "I", "heard", "a", "tapping", "somewhat", "louder", "than", "before.",
       			 "“Surely,”", "said", "I,", "“surely", "that", "is", "something", "at", "my", "window,", "lattice;",
        		 "Let", "me", "see,", "then,", "what", "thereat", "is,", "and", "this", "mystery", "explore—",
  				 "Let", "my", "heart", "be", "still", "a", "moment", "and", "this", "mystery", "explore;—",
              	 "’Tis", "the", "wind", "and", "nothing", "more!”",
				"Open", "here", "I", "flung", "the", "shutter,", "when,", "with", "many", "a", 
				"flirt", "and", "flutter,", "In", "there", "stepped", "a", "stately", "Raven", 
				"of", "the", "saintly", "days", "of", "yore;","Not", "the", "least",
				 "obeisance", "made", "he;", "not", "a", "minute", "stopped", "or", "stayed", "he;",  
				 "But,", "with", "mien", "of", "lord", "or", "lady,", 
				 "perched","above","my","chamber","door—","Perched","upon","a","bust","of","Pallas",
				 "just","above","my","chamber","door—","Perched,","and","sat,","and","nothing","more.",
				 "Then","this","ebony","bird","beguiling","my","sad","fancy","into","smiling,","By",
				 "the","grave","and","stern","decorum","of","the","countenance","it","wore,",
				 "“Though","thy","crest","be","shorn","and","shaven,","thou,”","I","said,",
				 "“art","sure","no","craven,","Ghastly","grim","and","ancient","Raven","wandering","from",
				 "the","Nightly","shore—","Tell","me","what","thy","lordly","name","is","on","the","Night’s",
				 "Plutonian","shore!”","Quoth","the","Raven","“Nevermore.”","Much","I","marvelled","this",
				 "ungainly","fowl","to","hear","discourse","so","plainly,","Though","its","answer","little",
				 "meaning—little","relevancy","bore;","For","we","cannot","help","agreeing","that","no",
				 "living","human","being","Ever","yet","was","blessed","with","seeing","bird","above","his",
				 "chamber","door—","Bird","or","beast","upon","the","sculptured","bust","above","his","chamber",
				 "door,","With","such","name","as","“Nevermore.”","But","the","Raven,","sitting","lonely","on",
				 "the","placid","bust,","spoke","only","That","one","word,","as","if","his","soul","in","that",
				 "one","word","he","did","outpour.","Nothing","farther","then","he","uttered—not","a","feather",
				 "then","he","fluttered—","Till","I","scarcely","more","than","muttered","“Other","friends","have",
				 "flown","before—","On","the","morrow","he","will","leave","me,","as","my","Hopes","have","flown",
				 "before.”","Then","the","bird","said","“Nevermore.”","Startled","at","the","stillness","broken","by",
				 "reply","so","aptly","spoken,","“Doubtless,”","said","I,","“what","it","utters","is","its","only",
				 "stock","and","store","Caught","from","some","unhappy","master","whom","unmerciful","Disaster",
				 "Followed","fast","and","followed","faster","till","his","songs","one","burden","bore—","Till","the",
				 "dirges","of","his","Hope","that","melancholy","burden","bore","Of","‘Never—nevermore’.”","But","the",
				 "Raven","still","beguiling","all","my","fancy","into","smiling,","Straight","I","wheeled",
				 "a","cushioned","seat","in","front","of","bird,","and","bust","and","door;","Then,","upon",
				 "the","velvet","sinking,","I","betook","myself","to","linking","Fancy","unto","fancy,",
				 "thinking","what","this","ominous","bird","of","yore—","What","this","grim,","ungainly,",
				 "ghastly,","gaunt,","and","ominous","bird","of","yore","Meant","in","croaking",
				 "“Nevermore.”","This","I","sat","engaged","in","guessing,","but","no","syllable",
				 "expressing","To","the","fowl","whose","fiery","eyes","now","burned","into","my",
				 "bosom’s","core;","This","and","more","I","sat","divining,","with","my","head","at","ease",
				 "reclining","On","the","cushion’s","velvet","lining","that","the","lamp-light","gloated",
				 "o’er,","But","whose","velvet-violet","lining","with","the","lamp-light","gloating","o’er,",
				 "She","shall","press,","ah,","nevermore!","Then,","methought,","the","air","grew","denser,",
				 "perfumed","from","an","unseen","censer","Swung","by","Seraphim","whose","foot-falls","tinkled",
				 "on","the","tufted","floor.","“Wretch,”","I","cried,","“thy","God","hath","lent","thee—by","these",
				 "angels","he","hath","sent","thee","Respite—respite","and","nepenthe","from","thy","memories","of",
				 "Lenore;","Quaff,","oh","quaff","this","kind","nepenthe","and","forget","this","lost","Lenore!”",
				 "Quoth","the","Raven","“Nevermore.”","“Prophet!”","said","I,","“thing","of","evil!—prophet","still,",
				 "if","bird","or","devil!—","Whether","Tempter","sent,","or","whether","tempest","tossed","thee","here",
				 "ashore,","Desolate","yet","all","undaunted,","on","this","desert","land","enchanted—","On","this","home",
				 "by","Horror","haunted—tell","me","truly,","I","implore—","Is","there—is","there","balm","in","Gilead?—tell",
				 "me—tell","me,","I","implore!”","Quoth","the","Raven","“Nevermore.”","“Prophet!”","said","I,","“thing","of",
				 "evil!—prophet","still,","if","bird","or","devil!","By","that","Heaven","that","bends","above","us—by","that",
				 "God","we","both","adore—","Tell","this","soul","with","sorrow","laden","if,","within","the","distant",
				 "Aidenn,","It","shall","clasp","a","sainted","maiden","whom","the","angels","name","Lenore—","Clasp","a",
				 "rare","and","radiant","maiden","whom","the","angels","name","Lenore.”","Quoth","the","Raven","“Nevermore.”",
				 "“Be","that","word","our","sign","of","parting,","bird","or","fiend!”","I","shrieked,","upstarting—","“Get",
				 "thee","back","into","the","tempest","and","the","Night’s","Plutonian","shore!","Leave","no","black","plume",
				 "as","a","token","of","that","lie","thy","soul","hath","spoken!","Leave","my","loneliness","unbroken!—quit",
				 "the","bust","above","my","door!","Take","thy","beak","from","out","my","heart,","and","take","thy","form",
				 "from","off","my","door!”","Quoth","the","Raven","“Nevermore.”","And","the","Raven,","never","flitting,",
				 "still","is","sitting,","still","is","sitting","On","the","pallid","bust","of","Pallas","just","above","my",
				 "chamber","door;","And","his","eyes","have","all","the","seeming","of","a","demon’s","that","is","dreaming,",
				 "And","the","lamp-light","o’er","him","streaming","throws","his","shadow","on","the","floor;","And","my","soul",
				 "from","out","that","shadow","that","lies","floating","on","the","floor","Shall","be","lifted—nevermore!",
      		];

function preload(){
	face = loadImage("https://i.imgur.com/AiLLvGJ.png");
}

function stepPoem(){
	this.x += this.dx; //moves the word horizontally based on the dx velocity
	this.y += this.dy; //moves the word vertically based on the dy velocity
	if (this.x > imageScale*width){ //makes sure words bounce off right edge of scaled canvas
		this.x = imageScale*width - (this.x - imageScale*width);
		this.dx = -this.dx;
	} else if (this.x < 0){ //makes sure words bounce off left edge of scaled canvas
		this.x = - this.x;
		this.dx = -this.dx;
	}
	if (this.y > imageScale*height){ //makes sure words bounce off bottom edge of scaled canvas
		this.y = imageScale*height - (this.y -imageScale*height);
		this.dy = -this.dy;
	} else if (this.y < 0){ //makes sure words bounce off top edge of scaled canvas
		this.y = -this.y;
		this.dy = -this.dy;
	}
}

function drawPoem(){
	//chooses a random word from "The Raven" and draws it on the canvas at wx and wy
	text(theRaven[floor(random(0,theRaven.length))],this.x,this.y); 
}

function makePoem(wx,wy,wdx,wdy){ //inspired by particle code
	w = {x: wx, y: wy,
		 dx: wdx, dy: wdy,
		 stepFunction: stepPoem,
		 drawFunction: drawPoem
		};
	return w;
}

var poetry = [];
var imageScale = 2; //increases range that words can appear so that the entire photo can be referenced
var drawScale = 1/imageScale; //scales canvas so that all the words can appear on the canvas
var particleScale = 11; //extends for loop so that more words are generated creating a denser clearer image

function setup() {
    createCanvas(450, 450);
    background(220);
    for (var i = 0; i < theRaven.length*particleScale; i++){ 
    	var p = makePoem(random(0,imageScale*width),random(0,imageScale*height),random(-5,5),random(-2,5));
    	poetry.push(p);
    }
    face.loadPixels();
    text("p5.js vers 0.9.0 test.", 10, 15);
}

function draw() {
	background(0);
	push();
	scale(drawScale,drawScale); //canvas is scaled in order for the entire face to be displayed
	for (var i = 0; i < theRaven.length*particleScale; i++){
		var w = poetry[i];
		//word changes color depending on wx and wy and the image color at that point
		stroke(face.get(w.x,w.y)); 
		w.stepFunction();
		w.drawFunction();
	}
	pop();
}
Screenshot 2 of Computational Portrait

Looking Outwards 09

Video Demonstrating the Use of the Weather Thingy

The fourth Looking Outwards blog post my peer Tak wrote was about “The Weather Thingy,” a device that takes climate data and weather information and translates it into sound. “The Weather Thingy (c. 2018)” was created by Adrian Kaeser and gathers information about the weather from sensors and rescripts that to affect the sounds coming out of a synthesizer. I think that this project is outstanding and adds an element of randomness to the music. I also appreciate how it contrasts the calculated, digital qualities of electronic music through its incorporation of sounds from nature and the environment. I agree with Tak’s appreciation of how this device allows artists and musicians to convey and share how they percieve nature. However, I think that it’s also important to note that while the weather filters and effects what the artist is playing on the midi notes, so this device could also be considered an auditory collaboration between humans and nature rather than humans merely letting nature into creative process.

Looking Outwards: 08

Meow Wolf Lecture from Eyeo Festival (2019)

Meow Wolf is an artist collective based in Santa Fe, New Mexico. The collective contains hundreds of members who work together to create large-scale, elaborate art installations. The two representatives of Meow Wolf at the 2019 Eyeo Festival, (Danny Bazo and Conor Peterson) studied various intersections of art and computers in college. For example, Peterson studied an Experimental Computer Art program at the University of New Mexico. However, many of the artists in the collective are architects, designers, writers, painters, etc.

Meow Wolf’s body of work consists of collectively designed and assembled installations that are themed around the existence of multiverses. I admire the way they work collectively, synthesizing each artist in the collective’s unique style and making it work with the piece at large. I admire these aspects of the collective’s work because it allows for a balance between individual expression and collective cohesion. My favorite project of theirs is the House of Eternal Return because it uses the frame of a banal American home and juxtaposes it against these fantastical, otherworldly realms.

Video of Meow Wolf’s House of Eternal Return

Meow Wolf presents their work using photos of their work, both in progress and complete, videos of the artists interacting with each other and working on the art, and through illustrative graphics. I’ve learned to include process a lot more in my presentations.

Project 07: Composition with Curves

My process to create this project began with doing research on various geometric curves. Once I found the Conchoid of de Sluze, I found that it had this unique directional quality and, if translated to the middle of the canvas, neatly divided it in half. After making the curve flip based on the x-position of the mouse, I decided to make the bulge of the curve responsive to the y-position of the mouse. Then, I would draw another curve ( a cardiod cartacaustic) with a flashing background in the half of the canvas the Conchoid of de Sluze was not occupying. In this way, the Conchoid of de Sluze was acting as a revealing element. Afterwards, to add some visual interest, I added a random function to the vertexes of each curve to create a jittery animated effect.

Project 7 – CurvesDownload



function setup() {
    createCanvas(480, 480);
    background(220);
    text("p5.js vers 0.9.0 test.", 10, 15);
}

function draw() {
	background(0);
	if (mouseX >= width/2){
		noStroke();
		fill(random(200,255),random(100,255),0);
		rect(0,0,width/2,height);
		push();
		translate(width/4,height/2);
		//rotate(radians(45));
		cardioidCatacaustic();
		pop();
	} else {
		noStroke();
		fill(random(100,255),0,random(200,255));
		rect(width/2,0,width/2,height);
		push();
		translate(3*width/4,height/2);
		rotate(radians(180));
		cardioidCatacaustic();
		pop();
	}
	push();
	translate(width/2,height/2);
	conchoid();
	pop();
}

function conchoid() {
	//https://mathworld.wolfram.com/ConchoidofdeSluze.html
	var x;
	var y;
	var r;
	var a = constrain(mouseY,10,240);
	fill("red");
	beginShape();
	for(var i = 0; i < 200; i++){
		var t = map(i,0,200,-PI,3*PI);
		if(mouseX <= width/2){
			r = -(1/cos(t) + a*cos(t));
		} else{
			r = (1/cos(t) + a*cos(t));
		}
		x = r*cos(t);
		y = r*sin(t);
		vertex(x + random(-2,2),y + random(-2,2));
	}
	endShape();
}

function cardioidCatacaustic() {
	https://mathworld.wolfram.com/CardioidCatacaustic.html
	var x;
	var y;
	var xe;
	var ye;
	var strokeVal =.2;
	var a = 60;
	noFill();
	stroke(0);
	strokeWeight(strokeVal);
	beginShape();
	for(var i = 0; i < 200; i++){
		var t = map(i,0,200,-PI,PI);
		x = a*(1 + cos(t))*cos(t);
		y = -a*(1 + cos(t))*sin(t);
		vertex(x + random(-2,2),y + random(-2,2));
	}
	endShape(CLOSE);
}

Looking Outwards 07: Information Visualization

A work of computational information visualization that I find intriguing is Stamen Design’s “Metagenomics with the Banfield Lab.” This project came about when the Banfield Lab asked Stamen Design to visualize their data about gene sequences in an ecosystem. I admire the clarity of the visual result because it takes what would normally be considered complex data and arranges it in a way that is easy to access and read. I suppose that the artwork was generated by sorting the data into a matrix and visualizing the data as squares. Stamen Design’s artistic sensibilities are manifested in the final form because they created a clear and readable visualization of data while being visually interesting.

Gif of Stamen Design’s “Metagenomics with the Banfield Lab”