Olive – [OLD FALL 2020] 15-104 • Introduction to Computing for Creative Practice

Final Project: Spot the Difference

My project is a spot-the-difference game with three levels. To relate the project to 2020, I based my game loosely around the concept of isolation and distance.

My game is based off of online spot-the-difference games I used to play by a developer with the screen name “Ivory.” I was inspired by the moody atmosphere that Ivory was able to create using melancholy images and ambient music.

To play the game, simply click on the differences you find. Try to click precisely when making your guess. The number of remaining differences is shown in the top right corner. If you get stuck you can use the hint button for help, which has a short cooldown of 20 seconds. Try to win without any hints though!

sketch



var count = 0; //counter for effects timing

var hint; //variable to hold the "hint" object

var hintcooldown = 0;
var hinttimer = 0;

var scene1bg;
var scene1;    //variable to hold scene images
var scene2;
var scene3;

var scene = 1; //which scene (level) the player is currently on


var margin = 5;   //tolerence for guess clicks

var scene1DifferencesLinks = ["https://i.imgur.com/ohzNdw0.jpg", "https://i.imgur.com/I33D4yq.png", "https://i.imgur.com/4NeqeQR.png", "https://i.imgur.com/awJOkKc.png", "https://i.imgur.com/qLzzqz7.png", "https://i.imgur.com/QbUGoQQ.png", "https://i.imgur.com/a1iMYvd.png"];  //the "differences" are small .jpgs of edited pieces of the image. They will be placed on top of the image to create the "difference"
var scene2DifferencesLinks = ["https://i.imgur.com/f6goqZk.png", "https://i.imgur.com/YdMfKCs.png", "https://i.imgur.com/n3I5MAl.png", "https://i.imgur.com/EYIHAZV.png", "https://i.imgur.com/uu3811U.png", "https://i.imgur.com/e7dqm0J.png", "https://i.imgur.com/V4bhJe8.png"];
var scene3DifferencesLinks = ["https://i.imgur.com/tvCjM0d.png", "https://i.imgur.com/OhlyeMv.png", "https://i.imgur.com/Cr3qy7U.png", "https://i.imgur.com/RttUtn3.png", "https://i.imgur.com/y9AJnzC.png", "https://i.imgur.com/XqaebA2.png", "https://i.imgur.com/wF5Jwgm.png"];

var scene1Differences = [];
var scene2Differences = [];
var scene3Differences = [];

var scene1DifObjs = [];
var scene2DifObjs = [];
var scene3DifObjs = [];

var bgmusic;
var successnoise;

var difsremaining = 7; //tests how many difs left

function preload() {

    scene1bg = loadImage("https://i.imgur.com/oibVoIs.jpg");

    scene1 = loadImage("https://i.imgur.com/oehMn23.png");  //main images for the 3 scenes
    scene2 = loadImage("https://i.imgur.com/PsOlXha.png");
    scene3 = loadImage("https://i.imgur.com/lVsD9Nu.png");
    
    for(i=0; i<scene1DifferencesLinks.length; i++){
        scene1Differences[i] = loadImage(scene1DifferencesLinks[i]);
    }

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

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

    scene1DifObjs.push(makeDifference(scene1Differences[0], 467, 115, 12, 9));  //make the differences. Each difference object contains the x, y, w, and h of the difference. this is the information the rest of the program functions will need to figure out where to place the difference and when the difference is discovered
    scene1DifObjs.push(makeDifference(scene1Differences[1], 213, 15, 2, 11));
    scene1DifObjs.push(makeDifference(scene1Differences[2], 81, 26, 27, 13));
    scene1DifObjs.push(makeDifference(scene1Differences[3], 12, 211, 14, 20));
    scene1DifObjs.push(makeDifference(scene1Differences[4], 281, 329, 25, 26));
    scene1DifObjs.push(makeDifference(scene1Differences[5], 491, 250, 99, 6));
    scene1DifObjs.push(makeDifference(scene1Differences[6], 317, 195, 15, 11));

    scene2DifObjs.push(makeDifference(scene2Differences[0], 527, 219, 47, 8));
    scene2DifObjs.push(makeDifference(scene2Differences[1], 319, 252, 24, 17));
    scene2DifObjs.push(makeDifference(scene2Differences[2], 388, 185, 12, 43));
    scene2DifObjs.push(makeDifference(scene2Differences[3], 47, 339, 82, 33));
    scene2DifObjs.push(makeDifference(scene2Differences[4], 573, 81, 34, 40));
    scene2DifObjs.push(makeDifference(scene2Differences[5], 211, 158, 8, 93));
    scene2DifObjs.push(makeDifference(scene2Differences[6], 413, 352, 19, 16));

    scene3DifObjs.push(makeDifference(scene3Differences[0], 328, 209, 19, 21));
    scene3DifObjs.push(makeDifference(scene3Differences[1], 475, 30, 17, 41));
    scene3DifObjs.push(makeDifference(scene3Differences[2], 262, 293, 12, 53));
    scene3DifObjs.push(makeDifference(scene3Differences[3], -16, 155, 56, 64));
    scene3DifObjs.push(makeDifference(scene3Differences[4], 284, 183, 15, 13));
    scene3DifObjs.push(makeDifference(scene3Differences[5], 172, 298, 56, 60));
    scene3DifObjs.push(makeDifference(scene3Differences[6], 73, 274, 29, 21));


    
    bgmusic = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/12/104music.mp3");
    successnoise = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/12/success.wav");


}


