Michael – [OLD SEMESTER] 15-104 • Introduction to Computing for Creative Practice https://courses.ideate.cmu.edu/15-104/f2022 Professor Tom Cortina • Fall 2022 • Introduction to Computing for Creative Practice Sat, 19 Nov 2022 15:55:23 +0000 en-US hourly 1 https://wordpress.org/?v=6.0.8 Looking Outward 11 https://courses.ideate.cmu.edu/15-104/f2022/2022/11/19/looking-outward-11-2/ https://courses.ideate.cmu.edu/15-104/f2022/2022/11/19/looking-outward-11-2/#respond Sat, 19 Nov 2022 15:54:38 +0000 https://courses.ideate.cmu.edu/15-104/f2022/?p=75826 Continue reading "Looking Outward 11"]]>

link: https://ars.electronica.art/aeblog/en/2020/04/10/women-in-media-arts-ai/

I look into the article “Women in Media Arts: Does AI think like a (white) man?”, where the author discusses the inherent discrimination in artificial intelligence due to the predominantly white male society. This is due to the fact that “the AI is only as good …  as the data it feeds.” Thus if the internet is still populated by artwork from white males or drawn from a white male perspective, this inherent bias will forever exist in the AI’s algorithm.

This statement has been exemplified by an AI face recognition software, where the error rate is significantly high among women of color, displaying this inherent prejudice in the AI’s database. AI teams that lack diversity in gender and race would most definitely produce software that lacks a bigger perspective, and thus bares bias that favors white males.

The article has given examples of efforts to counteract this bias, such as the feminist data set, an ongoing multi-year project that collects feminist data such as artworks, essays, interviews, and books on feminism or from that a feminist’s perspective. This data set would help push diversity in the AI algorithm and broadens the perspective of the AI’s database.

]]>
https://courses.ideate.cmu.edu/15-104/f2022/2022/11/19/looking-outward-11-2/feed/ 0
LookingOutward 09 https://courses.ideate.cmu.edu/15-104/f2022/2022/11/05/lookingoutward-09/ https://courses.ideate.cmu.edu/15-104/f2022/2022/11/05/lookingoutward-09/#respond Sat, 05 Nov 2022 18:15:32 +0000 https://courses.ideate.cmu.edu/15-104/f2022/?p=75102 Continue reading "LookingOutward 09"]]>

Heather’s Website: https://www.perfectplum.com/

Game Design: https://www.perfectplum.com/portfolio_category/gamedesign/

For this week I looked at the game developed by Heather Kelly. Specifically, I looked into her project SUPERHYPERCUBE, a VR first-person puzzler where the player controls a group of cubes to fit through holes in the wall, and the game increases in difficulty by increasing the block complexity. I really the game’s aesthetics, where the games take inspiration from retro arcade gaming aesthetics and transform them into 3D space. The animation of passing through the holes and rotation also feels dynamic and matches the aesthetics of the entire game.

Heather Kelly is an associate teaching professor at ETC CMU, where her work mainly focuses on underexplored aesthetic experiences and sensory interactions. She is the co-founder of kokoromi, where her works focus on experimental game collection. Throughout her career, she has worked on a broad variety of topics in the game industry, including AAA console games, smart toys, and web communities for girls.

Throughout her career, she has also produced many sex-inspired sensory designs, such as the game concept “Our first time”, “Lapis”, the game concept based on female orgasm, and her newest mobile application “OhMiBod”, an application controlling the OhMiBod brand vibrator.

]]>
https://courses.ideate.cmu.edu/15-104/f2022/2022/11/05/lookingoutward-09/feed/ 0
LookingOutward-08 Adam Harvey https://courses.ideate.cmu.edu/15-104/f2022/2022/10/28/lookingoutward-08-adam-harvey/ https://courses.ideate.cmu.edu/15-104/f2022/2022/10/28/lookingoutward-08-adam-harvey/#respond Fri, 28 Oct 2022 21:35:11 +0000 https://courses.ideate.cmu.edu/15-104/f2022/?p=74821 Continue reading "LookingOutward-08 Adam Harvey"]]>

Link to his Website (MegaPixel): https://ahprojects.com/megapixels-glassroom/
Link to his Lecture: https://vimeo.com/354276111?embedded=false&source=video_title&owner=8053320

I investigated the lecture by Adam Harvey, an American artist based in Germany.
His research focuses on computer vision, privacy, and surveillance
technologies. After finishing his Bachelor of Mechanical Engineering at Penn
State, Harvey then pursued a master’s in interactive telecommunications at NYU.

