Looking Outward – 11

The article “6 Art Projects Prying thre Lid Off Online Privacy” discusses the blurring of private versus public on the internet. We don’t realize how much of our data and information is shared without us even knowing. We use digital applications and services that are “free”, when in reality, data is the currency of social media. Who actually reads the fine print and understands what they are agreeing to? Many artists have explored this space in connection to identity, privacy, and data collection. One of the art pieces shared in this article was “fbFaces” by Joern Roeder and Jonathan Pirnay. Roeder and Pirnay used a crawler to search and find public profiles and collect images, facebook IDs, and names. They then pixelated these images, reflecting that they are no longer people, but a whole data network of information that people no longer have control over. This work fosters awareness of how data can be used and what this mean for privacy and identity.

Link : https://www.vice.com/en/article/4x4p43/6-art-projects-prying-the-lid-off-online-privacy

Srishty’s Project 10

I made a simple story about a girl (me) who goes on a walk to the park. During her time there as she walks by, she sees tom and jerry start chasing each other all over the park and she starts laughing. The background d elements and all elements other than tom and jerry were done on illustrator and imported to imgur. My 4 characters are the cloud making the wind sound, the tom making the meow sound, the girl laughing, and the bird chirping.

sketch

// SRISHTY BHAVSAR
//SECTION C
//PROJECT 10
/*
I made a simple story about a girl (me) who goes on a walk to the park. During her time there as she walks by, 
she sees tom and jerry start chasing each other all over the park and
she starts laughing. The background d elements and all elements other than tom and jerry were done on illustrator
and imported to imgur. My 4 characters are the cloud making the wind sound, the tom making the meow sound, the girl 
laughing, and the bird chirping.
*/



// call global variables

//background image
var bgPhoto

//CHARACTERS
// cloud
    var cloudX = 0;

    // bird
    var birdImage = [];
    var birdX = 500;
    var birditem = 0;
    var birdwidth = 80

    // srishty (me)
    var srishtyImage;
    var srishtyx =500;

    // cloud
    var cloudImage;
    var cloudx = 300

    // tom and jerry
    var tomandjerry = [];
    var tomandjerryx = 70;
    var tomandjerryitem = 0;
    var tjdy = 1
    var tjdx = 1

// frame counter initializer
var count = 0; 




//load images to imgur
function preload() {
    bgPhoto = loadImage("https://i.imgur.com/75aDbMe.png");
    // images
    birdImage[0] = loadImage("https://i.imgur.com/o1P0pBO.png"); // first image in the bird list
    birdImage[1] = loadImage("https://i.imgur.com/48woLcm.png"); // first image in the bird list
    srishtyImage = loadImage("https://i.imgur.com/b5N2LzO.png"); // srishty image
    cloudImage = loadImage("https://i.imgur.com/xG8RjYF.png"); // cloud image
    tomandjerry[0] =loadImage("https://i.imgur.com/8nNCYkE.png");
    tomandjerry[1] =loadImage("https://i.imgur.com/cDSNU65.png");
    tomandjerry[2] =loadImage("https://i.imgur.com/LcYpbag.png");
    tomandjerry[3] =loadImage("https://i.imgur.com/wYhvMJo.png"); 

    //sounds
    wind = loadSound("https://courses.ideate.cmu.edu/15-104/f2022/wp-content/uploads/2022/11/wind.wav");
    meow = loadSound("https://courses.ideate.cmu.edu/15-104/f2022/wp-content/uploads/2022/11/meow.wav");
    laugh = loadSound("https://courses.ideate.cmu.edu/15-104/f2022/wp-content/uploads/2022/11/laugh.wav");    
    chirp = loadSound("https://courses.ideate.cmu.edu/15-104/f2022/wp-content/uploads/2022/11/chirp.wav");  
}


function soundSetup(){
    wind.setVolume(.1);
    meow.setVolume(2);
    chirp.setVolume(.1);
    laugh.setVolume(2);
}

function setup() {
    createCanvas(400, 400);
    //frameRate(5);
    imageMode(CENTER);
    useSound();

}

function draw() {
    count++; // add one frame to draw function
    //background image
    image(bgPhoto, width/2, height/2, width, height);



    wind.play();
    chirp.play();



    //call characters
    drawCloud();
    drawbird();
    drawTandJ()
    drawSrishty();
  
    if (count == 450 || count == 750) {
        meow.play();
    }
    if (count == 500 || count ==800) {
        laugh.play();
    }
}

