Project 11

just my lil German boy

sketch
// Sowang Kundeling Section C Project 11

var backgroundX = 355;
var foregroundX = 250;

function preload() {
    germanboy = loadImage("https://i.imgur.com/8g7kXHX.png");
    neighborhood = loadImage("https://i.imgur.com/ueqfD0Q.png");
    house = loadImage("https://i.imgur.com/VeVnWaO.png");
    montain = loadImage("https://i.imgur.com/xImWYKs.png");

    long = loadImage("https://i.imgur.com/6kAoEti.png");
    short = loadImage("https://i.imgur.com/hGhArWq.png");
}


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


 function draw() {
// sky
    noStroke();
    fill(180, 227, 242);
    rect(0, 0, 480, 25); // x7
    fill(163, 194, 207);
    rect(0, 25, 480, 25);
    fill(137, 165, 176);
    rect(0, 50, 480, 25);
    fill(121, 146, 156);
    rect(0, 75, 480, 25);
    fill(98, 119, 128);
    rect(0, 100, 480, 25);
    fill(79, 95, 102);
    rect(0, 125, 480, 25);
    fill(60, 74, 79);
    rect(0, 150, 480, 25);
    
    imageMode(CENTER);

// background elements
    for (var i = 0; i < 2; i ++) {
        image(short, backgroundX - (i * 150), 159, short.width/2, short.height/2);
        image(long, (backgroundX + 90) - (i * 200), 145, long.width/2, long.height/2);
    }

// land
    fill(107, 96, 81);
    rect(0, 175, 480, 65); // land

// foreground elements
    image(montain, foregroundX-120, 115, 265, montain.width/4, montain.height/4);
    image(neighborhood, foregroundX - 140, 137, neighborhood.width/2, neighborhood.height/2);
    image(house, foregroundX + 250, 140, house.width/4, house.height/4);
    image(germanboy, 100, 200, germanboy.width/2, germanboy.height/2);
    backgroundX -= 1; 
    foregroundX -= 1;

// reset
    if (backgroundX <= -300) {
        backgroundX = 900;
    }

    if (foregroundX <= -300) {
        foregroundX = 825
    }
}

Blog 11

NFTs have created vast spaces in which artists can get well deserved and long overdue compensation for their labor. Historically, digital art and media has been free for use on the Internet because of the high shareability and the ability to just copy and paste. NFTs encourage artists to be more creative as there is a space for reward and the Internet is limitless. However, NFTs do have a lot of societal and environmental downsides. Some works get plagiarized and sold, and copyright laws are blurred in the new space. NFTs also require a lot of compusing power and server farms are powered by fossil fuels. While there may be an assumption that online art is more environmentally friendly, it is actually quite the opposite.

https://time.com/5947720/nft-art/

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);
}

Blog 08

The speaker that I chose is Sasha Constanza-Chock on Design Justice. They are an associate professor at MIT and a non-binary trans-identifying person. Sasha is currently the Head of Research & Sensemaking at OneProject.org and an associate professor at Northeastern for Arts, Media, & Design. Sasha starts off by recounting a story about going through airport security, already apprehensive of what is to come. The TSA scan operator was prompted to choose either “male” or “female” on the UI. While Sasha presents as a woman, the millimeter scan labeled Sasha otherwise. Either way, Sasha is read by the technology as “risky” and is immediately flagged. Sasha’s story leads to design justice and dismantling oppressive design structures. Sasha is an effective communicator for their sincerity and detailed breakdown of topics. They wrote a book called Design Justice, breaking down community-led practices and how they can be reformed to be more inclusive. Sasha’s personal story was very digestible so that the audience can empathize and understand the issue at hand.

https://oneproject.org

Project 07

logarithmic spirals!

sketch
// Sowang Kundeling skundeli Section C Project 07

var theta; // angle from x-axis
var r; // dist from the origin
var nPoints = 700;

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

function draw() {
    background(28+mouseY, 74, 55+mouseX); // green

    strokeWeight(2);
    startAngle = constrain(mouseY, 100, 100);
  
    // spirals
    stroke(110, 53, 140); // dark purple
    logSpiral(mouseY, startAngle);
    stroke(199, 129, 227) // light purple
    logSpiral(mouseY, startAngle+20);
    stroke(76, 63, 152) // dark blue
    logSpiral(mouseX+25, startAngle+40);
    stroke(136, 128, 224) // light blue
    logSpiral(mouseX+50, startAngle+60);
    stroke(176, 69, 149) // pink
    logSpiral(mouseX+75, startAngle+85);
    stroke(224, 110, 196) // pink
    logSpiral(mouseX, startAngle+95);

}