Adam Harvey’s current works include MegaPixel, a facial recognition software
that compares the user’s facial qualities with a database and returns a face
from the database that has the highest similarities. This project mainly
creates awareness of the normalization of databasing people’s faces without
regulation. In many of his other works, such as DFACE, a face

recognition algorithm that redacts faces in images to protect the privacy of
protestors and other individuals. This is especially important in the fast
digitalization society, with more and more algorithms that detect faces and
uploads them to further databases like MegaPixel, it would be crucial for
researchers like Adam Harvey to create apps that help protect people’s privacies.

Harvey’s strategy in his speech is in a continuous fashion, where he starts with
the previous project, explains details that lead to his current assignment, and
then starts giving an overview of his current projects. This gives the
audience a complete understanding of the process that led to the conclusion. He
also does a good job of simplifying the concept of his projects, making
it, making it easier for the audience to understand the final concept.

]]>
https://courses.ideate.cmu.edu/15-104/f2022/2022/10/28/lookingoutward-08-adam-harvey/feed/ 0
Project 7 Curves https://courses.ideate.cmu.edu/15-104/f2022/2022/10/20/project-7-curves-4/ https://courses.ideate.cmu.edu/15-104/f2022/2022/10/20/project-7-curves-4/#respond Thu, 20 Oct 2022 19:45:52 +0000 https://courses.ideate.cmu.edu/15-104/f2022/?p=74705 Continue reading "Project 7 Curves"]]>

This is my project: the left and right mouse movements change the number of curves and the up and down spins the objects. Clicking the mouse changes the type of circle on the outside of the rose curve.

sketch
//Michael Li
//Section C 

//set variables for points
var points = 100;
//set variable for state machine
var type = 0


function setup() {
    createCanvas(400, 400);
    frameRate(25)
}


function draw() {
    background(50);
    //add text
    text("Click to change shape", 20, 30)
    //move to the center of the canvas
    translate(width/2,  height/2)
    
    //to change the shapes between spiral and flower
    if (type == 0){
    spiral() //spiral function
    } else if(type == 1){
        //repeat the function for flower
        for(var i = 0; i <5; i++){
            //different state
            drawEpitrochoid(i) 
        }
    } 
    //draw center flower
    drawRoseCurve();


}

function drawRoseCurve() {
    // RoseCurve
    //constrain the mouse within the canvas
    var conMX = (constrain(mouseX, 0, width))
    var conMY = (constrain(mouseY, 0, width))
    //map the height of the rosecurve
    var h = map(conMY, 0, width, width*1/5, width*2/5)

    var x;
    var y;
    //map the color to the mouse movement
    var mapColorX = map(mouseX, 0, width, 100, 255)
    var mapColorY = map(mouseY, 0, width, 100, 255)
    //the color of the rosecurve changes depending on the outer elements
    if(type == 0){
        //blue and orange
        var c = color(mapColorX, mapColorX/2+mapColorY/2, mapColorY)
    } else if (type == 1){
        //green and purple
        var c = color(mapColorX/2+mapColorY/2, mapColorY, mapColorX)
    }
    var r; 
    //have the variable n only store odd numbers for better rose curve
    var n = printOdd(int(map(conMX, 0, width, 3, 20)))
    
    noFill()
    strokeWeight(1)
    stroke(255)
    circle(0, 0, h*2)
    fill(c)
    stroke(c);
    //draw rose curve
    beginShape();
        for (var i = 0; i < points; i++) {
            var theta = map(i, 0, points, 0, PI);
        
            r = h*cos(theta*n)
            x = r*cos(theta+conMY)
            y = r*sin(theta+conMY)
            curveVertex(x, y);

        }
    endShape(CLOSE)
}

