My project was inspired by a silly idea I had for a flip book of my personal failures revolving around the bouncing ball problem from early on in the class. That evolved into slides containing the ball that you had to click or else the game would end. Eventually I figured with all the problems the year had I could make it America and the ball representing the horrible things popping up all over the country. The user has to keep clicking on the ball as it bounces around the map until they win. Every time the map goes off the canvas, the ball gets faster and more red and the background gets darker. The screen will also begin to crack. Encouraging and frightened dialogue will also appear at the bottom and top respectively, and I’ve included instructions and a brief introduction in the console at the start of the game. I wish I had more time to flesh out the theme of the multiple problems of the year and could’ve made multiple minigames rather than just one, or a more involved animation, but after how poorly my proposal turned out I’m very happy with what I have.

sketch

var slides = []
var threat = 0
var prevent = 0
var incomingX = -100
var incomingY = -100
var incomingSize = 20
var u
var t
var rectY = -200
var flag;
var pic;
var hasDrawn = false
var lineX = []
var lineY= []
var gameStart = false
var hasWritten = false


function makeSlide(sX, sY, sDX, slideTime, ballX, ballY, bounceX, bounceY){ 
  slide = {x: sX, y: sY, dx: sDX, timing: slideTime, drawFunction: drawSlide, stepFunction: slideSlide, extra: drawBall, extraMove: ballMove, extraX: ballX, extraY: ballY, moveX: bounceX, moveY: bounceY}
  return slide
}


function drawSlide(){ 
	imageMode(CENTER)
	image(pic, this.x, this.y, 350, 350)
}


function slideSlide(){
	this.x += this.dx
	if(this.x >= 600 || this.x <= -200){
		this.dx *= -1
	} if (this.x == 600){
    		this.dx -= 2
    	} else if (this.x == -200){
    		this.dx += 2
    	} 
}
 

function drawBall(){
	stroke(0, 0, 0)
	fill(256 - threat, (256 -(threat * 13)), 256 -(threat * 13))
	circle(constrain(this.extraX, this.x - 155, this.x + 175), constrain(this.extraY, 30, 350), 40)
}


function ballMove(){
	this.extraX += this.dx 
	this.extraX += this.moveX
	this.extraY += this.moveY
    if (this.extraX >= this.x + 175 || this.extraX <= this.x - 155){
    	this.moveX *= -1
    } if (this.extraY >= 330 || this.extraY <= 30){
    	this.moveY *= -1
    }
    if (mouseIsPressed & dist(mouseX, mouseY, this.extraX, this.extraY) <= 20){
    	prevent += 1	
    }
     else if (this.x == 600 || this.x == -20){
    	threat += 1
    }
}


function preload(){ 
  pic = loadImage("https://i.imgur.com/VD23NPD.png")
  flag = loadImage("https://i.imgur.com/xFTfp2y.jpg")
}


