Author: Anabelle

anabelle’s project 03

This is my project! Try making the sky change from sundown to midnight, see the moon change phases, and the stars glitter! You can try to pet the cat as well <3

sketch
// kayla anabelle lee (kaylalee)
// section c
// project 03 ^^

moonX = 200; 
moonY = 150;
outline = 55;
inline = 50;

let direction = 0.8;
let speed = 1;
let starDiam = 20; 

let redValue = 231;
let greenValue = 157;
let blueValue = 193;

let skyScraperX = 300;
let skyScraperY = 100;

let happyMouthX = 60;
let happyMouthY = 450;

let triangleWindowX = 225;
let triangleWindowY = 185;
let catDirection = 1;
let catAngle = 1;
let moonSpin = 0;

function setup () {
    createCanvas(450, 600);
}

function draw() {
    print(catAngle);
    background(redValue, greenValue, blueValue);

    // constrain the rbg values to the 2 sky colors i want
    redValue = constrain(redValue, 46, 231);
    greenValue = constrain(greenValue, 26, 157);
    blueValue = constrain(blueValue, 71, 193);

    // turns dusk when mouse on left, turns night when mouse on right
    if (mouseX > width/2) { 
        redValue -= 3;
        blueValue -= 3;
        greenValue -= 3;

    } if (mouseX < width/2) {
        redValue += 3;
        blueValue += 3;
        greenValue += 3;
    }

    // moon cycle
    if (mouseX <= 100) {
        newMoon(35, 290, 30, 30);
    } if (100 < mouseX & mouseX <= 200) {
        crescentMoon(115, 110, 30, 30);
    } if (200 < mouseX & mouseX <= 300) {
        gibbousMoon(190, 50, 30, 30);
    } if (300 < mouseX) {
        fullMoon(300, 50, 30, 30);
    }

    // triangular building
    stroke(164, 96, 175);
    strokeWeight(1);
    fill(119, 127, 199);
    fill(230, 209, 242);
    quad(95, 600, 220, 170, 390, 170, 390, 600);

    // triangle building windows
    // im sorry i couldnt use a forLoop for these as well -- whenever i tried, the program wouldnt load

    triangleWindow(triangleWindowX,triangleWindowY);
    triangleWindow(triangleWindowX - 5, triangleWindowY + 20);
    triangleWindow(triangleWindowX - 10, triangleWindowY + 40);
    triangleWindow(triangleWindowX - 15, triangleWindowY + 60);
    triangleWindow(triangleWindowX - 20, triangleWindowY + 80);
    triangleWindow(triangleWindowX - 25, triangleWindowY + 100);
    triangleWindow(triangleWindowX - 30, triangleWindowY + 120);
    triangleWindow(triangleWindowX - 35, triangleWindowY + 140);
    triangleWindow(triangleWindowX - 40, triangleWindowY + 160);
    triangleWindow(triangleWindowX - 45, triangleWindowY + 180);
    triangleWindow(triangleWindowX - 50, triangleWindowY + 200);
    triangleWindow(triangleWindowX - 55, triangleWindowY + 220);
    triangleWindow(triangleWindowX - 60, triangleWindowY + 240);
    triangleWindow(triangleWindowX - 65, triangleWindowY + 260);

    // skyscraper
    fill(217, 196, 236);
    stroke(164, 96, 175);
    strokeWeight(1);

    rect(300, 100, 150, 500);
    rect(350, 45, 100, 55);
    triangle(350, 40, 450, 0, 530, 40);

    // skyscraper windows
    for(skyScraperX = 300; skyScraperX < 440; skyScraperX += 40) {
        for(skyScraperY = 100; skyScraperY < 650; skyScraperY +=40) {
            push(); 
            translate(20, 20);
            skyWindow();
            pop();
        }
    }

    // happymouth building
    stroke(164, 96, 175);
    strokeWeight(1);
    fill(204, 183, 229);
    rect(40, 430, 195, 170);
    rect(50, 380, 170, 40);

    textSize(25);
    fill(244, 244, 211);
    stroke(119, 127, 199);
    text("happyMouth()", 60, 405);

    // happymouth windows
    for(happyMouthX = 40; happyMouthX < 200; happyMouthX += 60) {
        for(happyMouthY = 420; happyMouthY < 600; happyMouthY += 30) {
            push(); 
            translate(15, 30);
            happyWindow();
            pop(); 
        }
    }

    // if mouse on happymouth sign, stars pulse AND crescent moon rotates
    if (dist(135, 390, mouseX, mouseY) < 30) {
        starrySky();
        starDiam += direction * speed;

        if (starDiam > 30) {
            direction = -direction;
            starDiam = 30;

        } if (starDiam < 0) {
            direction = -direction;
            starDiam = 0;  
        } 

    } else starrySky();

    // rooftop building
    fill(177, 156, 216);
    stroke(64, 96, 175);
    quad(185, 550, 270, 420, 430, 420, 410, 550);
    fill(190, 169, 223);
    rect(185, 550, 225, 50);
    quad(410, 600, 410, 550, 430, 420, 430, 600);

    // cat perch and cat
    fill(117, 80, 166);
    rect(0, 180, 150, 60);

    cat(130, 120, 10, 10)
    triangle(43, 69, 39, 78, 45, 78);
    triangle(74, 82, 64, 84, 72, 93);

    push();
    rotate(radians(catAngle*catDirection));
    push();
    scale(0.7);
    rotate(radians(-20));
    catTail(-50, 250, catAngle*catDirection); 
    pop();
    pop();

    // cat tail animation
    if (dist(60, 50, mouseX, mouseY) < 50) { 
        push();
        rotate(radians(catAngle*catDirection));
        push();
        scale(0.7);
        rotate(radians(-20));
        catTail(-50, 250, catAngle*catDirection); 
        pop();
        pop();
    
        catAngle -= 1;
        if (catAngle < -10) {
            catAngle = -10;
        }

        } if (dist(40, 120, mouseX, mouseY) < 50) {
            catAngle += 1;
            if (catAngle > 10){
                catAngle = 10;
            }
   
        }
    }