//draw spiral
function spiral(){
    //constrain mouse within the canvas
    var conMY = (constrain(mouseY, 0, width))
    //map value to mouseY
    var a = map(conMY, 0, width, width*1/5, width*2/5)
    
    var x;
    var y;
    var r;

    noFill()
    push()
    beginShape()
    //map number of points to mouse Y
    //spiral grows as mouseY moves
    var mapYPoints = map(mouseY, 0, height, 25, 100)
        //draw spiral
        for (var u = 0; u < mapYPoints; u++) {
            //theta depend on mouse Y
            //spiral spins
            var theta = map(u, 0, mapYPoints/10, 0, TWO_PI);
            //circle size depend on mouseY
            var mapSize = map(u, 0, mapYPoints, 40, 10)
            r = ((theta)**(1/2))*a/4
            x = r*cos(theta+10)
            y = r*sin(theta+10)

            curveVertex(x, y)
            stroke(255-u*4)
            fill(255-u*4)
            //draw circles on the spiral
            circle (x, y, mapSize/2)
            stroke(200)
            noFill()
        }
    endShape()
}
//draww epitrochoid
function drawEpitrochoid(rot){
    push()
    //constrain mouseX and mouseY
    var conMX = (constrain(mouseX, 0, width))
    var conMY = (constrain(mouseY, 0, width))
    var a = map(conMY, 0, width, width*1/5, width*2/5)
    var b = constrain(a / int(conMX / 30), 0, 20)
print(a)
    var x;
    var y;

    //rotates the shape each loop
    rotate(rot+conMY/10)
    noFill()
    stroke(200)
    push()
    beginShape()
    //fill the shape with lower opacity to create layering effect
    fill(200, 200, 200, 50)
    var mapYPoints = map(mouseY, 0, height, 0, 25)
    //draw epitrochoid
        for (var u = 0; u < 100; u++) {
            var theta = map(u, 0, 100, 0, TWO_PI);

            x = rot/2*(a+b)*cos(theta)-b*cos(((a+b)/b)*theta);
            y = rot/2*(a+b)*sin(theta)-b*sin(((a+b)/b)*theta);
            curveVertex(x, y)

            
        }
    endShape(CLOSE)
    pop()
}
//only store odd numbers in a variable
function printOdd(x){

    if(x%2 == 0){
        return x-1
    } else{
        return x
    }
}
//swtich the type when mouse pressed

function mousePressed() {
    type += 1
    if(type > 1){
        type = 0
    }
}
]]>
https://courses.ideate.cmu.edu/15-104/f2022/2022/10/20/project-7-curves-4/feed/ 0
LookingOutward 07 https://courses.ideate.cmu.edu/15-104/f2022/2022/10/16/lookingoutward-07/ https://courses.ideate.cmu.edu/15-104/f2022/2022/10/16/lookingoutward-07/#respond Sun, 16 Oct 2022 21:32:24 +0000 https://courses.ideate.cmu.edu/15-104/f2022/?p=74656 Continue reading "LookingOutward 07"]]>

Link: https://www.bewitched.com/song.html

\I’ve investigated the data visualization software, Shape of Music, created by Martinez Wattenberg. The software detects rhythm similarities in a piece of lyrics and diagrams similar parts by creating a connection with half discs.

What I really admire about this program is the brand-new way of representing musical rhythms, where instead of noting musical notes through sheet music, the program diagrams patterns. This helps visualize patterns in music, where instead of looking through sheet music to find a similar rhythm in a song, one can look at the connections through the lines, and see what parts of the song are most frequently repeated.

The software is entirely written in java and uses MIDI files to analyze the rhythm, where, unlike other common file types, a MIDI file contains a description of the notes which makes the analysis of the letters much more amendable. The MIDI files can also be separated into different tracks and analyzed separately. The algorithm I suppose is programmed to look for similar patterns in a range of note descriptions and create a connection through an arc diagram as a connection to map the similarities.

It is obvious that the author is keen on simplicities in diagraming, and he has also said on his website that he has taken inspiration from other arc diagrams, which is a simple yet effective form of diagraming to communicate information.

]]>
https://courses.ideate.cmu.edu/15-104/f2022/2022/10/16/lookingoutward-07/feed/ 0
LookingOutwork 6 Randomness https://courses.ideate.cmu.edu/15-104/f2022/2022/10/10/lookingoutwork-6-randomness/ https://courses.ideate.cmu.edu/15-104/f2022/2022/10/10/lookingoutwork-6-randomness/#respond Mon, 10 Oct 2022 13:32:35 +0000 https://courses.ideate.cmu.edu/15-104/f2022/?p=74240 Continue reading "LookingOutwork 6 Randomness"]]>

Link: https://www.slam.org/collection/objects/27407/
The piece I want to focus on is Jackson pollock’s Number three. In this
painting, he “layered multiple strands of paint” to generate the painting
where the colors seem to be interwoven together. What I really admire by the
the piece is its apparent order despite the randomness in its creation, where
through the layering of the painting, the artist still creates this hierarchy
between the different colors of paint, demonstrating order in the chaos.

The randomness executed by the artist is a form of pseudo-randomness, where
although the pollock seems to layer on the paint randomly, he still created
the painting with an intention of not creating a focal point, thus if the
painting medium is in control of the artist, the randomness executed will
definitely, be influenced by the artist’s creative intentions.