function setup() {
    createCanvas(600, 800);
    useSound();
    scene1bg.resize(600, 400);
    frameRate(12);

    hint = {x: 0, y: 0, w: 1, h: 1, alph: 0, drawit: hintDraw, stepit: hintStep};
    
}


function soundSetup() { // setup for audio generation
    bgmusic.setVolume(0.3);
    successnoise.setVolume(1);


}


function draw() {
    // you can replace any of this with your own code:
    background(255);
    bgmusic.play();
    print(difsremaining);
    print(count);

    if(count % 3000 == 0){
        bgmusic.play();
    }

    if(difsremaining == 0){
        difsremaining = 7;
        if (scene == 1) {
            scene = 2;
        } else if (scene == 2){
            scene = 3;
        } else {
            scene = 4;
            count = 1;
        }
    }

    

    if (scene == 1){
        image(scene1bg, 0, 0);
        image(scene1bg, 0, height/2);
        push();
        fill(255, 255, 255, 20);
        rect(0, 0, 600, 800);
        pop();
        image(scene1, 0, 0);
        image(scene1, 0, height/2);  //draw two base scene images

        push();
        fill(255, 255, 255, 150);
        textSize(10);
        text("Differences remaining: " + difsremaining, 470, 15);
        //text("Differences remaining: " + difsremaining, 470, 415);
        pop();

        for(i=0; i<scene1DifObjs.length; i++){
            if(scene1DifObjs[i].found == false){
                scene1DifObjs[i].drawit();
            }
        
        }
        
    }

    if (scene == 2){
        image(scene2, 0, 0);
        image(scene2, 0, height/2);

        push();
        fill(255, 255, 255, 150);
        textSize(10);
        text("Differences remaining: " + difsremaining, 470, 15);
        //text("Differences remaining: " + difsremaining, 470, 415);
        pop();

        for(i=0; i<scene2DifObjs.length; i++){
            if(scene2DifObjs[i].found == false){
                scene2DifObjs[i].drawit();
            }
        
        }

    }

    if (scene == 3){
        image(scene3, 0, 0);
        image(scene3, 0, height/2);

        push();
        fill(255, 255, 255, 150);
        textSize(10);
        text("Differences remaining: " + difsremaining, 470, 15);
        //text("Differences remaining: " + difsremaining, 470, 415);
        pop();

        for(i=0; i<scene3DifObjs.length; i++){
            if(scene3DifObjs[i].found == false){
                scene3DifObjs[i].drawit();
            }
        
        }

    }

    if (hintcooldown > 0){
        push();
        textSize(10);
        fill(255, 255, 255, 150);
        text(hintcooldown, 540, 31);
    }
    if (hinttimer % 12 == 0){
        hintcooldown --;
    }



    hint.drawit(); //hint functions
    hint.stepit();

    drawhintbutton();

    if (scene == 4){
        push();
        image(scene3, 0, 0);
        image(scene3, 0, height/2);
        
        fill(0, 0, 0, count*2.5);
        rect(0, 0, width, height);

        fill(255, 255, 255, count*2.5);
        textSize(50);
        text("END", width/2-50, height/2-10);
        textSize(15);
        text("THANK YOU FOR PLAYING", 205, 450);
        pop();

    }


    
    


    
    if(scene != 4){
        fill(0, 0, 0, 255-count*2.5); //fades in from black

        rect(0, 0, width, height);

    }
  
 
   count++;
   hinttimer++;
}