// function for bird flapping

function drawbird() {

    image(birdImage[birditem], birdX, 104, birdwidth,30); 
    // if the frame counter is odd have the bird's item be the first one, if even have it be the second one 
    //fkapping affect 
    if (count % 2 === 0 ) { // bird frame 1
        birditem = 1;
        birdwidth = 100
        birdX -= .5; // bird flies to left
    }
    if (count % 2 === 1 ) {    // bird frame 0
        birditem = 0;
        birdwidth = 80;
        birdX -= .5; // bird flies to left
    }

}

function drawSrishty() {
    var heightcount = .5
    if (count >= 30) { // srishty walks in 30 frames after bird

        // staggering heights so it looks like walking rather than glide
        if (count % 2 === 0 ) { //odd
            image(srishtyImage, srishtyx - heightcount, 325, 66.2218, 205.4745); 
            srishtyx -= .3; // srishty walks to left

        }
        if (count % 2 === 1 ) { //even
            image(srishtyImage, srishtyx, 325 + heightcount, 66.2218, 205.4745); 
            srishtyx -= .3; // srishty walks to left

        }
    }

}

function drawCloud() { // draw cloud
    image(cloudImage, cloudx, 69, 130.2123 , 46.6313 );
    cloudx -= 0.09; //cloud moves very slowly
}

function drawTandJ() { // tom and jerry frames chasing eachother

        if (count >= 0 & count <= 400 ) { 
            image(tomandjerry[tomandjerryitem], tomandjerryx, 300, 216.9349, 162.7012);
            tomandjerryitem = 0
        }

        if (count >= 400 & count <= 500) { 
            image(tomandjerry[tomandjerryitem], (tomandjerryx + 100) + tjdx, 300, 216.9349, 162.7012);
            tomandjerryitem = 1
            tjdx += .5
        }

        if (count >= 500 & count <= 750) {
            image(tomandjerry[tomandjerryitem], (tomandjerryx + 300) -tjdx, 400 - tjdy, 220, 120.7012);
            tomandjerryitem = 2
            tjdy += .5;
            tjdx += .5
        }
        if (count >= 750 & count <= 2000 ) { 
            image(tomandjerry[tomandjerryitem], (tomandjerryx + 200)-tjdx, 400 - tjdy, 216.9349/2, 162.7012/2); 
            tomandjerryitem = 3
            tjdy += .5;
            tjdx += 2;

        }

}
 


Project 10

Under the sea! My 5 characters are the ocean, jellyfish, fish, big whale, and small whale.

sketch
// Sowang Kundeling Project 10 Section C

var count = 0;
x = 50
var count = 0

function preload() {
  ocean = loadSound("http://localhost:8887/ocean.wav");
  low = loadSound("http://localhost:8887/low.wav");
  bubble = loadSound("http://localhost:8887/bubble.wav");
  high = loadSound("http://localhost:8887/high.wav");
  splash = loadSound("http://localhost:8887/splash.wav");

  sea = loadImage("https://i.imgur.com/cDVwxGl.jpg");
  big = loadImage("https://i.imgur.com/3j8OG8S.png");
  little = loadImage("https://i.imgur.com/eBmN7hL.png");
  jellyfish = loadImage("https://i.imgur.com/LbEcOSU.png");
  fish = loadImage("https://i.imgur.com/FSQzu31.png")
}

function soundSetup() {
  ocean.setVolume(.1);
  low.setVolume(.3);
  bubble.setVolume(.1);
  high.setVolume(.3);
  splash.setVolume(.1);
}

function setup() {
  createCanvas(sea.width, sea.height);
  frameRate(1);
  useSound();
}

function draw() {
  image(sea, 0, 0, sea.width, sea.height);
  ocean.play();

  if(count == 2 || count == 16) {
    low.play();
  } else if(count == 4 || count == 18) {
    bubble.play();
  } else if (count == 10 || count == 25) {
    high.play();
  } else if (count == 1 || count == 30 || count == 15) {
    splash.play();
  }

  if(count >= 5) {
    image(big, 20, 50, big.width/4, big.height/4);
  } if(count >= 10) {
    image(little, 400, 200, little.width/2, little.height/2);
  } if(count >= 4) {
    image(jellyfish, x, 300, jellyfish.width/4, jellyfish.height/4);
  } if (count >= 15) {
    image(fish, mouseX, mouseY, fish.width/6, fish.height/6);
  }

  count++
  x += 2

  print(count);
}

Blog 09

