~(ºwº)~ – [OLD SEMESTER] 15-104 • Introduction to Computing for Creative Practice

sketch

//Amalia Kutin
//15-104 B
var bergSize;
var polar;
var pieces = [];
var afterNoon;
var skyColor;
var clouds = [];
var skyOrb;
var skyOrbColor;


function setup() {
    createCanvas(500, 500);
    background(158, 198, 255);
    bergSize = 400;
    skyColor = 125;
    skyOrb = 0;
    skyOrbColor = false;
    noStroke();
    polar = {x: 250, y: 350, dx: 0};
    for(let i = 0; i < 10; i++) clouds[i] = {x: random()*500, y: random()*180};
}

function draw() {
    background(158, 198, 255);
    fill(61, 120, 204);
    rect(0, 200, 500, 300);
    fill(143, 185, 191);
    beginShape();
    vertex(250-(bergSize/2), 350);
    vertex(250-(bergSize/4), 350-(bergSize/4));
    vertex(250+(bergSize/4), 350-(bergSize/4));
    vertex(250+(bergSize/2), 350);
    vertex(250+(bergSize/4), 350+(bergSize/4));
    vertex(250-(bergSize/4), 350+(bergSize/4));
    endShape(CLOSE);
    for(let i = 0; i < pieces.length; i++) drawIce(pieces[i]);
    drawSky();
    for(let i = 0; i < clouds.length; i++) drawClouds(clouds[i]);
    drawBear(polar);
}

function drawBear(b) {
    fill(255);
    beginShape();
    vertex(b.x-20, b.y-20);
    vertex(b.x+10, b.y-30);
    vertex(b.x+20, b.y-25);
    vertex(b.x+15, b.y-10);
    vertex(b.x+20, b.y+10);
    vertex(b.x+10, b.y+10);
    vertex(b.x, b.y);
    vertex(b.x-10, b.y+5);
    vertex(b.x-10, b.y+10);
    vertex(b.x-20, b.y+10);
    vertex(b.x-30, b.y+5);
    vertex(b.x-35, b.y-5);
    endShape(CLOSE);
    fill(156, 96, 114);
    circle(b.x+20, b.y-25, 5);
    fill(0);
    circle(b.x+10, b.y-22, 5);
    circle(b.x+13, b.y-27, 5);
    b.x += random()*6 - 3;
    b.y += random()*6 - 3;
    if(b.x < 260-bergSize/2) b.x += 10;
    if(b.x > 240+bergSize/2) b.x -= 10;
    if(b.y < 360-bergSize/4) b.y += 10;
    if(b.y > 340+bergSize/4) b.y -= 10;
}

function drawIce(i) {
    fill(143, 185, 191);
    beginShape();
    vertex(i.x-(i.s/2), i.y);
    vertex(i.x-(i.s/4), i.y-(i.s/4));
    vertex(i.x+(i.s/4), i.y-(i.s/4));
    vertex(i.x+(i.s/2), i.y);
    vertex(i.x+(i.s/4), i.y+(i.s/4));
    vertex(i.x-(i.s/4), i.y+(i.s/4));
    endShape(CLOSE);
    if(i.c % 8 < 2) i.x++;
    else if(i.c % 8 < 4) i.y++;
    else if(i.c % 8 < 6) i.x--;
    else i.y--;
    i.c++;
}

function drawSky() {
    if(afterNoon) skyColor-=0.25;
    else skyColor+=0.25;
    fill(skyColor, skyColor, 120+skyColor/2);
    rect(0, 0, 500, 200);
    if(skyColor == 200) afterNoon = true;
    if(skyColor == 50) afterNoon = false;
    if (skyOrbColor) fill(219, 252, 255);
    else fill(235, 196, 68);
    circle(skyOrb, 100, 60);
    skyOrb+=(0.25*500/150);
    if (skyOrb > 500) {
        skyOrb = 0;
        if (skyOrbColor) skyOrbColor = false;
        else skyOrbColor = true;
    }
}

function drawClouds(c) {
    fill(255);
    ellipse(c.x%500, c.y, 50, 30);
    c.x++;
}

function mousePressed() {
    if(bergSize > 150) bergSize -= 10;
    var newPiece;
    for(let i = 0; i < 20; i++) newPiece = {x: random()*500, y: 200+random()*300, s: random()*60, c: 0};
    pieces[pieces.length] = newPiece;
}

