Pauline – [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 Tue, 27 Sep 2022 05:01:28 +0000 en-US hourly 1 https://wordpress.org/?v=6.0.8 Looking Outwards 04 https://courses.ideate.cmu.edu/15-104/f2022/2022/09/27/looking-outwards-04-17/ https://courses.ideate.cmu.edu/15-104/f2022/2022/09/27/looking-outwards-04-17/#respond Tue, 27 Sep 2022 05:01:28 +0000 https://courses.ideate.cmu.edu/15-104/f2022/?p=73170 Continue reading "Looking Outwards 04"]]>

I admire this project as the system of connecting the alternating environment with the sound to create an immersive experience for the visitors. By having different sensors and converting the lighting variation and day-night cycle to usable data, it creates a series of changes to the visitors’ visual and acoustic movement. For the algorithms, they first used sensors or detectors to track the changes in lighting variation. Then, the 500 artificial neurons that are created will respond to the data converted by the detectors. This cycle continues so that the real-time data will be analyzed to create an immersive experience. The artificial neurons, they are running on the Attiny 85 with Arduino. In addition, since there are also LED lights inside, and they are placed in a hexagon shape, this kind of placement creates a sense of conflict with the continuously changing visual and acoustic movement. The overall experience will create a world that contains order and chaos. Therefore, I think it aims to create an immersive experience for the visitors.

Link: https://www.creativeapplications.net/environment/floating-codes-the-spatial-topology-of-an-artificial-neural-network/

floating-codes_prototype_2021_03Download
]]> https://courses.ideate.cmu.edu/15-104/f2022/2022/09/27/looking-outwards-04-17/feed/ 0 https://courses.ideate.cmu.edu/15-104/f2022/2022/09/27/73168/ https://courses.ideate.cmu.edu/15-104/f2022/2022/09/27/73168/#respond Tue, 27 Sep 2022 04:56:36 +0000 https://courses.ideate.cmu.edu/15-104/f2022/?p=73168 Continue reading ""]]>

This is my project 04.