Heather Kelley is one of the five most powerful women in gaming and the most influential women in technology. She holds an MA from the University of Texas at Austin and is an Associate Teaching Professor at Carnegie Mellon University’s Entertainment Technology Center. Her works as Perfect Plum focus on under-explored aesthetic experiences and sensory interactions. 

In particular, I admire her creative expression and how she creates interactive pieces that relate to society and individuals. Specifically, I admire these aspects because they enhance the person’s experience and interaction with the work. To elaborate, I want to highlight her work in interaction design. Specifically, the “Tre Pas (Version Musicale),” creates an interactive piece where it can be described as an extremely long hopscotch as each series triggers an interactive musical composition. This is one of the many examples of her work where she cleverly creates a piece that is not only intriguing but also captures the individual’s attention by having them interact with it. 

Overall, Heather Kelley has an impressive background and I would highly recommend taking a look into the work she has done as it’s something work interacting with and experiencing. 

VR “first world puzzler” SUPERHYPERCUBE

Project 09

I wanted to create a portrait with my fav words and cute text faces! When the mouse is pressed, the pixel colors are in black and white.

Here is how it looks after some time.

sketch
// Sowang Kundeling Project 09 Section C

var img;
var imgbw;
var texts = ["( ͡° ͜ʖ ͡°)", "(づ。◕‿‿◕。)づ", "(◕‿◕✿)", "(ᵔᴥᵔ)", "♥‿♥", "~(˘▾˘~)", "ᕦ(ò_óˇ)ᕤ", "(。◕‿◕。)", "ʕ•ᴥ•ʔ", "corn", "taco", "cat"];

function preload(){
  //load image
  img = loadImage("https://i.imgur.com/1V17iyS.png");
  imgbw = loadImage("https://i.imgur.com/qedFJ3f.jpg")
  frameRate(10000);
}


function setup() {
    createCanvas(350, 350);
    //img.resize(450, 450);
    //imageMode(CENTER);
    //textMode(CENTER);
}


function draw() {
    //image(img, 0, 0, 400, 400);
    var x = random(img.width); // random coordinate for the pixel
    var y = random(img.height);

    var pixelColor = img.get(x*5, y*5); // pixel color
    var pixelColorbw = imgbw.get(x*5, y*5) // black and white pixel color
  
    if(mouseIsPressed) { // creates black and white pixels when mouse is pressed
      fill(pixelColorbw);
    }else {
      fill(pixelColor);
    }

    strokeWeight(random(5,20));
    textSize(random(5, 20));
    text(random(texts), x, y);
}

Looking Outwards 09

The artist Chloe Varelidi, usually creates games, toys, and unique products. She worked for different organizations for ten years before she founded a company called “humans who play”. Humans who play is a company who works with organizations on human-centric design. They aim to tackle problems and questions through design. Each of her projects uses different mediums to resolve the challenge. One of her projects is called Animal Badges. She created different badges that had different animals. The badges were given out to kids after they learned a new skill related to emotional learning. Each of the different animals represents a different skill like empathy, curiosity, perseverance, and compassion. I admire this project because it is helping kids learn more about their emotions. Education about emotions should be taught in school because it helps people understand what they are going through and feeling and communicate that to other people so others understand as well. It is one of the most important life skills that someone needs, not only to understand themselves better but to also interact with different people.  

https://varelidi.com/post/89194714461/animal-badges-a-sample-of-some-badges-i

Project-09-Portait

Project-09

sketch
//Brody Ploeger
//jploeger
//Project-09
//Section C

var img;

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


}

function setup() {
    createCanvas(318, 480);
    background(200);
    img.resize(318,480)


}

function draw() {

//light sections of picture
    for(var i = 0; i<=width; i+=5){
        for(var j = 0; j<=height; j+=5){
            var pixel = img.get(i,j)
            if(pixel[1]>80){
                strokeWeight(5);
                stroke(color(pixel));
                point(i,j)
            }   
        }      
    }


//dark sections of picture
    var x = random(width);
    var y = random(height); 
    var pixel2 = img.get(x,y);
    if(pixel2[1]<120){
        noStroke();
        fill(pixel2);
        square(x,y,10);
    }
   

}

//The project uses two strategies to break up the image. 
//For the light parts, it uses dots that generate immediately. 
//For the dark parts, it uses squares that generate over time. 

LookingOutwards-09