Despite the apparent random qualities, you can still see the artistic
sensibilities of Jackson, where the painting still displays a sense of unity
with color. His artistic sensibilities are also demonstrated in the flow of
the paint, where the artist creates different thicknesses of paint lines and
curvature through how fast and how hard he pours the paint – which is another
demonstration of pseudo-randomness.

]]>
https://courses.ideate.cmu.edu/15-104/f2022/2022/10/10/lookingoutwork-6-randomness/feed/ 0
Project 6 Abstract Clock https://courses.ideate.cmu.edu/15-104/f2022/2022/10/10/project-6-abstract-clock-5/ https://courses.ideate.cmu.edu/15-104/f2022/2022/10/10/project-6-abstract-clock-5/#respond Mon, 10 Oct 2022 13:30:28 +0000 https://courses.ideate.cmu.edu/15-104/f2022/?p=74238 Continue reading "Project 6 Abstract Clock"]]>

This is my abstract clock: The candles’ fire represents the passing of each second, the height of the candle represents the hour of the day and the sheets of paper represent the minutes remaining in the hour.

sketch
//Michael Li
//Section C 

function setup() {
    createCanvas(480, 480);
    background(220);
    text("p5.js vers 0.9.0 test.", 10, 15);
    background (220)

    
}
    //write object for candle dimensions
    var candle = {xPos: 130, yPos: 120, w: 50,  h: 280}
    //establish variables for the timer
    var timerS;
    var timerM; 
    var timerH;
    //Pen x position
    var penX = 370;
    //pen movement indedx
    var moveP = 0.3;

function draw() {
    background(62, 35, 16); //dark brown
    timerM = minute(); //assign minute function for variable
    //pages
    fill(76, 135, 74); //green book cover
    rect(190, 420, 230, 20); //draw bottom cover
    //alternate the page color between white and grey for distinction
    //use for loop to draw number of pages depending on the minute
    for (var i = 0; i<=60-timerM; i++){
        noStroke();
        if (i%2==0){
            fill(255);
        } else {
            fill(200);
        }
        //draw pages
        rect(190, 420-(3*i), 230, 3);

    }
    //draw pen function
    drawPen(penX, 235+3*timerM);
    //pen moves left and right
    penX +=moveP;
        //constrain pen in a range
        if (penX>= 380 || penX <= 350){
            moveP = -moveP;
        } 
    //draw the panel with the hour carvings
    drawBackPanel(80, 100);

    //draw the table
    fill(154, 121, 102);
    rect(0, height*9/10, width, height*9/10);

    //draw hour carvings behind the candle
    //for loop to draw the larger lines
    for (var i = 0; i <=12; i++){
        strokeWeight(3);
        stroke(161, 158, 75);
        line(100, 350.4-(9.6*2*i), 215, 350.4-(9.6*2*i));
    //drawing the shorter lines
    } for (var i = 0; i <=12; i++){
        strokeWeight(2);
        stroke(161, 158, 75);
        line(120, 360-(9.6*2*i), 195, 360-(9.6*2*i));
    }
    //drawing the body of the candle
    drawCandleB(candle.xPos, candle.yPos, candle.w, candle.h);
    //drawing the base of the candle
    drawBase(candle.xPos-10, 360);

    //assign hour to variable timerH
    timerH = hour();
    //map the hour to fit the candle length
    var hourMap = map(timerH/2, 0, 12, 240, 10);
    //candle length changes depending on the hour
    candle.yPos = 120 + 240 - hourMap;
    candle.h = hourMap + 30;

}
//function for drawing the candle's body
function drawCandleB (x, y, w, h){
    //establish remapped value for hour
    var hourMap = map(timerH/2, 0, 12, 240, 30);

    fill(250, 244, 192); //light yellow
    noStroke()
    rect(x, y, w, h); //candle  body
    //function for drawing the fire
    drawCandleFire(x, y, w, h);
    //function for drawing the wax dripping
    drawCanldeT(x, y, w);
    //function for drawing the halo of light
    drawLight(x, y, w, h, hourMap);

}
//function for drawing the wax
function drawCanldeT (x, y, w){
    //set lineweight
    strokeWeight(8);
    stroke(220, 213, 142); //darker yellow

    line(x+2, y, x+w-2, y);//horizontal line
    //two drips
    line(x+w*3/5, y, x+w*3/5, y+w/2); 
    line(x+w*4/5, y, x+w*4/5, y+w*3/4);
}
//function for drawing the fire
function drawCandleFire (x, y, w, h){
    //establish variable for the tip of the fire
    //fire positions
    var fTipy; 
    var fTipx;
    //variable for seconds for fire flicker
    timerS = second();
    //fire flickers each second
    if (timerS %2 == 0){
        fTipy = y-w*4/5;
        fTipx = x+w/2;
   
    } else {
        fTipy = y-w*4/5;
        fTipx = x+w/2 - 10;
    }
    noStroke();
    //draws the fire
        fill(246, 74, 22); //red
        ellipse(x+w/2, y-w/5, w/4, w/3);
        triangle(fTipx, fTipy, x+w*5/8, y-w/5, x+3*w/8, y-w/5);
    
}
//halo of light
function drawLight (x, y, w, h, hour){

    timerS = second();//establish the second variable
    //halo grows and shrinks each second
    if (timerS %2 == 0){
        hourMap = hour+10;
    } else {
        hourMap = hour-5;
    }

    noStroke();
    fill(249, 246, 152, 20);//yellow with light transparency
    ellipse(x+w/2, y-w*2/5, hourMap*2, hourMap*2); //draws light

}
//function drawing the back panel
function drawBackPanel (x, y){
    
    strokeWeight(9);
    stroke(225, 176, 104); // light brown
    //outer framing
    line(x, y, x, y+350);
    line(x+155, y, x+155, y+350);
    arc(x+77, y, x+75, y+55, PI, 0);

    //inner board
    noStroke();
    fill(186, 167, 135);

    ellipse(x+77, y, x+75, y+55);
    rect(x, y, x+75, y+250);
}
//candle base
function drawBase (x, y){
    fill(100); //grey
    //top and bottom qadralateral
    quad(x, y, x+70, y, x+60, y+20, x+10, y+20);
    quad(x+10, 420, x+60, y+60, x+70, y+73, x, y+73);
    //middle rectangle
    fill(150);
    rect(x+10, y+20, 50, 40);
}
//pen
function drawPen (x, y){
    push();
        translate(x, y); //move to the right
        rotate(radians(315)); //rotate for pen mvement
        noStroke();
        fill(200); //grey
        //draws pen
        rect(0, 0, 100, 5);
        fill(255); //white
        triangle(0, 0, 0, 5, -5, 2.5);
    pop();
}
]]>
https://courses.ideate.cmu.edu/15-104/f2022/2022/10/10/project-6-abstract-clock-5/feed/ 0
Project-05 Wall Paper https://courses.ideate.cmu.edu/15-104/f2022/2022/10/02/project-05-wall-paper/ https://courses.ideate.cmu.edu/15-104/f2022/2022/10/02/project-05-wall-paper/#respond Mon, 03 Oct 2022 02:28:30 +0000 https://courses.ideate.cmu.edu/15-104/f2022/?p=73710 Continue reading "Project-05 Wall Paper"]]>