sketch
function setup() {
    createCanvas(400, 300);
    background(220);
    text("p5.js vers 0.9.0 test.", 10, 15);
}
//Inside-wing top left & bottom right
var dx1;
var dy1;
var dx2;
var dy2;
var numberLines = 15
function draw() {
    background(249,214,214);

    //background line-top left
    stroke(168,141,158);
    line(50,0,150,0);
    line(0,50,0,150);
    dx1 = (150-50)/numberLines;
    dy1 = (0-0)/numberLines;
    dx2 = (0-0)/numberLines;
    dy2 = (150-50)/numberLines;
    var x1 = 50;
    var y1 = 0;
    var x2 = 0;
    var y2 = 150;
    for(var i=0;i<=numberLines;i+=1){
        line(x1,y1,x2,y2);
        x1 += dx1;
        y1 += dy1;
        x2 -= dx2;
        y2 -= dy2;
        }
    //background line-top right
    line(250,0,350,0);
    line(400,50,400,150);
    dx1 = (350-250)/numberLines;
    dy1 = (0-0)/numberLines;
    dx2 = (400-400)/numberLines;
    dy2 = (150-50)/numberLines;
    var x1 = 250;
    var y1 = 0;
    var x2 = 400;
    var y2 = 50;
    for(var i=0;i<=numberLines;i+=1){
        line(x1,y1,x2,y2);
        x1 += dx1;
        y1 += dy1;
        x2 += dx2;
        y2 += dy2;
        }

    line(0,150,0,250);
    line(150,300,50,300);
    dx1 = (0-0)/numberLines;
    dy1 = (250-150)/numberLines;
    dx2 = (50-150)/numberLines;
    dy2 = (300-300)/numberLines;
    var x1 = 0;
    var y1 = 150;
    var x2 = 50;
    var y2 = 300;
    for(var i=0;i<=numberLines;i+=1){
        line(x1,y1,x2,y2);
        x1 += dx1;
        y1 += dy1;
        x2 -= dx2;
        y2 -= dy2;
        }
    line(400,150,400,250);
    line(250,300,350,300);
    dx1 = (400-400)/numberLines;
    dy1 = (250-150)/numberLines;
    dx2 = (350-250)/numberLines;
    dy2 = (300-300)/numberLines;
    var x1 = 400;
    var y1 = 150;
    var x2 = 350;
    var y2 = 300;
    for(var i=0;i<=numberLines;i+=1){
        line(x1,y1,x2,y2);
        x1 += dx1;
        y1 += dy1;
        x2 -= dx2;
        y2 -= dy2;
        }    
    //feeler left
    stroke(146,63,75);
    line(185,80,190,75);
    line(197,117,203,115);
    dx1 = (190-185)/numberLines;
    dy1 = (75-80)/numberLines;
    dx2 = (203-197)/numberLines;
    dy2 = (115-117)/numberLines;
    var x1 = 185;
    var y1 = 80;
    var x2 = 203;
    var y2 = 115;
    for(var i=0;i<=numberLines;i+=1){
        line(x1,y1,x2,y2);
        x1 += dx1;
        y1 += dy1;
        x2 -= dx2;
        y2 -= dy2;
    }
    //feeler right
    line(220,80,215,75);
    line(197,117,203,115);
    dx1 = (215-220)/numberLines;
    dy1 = (75-80)/numberLines;
    dx2 = (203-197)/numberLines;
    dy2 = (115-117)/numberLines;
    var x1 = 220;
    var y1 = 80;
    var x2 = 197;
    var y2 = 117;
    for(var i=0;i<=numberLines;i+=1){
        line(x1,y1,x2,y2);
        x1 += dx1;
        y1 += dy1;
        x2 += dx2;
        y2 += dy2;
    }

    stroke(63,41,54);
    line(130,50,130,110);
    line(280,140,280,230);
    dx1 = (130-130)/numberLines;
    dy1 = (110-50)/numberLines;
    dx2 = (280-280)/numberLines;
    dy2 = (230-140)/numberLines;
    var x1 = 130;
    var y1 = 50;
    var x2 = 280;
    var y2 = 230;
    for(var i=0;i<=numberLines;i+=1){
        line(x1,y1,x2,y2);
        x1 += dx1;
        y1 += dy1;
        x2 -= dx2;
        y2 -= dy2;
    }

    //Inside-wing top right & bottom left
    line(120,140,120,230);
    line(270,50,270,110);
    dx1 = (120-120)/numberLines;
    dy1 = (230-140)/numberLines;
    dx2 = (270-270)/numberLines;
    dy2 = (110-50)/numberLines;
    var x1 = 120;
    var y1 = 140;
    var x2 = 270;
    var y2 = 110;
    for(var i=0;i<=numberLines;i+=1){
        line(x1,y1,x2,y2);
        x1 += dx1;
        y1 += dy1;
        x2 -= dx2;
        y2 -= dy2;
    }
    
    //Outside-top left
    stroke(189,135,134);
    line(110,20,110,115);
    line(200,115,200,130);
    dx1 = (110-110)/numberLines;
    dy1 = (115-20)/numberLines;
    dx2 = (200-200)/numberLines;
    dy2 = (130-115)/numberLines;
    var x1 = 110;
    var y1 = 20;
    var x2 = 200;
    var y2 = 115;
    for(var i=0;i<=numberLines;i+=1){
        line(x1,y1,x2,y2);
        x1 += dx1;
        y1 += dy1;
        x2 += dx2;
        y2 += dy2;
    }
    //Outside-top right
    line(290,20,290,115);
    line(200,115,200,130);
    let numLines = 10;
    dx1 = (290-290)/numberLines;
    dy1 = (115-20)/numberLines;
    dx2 = (200-200)/numberLines;
    dy2 = (130-115)/numberLines;
    var x1 = 290;
    var y1 = 20;
    var x2 = 200;
    var y2 = 115;
    for(var i=0;i<=numberLines;i+=1){
        line(x1,y1,x2,y2);
        x1 += dx1;
        y1 += dy1;
        x2 += dx2;
        y2 += dy2;
}
    //Ouside-bottom left 
    line(100,135,110,260);
    line(200,125,200,140);
    dx1 = (110-100)/numberLines;
    dy1 = (260-135)/numberLines;
    dx2 = (200-200)/numberLines;
    dy2 = (140-125)/numberLines;
    var x1 = 100;
    var y1 = 135;
    var x2 = 200;
    var y2 = 125;
    for(var i=0;i<=numberLines;i+=1){
        line(x1,y1,x2,y2);
        x1 += dx1;
        y1 += dy1;
        x2 += dx2;
        y2 += dy2;
    }
    //Ouside-bottom right 
    line(300,135,290,260);
    line(200,125,200,140);
    dx1 = (290-300)/numberLines;
    dy1 = (260-135)/numberLines;
    dx2 = (200-200)/numberLines;
    dy2 = (140-125)/numberLines;
    var x1 = 300;
    var y1 = 135;
    var x2 = 200;
    var y2 = 125;
    for(var i=0;i<=numberLines;i+=1){
        line(x1,y1,x2,y2);
        x1 += dx1;
        y1 += dy1;
        x2 += dx2;
        y2 += dy2;
    }

    //bottom patterning
    stroke(107,87,104)
    line(150,150,170,150);
    line(130,180,150,180);
    dx1 = (170-150)/numberLines;
    dy1 = (150-150)/numberLines;
    dx2 = (150-130)/numberLines;
    dy2 = (180-180)/numberLines;
    var x1 = 150;
    var y1 = 150;
    var x2 = 150;
    var y2 = 180;
    for(var i=0;i<=numberLines;i+=1){
        line(x1,y1,x2,y2);
        x1 += dx1;
        y1 += dy1;
        x2 -= dx2;
        y2 -= dy2;
    }
    line(225,150,245,150);
    line(245,180,265,180);
    dx1 = (245-225)/numberLines;
    dy1 = (150-150)/numberLines;
    dx2 = (265-245)/numberLines;
    dy2 = (180-180)/numberLines;
    var x1 = 225;
    var y1 = 150;
    var x2 = 265;
    var y2 = 180;
    for(var i=0;i<=numberLines;i+=1){
        line(x1,y1,x2,y2);
        x1 += dx1;
        y1 += dy1;
        x2 -= dx2;
        y2 -= dy2;
    }

    //upper patterning
    line(145,90,155,90);
    line(140,105,150,105);
    dx1 = (155-145)/numberLines;
    dy1 = (90-90)/numberLines;
    dx2 = (150-140)/numberLines;
    dy2 = (105-105)/numberLines;
    var x1 = 145;
    var y1 = 90;
    var x2 = 150;
    var y2 = 105;
    for(var i=0;i<=numberLines;i+=1){
        line(x1,y1,x2,y2);
        x1 += dx1;
        y1 += dy1;
        x2 -= dx2;
        y2 -= dy2;
    }

    line(245,90,255,90);
    line(250,105,260,105);
    dx1 = (255-245)/numberLines;
    dy1 = (90-90)/numberLines;
    dx2 = (260-250)/numberLines;
    dy2 = (105-105)/numberLines;
    var x1 = 245;
    var y1 = 90;
    var x2 = 260;
    var y2 = 105;
    for(var i=0;i<=numberLines;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/27/73168/feed/ 0 Project 03 https://courses.ideate.cmu.edu/15-104/f2022/2022/09/19/project-03-6/ https://courses.ideate.cmu.edu/15-104/f2022/2022/09/19/project-03-6/#respond Mon, 19 Sep 2022 06:48:27 +0000 https://courses.ideate.cmu.edu/15-104/f2022/?p=72432 Continue reading "Project 03"]]>

This is my project 03

sketch 

function setup() {
    createCanvas(600, 450);
    background(220);
    text("p5.js vers 0.9.0 test.", 10, 15);
}
//cloud left variables
var x1 = 70
var y1 = 60;
var cwidth = 60;
var cheight = 40;
//cloud right variables
var x2 = 400;
var y2 = 60;
//star left variables
var sx1 = 70;
var sy1 = 130;
var sw1 = 3;
var sh1 = 12;
//star right variables
var sx2 = 400;
var sy2 = 130;
var sw2 = 12
var sh2 = 21
//color for cloud
var rc = 183;
var gc = 186;
var bc = 202;
var angle = 0
//color for rain
var rr = 57;
var rg = 85;
var rb = 96;
//flower 
var anglef = 0
var diam = 45
var rf = 199
var gf = 101
var bf = 93

function draw() {
    background(255)
    //ground
    noStroke();
    push();
    angle = mouseX*0.15   //background rotation
    mouseX = max(min(mouseX,600),0);
    rotate(radians(angle))
    fill(237,186,185);
    rect(0,400,800,50);
    fill(246,219,219);
    rect(0,350,800,50);
    fill(214,211,203);
    rect(0,300,800,50);
    fill(214,207,141);
    rect(0,250,800,50);
    fill(242,126,113);
    rect(0,200,800,50);
    fill(237,186,185);
    rect(0,150,800,50);
    fill(246,219,219);
    rect(0,100,800,50);
    fill(214,211,203);
    rect(0,50,800,50);
    fill(214,207,141);
    rect(0,0,800,50);
    pop();

    //cloud left
    fill(rc,gc,bc);
    ellipse(x1,y1,cwidth,cheight);
    ellipse(x1+30,y1-10,cwidth,cheight);
    ellipse(x1+60,y1,cwidth,cheight);
    ellipse(x1,y1+20,cwidth,cheight);
    ellipse(x1+30,y1+25,cwidth,cheight);
    ellipse(x1+60,y1+20,cwidth,cheight);
    ellipse(x1+30,y1+10,cwidth,cheight);
    ellipse(x1-20,y1+10,cwidth/1.5,cheight/1.5);
    ellipse(x1+80,y1+10,cwidth/1.5,cheight/1.5);
    cwidth = 60 + mouseX*0.03 // size change due to the mouseX position
    cheight = 40 + mouseX*0.03
    x1 = mouseX  // position change according to the mouseX
    bc = 202- mouseX*0.1 // color change of cloud according to the mouseX

    //cloud right
    fill(rc,gc,bc);
    ellipse(x2,y2,cwidth,cheight);
    ellipse(x2+30,y2,cwidth,cheight);
    ellipse(x2+60,y2,cwidth,cheight);
    ellipse(x2,y1+20,cwidth,cheight);
    ellipse(x2+30,y2+25,cwidth,cheight);
    ellipse(x2+60,y2+20,cwidth,cheight);
    ellipse(x2+30,y2+10,cwidth,cheight);
    ellipse(x2-20,y2+10,cwidth/1.5,cheight/1.5);
    ellipse(x2+80,y2+10,cwidth/1.5,cheight/1.5);
    x2 = 600- mouseX // position change according to the mouseX
    rc = 183- mouseX*0.1+20 // color change of cloud according to the mouseX
    
    
    //rain left
    fill(rr,rg,rb);
    ellipse(sx1,sy1,sw1,sh1);
    ellipse(sx1-25,sy1-12,sw1,sh1);
    ellipse(sx1+20,sy1+10,sw1,sh1);
    ellipse(sx1-15,sy1+20,sw1,sh1);
    ellipse(sx1+40,sy1+40,sw1,sh1);
    ellipse(sx1+10,sy1+40,sw1,sh1);
    ellipse(sx1+10,sy1+40,sw1,sh1);
    ellipse(sx1+50,sy1+10,sw1,sh1);
    ellipse(sx1+75,sy1+20,sw1,sh1);
    ellipse(sx1+70,sy1-13,sw1,sh1);
    ellipse(sx1+35,sy1+80,sw1,sh1);
    ellipse(sx1+45,sy1+120,sw1,sh1);
    ellipse(sx1+20,sy1+110,sw1,sh1);
    ellipse(sx1,sy1+80,sw1,sh1);
    ellipse(sx1+50,sy1+60,sw1,sh1);
    ellipse(sx1-10,sy1+50,sw1,sh1);
    sx1 = mouseX; // position change according to the mouseX
    sw1 = 3+mouseX*0.013 // size change due to the mouseX position
    sh1 = 12+mouseX*0.013
    rg = 85-mouseX*0.2 // color change of rain according to the mouseX
    rr = 57- mouseX*0.1+20 // color change of rain according to the mouseX

    //rain right
    fill(rr,rg,rb);
    ellipse(sx2,sy2,sw2,sh2);
    ellipse(sx2-30,sy2-12,sw2,sh2);
    ellipse(sx2+20,sy2+10,sw2,sh2);
    ellipse(sx2-15,sy2+20,sw2,sh2);
    ellipse(sx2+40,sy2+40,sw2,sh2);
    ellipse(sx2+10,sy2+40,sw2,sh2);
    ellipse(sx2+10,sy2+40,sw2,sh2);
    ellipse(sx2+50,sy2+10,sw2,sh2);
    ellipse(sx2+85,sy2+20,sw2,sh2);
    ellipse(sx2+70,sy2-13,sw2,sh2);
    ellipse(sx2+35,sy2+80,sw2,sh2);
    ellipse(sx2+30,sy2+140,sw2,sh2);
    ellipse(sx2+20,sy2+110,sw2,sh2);
    ellipse(sx2,sy2+80,sw2,sh2);
    ellipse(sx2+50,sy2+60,sw2,sh2);
    ellipse(sx2-10,sy2+50,sw2,sh2);
    sx2 = 600- mouseX // position change according to the mouseX
    sw2 = 12-mouseX*0.013 // size change due to the mouseX position
    sh2 = 21-mouseX*0.013
    rb = 96+mouseX*0.05 // color change of rain according to the mouseX

    //flower center
    if(mouseX>width/2){
        fill(110,109,28);
        rect(width/2-5,height/2+28,10,height/2);
        rect(width/4-5,height/4*3+28,10,height/2);
        rect(width/4*3-5,height/4*3+28,10,height/2);
        push();
        translate(width/2,height/2)
        rotate(radians(anglef)); //flower rotate by it self 
        fill(rf,gf,bf);
        circle(-15,-25,diam)
        circle(15,-25,diam)
        circle(-15,25,diam)
        circle(15,25,diam);
        circle(28,0,diam)
        circle(-28,0,diam)
        fill(231,183,diam);
        circle(0,0,diam);
        pop();
        bf = 93+mouseX*0.05

        diam = 45+mouseX/20
        anglef += 3
        //flower left
        push();
        translate(width/4,height/4*3)
        rotate(radians(anglef)); //flower rotate by it self 
        fill(249,213,216);
        circle(-15,-25,diam/2);
        circle(15,-25,diam/2);
        circle(-15,25,diam/2);
        circle(15,25,diam/2);
        circle(28,0,diam/2);
        circle(-28,0,diam/2);
        fill(189,135,136);
        circle(0,0,diam/2);
        pop();
        //flower right
        push();
        translate(width/4*3,height/4*3)
        rotate(radians(anglef)); //flower rotate by it self 
        fill(195,231,254);
        circle(-15,-25,diam/2);
        circle(15,-25,diam/2);
        circle(-15,25,diam/2);
        circle(15,25,diam/2);
        circle(28,0,diam/2);
        circle(-28,0,diam/2);
        fill(238,218,92);
        circle(0,0,diam/2);
        pop();
        //sun
        fill(245,177,86);
        ellipse(width/2,height/6,diam*1.1);


    }



}
]]> https://courses.ideate.cmu.edu/15-104/f2022/2022/09/19/project-03-6/feed/ 0 Looking Outward 03 https://courses.ideate.cmu.edu/15-104/f2022/2022/09/19/looking-outward-03-3/ https://courses.ideate.cmu.edu/15-104/f2022/2022/09/19/looking-outward-03-3/#respond Mon, 19 Sep 2022 06:36:43 +0000 https://courses.ideate.cmu.edu/15-104/f2022/?p=72420 Continue reading "Looking Outward 03"]]>