// my catalogue of functions 

function cat(x, y, w, h) { 
    fill(50);
    noStroke();
    ellipse(x/2, y/2, 50, 50);
    ellipse(x/2 + 17, y/2 + 5, 25, 28);
    ellipse(x/2 - 20, y/2 + 65, 70, 100);
    arc(x/2 - 20, y/2 + 120, 90, 70, radians(180), radians(0));

    triangle(x/2 + 5, y/2 - 15, x/2 + 20, y/2 - 15, x/2 + 13, y/2 - 35);
    triangle(x/2 - 5, y/2 - 15, x/2 - 20, y/2 - 15, x/2 - 13, y/2 - 35);

    bezier(x/2 - 20, y/2 + 5, x/2 - 30, y/2 + 30, x/2 - 30, y/2 + 20, x/2 - 40, y/2 + 25);
    bezier(x/2 + 10, y/2 + 20, x/2 + 5, y/2 + 30, x/2 + 5, y/2 + 40, x/2 + 13, y/2 + 55);
}

function catTail(x, y, catAngle) {
    noStroke();
    beginShape();
    curveVertex(x, y);
    curveVertex(x, y);
    curveVertex(x - 5, y + 40);
    curveVertex(x + 20, y + 100);
    curveVertex(x + 80, y + 140);
    curveVertex(x + 150, y + 150);
    curveVertex(x + 160, y + 140);
    curveVertex(x + 145, y + 120);
    curveVertex(x + 70, y + 100);
    curveVertex(x + 40, y + 50)
    curveVertex(x + 30, y);
    curveVertex(x + 30, y);
    endShape();
}

function triangleWindow(triangleWindowX, triangleWindowY) {
    fill(244, 244, 211);
    quad(triangleWindowX, triangleWindowY, triangleWindowX -5, triangleWindowY + 15, triangleWindowX + 200, triangleWindowY + 15, triangleWindowX + 200, triangleWindowY);
}