My project revolved around a polar bear and melting ice. There is an iceberg that the user melts by clicking, and a polar bear stuck on it. Small pieces of ice are generated as the main piece melts. The sky has clouds that move across the sky. There is also a sun/moon that moves across the sky as well. The polar also randomly moves around, but it’s constrained by the size of the iceberg. This project demonstrates the small scale effects of climate change.

If I had more time, I would have considered adding a second polar bear. The issue is that it would need to stay on the iceberg while also not bumping into its friend.

Generative Landscape

sketch Download

var cld = [];
var shl = [];

function setup() {
    createCanvas(480, 320);
    background(200);
    noStroke();
}

function draw() {
    //static background
    fill(57, 16, 115);
    rect(0, 0, 480, 40);
    fill(129, 21, 150);
    rect(0, 40, 480, 40);
    fill(189, 28, 119);
    rect(0, 80, 480, 40);
    fill(224, 47, 31);
    rect(0, 120, 480, 40);
    fill(230, 107, 50);
    rect(0, 160, 480, 40);
    fill(255, 185, 64);
    circle(240, 200, 60);
    fill(179, 161, 91);
    rect(0, 200, 480, 120);

    //cloud code
    if(random() > 0.95) cld.push(makeCloud((random()*120), color(random()*30+220, 220, random()*30+220))); //chance to draw new cloud
    for(let i = 0; i < cld.length; i++) { //draws and updates clouds
      cld[i].drawCloud();
      cld[i].moveCloud();
    }
    if(cld[0].x > 480) cld.shift(); //removes clouds that move too far

    //shell code
    if(random() > 0.85) shl.push(makeShell(random()*200+120, color(random()*255, random()*255, random()*255), random()*3)); //chacne to draw new drawShell
    for(let i = 0; i < shl.length; i++) { //draws and updates shells
      shl[i].drawShell();
      shl[i].moveShell();
    }
    if(shl[0].x > 480) shl.shift(); //removes shells that move too far
}

function makeCloud(ty, tc) {
    var cloud = {x: 0, y: ty, c: tc};
    return cloud;
}

function drawCloud() {
    fill(this.c);
    ellipse(this.x, this.y, 40, 20);
}

function moveCloud() {
    this.x += 10;
}

function makeShell(ty, tc, ts) {
    var shell = {x: 0, y: ty, c: tc, s: ts}
    return shell;
}

function drawShell() {
    fill(this.c);
    if(this.s < 1) circle(this.x, this.y, 20);
    else if(this.s < 2) square(this.x, this.y, 20);
    else triangle(this.x, this.y, this.x+10, this.y+20, this.x+20, this.y);
}

function moveShell() {
    this.x += 10;
}

This isn’t running correctly right now and I can’t figure out why ?-?

I made a sunset landscape because I thought I could incorporate some really cool colors into the background. First I coded the hard landscape. Since the sun is so far away, it will look like it isn’t moving. Next I created very simple clouds. To create randomness and variety in my landscape the clouds have a randomized color and height. I created a method that updated their x position so that they’d look like they were “moving” across the screen. After that I made shells. I followed a similar procedure, but I also added shape as a random variable. Having different shaped/colored shells in different locations helps make the landscape more exciting. I wish the code was displayed properly so you could see the final product 🙁

LO: NFTs

I read the Plagiarism Today article which discussed how copyright relates to NFTs. I really like the example used in the article that equates NFTs to limited edition posters. Having an NFT doesn’t mean no one else will have that art, and it doesn’t give the owner permission to use it for everything. An issue right now is that some people are selling art that they don’t have a copyright for. Should this be allowed? NFTs can be a cool source of revenue for artists, but if other people are selling their work that’s theft. Sites are attempting to regulate this kind of problem, but everything is so new and they haven’t had time to catch up. Similarly, courts haven’t implemented any laws around NFTs. Until that happens a huge amount of fraud could occur within NFT trading. Right now people are making a lot of money from NFTs, so it will be interesting to see how this trend continues to evolve.

https://www.plagiarismtoday.com/2021/03/16/nfts-and-copyright/

Sonic Story

sketch

My code wasn’t running properly on my own computer so I’m not going to try to get it to run here 🙁

The premise of my story is that a hungry cat meows, and notices the water rippling in a fishbowl. The cat hisses at the fish and then walks over to investigate. There is a splashing noise, and then the fish mysteriously disappears…

Computational Portrait

sketch Download

let img;
let min, max;

function preload() {
  img = loadImage('https://i.imgur.com/Wup8Ien.jpeg');
}