Looking Outwards 03: Computational Fabrication
The most interesting point of this project is applying this kind of parametric designed panel to the building envelope. Also, the parametrically designed façade used for this building is not only for decoration purposes but also for the bad-air-busting. The form of the panel was first designed in CAD programs and created in the software called Rhino. Even though they didn’t mention a lot about the creation process, I suppose that they used grasshopper and BMI system so that the overall shape and form can vary according to the changing parameter. I think the most important characteristic that makes this project wonderful is that the impressive façade can also increase the surface area of the building, and it can bring more natural light into the building, which creates a better place for people inside. Also, having TiO2, which is an air-scrubbing material coated outside the surface, can maximize the effect of air purification when the sunlight gets stronger.


https://www.architectmagazine.com/technology/architectural-detail/fighting-a-megacitys-pollution-with-mega-panels_o

 

]]> https://courses.ideate.cmu.edu/15-104/f2022/2022/09/19/looking-outward-03-3/feed/ 0 Project 02 https://courses.ideate.cmu.edu/15-104/f2022/2022/09/11/project-02-11/ https://courses.ideate.cmu.edu/15-104/f2022/2022/09/11/project-02-11/#respond Mon, 12 Sep 2022 00:59:38 +0000 https://courses.ideate.cmu.edu/15-104/f2022/?p=71616 Continue reading "Project 02"]]>
sketch
sketch
// for my design, i tried to move the eye within the face and all the other sense organs go along with it.
// also, the eye ball move within the eye socket by itself. therefore, this people can look upwards, downwards, look to the left or to the right.
// in addition, the mouth also change the radian by itself.
// by having these, it can create a series of variation for the face.
var eyeSize = 30;
var faceWidth = 300;
var faceHeight = 200;
//variables for eyes
var eyeWidthVariation = 20;
var eyeHeightVariation = 10;
//variables for mouth
var mouthWidthShift = 10;
var mouthHeightShift = 15;
//color
var r = 243;
var g = 197;
var b = 194;
//eyeball movement
var movementX = 10;
var movementY = 10;
//eyebrow movement
var eyebrowChangeL = 5
var eyebrowChangeR = 5

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