function happyWindow() {
    rect(happyMouthX, happyMouthY, 50, 15);
}

function skyWindow() {
    fill(244, 244, 211);
    rect(skyScraperX, skyScraperY, 20, 20);
} 

function newMoon(newX, newY, w, h) {
    outline = 55;
    inline = 50;

    stroke(255);
    fill(redValue, greenValue, blueValue);
    ellipse(newX, newY, outline, outline);
    ellipse(newX, newY, inline, inline);
}
   
function crescentMoon(crescentX, crescentY, w, h) {
    outline = 55;
    inline = 50;

    fill(255);
    ellipse(crescentX, crescentY, inline, inline);
    fill(redValue, greenValue, blueValue);
    noStroke();
    rect(115, 80, outline/2, outline)
    stroke(255);
    noFill();
    ellipse(crescentX, crescentY, outline, outline);
    fill(redValue, greenValue, blueValue);
    noStroke();
    ellipse(crescentX, crescentY, inline/2, inline);
}
   
function gibbousMoon(gibbousX, gibbousY, w, h) {
    outline = 55;
    inline = 50;

    noStroke();
    fill(255);
    ellipse(gibbousX, gibbousY, inline, inline);
    fill(redValue, greenValue, blueValue);
    noStroke();
    fill(redValue, greenValue, blueValue);
    rect(190, 24, outline/2, outline);
    stroke(255);
    noFill();//Outline
    ellipse(gibbousX, gibbousY, outline, outline);
    fill(255)
    arc(gibbousX, gibbousY, inline/2, inline, PI/2, -PI/2);
}

function fullMoon (fullX, fullY, w, h) {
    outline = 55;
    inline = 50;

    noFill();
    stroke(255);
    ellipse(fullX, fullY, outline, outline);
    fill(255);
    ellipse(fullX, fullY, inline, inline);
}

function starrySky() {
    noStroke();
    fill(253, 253, 150);

    circle(140, 30, starDiam/5);
    circle(275, 136, starDiam/7);
    circle(61, 303, starDiam/4);
    circle(167, 38, starDiam/6);
    circle(10, 34, starDiam/7);
    circle(163, 147, starDiam/3);
    circle(292, 121, starDiam/8);
    circle(154, 328, starDiam/5);
    circle(360, 15, starDiam/2);
    circle(19, 386, starDiam/6);
}


// ALL moon functions were made by brantschen at https://editor.p5js.org/brantschen/sketches/bGH-klhrY
// cat mechanics inspired by jiatong li

anabelle’s blog 03

Some works that have always stunned me are by the fashion designer Iris van Herpen. Her designs uniquely merge nature and technology by using 3D printed fabrics to reproduce patterns and parametric structures from the natural world. I have always thought her works were the representatives for fashion as an artform. Anecdotally, you’d think that 3D printed fabrics would be stiff and lackluster, but her pieces capture motion with incredible fluidity, thus proving her mastery of design and knowledge of nature. I imagine the algorithms contain something similar to the forLoops that we’ve discussed in this course — there are a lot of repetitive shapes with slight transformations to build a grand, cohesive piece. My personal favorite collection that she’s done is “Syntopia.” There’s something so ethereal, futuristic, but organic about it. Generally, I don’t keep up with the fashion scene, but her works have never failed to impress me.

link to Syntopia: https://www.irisvanherpen.com/collections/ludi-naturae

anabelle’s project 02

My project is based on a video game I like called “Omori.” Click on the upper left corner to control eyes, upper right to control eyebrows, lower left for accessories, and lower right for mouths. Click on the purple button to get a completely randomized face. @.@

sketch
// kayla anabelle lee <3
// section c
// kaylalee

let radiusHead = 125;
let shoulderWidth = 175;

let counterEye = 0;
let counterBrow = 0;
let counterMouth = 0;
let counterExtra = 0;


