Author: Isis

project 3: dynamic drawing

I really wanted to make something that incorporated color changes without using a lot of colors. So I messed around with blend modes and created this!

isis-dynamic
// isis berymon section D

var x;
var y;
var bluex;
var bluey;
var greenx;
var greeny;
var d;

function setup() {
    createCanvas(500,500);
    background(0);
    d = 100;
    bluex = width/2;
    bluey = height/2;
    greenx = width/2;
    greeny = height/2;
}

function draw() {
    blendMode(BLEND); //makes bg opaque
    background(0);
    blendMode(SCREEN); //brightens overlapping colors
    fill(255,0,0);
    circle(width/2, height/2, d);
    fill(0,255,0);
    circle(greenx, greeny, d);
    fill(0,0,255);
    circle(bluex, bluey, d);
    //diameter scales with how far mouse is from center
    d = width/2-dist(width/2, height/2, mouseX, mouseY);
    //blue circle moves opposite the mouse
    bluex = width/2 + (width/2-mouseX);
    bluey = height/2 + (height/2-mouseY);
    //green circle moves with the mouse
    greenx = width/2 + (mouseX-width/2);
    greeny = height/2 + (mouseY-height/2);
}

lo: computational fabrication

copyright bengler 2013 | 3D visualization of walking paths in Norway

While looking through the provided resources, one project that really caught my eye was Intersections by Even Westvang and Simen Svale Skogsrud. They looked at data of Norway pertaining to how people travel and live throughout the region and turned it into 3D elevation maps. I take great interest in data visualization and I think cross referencing data to make a 3D model is very very interesting, especially when the visual is representative of the data like it is here being the shape of the region surveyed. Since they were just working with raw data I’m sure the computational side wasn’t too hard. They probably just had to clean and aggregate the data to fit their desired outcome! I think the artistry is in the medium choice: 3D printing what could be a graph with 2 axes is a very compelling way to show arial data like the city information they were looking at. The tangibility of it works to emphasize the comparisons they sought out to make.

More information here.

lo: generative art

One computational art project I admire is actually from a previous design professor of mine, Kyuha (Q) Shim. Much of his work operates in the realm between art, design, and technology, but I am really drawn to his experiments with typographic algorithms. What I find admiring is how Q approaches iterations and experimentation. He says the benefit to using computational systems is the themes you can see across a series of iterations that would otherwise take a long time. The ability to find these motifs then allows designers to create more solutions and observe broader systems than we can without technology. I’m not sure of the specifics of how he generated these designs, but I would assume it incorporates some image recognition based on type and qr codes. These experiments reflect the practical nature of Q and have a lot of potential both in technology and artistic aspects.

More info here

project 2: variable faces

I had a fun time planning out all the changing parts of these animal faces and figuring out how to use color type variables for fur tone was interesting!

Planning each variable feature
variable animal faces
// isis berymon section D

function setup() {
    createCanvas(640, 480);
    frameRate(10);
    background(245, 232, 215); //biege
}

function draw() {
}

function mousePressed() {
    background(245, 232, 215); //biege
    var face;

    //face color generator
    if(random(3) <= 1){
        face = color(145, 191, 217); //blue
    } else if(random(3) <= 2) {
        face = color(181, 145, 217); //purple
    } else {
        face = color(232, 149, 201); //pink
    }
    
     //face
    fill(face);
    noStroke();
    ellipse(width/2, height/2, 270, 250);
    //nose
    fill(30);
    ellipse(290, 270, 60, 50);
    ellipse(350, 270, 60, 50);
    fill(face);
    ellipse(287, 265, 60, 50);
    ellipse(353, 265, 60, 50);
    fill(43, 34, 40);
    triangle(320, 270, 310, 250, 330, 250);

    //ear generator
    if(random(3) <= 1){
        //cat ears
        fill(face);
        triangle(200, 190, 230, 80, 330, 200);
        triangle(350, 190, 410, 80, 440, 200);
    } else if(random(3) <=2) {
        //dog ears
        fill(face);
        ellipse(250, 150, 80, 120);
        ellipse(390, 150, 80, 120);
    } else {
        //bunny ears
        fill(face);
        ellipse(250, 150, 60, 200);
        ellipse(390, 150, 60, 200);
    }

    //neutral eyes
        fill(30);
        ellipse(260, 220, 60, 80);
        ellipse(380, 220, 60, 80);
        fill(200);
        circle(250, 210, 30);
        circle(370, 210, 30);

    //eye expression generator
    if(random(3) <= 1) {
        //happy eyes
        fill(face);
        ellipse(260, 260, 60, 30);
        ellipse(380, 260, 60, 30);
    } else if(random(3) <=2) {
        //smug eyes
        fill(face);
        rect(230, 180, 60, 30);
        rect(350, 180, 60, 30);
    }
}

project 1: my self portrait

self portrait (minecraft inspired :D)
function setup() {
    createCanvas(500, 400);
}