I want to create textile patterns inspired by traditional Chinese symbols

sketch
//Michael Li
//Section C 
var radi = 30
function setup() {
    createCanvas(755, 630);
    background(220);
    text("p5.js vers 0.9.0 test.", 10, 15);
    background (220);

}

function draw() {
    background(30, 28, 27);

    var color = 0; //set variable color
    //create a line with the for loop
    for (var x = 0; x <= width+80; x += 4.2*radi){
        color += 1; // increment color by 1
            if (color % 2 == 1){ // test color 
                stroke(255, 204, 51); //bright yellow
            } else {
                stroke(182, 156, 129); //grey
            }
        //create a grid
        for(var y = 0; y<= height+80; y += 4.2*radi){
            color += 1;
            //test for color
            if (color % 2 == 1){
                stroke(255, 204, 51); //bright yellow
            } else {
                stroke(182, 156, 129); //grey
            }
            //two if statements in each for loop creates the alternating color pattern
            pattern1(x, y); // call to draw function pattern 1
            print(color.toString());
            
        }
    }
    //draw a grid of pattern two
    //reposition x and y initial position
    for (var x = 63; x <= width + 80; x += 4.2*radi){
        for(var y = 0; y <= height + 80; y += 4.2*radi){

        pattern2(x, y); //draw pattern 2
    }
    }
   
    noLoop();//draw once
}
    var flip1 = 1; //set varibales for  flip
    var flip2 = 1;