function happyMouth(x, y, w, h, color) {
    var r = (w / 8);

    //rectangle
    fill(50, 230);
    noStroke();
    rect(x-w/2+r, y-r, w-2*r, r);

    // bottom arc
    arc(x, y, w, h, 0, radians(180));

    // right quarter circle
    arc((x-(w/2)+r), y, 2*r, 2*r, radians(180), radians(270));

    // left quarter circle
    arc(x+(w/2)-r, y, 2*r, 2*r, radians(270), 0);
    line(x-(w/2)+r, y-r, x+(w/2)-r, y-r); 
}

function curvyStar(x, y, r) {
    noStroke();
    push();
    translate(x, y);
    angleMode(DEGREES);
    beginShape();
    for(var i = -90; i < 0; i += 1) {
        vertex( r*cos(i), 
                -r*sin(i) );
    } for(var i = 0; i < 90; i += 1) {
        vertex(r*cos(i), 
               2*r - r*sin(i));
    } for (var i = 90; i < 180; i += 1) {
        vertex(2*r + r*cos(i),
               2*r - r*sin(i));   
    } for(var i = 180; i < 270; i += 1) {
        vertex(2*r + r*cos(i), 
               0 - r*sin(i));
    } endShape();
    pop();

    angleMode(RADIANS);
}

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