function setup() { 
	angleMode(DEGREES)
	frameRate(15)
    createCanvas(400, 400);

This landscape wasn’t the most challenging but the UFO really wasn’t the easiest to get working. I had to experiment a lot with the order of my elements in the draw function to get it looking like it should and it took some testing to get it to move around on the campus and get back on when it flew away.

sketch

var chasm = []
var alien = []
var roadLines = []



function makeLines(lineY, lineLength){  ///creates the yellow lines on the road
  l = {y: lineY, length: lineLength, drawFunction: drawLines, stepFunction: moveLines}
  return l
}

function drawLines(){
  push()
  translate(190, this.y)
  stroke(255, 255, 0)
  line(0, 0, 0, this.length)
  pop()
  push()
  translate(210, this.y)
  stroke(255, 255, 0)
  line(0, 0, 0, this.length)
  pop()
}

function moveLines(){ ////advances the lines so it appears the viewer is moving over the road
  this.y += 10
  if (this.y >= 420){
    roadLines.shift()
    roadLines.push(makeLines(-100, random(0, 200)))
  }

}

function makeUFO(ufoX, ufoY, ufoDX, ufoDY){ ////draws the hovering ufo
  ufo = {x: ufoX, y: ufoY, dx: ufoDX, dy: ufoDY, drawFunction: drawUFO, stepFunction: ufoFly}
  return ufo
}

function drawUFO(){ 
  push()
  translate(this.x, this.y)
  fill(100)
  ellipse(0, 0, 125, 125)
  fill(227, 252, 252)
  ellipse(0, 0, 70, 70)

  for (var t = 0; t <= 10; t++){
    fill(random(0, 255), random(0, 255), random(0, 255))
    ellipse(0, -48, 10, 20)
    rotate(12)
}
pop()
}

function ufoFly(){ ////keeps the ufo flying around the scene if it hits an edge
  this.x += this.dx
  this.y += this.dy
if (this.x >= 400 || this.y >= 400){
  this.dx = random(-5, 5)
  this.dy = random(-5, 5)
  this.dx *= -1
  this.dy *= -1
}
if (this.x <= 0 || this.y <= 0){
  this.dx = random(-5, 5)
  this.dy = random(-5, 5)
  this.dx *= -1
  this.dy *= -1
}



}
function makeChasm(cx, cy){ ///makes the creatures and features on the road
  c = {x: cx, y: cy, type: round(random(0, 3)), drawFunction: chasmDraw, move: chasmAdvance}

return c
}

function chasmDraw(){
  stroke(255)
  translate(this.x, this.y)
  switch (this.type){
  case 0: ////spider alien
  stroke(50) 
  for (u = 0; u <= 8; u++){
  line(0, 0, random(-20, 20), random(-20, 20))
  } 
    break;
   case 1: ////lava pit
   stroke(252, 90, 3)
   line(0, 0, 20, 20)
   line(20, 20, 0, 30)
   line(0, 30, 0, 40) 
   line(0, 40, 20, 60)
   line(20, 60, 0, 80)
   break;
   case 2: ////green alien
   stroke(86, 237, 40)
   line(0, 0, 60, 60)
   line(0, 0, -60, -60)
   line(0, 0, 60, 120)
   line(0, 0, -60, 120)
   stroke(0)
   fill(86, 237, 40)
   ellipse(0, 0, 20, 80)
   break;
   case 3: ////portal thing????
    strokeWeight(3)
    stroke(189, 36, 209)
  fill(0)
   beginShape()
   vertex(0,-40)
   vertex(20, 20)
   vertex(30, 30)
  vertex(20, 40)
  vertex(10, 50)
  vertex(0, 60)
  vertex(-10, 50)
  vertex(-20, 40)
  vertex(-30, 30)
  vertex(-20, 20)
  vertex(0, -40)
   endShape()   
   break;
  }
  

}



function chasmAdvance(){ ////moves the features and makes a new one when one disappears
     translate(0, this.y += 2)
     if (this.y >= width){
      chasm.shift()
      chasm.push(makeChasm(random(0, 400), -200)) 
     }
}



function setup() { ////creates and pushes all of the parts to arrays to be drawn
    createCanvas(400, 400); 
    for (var o = 0; o <= 4; o++){
      var c = makeChasm(random(0, 400), -200)
      chasm.push(c)
    }
    var ufo = makeUFO(200, 200, random(-10, 10), random(-10, 10))
    alien.push(ufo)
    for (var k = 0; k <= 4; k++){
      var l = makeLines(0, random(0, 200))
      roadLines.push(l)
    }

}


function draw() { ////draws each feature and calls their functions
  background(168, 125, 50)
  road()
  for (var k = 0; k <= 4; k++){
    var l = roadLines[k]
    l.stepFunction()
    l.drawFunction()   
  }
  var ufo = alien[0]
  noStroke()
  ufo.stepFunction()    
  ufo.drawFunction()
    for (var o = 0; o <= 4; o++){
      var c = chasm[o]
      c.move() 
      c.drawFunction()
}  
}


function road(){ ///creates the road for the features to be built on
  fill(162, 168, 163)
  rect(100, 0, 200, 400)
  strokeWeight(6)
  stroke(255, 255, 255)
  line(100, 0, 100, 400)
  line(300, 0, 300, 400)
}

I researched Yael Kanarek’s website and interactive art piece World of Awe. It’s an extremely impressive narrative website, with three separate stories and uniquely generated terrain for visitors to explore. The most interesting part is that a visitor’s movements in World of Awe are tracked and used to form a new art piece, filled with references to where each visitor has been and connecting everyone in the story’s various locations. It’s such a gorgeous piece of art, and it takes my mind to a lot of locations I’ve read about in books, or fantasy locations from board games or movies. I love the depth and richness of it. Kanarek herself is an artist who works with language in the modern era, and has won many awards for her work in the field of communicative art. One of her guiding principles in her work is her view of the Internet as bridging the gap between human and computer communication, and this concept is extremely present in all of her work, especially World of Awe. In addition to teaching at the Pratt Institute and her personal work, she has founded a text-based jewelry company called Kanarek, and is an artist in residence at the Romemu Center, working on regendering the Bible.

My sounds are a frog croaking, a sigh used for the pink frog, a splash, and crying for the green frog. The biggest challenge in getting this project to work was the local server, since I had to use the Chrome web server on Windows. It was a big barrier to even starting the project but I got lucky and figured it out.

frog time update

var greenFrog;
var pinkFrog;
var lily
var fish;
var flower;
var crying;
var sigh;
var splash;
var croak
var pinkFrogX = 200
var fishX = 400
var fishY = 400

///the story is about a lonely frog who experiences rejection but finds consolation in natural beauty

function preload() { ///loads in all images to be stored in variables
    greenFrog = loadImage('https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/frog-removebg-preview.png')
    pinkFrog = loadImage('https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/bright-pink-frog-back-view-small-toad-with-black-vector-22441576-removebg-preview.png')
    lily = loadImage('https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/lily_pad-removebg-preview.png')
    flower = loadImage('https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/flower-removebg-preview.png')
    fish = loadImage('https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/clipart-fish-red-2-removebg-preview.png')
    crying = loadSound('https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/219433__bash360__crying.wav')
    sigh = loadSound('https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/60670__k1m218__sigh3.wav')
    splash = loadSound('https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/416710__inspectorj__splash-small-a.wav')
    croak = loadSound('https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/frog.wav')
}


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


function soundSetup() { // setup for audio 
    crying.setVolume(0.5);
     sigh.setVolume(0.5);
     splash.setVolume(0.5);
     croak.setVolume(0.5);
 }


function draw() { ///draws characters
	fill(255, 255, 255)
	background(0, 0, 236)
	image(fish, fishX + 500, fishY + 500, 60, 60)
	image(lily, 200, 200, 50, 50)
	image(lily, 300, 300, 50, 50)
	image(lily, 400, 400, 75, 75)
	image(greenFrog, 300, 300, 50, 50)
	if (frameCount >= 10){ ///summons the PINKFROG
		image(pinkFrog, pinkFrogX, 200, 50, 50)
	} 
		fishX -= 25 ////brings in the FISCH
		fishY -= 25
		switch(frameCount){ ////list of events to happen at certain thymes
			case 5: 
			text('the frog was alone', 50, 50)
			break        
		case 10: croak.play();
                text('he sees another frog and sings them a song', 50, 50);
                break
        case 15:
         	    text("they didn't like the song", 50, 50)
                sigh.play()
                pinkFrogX += 300
                break
        case 20: 
                text("the frog was even more sad and loney", 50, 50)
                crying.play()
                break
        case 25: 
                text("he sees a fish", 50, 50)
                splash.play()
                fishX -= 500
                break
        case 30: 
                text("the fish had shown him a beautiful flower", 50, 50)
                break
        case 35:
                text("suddenly he didn't feel so sad", 50, 50)
                break  
                }
        if (frameCount >= 30){ ///draweth the flowere
        	image(flower, 400, 400, 50, 50)
        } 
        if (frameCount >= 40){
        	text("THE END", 240, 240, 480, 480)
        }
                }

		

			
	

	
	


  






	
	

I did some research into the Canadian Electronic Ensemble’s newest release on February 15th, 1. The ensemble is based out of Canada (of course) where they compose and perform using computer and modular synthesis instruments to create unique sounds and produce long concerts and improvisations. They reassemble their instruments during the performance and also make use of the program Ableton to create new effects as well as rebuild their instruments to create new sounds during the performance. Mainly, their performances are based less in traditional computer code and more in the system Max, in the plugin Max for Live, which allows users to create their own effects in the DAW Ableton Live. Their performances are usually long and complex, without a central theme, and feature solo sections for each member of the ensemble as they join and modify their elaborate analog and digital synths. Also, they play without using a keyboard or traditional control of their instruments, and mostly rely and step-based sequencing and MIDI controlling built into their software to assemble songs.

This whole portrait is a picture of me sitting on a ledge outside of CFA, comprised of tinted covers of some of my favorite albums of music. It really took some experimentation to get the number of blocks correct, since with too many it would crash the program and with too few you couldn’t really notice the image. Tint() also wasn’t very happy with the original covers, so I had to edit them to make sure the colors would appear correctly. Finally, I added a random component to their generation just to add something interesting as they loaded in.

portrait

var pic;
var pixel = []
var covers = []



function preload(){ ///loads the album covers from the imgur posts
  var coverFile = []
  pic = loadImage("https://i.imgur.com/9if5OBK.jpg") ////some of my favorite albums to play on guitar and listen to
  coverFile[0] = "https://i.imgur.com/vh9pN9D.png"
  coverFile[1] = "https://i.imgur.com/ojxUjeG.png"
  coverFile[2] = "https://i.imgur.com/udq9ixk.png"
  coverFile[3] = "https://i.imgur.com/CgaJ3WV.png"
  coverFile[4] = "https://i.imgur.com/JjaAoNi.png"
  coverFile[5] = "https://i.imgur.com/BBocb2g.jpg"
  coverFile[6] = "https://i.imgur.com/qx4C4pJ.jpg"
  coverFile[7] = "https://i.imgur.com/hrqxmIj.jpg"
  for (var e = 0; e < coverFile.length; e++) {
        covers[e] = loadImage(coverFile[e]);
    }
}


function drawPixel(){ ///draws and colors each album cover
  tint(pic.get(this.x, this.y))
  image(covers[this.selection], this.x, this.y, 20, 20)
}




function makePixel(pixSelect, pixX, pixY){ ///creates the individual pieces of the portrait
  p = {x: pixX, y: pixY, selection: pixSelect,
    drawFunction: drawPixel
  } 
  return p
}



function setup(){ ///loads each pixel of the image, creates a square, and sends it to an array
  createCanvas(480, 480)
  frameRate(100)
  pic.loadPixels()
  noStroke()
  for (i = 0; i <= 24; i++){
      for (k = 0; k <= 24; k++){
          var p = makePixel(round(random(0, 7)), i * 20, k * 20, )
          pixel.push(p)
          }
      }
}

function draw(){  ///draws in squares randomly, up to 448, total number of the image
  var p = pixel[round(random(0, 448))]
  p.drawFunction() 
}

https://www.moma.org/interactives/exhibitions/2011/talktome/objects/145525/

I read a post by Shaun Murray about Stefanie Posavec and Greg McIrney’s (En)tangled Word Bank. I think his assessment of Posavec’s style in her use of color is accurate and I also feel like she is an artist who values organized complexity. Each section features well-sorted data on each of Darwin’s revisions, and while it doesn’t fall into some sort of obvious pattern it is clearly thought out and built to be visually cohesive. It is easy to see what has been changed due to the color coding of each circle, and while they are different, they all share the same structure to convey clarity and allow viewers to really understand and make good use of her work. I think McIrney’s contributions and style also share that same creative space of controlled, thought out design and balance of color to create interest and dynamism but also present material in an easy to understand manner.

I did some research on Mohit Bhoite, an engineer who specializes in taking two-dimensional circuits and expanding them into the third dimension. He holds a degree in robotics from the University of Pennsylvania, and currently works as a hardware engineer for the company Particle. His work involves creating functional sculptures using circuits, often built to be artistic and interactive, such as his handheld gaming console, which uses no screens, simply a button to register touch and an LED array to serve as a board for the game. His work is often simple and almost organic, and I find his creativity with usually very cold and “boring” objects to be refreshing. Bhoite’s presentation involves breakdowns of his work and his creative process, along with the challenge of translating circuits from a basic, flat object into a sculpture that is not only functional but also aesthetically pleasing. He goes into detail about the circuit design and how he makes them work, with many detailed diagrams and videos which he explains to the audience. I find his use of a presentation to be very effective even with very little information on the page. He relies more on high quality images and videos and his own explanation rather than simply having all his talking points on slides to be read.

This project was a really fun experience with using different curves to simulate weather, along with arrays and shifting elements in the array. It was difficult to actually get the weather to move the way I wanted it to but I’m still unhappy with how some of the rain function works. It took a bit to get the curves working but from there it wasn’t too hard to get the grids working the way I wanted, although there were some pretty funny interactions with the direction and speed with which the curves moved and fell.

weather

var nPoints = 100
var curveX = []
var curveY = []
var numCurves;







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


function draw() {
	numCurves = width
	for (y = 0; y < width; y += 40){ ////sends data to arrays to translate for curves
    for (x = 0; x < height; x += 40){
            curveY.push(y)
            curveX.push(x)
        }
    }
	background(0, 0, 255, 4)
	if (mouseIsPressed) { ///changes curve and color when mouse is held down
		rain()
	} else {
	    wind()
	}
}

function drawGrid() { ///establishes moving pattern of neiods for the rain() function
curveX.shift()
curveY.shift()
for(n = 0; n <= numCurves; n++){
	translate(curveX[n], curveY[n])
	drawNeoid()
}
}



function drawSecond() {  ///establishes moving pattern of curves for the wind() function
curveX.shift()
curveY.shift()
for(k = 0; k <= numCurves; k++){
	translate(curveX[k], curveY[k])
	drawLituus()
    }
}
function drawNeoid() { ///draws a neiod curve based on the mouse location
	var x
	var y
	var r
	var a = mouseX / 10
	var b = mouseY / 5
	beginShape()
	   for (var i = 0; i < nPoints; i++) {
            var t = map(i, 0, nPoints, 0, TWO_PI); ///converts to terms of pi
            r = (a * t) + b ////neiod formula
            x = r * cos(t)
            y = r * sin(t)
            vertex(x, y)
        }
    endShape()        
}

function drawLituus() { ///draws a lituus curve based on the mouse location, similar process to drawNeiod() with a different formula
    var x
	var y
	var r
	var a = (mouseX / 10) + (mouseY / 5)
	beginShape()
	   for (var i = 0; i < nPoints; i++) {
            var t = map(i, 0, nPoints, 0, TWO_PI);
            r = sqrt(sq(a) / t) ///lituus formula in terms of r
            x = r * cos(t)
            y = r * sin(t)
            vertex(x, y)
        }
    endShape()
}

function rain(){ ///draws a pattern of blue neiods like rain
	drawGrid()
	stroke(0, 0, 255)
	background(236, 236, 236, 4)
}

function wind(){ ////draws white lituuses like wind
	drawSecond()
	stroke(255, 255, 255)
	}

For this week’s LO, I researched the 24 hour movement of air traffic over Europe, called Europe 24, found on Visual Complexity. It is a beautiful array of data, set over a geographically accurate representation of Earth to better reflect where each plane is going. Europe 24 was made by NATS, the leading organization in air traffic control in the UK, which oversees all airports in the country, especially the busiest airport in Europe, in Heathrow. The visualization is particularly important for a company such as NATS as it provides a representation of how flights move over the space they work to keep safe and allows them to identify areas of high traffic which could prove to be dangerous. It is also artistically pleasing, with soft blues and a beautiful almost-photorealistic graphic of the globe below each line. The entirety of the animation is very clean and professional, as befitting such an important organization, and the overall cleanliness of the work makes it more accessible to the public so they might understand the work of NATS in the UK. Individual planes are show as points of light to enhance clarity as they move, and so they are not lost in the blue trails others leave behind, and cities are highlighted so they stand out as well.