function pattern1(x, y){
    strokeWeight(2); 
    noFill();
    //only stroke no fill

    push();

    translate(x, y); // translate object to input x and y

    //top and bottom semi circle
    arc(0, 0, radi*2, radi*2, PI+radians(7), 0-radians(7));
    arc(0, 0, radi*2, radi*2, 0+radians(7), PI-radians(7));
    //middle long line
    line(0-radi/1.3, 0, 0+radi/1.3, 0);

    var xSpaing = 3.5;//set a uniformed spacing

    //draw the same line 4 time
    for (var i = 0; i<= 4; i += 1){
        //test which loop number it is to flip the drawing
        if (i == 1 || i == 3){
            flip1 = -flip1; //on first and third loop, flip the x position
        } else if (i == 2){
            flip2 = -flip2; //on the second loop, flip the y position
        }
        line(0-flip1*radi/1.1, 0-(flip2*6), 
        0-flip1*radi/1.5, 0-(flip2*6)); // horizontal short
        line(0+(flip1*xSpaing), 0+(flip2*radi/1.1), 
        0+(flip1*xSpaing), 0+(flip2*radi/1.3)); //verticle short 1
        line(0+(flip1*xSpaing), 0+(flip2*radi/1.8), 
        0+(flip1*xSpaing), 0+(flip2*radi/2.5)); // verticle short 2, closer to middle
        line(0+(flip1*20), 0+(flip2*radi/2.5), 
        0+(flip1*xSpaing), 0+(flip2*radi/2.5)); // horizontal longer, at 4 corners
    }

    //middle line top and bottom
    line(0+radi/2.2, 0+6, 0-radi/2.2, 0+6); //bottom middle
    line(0+radi/2.2, 0-6, 0-radi/2.2, 0-6); //top middle

    //four small arcs
    arc(0, 0, radi*1.6, radi*1.6, radians(30), radians(63));
    arc(0, 0, radi*1.6, radi*1.6, radians(85+30), radians(85+63));
    arc(0, 0, radi*1.6, radi*1.6, radians(180+30), radians(180+63));
    arc(0, 0, radi*1.6, radi*1.6, radians(265+30), radians(265+63));
    pop();

    push();
    translate(x, y); //translate to input x and y
    rotate(radians(45)); // rotate around x, y by 45 degrees
    rectMode(CENTER); //draw rect around origin
    //draw rectangle to frame the pattern
    rect(0, 0, radi*3, radi*3);
        //draw 4 times
        for(var i = 0; i<=4; i +=1){
        //test for which loop increment
        if (i == 1 || i == 3){ //first and third flip the x position
            flip1 = -flip1;
        } else if (i == 2){ //second loop flip the y position
            flip2 = -flip2;
        }
        //draw 3 small squares by the corner of the big square
        //repeat for each corner using the for loop
        rect(flip1*1.5*radi, flip2*1.5*radi, radi, radi);
        rect(flip1*1.34*radi, flip2*1.34*radi, radi/4, radi/4);
        rect(flip1*0.9*radi, flip2*1.34*radi, radi/4, radi/4);
        rect(flip1*1.34*radi, flip2*0.9*radi, radi/4, radi/4);
   }
   pop()
}


//second pattern, new arguments g and h
function pattern2 (g, h){
    push();
    translate(g, h); // translate origin to g, h
    rotate(radians(45)); //rotate around origin by 45 degrees
    rectMode(CENTER); // set rectMode
    strokeWeight(2);
    stroke(255, 204, 51, 100); // grey line color
    fill(182, 156, 129, 100); // lower transparency
    rect (1.5*radi, 1.5*radi, radi*1.8, radi*1.8); // medium size square
    pop();

    push();
    translate(g, h);
    stroke(182, 156, 129);
    rectMode(CENTER);

    rect(0, 2.1*radi, radi/3, radi/3); // small square inside

    line(0, 0,  0, height); //verticle lines
    pop();
}
]]>
https://courses.ideate.cmu.edu/15-104/f2022/2022/10/02/project-05-wall-paper/feed/ 0
LookingOutwards-05: 3D Computer Graphics https://courses.ideate.cmu.edu/15-104/f2022/2022/09/30/lookingoutwards-05-3d-computer-graphics/ https://courses.ideate.cmu.edu/15-104/f2022/2022/09/30/lookingoutwards-05-3d-computer-graphics/#respond Sat, 01 Oct 2022 02:31:16 +0000 https://courses.ideate.cmu.edu/15-104/f2022/?p=73307 Continue reading "LookingOutwards-05: 3D Computer Graphics"]]>

I looked at the project “Celestial Beings” by Jonas Pfeiffer, where he used computer graphics to create angles that are true to the description in the Old Testament. What I really admire about this object is that the artist utilizes elements the audience is familiar with but rearranges the elements to create something completely out of imagination. The freakish appearance with the familiar elements allows the audience to be both terrified and linger on the image. And through the manipulation of color, lighting, and other factors, the author made it resemble the description of an angle. I find it astonishing that computer graphics can realize one’s imagination or recreate mythical creatures that wouldn’t exist in real life.