function setup() {
  createCanvas(480, 480);
  min = 4;
  max = 40;
  imageMode(CENTER);
  noStroke();
  background(255);
  img.loadPixels();
}

function draw() {
  let randomVal = map(random()*300, 0, width, min, max);
  let x = floor(random(img.width));
  let y = floor(random(img.height));
  let pix = img.get(x, y);
  fill(pix, 128);
  triangle(x, y, x+randomVal, y, x+randomVal/2, y+randomVal);
}

My art creates randomly sized triangles that match the colors of pixels in an image. They are continuously drawn, and you can eventually see the face that is being created. I chose a picture of a redhead on imgur because I thought it would be fun to see his bright hair.

Women and Non-binary people in art

Chloe Varelidi makes what she calls “unusual games” and other products. Her career began when she got a Master in Fine Arts at Parsons’ Design and Technology Program. She worked with littleBits for many years, and their team won Creative Toy of the Year 2018. Varelidi designs interesting pieces often used for educational purposes or as toys for children. She worked with Mozilla for a while, and was also a game design director. In these various roles she has created numerous projects while collaborating with different teams. She recently founded humans who play, a design company which uses play as a force for doing good. I like her quirky and creative style and how she uses it to connect with her audience. She clearly enjoys her work and feels like it is making a difference. I also love how she can work with many groups to make cool projects.

https://varelidi.com/

Animal Badges A sample of some badges I illustrated for a social emotional learning product for youth at Mozilla. Each animal corresponds to a skill such as empathy, curiosity, perseverance and compassion. — One of Varelidi’s pieces: animal badges for a learning project

Creative Practice of an Individual

Hannah Perner-Wilson uses conductive materials and craft techniques to create new styles of electronics that emphasize materiality and process. She received a BA in Industrial Design from the University for Art and Industrial Design Linz and an MA in Media Arts and Sciences from the MIT Media Lab. Her website, Plusea, contains links to her numerous projects. It dates back to 2004, and has dozens of pages on her creations. I like her project KOBAKANT, which focuses on wearable technology. They want to deconstruct technology, and create very interesting results. I like how she explained the creation process for the different pieces she presented. Talking about how she came up with the art helped add another layer to it. When I present my own work, I know talking through the steps I took to make it will help my audience understand it better.

https://vimeo.com/channels/eyeo2016/176871152#t=0s

https://www.plusea.at

Composition with Curves

sketch



function setup() {
    createCanvas(600, 600);
    background(200);
    stroke(0);
    noFill();
}

function draw() {
    curve(300+mouseX*2, 300+mouseY*2, 300, 300, 300, 300, 300+mouseX*2, 300-mouseY*2);
    curve(300+mouseX*2, 300-mouseY*2, 300, 300, 300, 300, 300-mouseX*2, 300-mouseY*2);
    curve(300-mouseX*2, 300-mouseY*2, 300, 300, 300, 300, 300-mouseX*2, 300+mouseY*2);
    curve(300-mouseX*2, 300+mouseY*2, 300, 300, 300, 300, 300+mouseX*2, 300+mouseY*2);
}

For this project I made 2 lemniscates(?) that can be manipulated using the x and y coordinates of the mouse. I decided not to erase the previous drawings so that the user could have multiple shapes on the canvas.

Information Visualization

I am a huge fan of quirky jewelry, so I think this project is super cool. Rachel Binx makes earrings and necklaces using various unicode arrows. I hadn’t thought about how many there were until I looked at her work. All of the pieces look crisp and classy. Although simple, I can imagine that certain arrows hold special significance to specific people. To make such a large range of options, Binx has compiled a list of unicode arrows that people can use. Honestly this seems like too many, but apparently all of them were approved by a group who thought they were worth using. Binx’s database + jewelry shop is an incredibly cool blend of technology and fashion.

Rachel Binx: Unicode Arrows

https://unicodearrows.com/

Abstract Clock

sketch

var time = 0;
var pupil = 400;

function setup() {
    createCanvas(600, 600);
    background(182, 217, 214);
}

function draw() {
    fill(200, 200, 0);
    ellipse(300, 300, 600, 400);
    fill(0, 0, 0);
    if(time <= 720) pupil -= 0.4;
    else pupil += 0.4;
    ellipse(300, 300, pupil, 400);
    time++;
    time%=1440;

}

This clock is inspired by this image, which claims that a cat’s eyes will change during the day. Although not all that practical, I think it’s a super cool idea.