function draw(){
    background(249, 233, 211);
    //face
    noStroke();
    fill(r, g, b);
    ellipse(width / 2, height / 2, faceWidth, faceHeight);
    
    //hair
    fill(r-20,g-20,b+30);
    rect(width/2- faceWidth/3, height/2-faceHeight/2-10,faceWidth/1.5,faceHeight/6)
    
    //noise
    noStroke();
    fill(r-50, g-50, b-50);
    ellipse(width / 2-eyeWidthVariation, height/2+2*eyeHeightVariation, 20, 30);
    
    //eyes socket
    noStroke();
    var eyeLX = width / 2 - faceWidth * 0.25 - eyeWidthVariation;
    var eyeRX = width / 2 + faceWidth * 0.25 - eyeWidthVariation;
    
    //blush left
    fill(255,171,171);
    ellipse(eyeLX, height/2+eyeHeightVariation+eyeSize/2+10,20+eyeSize*0.5,eyeSize*0.4);
    //blush right
    ellipse(eyeRX, height/2+eyeHeightVariation+eyeSize/2+10,20+eyeSize*0.5,eyeSize*0.4);
    fill(r+50, g+50, b+50);
    ellipse(eyeLX, height / 2 + eyeHeightVariation, eyeSize, eyeSize);
    ellipse(eyeRX, height / 2 + eyeHeightVariation, eyeSize, eyeSize);
    
    //eyeball
    fill(0);
    ellipse(eyeLX+movementX, height/2 +eyeHeightVariation+movementY, eyeSize / 2, eyeSize / 2);
    ellipse(eyeRX+movementX, height/2 +eyeHeightVariation+movementY, eyeSize / 2, eyeSize / 2);
    
    //eyebrow left
    fill(0)
    rect(eyeLX- eyeSize/2, height/2+ eyeHeightVariation- eyeSize/2-10-eyebrowChangeL,eyeSize,eyeHeightVariation/2);
    //eyebrow right
    rect(eyeRX- eyeSize/2, height/2+ eyeHeightVariation- eyeSize/2-10+movementY-eyebrowChangeR,eyeSize,eyeHeightVariation/2);
    
    //mouth
    noFill();
    stroke(r-35, g-35, b-35);
    strokeWeight(6);
    beginShape();
    curveVertex(width/2 - mouthWidthShift*3-eyeWidthVariation, height / 2 + faceHeight * 0.38 - mouthHeightShift*7);
    curveVertex(width/2 - mouthWidthShift*2-eyeWidthVariation, height / 2 + faceHeight * 0.38 - mouthHeightShift*1.3);
    curveVertex(width/2-eyeWidthVariation, height / 2 + faceHeight * 0.40);
    curveVertex(width/2 + mouthWidthShift*2-eyeWidthVariation, height / 2 + faceHeight * 0.38 - mouthHeightShift*1.3);
    curveVertex(width/2 + mouthWidthShift*3-eyeWidthVariation, height / 2 + faceHeight * 0.38 - mouthHeightShift*7);
    endShape();
}