It is most likely the author has modeled the objects in 3d modeling software and animated the object and put it through a renderer. The model might be generated through an algorithm that would pattern existing elements together, as shown by the clear repetitive elements in the angels.  

It can be comprehended that the artist is interested in Christian mythology, but enjoy modern texturing as shown in the rendering style of the angels. The modern accent is also displayed in the rendering of the “Orphan”, where there are elements that seem to be written by markers on the giant eye.

Link: https://www.behance.net/gallery/152115365/Celestial-Beings

]]>
https://courses.ideate.cmu.edu/15-104/f2022/2022/09/30/lookingoutwards-05-3d-computer-graphics/feed/ 0
Project-04 String Art https://courses.ideate.cmu.edu/15-104/f2022/2022/09/25/project-04-string-art-12/ https://courses.ideate.cmu.edu/15-104/f2022/2022/09/25/project-04-string-art-12/#respond Sun, 25 Sep 2022 15:16:58 +0000 https://courses.ideate.cmu.edu/15-104/f2022/?p=73008 Continue reading "Project-04 String Art"]]>

This is my string art. I wanted to make an eye out of strings and the eye follows the x-coordinate of the mouse. Each layer of the eye is remapped to create a 3-dimensional effect. The spiral further extends the mystical feeling the eye gives off.

sketch
//Michael Li
//Section C 
var dx1;
var dy1;
var dx2;
var dy2;
var numLines = 70;

function setup() {
    createCanvas(400, 300);
    background(200);
    

}