function mousePressed() {

    if (mouseX>=470 & mouseX<=532 && mouseY>=20 && mouseY<=36 && hintcooldown<0) {
        givehint();
    }

    if(scene == 1) {
        for(i=0; i<scene1DifObjs.length; i++){
            if((scene1DifObjs[i].found == false) & (mouseX >= scene1DifObjs[i].x - margin && mouseX <= scene1DifObjs[i].x + scene1DifObjs[i].w + margin) && (mouseY >= scene1DifObjs[i].y - margin && mouseY <= scene1DifObjs[i].y + scene1DifObjs[i].h + margin)) {
                scene1DifObjs[i].found = true;
                successnoise.play();
                difsremaining--;
                flashDif(scene1Differences[i], scene1DifObjs[i].x, scene1DifObjs[i].y);

            }
            if((scene1DifObjs[i].found == false) & (mouseX >= scene1DifObjs[i].x - margin && mouseX <= scene1DifObjs[i].x + scene1DifObjs[i].w + margin) && (mouseY >= scene1DifObjs[i].y + 400 - margin && mouseY <= scene1DifObjs[i].y + 400 + scene1DifObjs[i].h + margin)) {
                scene1DifObjs[i].found = true;
                successnoise.play();
                difsremaining--;
                flashDif(scene1Differences[i], scene1DifObjs[i].x, scene1DifObjs[i].y);

            }
        }

    }
    print(scene1DifObjs[0].found);

    if(scene == 2) {
        for(i=0; i<scene2DifObjs.length; i++){
            if((scene2DifObjs[i].found == false) & (mouseX >= scene2DifObjs[i].x - margin && mouseX <= scene2DifObjs[i].x + scene2DifObjs[i].w + margin) && (mouseY >= scene2DifObjs[i].y - margin && mouseY <= scene2DifObjs[i].y + scene2DifObjs[i].h + margin)) {
                scene2DifObjs[i].found = true;
                successnoise.play();
                difsremaining--;
                flashDif(scene2Differences[i], scene2DifObjs[i].x, scene2DifObjs[i].y);

            }
            if((scene2DifObjs[i].found == false) & (mouseX >= scene2DifObjs[i].x - margin && mouseX <= scene2DifObjs[i].x + scene2DifObjs[i].w + margin) && (mouseY >= scene2DifObjs[i].y + 400 - margin && mouseY <= scene2DifObjs[i].y + 400 + scene2DifObjs[i].h + margin)) {
                scene2DifObjs[i].found = true;
                successnoise.play();
                difsremaining--;
                flashDif(scene2Differences[i], scene2DifObjs[i].x, scene2DifObjs[i].y);

            }
        }

    }

    if(scene == 3) {
        for(i=0; i<scene3DifObjs.length; i++){
            if((scene3DifObjs[i].found == false) & (mouseX >= scene3DifObjs[i].x - margin && mouseX <= scene3DifObjs[i].x + scene3DifObjs[i].w + margin) && (mouseY >= scene3DifObjs[i].y - margin && mouseY <= scene3DifObjs[i].y + scene3DifObjs[i].h + margin)) {
                scene3DifObjs[i].found = true;
                successnoise.play();
                difsremaining--;
                flashDif(scene3Differences[i], scene3DifObjs[i].x, scene3DifObjs[i].y);

            }
            if((scene3DifObjs[i].found == false) & (mouseX >= scene3DifObjs[i].x - margin && mouseX <= scene3DifObjs[i].x + scene3DifObjs[i].w + margin) && (mouseY >= scene3DifObjs[i].y + 400 - margin && mouseY <= scene3DifObjs[i].y + 400 + scene3DifObjs[i].h + margin)) {
                scene3DifObjs[i].found = true;
                successnoise.play();
                difsremaining--;
                flashDif(scene3Differences[i], scene3DifObjs[i].x, scene3DifObjs[i].y);

            }
        }

    }


    

}

