Tag: Section D

Mari Kubota- Project 07- Curves

index sketch

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>p5.js vers 0.7.1, Edit index.html to Change This Title</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.1/p5.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.1/addons/p5.dom.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.1/addons/p5.sound.js"></script>
    <script src="sketch.js" type="text/javascript"></script>
  </head>
  <body>
  </body>
</html>

In this project I created used the Conchoid of de Sluze curve to create continuously changing circle which is controlled by the mouse. The equation of the curve was x=(sec t +acos t) cos t, y=(sec t +acos t) sint in parametric form. The tricky part of the project was that p5js did not understand “sec t” so I had to rewrite it in cosine form.

Shannon Ha-Project 01-Face

Project 01-Self Portrait

//Shannon Ha
//Section D
//sha2@andrew.cmu.edu
//Project 01: Self-Portrait

function setup() {
    createCanvas(600, 600);
    background(209,177,212);

}

  function draw() {
    //hair
    fill('black');
    noStroke();
    ellipse(304,238,330,297);

    fill('black');
    noStroke();
    rect(139,225,330,252);

    //Neck
    fill(193,147,101);
    noStroke();
    rect(275,395,58,54);
    ellipse(304,450,57,22);

    //face
    fill(219,173,125);
    noStroke();
    ellipse(304,256,231,288);

    //brows
    fill('black');
    noStroke();
    quad(274,213,224,216,240,207,274,204);
    quad(330,203,362,205,380,215,331,212);

    //eyes
    fill('black');
    noStroke();
    ellipse(253,254,27,14);
    ellipse(350,254,27,14);

    fill(219,173,125);
    noStroke();
    ellipse(352,259,12,8);
    ellipse(255,259,12,8);

    //glasses
    stroke(247,207,45);
    strokeWeight(3);
    noFill();
    ellipse(249,254,68,68);
    ellipse(353,254,68,68);
    arc(301,265,39,39,PI,TWO_PI);

    //nose
    fill(175,137,88);
    noStroke();
    ellipse(304,310,31,14);
    fill(219,173,125);
    ellipse(304,305,26,14);

    //mouth
    fill(137,69,70);
    noStroke();
    ellipse(303,347,60,32);
    fill(219,173,125);
    ellipse(303,338,67,19);

    //earrings
    stroke(128,130,133);
    strokeWeight(5);
    noFill();
    ellipse(189,301,16,27);
    ellipse(417,309,16,27);

    //clothing
    fill(182,122,43);
    noStroke();
    rect(275,448,58,49);
    triangle(172,497,275,448,275,497);
    triangle(432,497,333,497,333,448);
    triangle(172,497,172,600,143,600);
    triangle(432,497,432,600,463,600);
    rect(172,497,260,121);

    //clothing shade
    fill(153,101,39);
    noStroke();
    triangle(230,533,230,600,215,600);
    triangle(379,533,379,600,394,600);

    fill(193,147,101);
    noStroke();
    ellipse(304,450,57,22);

    //front hair
    fill('black');
    noStroke();
    arc(219,117,160,119,270,360);
    arc(393,117,190,119,-275,-380);

  }

I started out by hand drawing the self-portrait I would like to create using basic shapes that could easily be found using the 2D primitive shapes. I then translated my drawing into illustrator, and added color and line weight in doing so. Planning the drawing in illustrator helped me efficiently locate the coordinates needed for some commands which was very useful when it came to drawing the shapes. I tried exploring more complex shapes by using the ‘arc’ command, even though it was used in my code, a lot of the point plotting was done through trial and error as I still don’t really understand how the function works. Overall it’s been an eye-opening experience for something I have never done before!