function draw() {
    //skin (all fills are shades of beige)
    background(217, 193, 174);
    noStroke();
    fill(217, 198, 182);
    ellipse(250, 250, 500, 594);
    fill(230, 210, 193);
    ellipse(250,250, 472, 547);
    fill(245, 219, 198);
    ellipse(250, 250, 446, 492);
    fill(255, 233, 214);
    ellipse(250, 250, 428, 466);
    //nose
    fill(207, 188, 173);
    circle(226, 356, 38);
    circle(266, 356, 38);
    fill(255, 233, 214);
    ellipse(246, 354, 74, 61);
    //freckles
    fill(120, 105, 80);
    circle(415, 339, 3);
    circle(367, 366, 3);
    circle(357, 335, 3);
    circle(302, 324, 3);
    circle(261, 341, 3);
    circle(234, 384, 3);
    circle(232, 295, 3);
    circle(177, 327, 3);
    circle(155, 355, 3);
    circle(114, 327, 3);
    circle(93, 366, 3);
    circle(51, 288, 3);
    circle(357, 226, 3);
    //right eye
    fill(77, 69, 65); //dark grey
    rect(351, 246, 63, 29);
    ellipse(351, 275, 126, 59);
    fill(235, 226, 219); //off white
    rect(347, 250, 63, 29);
    ellipse(347, 279, 126, 59);
    fill(110, 115, 93); //various shades of green-brown
    circle(356, 277, 54);
    fill(92, 87, 58);
    circle(356, 277, 48);
    fill(59, 55, 37);
    circle(356, 277, 34);
    fill(222, 216, 189);
    circle(351, 269, 12);
    //left eye
    fill(77, 69, 65); //dark grey
    rect(83, 246, 63, 29);
    ellipse(146, 275, 126, 59);
    fill(235, 226, 219); //off white
    rect(87, 250, 63, 29);
    ellipse(150, 279, 126, 59);
    fill(110, 115, 93); //various shades of green-brown
    circle(151, 277, 54);
    fill(92, 87, 58);
    circle(151, 277, 48);
    fill(59, 55, 37);
    circle(151, 277, 34);
    fill(222, 216, 189);
    circle(146, 269, 12);
    //right eyebrow
    fill(56, 41, 28); //dark brown
    rect(281, 217, 52, 8);
    rect(307, 203, 64, 14);
    rect(353, 218, 63, 3);
    rect(286, 210, 21, 7);
    fill(82, 60, 41); //mid brown
    rect(401, 221, 21, 4);
    rect(371, 209, 36, 9);
    //left eyebrow
    rect(77, 221, 21, 4);
    rect(83, 218, 63, 3);
    fill(56, 41, 28); //dark brown
    rect(92, 210, 36, 8);
    rect(128, 206, 64, 12);
    rect(166, 218, 52, 7);
    rect(192, 212, 21,6);
    //hair layer 1 - light brown
    fill(102, 79, 59);
    rect(0, 187, 24, 180);
    rect(17, 99, 44, 99);
    rect(71, 35, 54, 133);
    rect(195, 63, 36, 102);
    rect(270, 39, 63, 61);
    rect(405, 100, 42, 47);
    rect(434, 147, 38, 87);
    rect(486, 252, 14, 91);
    //hair layer 2 - mid brown
    fill(82, 60, 41);
    rect(0, 187, 17, 99);
    rect(0, 99, 53, 88);
    rect(17, 55, 56, 44);
    rect(73, 99, 36, 66);
    rect(73, 40, 48, 59);
    rect(0, 0, 500, 46);
    rect(147, 39, 56, 24);
    rect(203, 39, 23, 120);
    rect(226, 87, 44, 44);
    rect(225, 39, 83, 48);
    rect(333, 39, 87, 63);
    rect(333, 101, 46, 62);
    rect(419, 38, 81, 105);
    rect(447, 143, 53, 83);
    rect(472, 224, 28, 28);
    //hair layer 3 - dark brown
    fill(56, 41, 28);
    rect(0, 55, 17, 101);
    rect(0, 0, 73, 59);
    rect(73, 0, 362, 28);
    rect(213, 24, 49, 28);
    rect(435, 0, 65, 103);
    rect(472, 103, 28, 71);
}

lo: my inspiration

I’m not sure if this entirely counts, but I admire the game Genshin Impact from a design and developmental standpoint for a few reasons. On the game design side, the expansion of the map and story
frequently happening after the release of the game rather than with it is a really interesting structure that allows the player to develop skills as the story develops, much like a real adventure would happen. From the programming and development perspective I don’t know much about industry standards, but I think it’s really interesting how they used a customized version of unity to build the entire game. They had two separate
rendering systems? or pipelines? characters were cell shaded and all
environment was PBR. For a game of that scale and cost (free!) it’s really impressive how complex the process behind the scenes is.

Work:
miHoYo 2020