function flashDif(img, x, y){   //difference flashes when found
    image(img, x, y);
    image(img, x, y + 400);
  
        img.style.visibility = 'visible';
        img.style.visibility = 'hidden';

    
}


function makeDifference(img, dx, dy, dw, dh) {          //create the difference image as an object
    var difFound = false;                               //keeps track of whether or not the difference has been found
    var dif = {difimage: img, x: dx, y: dy, w: dw, h: dh, drawit: differenceDraw, found: difFound}
    return dif;

}

function differenceDraw() {       //place the difference image on the screen
    image(this.difimage, this.x, this.y);

}

function drawhintbutton() {
    push();
    noStroke();
    if (mouseX>=470 & mouseX<=532 && mouseY>=20 && mouseY<=36 && hintcooldown<0) {
        fill(255, 255, 0, 40);
    } else {
        fill(255, 255, 255, 40);
    }
    
    rect(470, 20, 62, 16);
    push();
    if (mouseX>=470 & mouseX<=532 && mouseY>=20 && mouseY<=36 && hintcooldown<0) {
        fill(255, 255, 0, 170);
    } else {
        fill(255, 255, 255, 170);
    }
    textSize(10);
    text("Hint please!", 474, 31);
    pop();
    pop();
}

function givehint(){ //gives the player a hint based on which differences are not found
    if(scene == 1){
        for(i=0; i<=scene1DifObjs.length; i++){
            if(scene1DifObjs[i].found == false){
                hint.x = scene1DifObjs[i].x + random(-60, 60);
                hint.y = scene1DifObjs[i].y + random(-60, 60);
                hint.alph = 200;
                hintcooldown = 20;
                counttimer = 0;
                return;
            }
        }
    }

}

function hintDraw(){
    
    push();
    strokeWeight(2);
    fill(255, 255, 0, 0);
    stroke(255, 255, 0, this.alph);
    ellipse(this.x, this.y, 220, 220);
    pop();
}

function hintStep(){
    this.alph-= 2;
}

Project – 11

I chose to do my project in this minimalist style because I thought it was really cute and reminded me of 8-bit video games (minus all the triangles.) My focus was on the smoothness and cleanliness of the moving image by coordinating objects together.

sketch

var count = 0;

var divwidth = 16;
var divider1;
var divider2;

var bench1;
var bench2;
var bench3;

var people = [];   //holds the people
var mountains = [];  //holds the mountains :)
var trees = [];   //holds the trees 😊

var trainbasecolor = 150;

var windowTop = 30;  //just helper variables for the window dimensions
var windowBottom = 150;


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

    for (var i = 0; i < width/15+10; i++){
        mountains[i] = makeMountain(i*15);
    }
    bench1 = makeBench(158);
    bench2 = makeBench(458);
    bench3 = makeBench(-142);
    
    for (var i = 0; i < 6; i++){  //start off w some people
        if (random(0, 30)<13){
				people.push(makePerson(bench1.x-108.5 + i*43.1));
			}
    }
    for (var i = 0; i < 6; i++){  //start off w some people
        if (random(0, 30)<13){
				people.push(makePerson(bench2.x-108.5 + i*43.1));
			}
    }
    for (var i = 0; i < 6; i++){  //start off w some people
        if (random(0, 30)<13){
				people.push(makePerson(bench3.x-108.5 + i*43.1));
			}
    }
    
    divider1 = makeDivider(300);
    divider2 = makeDivider(0);

    
    
    

    
    frameRate(24);



}