function draw() {
    background(230);
    stroke(50, 255);
    strokeWeight(1);
    noFill();

    // head
    stroke(50, 230);
    strokeWeight(5);
    noFill();

    beginShape();
    curveVertex(width/2 - radiusHead, height/2 - 100);
    curveVertex(width/2 - radiusHead, height/2 - 100);
    curveVertex(width/2 - 100, height/2 + 20);
    curveVertex(width/2, height/2 + 80);
    curveVertex(width/2 + 100, height/2 + 20);
    curveVertex(width/2 + radiusHead, height/2 - 100);
    curveVertex(width/2 + radiusHead, height/2 - 100);
    endShape();

    // ears
    arc(width/2 - radiusHead, height/2 - 40, 50, 50, radians(60), radians(290));
    arc(width/2 + radiusHead, height/2 - 40, 50, 50, radians(250), radians(110));

    // neck and shoulders
    beginShape(); //left side
    curveVertex(width/2 - 35, height/2 + 75);
    curveVertex(width/2 - 35, height/2 + 75);
    curveVertex(width/2 - 35, height/2 + 150);
    curveVertex(width/2 - 85, height/2 + 175);
    curveVertex(width/2 - shoulderWidth, height/2 + 180);
    curveVertex(width/2 - shoulderWidth, height/2 + 180);
    endShape();  

    beginShape();
    curveVertex(width/2 - shoulderWidth, height/2 + 180);
    curveVertex(width/2 - shoulderWidth, height/2 + 180);
    curveVertex(width/2 - 210, height/2 + 200);
    curveVertex(width/2 - 225, height/2 + 250);
    curveVertex(width/2 - 230, height/2 + 350);     
    curveVertex(width/2 - 230, height/2 + 350); 
    endShape();   

    beginShape(); //right side
    curveVertex(width/2 + 35, height/2 + 75);
    curveVertex(width/2 + 35, height/2 + 75);
    curveVertex(width/2 + 35, height/2 + 150);
    curveVertex(width/2 + 85, height/2 + 175);
    curveVertex(width/2 + shoulderWidth, height/2 + 180);
    curveVertex(width/2 + shoulderWidth, height/2 + 180);
    endShape();

    beginShape();
    curveVertex(width/2 + shoulderWidth, height/2 + 180);
    curveVertex(width/2 + shoulderWidth, height/2 + 180);
    curveVertex(width/2 + 210, height/2 + 200);
    curveVertex(width/2 + 225, height/2 + 250);
    curveVertex(width/2 + 230, height/2 + 350);     
    curveVertex(width/2 + 230, height/2 + 350); 
    endShape();   

    //hair
    fill(50, 240);
    arc(width/2+90, height/2-140, 150, 200, radians(250), radians(70), OPEN);
    arc(width/2-20, height/2-95, 300, 310, radians(150), radians(300), OPEN);
    noStroke();
    triangle(300, 88, 140, 249, 318, 135);
    quad(318, 134, 350, 203, 268, 217, 266, 167);
    quad(212, 201, 207, 236, 270, 210, 266, 167);

    //bangs
    stroke(50, 230);
    beginShape();
    curveVertex(width/2-130, height/2-50);
    curveVertex(width/2-130, height/2-50);
    curveVertex(width/2-100, height/2-50);
    curveVertex(width/2-65, height/2-70);
    curveVertex(width/2-30, height/2-120);
    curveVertex(width/2-30, height/2-120);
    endShape();

    beginShape();
    curveVertex(width/2-30, height/2-120);
    curveVertex(width/2-30, height/2-120);
    curveVertex(width/2-30, height/2-100);
    curveVertex(width/2-40, height/2-75);
    curveVertex(width/2-60, height/2-55);
    curveVertex(width/2-60, height/2-55);
    endShape();

    beginShape();
    curveVertex(width/2-60, height/2-55);
    curveVertex(width/2-60, height/2-55);
    curveVertex(width/2-30, height/2-60);
    curveVertex(width/2-10, height/2-80);
    curveVertex(width/2+10, height/2-130);
    curveVertex(width/2+10, height/2-130);
    endShape();

    beginShape(); 
    curveVertex(width/2+10, height/2-130);
    curveVertex(width/2+10, height/2-130);
    curveVertex(width/2+10, height/2-100);
    curveVertex(width/2-10, height/2-60);
    curveVertex(width/2-25, height/2-45);
    curveVertex(width/2-25, height/2-45);
    endShape();

    beginShape();
    curveVertex(width/2-25, height/2-45);
    curveVertex(width/2-25, height/2-45);
    curveVertex(width/2+10, height/2-70);
    curveVertex(width/2+25, height/2-100);
    curveVertex(width/2+30, height/2-130);
    curveVertex(width/2+30, height/2-130);
    endShape();

    arc(width/2+125, height/2-120, 200, 150, radians(90), radians(170));

    // tank top
    noFill();
    line(width/2-150, height/2+180, width/2-150, height/2+350);
    line(width/2+150, height/2+180, width/2+150, height/2+350);
    arc(width/2, height/2+180, 200, 180, radians(0), radians(180));

    // collarbones
    strokeWeight(2);
    bezier(width/2-20, height/2+220, width/2-70, height/2+190, width/2-70, height/2+200, width/2-85, height/2+200);
    bezier(width/2+20, height/2+220, width/2+70, height/2+190, width/2+70, height/2+200, width/2+85, height/2+200);

    // nose
    line(width/2-1, height/2-1, width/2+1, height/2+1);

    //this section is to control eye-type from the first quadrant
    if (counterEye == 1) {
        fill(50, 230);
        circle(width/2 - 65, height/2 - 50, 35);
        circle(width/2 + 65, height/2 - 50, 35);

        strokeWeight(8);
        noFill();
        arc(width/2 - 65, height/2 - 15, 175, 105, radians(240), radians(300));
        arc(width/2 + 65, height/2 - 15, 175, 105, radians(240), radians(300));

    } if (counterEye == 2) {
        strokeWeight(4);
        fill(50, 230);
        circle(width/2 - 65, height/2 - 50, 35);
        circle(width/2 + 65, height/2 - 50, 35);

        fill(253, 253, 150, 200);
        curvyStar(165, 258, 10);
        curvyStar(295, 258, 10);

        noFill();
        strokeWeight(4);
        stroke(50, 230);
        bezier(width/2-100, height/2-55, width/2-90, height/2-70, width/2-65, height/2-85, width/2-50, height/2-70); 
        bezier(width/2+100, height/2-55, width/2+90, height/2-70, width/2+65, height/2-85, width/2+50, height/2-70);
   
    } if (counterEye == 3) {
        strokeWeight(4);
        noFill();
        bezier(width/2-100, height/2-63, width/2-90, height/2-65, width/2-65, height/2-65, width/2-45, height/2-65);
        arc(width/2 - 70, height/2 - 55, 50, 30, radians(10), radians(120));
        bezier(width/2+100, height/2-63, width/2+90, height/2-65, width/2+65, height/2-65, width/2+45, height/2-65);
        arc(width/2 + 70, height/2 - 55, 50, 30, radians(60), radians(170));

        arc(width/2 - 65, height/2 - 53, 30, 25, radians(120), radians(240));
        arc(width/2 - 60, height/2 - 55, 20, 20, radians(300), radians(60));
        arc(width/2 + 65, height/2 - 53, 30, 25, radians(240), radians(120));
        arc(width/2 + 60, height/2 - 55, 20, 20, radians(100), radians(220));

        strokeWeight(3);
        arc(width/2 - 65, height/2 - 50, 100, 50, radians(240), radians(300));
        arc(width/2 + 65, height/2 - 50, 100, 50, radians(240), radians(300));

        line(width/2 - 45, height/2 - 40, width/2 - 55, height/2 - 35);
        line(width/2 - 60, height/2 - 20, width/2 - 45, height/2 - 35);
        line(width/2 + 45, height/2 - 40, width/2 + 55, height/2 - 35);
        line(width/2 + 60, height/2 - 20, width/2 + 45, height/2 - 35);
    }

// this section is to control eyebrow type from quadrant 2
        noFill();
        strokeWeight(2);

        if (counterBrow == 1) {
            strokeWeight(3);
            arc(width/2 - 65, height/2 - 75, 80, 30, radians(210), radians(330));
            arc(width/2 + 65, height/2 - 75, 80, 30, radians(210), radians(330));

        } if (counterBrow == 2) {
            bezier(width/2-95, height/2-80, width/2-80, height/2-80, width/2-50, height/2-80, width/2-20, height/2-95);
            bezier(width/2+95, height/2-80, width/2+80, height/2-80, width/2+50, height/2-80, width/2+20, height/2-95);

        } if (counterBrow == 3) {
            line(width/2-80, height/2-100, width/2-30, height/2-80);
            line(width/2+80, height/2-100, width/2+30, height/2-80);    
        }

// this section is to control mouth type from quadrant 3
    noFill();
    strokeWeight(3);

    if (counterMouth == 1) {
        strokeWeight(2);
        arc(width/2, height/2 + 40, 40, 20, radians(210), radians(330));
    } if (counterMouth == 2) {
        bezier(width/2 - 20, height/2 + 25, width/2, height/2 + 40, width/2, height/2 + 40, width/2 + 20, height/2 + 25);
    } if (counterMouth == 3) {
        noStroke();
        happyMouth(width/2, height/2 + 20, 80, 60, 100); 
    }

// this section is to control accessories from quadrant 4

    if (counterExtra == 1) {
        fill(50, 255);
        noStroke();

        beginShape(); 
        curveVertex(width/2 - radiusHead, height/2 - 100);
        curveVertex(width/2 - radiusHead, height/2 - 100);
        curveVertex(width/2 - 115, height/2 - 50);
        curveVertex(width/2 - 100, height/2 + 10);
        curveVertex(width/2, height/2 - 20);
        curveVertex(width/2 + 100, height/2 + 10);
        curveVertex(width/2 + 115, height/2 - 50);
        curveVertex(width/2 + radiusHead, height/2 - 100);    
        curveVertex(width/2 + radiusHead, height/2 - 100); 
        endShape(); 

    } if (counterExtra == 2) {
        strokeWeight(2);
        line(width/2 - 70, height/2 - 10, width/2 - 60, height/2 - 20); 
        line(width/2 - 90, height/2 - 12, width/2 - 85, height/2 - 20);
        line(width/2 - 50, height/2 - 12, width/2 - 40, height/2 - 20);
        line(width/2 + 70, height/2 - 10, width/2 + 80, height/2 - 20); 
        line(width/2 + 90, height/2 - 12, width/2 + 95, height/2 - 20);
        line(width/2 + 50, height/2 - 12, width/2 + 60, height/2 - 20);
    }

    if (counterExtra == 3) {
        fill(50, 230);
        strokeWeight(3);
        arc(width/2+15, height/2-250, 100, 100, radians(240), radians(30), CHORD);
    }

// this section is to make a randomized button for all features
    fill(176, 156, 217);
    noStroke();
    circle(50, 50, 75);
}