function draw() {
    background("darkred");
    //remapped values for eyeball translation
    var tranX1 = constrain(map(mouseX, 0, 400, 120, 280), 120, 280)
    var tranX2 = constrain(map(mouseX, 0, 400, 130, 270), 130, 270)
    var tranX3 = constrain(map(mouseX, 0, 400, 140, 260), 140, 260)
    var tranX4 = constrain(map(mouseX, 0, 400, 150, 250), 150, 250)
    //set variable for rotation
    var rot = 90
    //eye white
    stroke(255);
    //two lines bottom left and top right
    line(0, 150, 250, 400); 
    line(150, -100, 400, 150)

    //calculate the line length and divide by number of lines 
    //for gap between each line
    dx1 = (250-0)/numLines;
    dy1 = (400-150)/numLines;
    dx2 = (400-150)/numLines;
    dy2 = (150+100)/numLines;

    //set initial points for line
    var x1 = 0;
    var y1 = 150;
    var x2 = 150;
    var y2 = -100;
    //for loop, i = number of lines drawn
    //line position + gap width to drawn each line 
    for (var i = 0; i <= numLines; i += 1) {
        line(x1, y1, x2, y2);
        x1 += dx1;
        y1 += dy1;
        x2 += dx2;
        y2 += dy2;
    }
    //repeat the process diagnally. 
    //draw line top right and bottom left
    line(150, 400, 400, 150);
    line(0, 150, 250, -100)

    //calculate the line length and divide by number of lines 
    //for gap between each line
    dx1 = (400-150)/numLines;
    dy1 = (150-400)/numLines;
    dx2 = (250-0)/numLines;
    dy2 = (-100-150)/numLines;

    //set initial points for line
    x1 = 150;
    y1 = 400;
    x2 = 0;
    y2 = 150;

    //for loop, i = number of lines drawn
    //line position + gap width to drawn each line 
    for (var i = 0; i <= numLines; i += 1) {
        line(x1, y1, x2, y2);
        x1 += dx1;
        y1 += dy1;
        x2 += dx2;
        y2 += dy2;
    }
    // spiral controlled by the mouseY position

    //use push and pop to limit the conditions inside
    push()
    //tranlsate origin to the middle of the canvas
    translate(200, 150)
    //set variables for the line positions
    var x =100
    var y = 100
    var dist = 50 //distance between each line
    var rot2 = 5 //set value for rotation degree
    var rotation = constrain(map(mouseY, 0, 300, -500, 100), -500, 100)
    //sets value of y, the loops repeats for 200 times
    for (y = 100; y <= 300; y += 1){
        rotate (radians(rot2)) //rotation of the line around the origin
        stroke("lightyellow") //stroke color
        //draw line to form the spiral
        line(rotation, y, x+dist, y+dist)
        rot2 += 0 //constant rotation
    }

    pop()

    //eyeball formation
    //use written function eyeBall below to draw the eyeball formation

    //Innermost DarkRed
    push()
    stroke("darkred")
    //translate the position based on the mouseX position
    //use tranX variables for remapped values
    translate(tranX1, 150); 
    //use for loop to repeat the Eyeball Function
    for (var spin = 0; spin <=6; spin += 1){
        //written function to draw components of the eyeballs
        eyeBall(30, 30, 30, 30)
        rotate(radians(rot))
        //rot adds 90 degrees each time the loop runs 
        rot += 90
    }
    pop()

    //2nd layer lightblue
    push()
    stroke("lightblue")
    //use remapped value for translation based on mouseX
    translate(tranX2, 150);
    //rotate 45 degrees for variation from the last component
    rotate(radians(45))
    //for loop to repeat the eyeBall function
    for (var spin = 0; spin <=6; spin += 1){
        //Eyeball function decrease value to increase size
        eyeBall(20, 20, 20, 20)
        rotate(radians(rot))
        //rot adds 90 degrees each time the loop runs 
        rot += 90
    }
    pop()

    //3rd layer light green
    push()
    //use remapped value for translation based on mouseX
    translate(tranX3, 150);
    //rotate 90 degrees for variation from the last compone nt
    rotate(radians(90))
    stroke("lightgreen")
    //use for loop to repeat the eyeBall function
    for (var spin = 0; spin <=6; spin += 1){
        //eyeBall function increases component size
        eyeBall(10, 10, 10, 10)
        rotate(radians(rot))
        //addes rotation value for the circular shape
        rot += 90
    }
    pop()

    //4th layer dark grey
    push()
    //use remapped value for tranlsation based on mouseX
    translate(tranX4, 150);
    //rotate 45 degrees for variation
    rotate(radians(45))
    stroke(30) //dark grey
    for (var spin = 0; spin <=12; spin += 1){
        //increase in size
        eyeBall(-10, -10, -10, -10)
        rotate(radians(rot))
        //adds 45 degrees for circular form
        rot += 45
    }
    pop()
   
    //eye lids
    stroke("orange");
    //draw two lines
    line(0, 150, 250, 400);
    line(150, 400, 400, 150);
    //calculate length of the line and divide by number of lines to draw
    dx1 = (250-0)/numLines;
    dy1 = (400-150)/numLines;
    dx2 = (400-150)/numLines;
    dy2 = (150-400)/numLines;

    //set variables for the initial positions of the line
    var x1 = 0;
    var y1 = 150;
    var x2 = 150;
    var y2 = 400;
    //use for loop to continously draw the lines
    for (var i = 0; i <= numLines; i += 1) {
        line(x1, y1, x2, y2);
        x1 += dx1;
        y1 += dy1;
        x2 += dx2;
        y2 += dy2;
    }
    //draw two lines
    line(0, 150, 250, -100)
    line(150, -100, 400, 150)
    //calculate length of the lines and divide by number of lines to draw
    dx1 = (250-0)/numLines;
    dy1 = (-100-150)/numLines;
    dx2 = (400-150)/numLines;
    dy2 = (150+100)/numLines;

    //set variables for the initial positions of the line
    var x1 = 0;
    var y1 = 150;
    var x2 = 150;
    var y2 = -100;
    //use for loop to continously draw the lines
    for (var i = 0; i <= numLines; i += 1) {
        line(x1, y1, x2, y2);
        x1 += dx1;
        y1 += dy1;
        x2 += dx2;
        y2 += dy2;
    }
}

//set function to draw the eyeball components
function eyeBall (a, b, c, d){
 
    //set two lines
    line(a-40, b-120, c-100, d+40)
    line(a+40, b-120, c-120, d-40)

    //find the length of the lines divided by the number of lines
    dx1 = (c-100-(a-40))/numLines;
    dy1 = (d+40-(b-120))/numLines;
    dx2 = (c-120-(a+40))/numLines;
    dy2 = (d-40-(b-120))/numLines;

    //set values for inital position
    var x1 = a-40;
    var y1 = b-120;
    var x2 = c+40;
    var y2 = d-120;
    //use for loops to continously draw the lines.
    for (var i = 0; i <= numLines; i += 1) {
        line(x1, y1, x2, y2);
        x1 += dx1;
        y1 += dy1;
        x2 += dx2;
        y2 += dy2;
    }

}
]]>
https://courses.ideate.cmu.edu/15-104/f2022/2022/09/25/project-04-string-art-12/feed/ 0