function mousePressed() {
    //face random
    faceWidth = random(200, 600);
    faceHeight = random(200, 460);
    //eye random
    eyeSize = random(30, 80);
    eyeWidthVariation = random(-50, 50);
    eyeHeightVariation = random(3, 25);
    //mouth random
    mouthWidthShift = random(-20, 20);
    mouthHeightShift = random(-20, 20);
    //color random
    r = random(51, 204);
    g = random(51, 204);
    b = random(51, 204);
    //eyeball random
    movementX = random(-eyeSize/4,eyeSize/4);
    movementY = random(-eyeSize/4,eyeSize/4);
    //eyebrown random
    eyebrowChangeL = random(0,30);
    eyebrowChangeR = random(0,30)
}
]]> https://courses.ideate.cmu.edu/15-104/f2022/2022/09/11/project-02-11/feed/ 0 Looking Outwards 02 https://courses.ideate.cmu.edu/15-104/f2022/2022/09/11/looking-outwards-02-12/ https://courses.ideate.cmu.edu/15-104/f2022/2022/09/11/looking-outwards-02-12/#respond Mon, 12 Sep 2022 00:46:17 +0000 https://courses.ideate.cmu.edu/15-104/f2022/?p=70911 Continue reading "Looking Outwards 02"]]>

Looking Outwards 02
What this project impressed me with is how this algorithm abstracts the real pictures into a more artistic form. Also, with different fitness percentages, users can choose how abstract they want for the output. I think the algorithm of this project is to use different sizes and colors of the polygon to mimic the form of real pictures. Furthermore, since the polygons are overlaying with each other, I think that the transparency of the polygon can also be changed so that it can create a sense of layering effect which is very artistic. The most interesting concept about this project is that the users can choose not only the percentage of fitness they want but also see the gradual change of this process. The artistic essence of this project is using the polygon as a single unit to create the abstract version of the picture since it contains different types of angles, including acute angle, obtuse angle, and right angle. It can create different shapes because of this natural characteristic.