function draw() {

	background(150, 180, 255);
	
	noStroke();  
	for(i=0; i<mountains.length; i++){ //draw mountains
		mountains[i].drawit();
	}
	for(i=0; i<trees.length; i++){ //draw trees
		trees[i].drawit();
	}

	fill(trainbasecolor);
	rect(0, windowBottom, width, 125);  //trainbase
	rect(0, 0, width, windowTop);
	fill(120);
	rect(0, height-20, width, 20);

	divider1.drawit();
	divider2.drawit();

	bench1.drawit();
	bench2.drawit();
	bench3.drawit();


	for(i=0; i<people.length; i++){ //draw people
		people[i].drawit();
	}
	




	divider1.stepit();
	divider2.stepit();

	bench1.stepit();
	bench2.stepit();
	bench3.stepit();

	for(i=0; i<people.length; i++){
		people[i].stepit();
	}
	for(i=0; i<mountains.length; i++){
		mountains[i].stepit();
	}
	for(i=0; i<trees.length; i++){
		trees[i].stepit();
	}

	removePeopleThatHaveSlippedOutOfView();
	removeMountainsThatHaveSlippedOutOfView();

	if(count % 15 == 0){       //make mountain objects
		//if(random(0,10)<3){

			mountains.push(makeMountain(680));
			
		//}
	}
	if(count % 30 == 0){      //make tree objects
		if(random(0,10)<6){

			trees.push(makeTree(600));
			
		}
	}




	count ++;
	print(people.length.toString());
}

//FUNCTIONS FOR TREE OBJECTS
function makeTree(tx){
	
	var treeTopWidth = random(100, 150);
	var treeTopHeight = random(50, 100)
	var treeHeight = random(70, 250);
	var trunkWidth = random(10, 50);
	

	var tree = {x: tx, y: 150, c: color(random(25, 75), random(125,175), random(25, 75)), topw: treeTopWidth, trunkw: trunkWidth, toph: treeTopHeight, trunkh: treeHeight, drawit: treeDraw, stepit: treeStep};

	return tree;

}

function treeDraw(){
	fill(150, 100, 50);
	rectMode(CENTER);
	rect(this.x, this.y, this.trunkw, this.trunkh);

	fill(this.c);
	ellipse(this.x, this.y-this.trunkh/2, this.topw, this.toph);
	rectMode(CORNER);

	
}

function treeStep(){
	this.x -= 8;
}

function removeMountainsThatHaveSlippedOutOfView(){

    var treesToKeep = [];
    for (var i = 0; i < trees.length; i++){
        if (trees[i].x > -200) {
            treesToKeep.push(trees[i]);
        }
    }
    mountains = mountainsToKeep; // remember the surviving buildings
}
//FUNCTIONS FOR MOUNTAIN OBJECTS
function makeMountain(mx){
	
	var mountainWidth = random(50, 200);
	var mountainHeight = random(50, 125);
	

	var mountain = {x: mx, y: mountainHeight, w: mountainWidth, c: color(random(80, 120), random(225, 255), random(80, 120)), drawit: mountainDraw, stepit: mountainStep};

	return mountain;

}

function mountainDraw(){
	fill(this.c);
	
	triangle(this.x, this.y, this.x-this.w, 250, this.x+this.w, 250);
	
}

function mountainStep(){
	this.x -= 2;
}

function removeMountainsThatHaveSlippedOutOfView(){

    var mountainsToKeep = [];
    for (var i = 0; i < mountains.length; i++){
        if (mountains[i].x > -200) {
            mountainsToKeep.push(mountains[i]);
        }
    }
    mountains = mountainsToKeep; // remember the surviving buildings
}


//FUNCTIONS FOR WINDOW DIVIDER OBJECTS
function makeDivider(wx) { 
    var divider = {x: wx, y: windowTop,
                  drawit: dividerDraw, stepit: dividerStep};

    return divider;
}

function dividerDraw(){
	fill(trainbasecolor);
	rect(this.x, this.y, divwidth, 150);
}

function dividerStep(){
	this.x++;
	
	if(this.x == 600-divwidth){
		this.x = (0-divwidth);
		
	}

	

}
//FUNCTIONS FOR PEOPLE OBJECTS
function makePerson(px){
	
	var personWidth = random(15, 35);
	var personHeight = random(25, 60);
	var headSize = random(8, 20);

	var person = {x: px, y: 196-personHeight/2, w: personWidth, h: personHeight, hs: headSize, c: random(0, 50), drawit: personDraw, stepit: personStep};

	return person;

}

function personDraw(){
	fill(this.c);
	rectMode(CENTER);
	rect(this.x, this.y, this.w, this.h);
	rect(this.x-this.w/4, 212, 5, 36);
	rect(this.x+this.w/4, 212, 5, 36);
	rect(this.x, this.y-this.h/2-this.hs/2+1, this.hs, this.hs);
	rectMode(CORNER);
	
}