function mousePressed() {
    if (mouseX < width/2 & mouseY < height/2) {
        if (counterEye < 3) {
            counterEye += 1;
        } else {
            counterEye = 1;
        } 
    }  

    if (mouseX > width/2 & mouseY < width/2) {
        if (counterBrow < 3) {
            counterBrow += 1;
        } else {
            counterBrow = 1;
        }
    }

    if (mouseX > width/2 & mouseY > height/2) {
        if(counterMouth < 3) {
            counterMouth += 1;
        } else {
            counterMouth = 1;
        }
    }

    if (mouseX < width/2 & mouseY > height/2) {
        if(counterExtra < 3) {
            counterExtra += 1;
        } else {
            counterExtra = 1;
        }
    }

    if (25 < mouseX & mouseX < 125 && 25 < mouseY && mouseY < 125) {
        counterEye = round(random(1,3));
        print(counterEye);

        counterBrow = round(random(1,3));
        counterMouth = round(random(1,3));
        counterExtra = round(random(1,3));



    }
}

anabelle’s blog 02

Although I think I’m defining “generative art” a little loosely, some inspiring works to me include any type of character customization feature in video games. This goes ranges from dress-up games, Nintendo Mii creation, or the Sims. I admire how these games allow the players to have more freedom in how they approach gameplay — some may focus entirely on aesthetics, and thus spend hours creating the perfect avatar, whereas some focus on the game’s actual main goals and minimize on character building. Either way, customization always serves as an enjoyable interlude between long bouts of repetitive gameplay. I think the creator’s artistic sensibilities manifest in the algorithm by how it reveals their style and “instincts. For example, if a creator has to create 100 different options for “eyes,” their habits and preferences will eventually become pretty obvious once the reach the 90th eye design. Similarly, you can feel how they prefer to build their worlds — do they prefer to use arcs or ellipses? How do they approach drawing small, ambiguous details with code? Ultimately, even though the purpose of these games is to give the player a larger creative realm, the artist most definitely imprints their own style in every part of them.