Nathalie Miebach is an artist and musician who translates scientific data related to meteorology, ecology, and oceanography into sculptures and music scores. Her project, The Sandy Rides, is a woven sculpture. The project is inspired by Hurricane Sandy and the data from the storm. This data is used to build the amusement park rides in the sculpture. The project questions what living along the coast might look like in the future with climate change and how an amusement park ride might adapt to these new conditions. Miebach constructed a series of these sculptures that take influence from various ride destroyed during the storm. These sculptures are really interesting from an architectural perspective on how they build using data. While they use data, which can seem very methodical, they have a chaotic nature to them. They describe the storm in a visual and mathematical way.

https://www.nathaliemiebach.com/work/the-sandy-rides

Blog – 09

The work of Phoenix Perry most inspires me. She is an indie game developer and educator who is based in the United Kingdom. She went to the University of Tennessee and later to NYU for her master’s. On her website, she describes herself as “an artist and activist who often uses culture as a medium.” She also loves experimenting with social engagement through graph theory, mesh networks, and emergent systems. One of her works that stood out to me was Bot Party, which is a game that explores intimacy through physical play using sound. Essentially, when the game is played the 3 bots use bot-to-skin, skin-to-skin, and skin-to-bot communication and send encoded secret messages to each other. These secret messages are then relayed to the player in the form of sounds. Perry created this game because she saw the social phobia that exists involving holding hands and being friendly with one another. Check it out below!

http://playbotparty.com/2018/01/24/WhatIsBotPartyl-prep/

http://phoenixperry.com

By: Katie Makarska

Project 09 – Portrait

With this project, I mainly wanted to create different color modes from the pixels. The background is black and white, the 1st set of selected pixels are the original colors, and when clicked the pixels become inverted.

sketch
// Emily Franco
// Section C
// efranco@andrew.cmu.edu
// Assignment-09

var sqr = [];
var sqrArrayLen = 150;

//true = original colors false = inverted
var colorStyle = true;

var count = 0; 
function preload(){
    face = loadImage("https://i.imgur.com/bu90lcN.jpg");
}

//constructor for square objects
function makeSquare(cx, cy, wdth){
    var c = {x:cx, y:cy, w:wdth}
    return c;
}

function setup(){
    createCanvas(480,480); 
    background("white");
    
    face.loadPixels(); 
    face.resize(480,600);
    greyscale(); 

    //define objects in sqr array 
	for(var i=0;i<=sqrArrayLen-1;i++){
	    var side1 = random(10,100);
	    var x = random(width);
	    var y = random(height);

	    var square = makeSquare(x,y,side1);
        sqr.push(square);
     }    
}

function draw() {   
    noFill();
    stroke("white");

    //draw 1st image only once
    if(count<=0){
    	drawAlterations()
    }
	
    count++;
	noLoop();
}

//draw changed made to image
function drawAlterations(){
	var opacity;
	var shift; 
	var c; 
	for(var i=0; i<=sqr.length-1;i++){
		noStroke();
		if(colorStyle){
			showColor(i);
		}else{
			invertColors(i);
		}
		print(colorStyle);
		
	}
}
//make image greyscale
function greyscale(){ 
	for (var i=0;i<=face.width;i++){
		for(var j=0;j<=face.height;j++){
			c = face.get(i,j);
			var grey = c[0]; 
			push();
			noStroke();
			fill(grey,150);
			square(i,j,1);
			pop();
		}
	} 
}

//change pixel color back to original only in boxed area
function showColor(index){
	var maxX = sqr[index].x + sqr[index].w;
	var maxY = sqr[index].y + sqr[index].w;

	for (var i=sqr[index].x;i<=maxX;i++){
		for(var j=sqr[index].y;j<=maxY;j++){
			c = face.get(i,j);
			opacity = random(50,150); 
			shift = random(-10,10);

			fill(c[0],c[1],c[2],opacity);
			square(i+shift,j+shift,1); 
		}
	} 
}

function invertColors(index){
	var maxX = sqr[index].x + sqr[index].w;
	var maxY = sqr[index].y + sqr[index].w;

	for (var i=sqr[index].x;i<=maxX;i++){
		for(var j=sqr[index].y;j<=maxY;j++){
			c = face.get(i,j);
			
			var r = 255-c[0];
			var g = 255-c[1];
			var b = 255-c[2];

			opacity = random(50,150);
			shift = random(-10,10);

			fill(r,g,b,opacity);
			square(i+shift,j+shift,1); 
		}
	} 
}
function mousePressed(){
	colorStyle = !colorStyle;
	drawAlterations();
}