function personStep(){
	this.x++;
}

function removePeopleThatHaveSlippedOutOfView(){

    var peopleToKeep = [];
    for (var i = 0; i < people.length; i++){
        if (people[i].x < 600) {
            peopleToKeep.push(people[i]);
        }
    }
    people = peopleToKeep; // remember the surviving buildings
}

//FUNCTIONS FOR BENCH OBJECTS
function makeBench(bx){
	var bench = {x: bx, y: 170+divwidth, drawit: benchDraw, stepit: benchStep};
	return bench;

	
}



function benchDraw(){
	rectMode(CENTER);
	fill(220);

	rect(this.x, this.y, 266, 50);
	
	for(i=0; i<6; i++){
		fill(225, 0, 0);
		rect(this.x-108 + i*43.1, this.y, 38, 40);
		fill(155, 0, 0);
		rect(this.x-108 + i*43.1, this.y+15, 38, 10);
		
	}
	rectMode(CORNER);

}

function benchStep(){
	this.x++;
	if(this.x == 750){
		this.x = -150;
		for(i=0; i<6; i++){
			if (random(0, 30)<13){
				people.push(makePerson(this.x-108.5 + i*43.1));
			}
		
		}
	}

}

LO – 11

The artist I looked at this week was LIA, an Australian multidisciplinary artist who has been producing work since 1995. Many of the works she creates are generative, kinetic images created computationally. She works with themes of ephemerality and randomness, and is interested in exploring the fleeting nature of beauty in her work by creating pieces that are always moving and never repeat themselves.

One of the pieces I looked at was Winter, part of a series LIA did about the seasons. I liked this piece because it represents the slow falling of snow in a beautifully abstract way. I also think that it plays in really well with her theme of change and randomness, expressing nature through coding in a cool way.

Project 10 – Sonic Story

My story features my cat and my dog exchanging noisy toys. I just thought it was hilarious to clip these pics of their heads out and animate them. I think the childish way everything was drawn/pieced together adds to the silliness of the story.

sketch

//TLOURIE
//SECTION D
//STORYLINE: GIRLCAT AND BRIDIE MEET AND EXCHANGE TOYS WITH ONE ANOTHER> THEN THEY PLAY WITH THE TOYS
var count = 0;

var girlcat;   //images
var bridie;
var maraca;
var ball;

var livingroom;

var squeak;    //sounds
var maracashake;
var meow;
var bark;


var bridieX = 520;
var bridieY = 200;

var ballX = 595;
var ballY = 290;

var maracaX = 150;
var maracaY = 300;

function preload() {
    // call loadImage() and loadSound() for all media files here
    girlcat = loadImage("https://i.imgur.com/Epqj4LE.png");
    bridie = loadImage("https://i.imgur.com/i0HfI2s.png?1");
    maraca = loadImage("https://i.imgur.com/tp9MlSK.png");
    ball = loadImage("https://i.imgur.com/YUkpldR.png");

    livingroom = loadImage("https://i.imgur.com/1omFhoF.jpg");


    squeak = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/squeak.mp3");
    maracashake = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/maracasingle.wav");
    meow = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/singlemeow.wav");
    bark = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/singlebark.wav");

}


function setup() {

    createCanvas(600, 400);

    useSound();
    frameRate(2);

}


function soundSetup() {
    squeak.setVolume(0.5);
    maracashake.setVolume(0.5);
    meow.setVolume(0.5);
    bark.setVolume(0.5);
    
}