Even Genshin Impact, a game that has nothing to do with building your own characters, has options (albeit limited ones) for customization:

Link to Official Website: https://genshin.hoyoverse.com/en/home

Created and released by Hoyoverse, 2020.

anabelle’s project 01

this is my project

sketch
// anabelle lee < 3
// section c

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

function draw() {
    //pink heart side
    background(255);

    if ((mouseX < 400 & mouseY > 300) ||
        (mouseX < 400 && mouseY < 300) ||
        (mouseX > 400 && mouseY < 300)) {
        
        // pink background
        fill(235, 192, 194);
        square(50, 50, 500);
        
        // back hair
        stroke(254, 206, 138, 100);
        strokeWeight(5);
        fill(121, 97, 75); 
        rect(100, 250, 400, 220); 

        // face
        noStroke();
        fill(255, 238, 222);
        circle(300, 300, 300);

        // neck
        rect(260, 400, 80, 150);

        // ears
        circle(160, 300, 70);
        circle(440, 300, 70);

        // side bangs
        stroke(254, 206, 138, 100);
        strokeWeight(5);
        fill(121, 97, 75);
        triangle(160, 250, 140, 400, 180, 400)
        triangle(440, 250, 420, 400, 460, 400)

        // top hair
        stroke(254, 206, 138, 100);
        fill(121, 97, 75);
        arc(300, 390, 450, 600, (7*PI/6), (11*PI/6), CHORD);

        // forehead
        noStroke()
        fill(255, 238, 222);
        triangle(300, 164, 245, 280, 360, 280);

        // front bangs
        stroke(254, 206, 138, 100);
        fill(121, 97, 75);
        arc(100, 150, 400, 400, 0, HALF_PI, CHORD);
        arc(527, 25, 500, 650, (PI + 3*PI / 2), (5*PI / 6), CHORD);

        // eyes
        stroke(92, 64, 51); 
        strokeWeight(5);
        noFill()
        arc(370, 320, 80, 45, radians(200), 0)
        arc(230, 320, 80, 45, radians(185), radians(340))

        // mouth
        happyMouth(300, 370, 120, 90);

        // cheeks
        fill(171, 95, 97);
        circle(200, 350, 25);
        circle(220, 350, 25);
        triangle(187, 354, 233, 354, 210, 380);

        circle(385, 350, 25);
        circle(405, 350, 25);
        triangle(372, 354, 418, 354, 395, 380);

        // shoulders
        fill(231, 208, 208);
        ellipse(300, 650, 420, 300);

        // heart follows mouse
        noStroke()
        fill(231, 84, 128);
        circle(mouseX - 12, mouseY, 30);
        circle(mouseX + 12, mouseY, 30);
        triangle(mouseX - 28, mouseY - 2, mouseX + 28, mouseY - 2, mouseX, mouseY + 45);

    // gray scale side
    } else {
        background(0);
        fill(150);
        square(400, 400, 50);

        //shoulders
        fill(20);
        rect(408, 440, 36, 10);

        //back hair
        fill(100); 
        stroke(80);
        rect(410, 420, 30, 20);

        // face
        fill(200);
        noStroke();
        circle(425, 425, 20); 

        //neck
        fill(200);  
        rect(423, 420, 5, 20);

        //ears
        circle(415, 425, 5);
        circle(435, 425, 5);

        //side hair
        fill(100);
        stroke(80);
        strokeWeight(1);
        triangle(415, 420, 412, 435, 418, 435);
        triangle(435, 420, 432, 435, 438, 435);

        //top hair
        arc(425, 433, 40, 50, (7*PI/6), (11*PI/6), CHORD);

        // front bangs
        arc(410, 410, 25, 35, 0, HALF_PI, CHORD);
        arc(440, 405, 30, 40, (PI + 3*PI / 2), (5*PI / 6), CHORD);

        // spotlight
        noStroke()
        fill(255, 150);
        circle(mouseX, mouseY, 200); 

    }
}