function logSpiral(r, theta, color) { // logarithmic spiral
    noFill(); // use noFill or else only one line is shown
    var a; // arbitrary constant
    var b; // arbitrary constant
    
    beginShape();
    for (i=0; i < nPoints; i++) { // apply nPoints onto spirals
        a = (width/2) + (r+i) * cos(theta+3*i);
        b = (height/2) + (r+i) * sin(theta+3*i);
        vertex(a, b);
    }
    endShape();
}

Blog 07

Stefanie Posavec is a designer, artist, and author. Her mission is to push different ways in which data can be communicated to a diverse range of ages and audiences. What especially intrigued me about her is that her projects are “wearable or danceable, be found in hospitals, museums, or on television.”

An example of the wearable aspect of her work is “Air Transformed: Better with Data Society Commission”. This series is a collection of wearable air quality data, initiating a conversation about air pollution. My favorite piece is “Seeing Air”. The projects consists of 3 pairs of glasses, each pair demonstrating the levels of air pollution on a different day in Sheffield in 2014. Each pair of sunglasses also signifies a different type of pollutant: nitrogen dioxide, small particulates, and large particulates.

The 3 pairs of “Seeing Air” glasses

Project 06

sleeping earth, suns, moons, and stars!

sketch
// Sowang Kundeling skundeli Section C Project 05

var angle = 0;
var x = 480/2;
var y = 480;
var z = 60; // size

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

function draw() {
    background('black');
    push();
    frameRate(1);
    translate(240, 480);
    rotate(radians(7) * second());
    galaxy();
    pop();
  
    noStroke();
    fill('black')
    var eyeLX = x + 60
    var eyeRX = x - 60
    ellipse(eyeLX, y-60, z+10, z); // left eye
    ellipse(eyeRX, y-60, z+10, z); // right eye
    fill(9, 130, 13);
    ellipse(eyeLX, y-75, z+15, z); // cut out left eye
    ellipse(eyeRX, y-75, z+15, z) // cut out right eye
  
    push();
    frameRate(1);
    translate(x-120, y-350);
    rotate(radians(5) * second());
    star(0+minute(), 0+minute(), 10, 30, 5); // left star
    pop();
  
    push();
    frameRate(1);
    translate(x+120, y-380);
    rotate(-radians(5) * second());
    star(0+minute(), 0+minute(), 5, 20, 5); // right star
    pop();
}

function galaxy() {
    // earth
    translate(-240, -480);
    fill(9, 130, 13); // green
    noStroke();
    circle(x, y, z*5);
  
    // yellow
    noStroke();
    fill(245, 206, 51); // yellow
    circle(x, y-200, z);
    fill(242, 221, 136); // inner yellow
    circle(x, y-200, z/2)
  
    // orange
    fill(245, 145, 51); // orange
    circle(x+200, y, z);
    fill(242, 188, 138); // inner orange
    circle(x+200, y, z/2);
  
    // dark blue
    fill(74, 51, 245); // dark blue
    circle(x, y+200, z);
    fill(167, 156, 247); // inner dark blue
    circle(x, y+200, z/2);

    // light blue
    fill(150, 198, 250); // light blue
    circle(x-200, y, z);
    fill(211, 227, 245); // inner light blue
    circle(x-200, y, z/2)

}

function star(x, y, radius1, radius2, npoints) { // reference star https://editor.p5js.org/p5/sketches/Form:_Star
    fill(241, 242, 153)
    let angle = TWO_PI / npoints;
    let halfAngle = angle / 2.0;
    beginShape();
    for (let a = 0; a < TWO_PI; a += angle) {
      let sx = x + cos(a) * radius2;
      let sy = y + sin(a) * radius2;
      vertex(sx, sy);
      sx = x + cos(a + halfAngle) * radius1;
      sy = y + sin(a + halfAngle) * radius1;
      vertex(sx, sy);
    }
    endShape(CLOSE);
}

Blog 06

Manolo Gamboa Naon is a creative coder from Argentina with a focus on generative visual aesthetics. Through the combination of image and video, he strives to discover the line between chaos and order. In his piece Manoloide, Last Flowers, he displays selections of different variations of black, red, yellow, white, and blue. The pieces look like acrylic paint lathered onto a canvas, giving the illusion of texture. The shapes are also flower-like and fragmented, with no shape repeating. Naon certainly achieves an organized chaos in his work, with the feeling of a pattern but no exactly repeating imagery. You can also see where the colors ever so slightly blend together to create fine lines.