function draw() {
    switch (count) {
        case 7: bark.play(); break;
        case 16: meow.play(); break;
        case 25: bark.play(); break;
        case 34: meow.play(); break;
        case 43: squeak.play(); break;
        case 47: maracashake.play(); break;
        case 48: maracashake.play(); break;
        
    }

    background(200);
    livingroom.resize(width, height);
    girlcat.resize(175, 175);
    bridie.resize(150, 150);
    maraca.resize(150, 75);
    ball.resize(75, 75);


    image(livingroom, 0, 0);

    image(girlcat, 70, 200);

 

    
    image(bridie, bridieX, bridieY);
    
    image(maraca, maracaX, maracaY);


    image(ball, ballX, ballY);



    if (count < 6){
        bridieX -= 25;
        ballX -=25;
        //bridieY += 20;

    }

    if (count > 6 & count < 15){  
        fill(255);
        noStroke();
        textSize(15);
        ellipse(300, 175, 300, 75);
        triangle(300, 200, 350, 200, 375, 250);
        fill(0);
        
        text('hey girlcat, is that my maraca?', 200, 175);
    }
    if (count > 15 & count < 24){
        fill(255);
        noStroke();
        textSize(15);
        ellipse(300, 175, 300, 75);
        triangle(270, 200, 330, 200, 225, 250);
        fill(0);
        
        text('yeah, it is. is that my squeaky ball?', 200, 175);
    }

    if (count > 24 & count < 33){
        fill(255);
        noStroke();
        textSize(15);
        ellipse(300, 175, 300, 75);
        triangle(300, 200, 350, 200, 375, 250);
        fill(0);
        
        text('it sure is. wanna trade?', 200, 175);
    }
    if (count > 33 & count < 37){
        fill(255);
        noStroke();
        textSize(15);
        ellipse(300, 175, 300, 75);
        triangle(270, 200, 330, 200, 225, 250);
        fill(0);
        
        text('alright', 200, 175);
    }
    if (count>=37 & count < 42){
        ballX -= 50;
        maracaX += 50;

    }
    if (count == 42) {
        ballY += 25;
    }
    if (count == 43) {
        ballY -=25;
    }
    if (count == 46) {
        maracaY += 25;
    }
    if (count == 47) {
        maracaY -=25;
    }







    count ++;

}

LO – 10

Pazhutan Ateliers is a computational music education and production project by duo M. Pazhutan and H. Haq Pazhutan. The course topics listed on the website include (but are not limited to) electronic/computational music, music appreciation, and sound art.

The particular project I looked at was “Cy-Ens,” short for cybernetic ensemble. To quote the project page, “Cy-Ens is our computer music project with the ambition of expanding the potentials of understanding the aesthetics of computational sound and appreciation of logic, math and art.” The album consists of 15 to 30 minute tracks of ambient computer generated noise. The creation of the work involved the use of open-sourced audio and programming languages, as well as various physical MIDI controllers such as knobs, sliders, and percussion pads. The concept of the project is to create abstract sound compositions by allowing them to arise from mathematical patterns.

Project – 09

sketch

var img;

function preload () {
	img = loadImage("https://i.imgur.com/iVbKAY2.png");    //preloading image
}

function setup() {
    
    background(220);

    img.loadPixels();

    img.resize(img.width/6, img.height/6);
	
	createCanvas(300, 300);

    
}

function draw() {   //the program draws a line between two random points in the color that is the average of the two points
	var dist = map(mouseY, 0, height, 0, 250);
	


	var point1X = random(-50,350); //making the boundaries slightly larger than the canvas so the edges are filled in evenly
	var point1Y = random(-50, 350);

	var point2X = random(point1X-dist, point1X+dist);
	var point2Y = random(point1Y-dist, point1Y+dist);




	var point1col = img.get(point1X, point1Y);  //retrieving color from both points
	var point2col = img.get(point2X, point2Y);

	var linecol = img.get((point1X+point2X)/2, (point1Y+point2Y)/2); //getting the line color by using the point between the ends

	stroke(linecol);

	strokeWeight(3);

	line(point1X, point1Y, point2X, point2Y);

}

My program uses lines varying in length to draw my face. The length of the line drawn is semi-randomize, getting larger as mouseY increases. I wanted to use lines because I thought it would be a little more visually interesting then a simple pixel. I like the fact that the image can be more or less abstract depending on what you want.

LO – 09

The piece I looked at was Ryoji Ikeda’s 2013 work titled Test Pattern, originally posted by Maggie. The piece is a large-scale sound and light installation. It features huge flashing barcodes being projected onto the floor (and, in some versions, walls) of a large open space accompanied by loud rhythmic sounds.

In the post Maggie goes into detail about the physical setup of the space and the code behind it. To add to this, I will say this piece initially caught my attention because of the scale. I am always drawn to huge installations like this, especially one’s as sensorily intense. I also love the abstract and interpretable quality of the piece. Ikeda is purposely vague about the meaning behind the work, stating, “I don’t really want to speak about any concepts. Because there are no concepts.”