function happyMouth(x, y, w, h, color) {
    var r = (w / 8);

    //rectangle
    fill(255, 183, 210, 150);
    noStroke();
    rect(x-w/2+r, y-r, w-2*r, r);

    // bottom arc
    arc(x, y, w, h, 0, radians(180));

    // right quarter circle
    arc((x-(w/2)+r), y, 2*r, 2*r, radians(180), radians(270));

    // left quarter circle
    arc(x+(w/2)-r, y, 2*r, 2*r, radians(270), 0);
    line(x-(w/2)+r, y-r, x+(w/2)-r, y-r); 

}

anabelle’s blog 01

An interactive computational project I love is Genshin Impact, an open-world RPG game created with Unity Engine. I’ve never played a game before that is as immersive as this one. Not only does the player feel submerged in its universe because of its compelling storytelling, but the graphics, visual details, and small homages scattered all over the world give it life. Although some may disagree, I’d say Hoyoverse, its developing company, was inspired by Nintendo’s Breath of the Wild that features similar gameplay. One unique aspect about it is that it is an online game (although not necessarily MMORPG). This prevents players from accessing certain program files that may contain story leaks and still-developing content. I also cannot wrap my head around the fact that this massive (200GB), beautiful world is able to exist in the “cloud.” I’m not tech-savvy so I don’t know if this is better than not having online servers, but it has always impressed me nonetheless. To me, it gives the impression that future video games don’t have to be restricted by hardware and may one day exist entirely through software (I’m not a game developer… I don’t know if this sounds accurate at all).

Official Website: https://genshin.hoyoverse.com/en/home