https://alteredqualia.com/visualization/evolve/

]]> https://courses.ideate.cmu.edu/15-104/f2022/2022/09/11/looking-outwards-02-12/feed/ 0 Project 02 https://courses.ideate.cmu.edu/15-104/f2022/2022/09/07/project-02/ https://courses.ideate.cmu.edu/15-104/f2022/2022/09/07/project-02/#respond Wed, 07 Sep 2022 21:11:21 +0000 https://courses.ideate.cmu.edu/15-104/f2022/?p=70510 Continue reading "Project 02"]]>

This is my self portrait

sketch
function setup() {
    createCanvas(400, 400);
    background(0);
    text("p5.js vers 0.9.0 test.", 10, 15);
}

function draw() {
    //backgrond
    if(mouseX<width/2){
        background(186,197,62);
        stroke(112,106,41);
        fill(112,106,41);
    } else{
        background(200,170,161);
        stroke(167,118,94);
        fill(167,118,94);
    }
    
    //stars! left side
    quad(40,30,30,50,40,70,50,50);
    quad(65,55,55,75,65,95,75,75);
    quad(40,80,30,100,40,120,50,100);
    //stars! right side
    quad(350,340,340,360,350,380,360,360);
    quad(350,280,340,300,350,320,360,300);
    quad(320,305,310,325,320,345,330,325);
    
    //left face area
    stroke(158,193,210);
    fill(158,193,210);
    arc(150,130,150,150,15.3,17.8,HALF_PI); //top left area
    fill(158,193,210);
    rect(75,130,40,120);//left hair

    //right yellow area
    stroke(240,216,102);
    fill(240,216,102);
    arc(220,120,90,90,16.9,13.4,HALF_PI);
    fill(240,216,102);
    rect(235,120,30,130);//right hair

    //right dak blue area
    stroke(44,112,171);
    fill(44,112,171);
    arc(200,120,90,90,16.9,13.4,HALF_PI);
    fill(44,112,171);
    rect(215,120,30,130);//right hair

    //eye and noise
    stroke(240,216,102);
    fill(240,216,102);
    circle(125,140,60);
    stroke(240,216,102);
    fill(240,216,102);
    circle(200,140,60);
    stroke(158,193,210);
    fill(158,193,210);
    circle(200,140,55);
    stroke(194,227,245);
    fill(194,227,245);
    circle(200,140,40);
    stroke(0);
    fill(0);
    rect(163,170,5,15);
    rect(158,185,10,3);

    //horizontal lines  From top to the bottom
    stroke(158,193,210);
    fill(158,193,210);
    rect(235,75,50,15);
    stroke(255);
    fill(255);
    rect(235,95,60,10);
    stroke(158,193,210);
    fill(158,193,210);
    rect(235,110,70,7);
    stroke(158,193,210);
    fill(158,193,210);
    rect(235,120,75,13);
    stroke(255);
    fill(255);
    rect(235,139,75,8);
    stroke(158,193,210);
    fill(158,193,210);
    rect(235,153,75,8);
    stroke(255);
    fill(255);
    rect(235,167,75,8);
    stroke(158,193,210);
    fill(158,193,210);
    rect(235,181,75,8);
    stroke(255);
    fill(255);
    rect(235,195,75,8);
    rect(235,209,75,8);

    //clothes
    stroke(240,216,102);
    fill(240,216,102);
    rect(140,230,50,20);
    stroke(158,193,210);
    fill(158,193,210);
    triangle(110,270,90,270,60,390);
    stroke(240,216,10);
    fill(240,216,102);
    triangle(150,270,120,270,90,390);
    triangle(180,270,210,270,240,390);
    stroke(158,193,210);
    fill(158,193,210);
    triangle(220,270,235,270,270,390);

    //button
    stroke(44,112,171);
    fill(44,112,171);
    circle(165,300,20);
    circle(165,330,20);
    circle(165,360,20);
    
    //jaw
    stroke(255);
    fill(255);
    arc(165,170,130,130,7,2.4,HALF_PI); 

    
}
]]> https://courses.ideate.cmu.edu/15-104/f2022/2022/09/07/project-02/feed/ 0