Test Pattern 100m Version at Ruhrtriennale

LO-08

I watched the video of Lauren McCarthy, a Los Angeles artist who explores ideas around social relationships, surveillance, and the rapidly changing technological field that is our modern world. She has created numerous art pieces looking into the intricate and ever developing relationship between social and technological systems.

What interested me most about Lauren’s talk is her exploration into the constant surveillance that modern citizens live with. Through her projects, she begins to ask questions about how changing technology has affected what it means to be “followed” or “watched.” My favorite work that she talked about was called “Follower,” and it was a conceptual “social media” app in which the user signs up to be silently and invisibly followed for a full day. This piece explores the relationship we have with technology by using an analogy with romantic human relationships, bringing to the surface the root of the conflicting comfort and discomfort we feel as we play the role of an actor in an everyday performance.

Project 07 – Curves

sketch

//TERESA LOURIE
//SECTION D
//PROJECT: INTERACTIVE CURVES
var x = 2;
var y = 2;

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

}


function draw() {
    background(255);
	
	//figureeight();
	push();
	//for (i=0; i<500; i++){
		
		devilscurve();
	//}
	devilscurve2(); //draw both curves at once on white background
}

function figureeight(){
	push();
	translate(width/2, height/2);

	background(255);
	beginShape();
	stroke(0); 
	strokeWeight(1);
	noFill();

	//loop for curves 
	for(var i =0; i < 750; i++){
		
		stroke(map(mouseY, 0, 480, 0, 255), 0 ,0);
		var t = map(i, 0, 750, 0, 2*PI);
		var a = mouseX;
		var b = 1;
		
		

		x = a*sin(t);
		y = a*sin(t)*cos(t);


		vertex(x, y);
	}
	endShape();
	pop();
}

function devilscurve () { //devils curve function
	push();
	translate(width/2, height/2); //put it in the center
	
	beginShape();     //beginshape, using vertices along the equation
	strokeWeight(3);
	noFill();

	//loop for curves 
	for(var i =0; i < 3000; i++){
		
		stroke(0, 255, map(mouseY, 0, 480, 0, 255));
		var t = map(i, 0, width, -50, 100);
		var a = map(mouseX, 0, width, -50, 10);
		var b = map(mouseY, 0, height, -50, 50);
		
		

		x = cos(t)*sqrt((pow(a, 2)*(t)-pow(b, 2)*pow(cos(t),2)/(pow(sin(t),2)-pow(cos(t),2))));

		y = sin(t)*sqrt((pow(a, 2)*(t)-pow(b, 2)*pow(cos(t),2)/(pow(sin(t),2)-pow(cos(t),2))));
		


		vertex(x, y);
	}
	endShape();
	pop();
}
function devilscurve2 () { //devils curve function
	push();
	translate(width/2, height/2); //put it in the center
	
	beginShape();     //beginshape, using vertices along the equation
	strokeWeight(3);
	noFill();

	//loop for curves 
	for(var i =0; i < 3000; i++){
		
		stroke(255, map(mouseY, 0, 480, 0, 255), 0);
		var t = i
		var a = map(mouseX, 0, width, -50, 100);
		var b = map(mouseY, 0, height, -50, 50);
		
		

		x = cos(t)*sqrt((pow(a, 2)*(t)-pow(b, 2)*pow(cos(t),2)/(pow(sin(t),2)-pow(cos(t),2))));

		y = sin(t)*sqrt((pow(a, 2)*(t)-pow(b, 2)*pow(cos(t),2)/(pow(sin(t),2)-pow(cos(t),2))));
		


		vertex(x, y);
	}
	endShape();
	pop();
}

LO – Randomness

Manolo Gamboa Noan is an Argentinian generative artist who is known for his bright and chaotic images. According to Manolo’s bio on an art collection website, he focuses on exploring such dichotomies as chaotic v.s. ordered, organic v.s. artificial, and random v.s. controlled.

I am drawn to the piece “Mantel Rojo” because of the bright, jarring presence it has. Even though it is made entirely within the bounds of a computer, something we usually subconsciously consider to be cold and lifeless, the image is full of warmth and life. The randomness that Manolo plays with makes the image more real and expressive, making the audience feel as though there is a natural element to the image.