Joshua Brown (JDBROWN) – Jellyboi Portrait (Proj. 1)

Jdbrown-Sketch

function setup() {
    createCanvas(1000, 1000);
    background(104, 18, 63);
    text("p5.js vers 0.5.12 test.", 10, 15);
    createDiv("p5.dom.js library is loaded.");
    createDiv("Listen for 2 second tone to confirm p5.sound.js is loaded.");
    osc = new p5.TriOsc();
    osc.freq(220.0);
    osc.amp(0.1);
    osc.start();

    // JDBROWN - JOSHUA BROWN
    // JDBROWN@ANDREW.CMU.EDU
}

function draw() {
    if (millis() > 2000) {
        osc.stop();
        noLoop();
    }

    noStroke()

    fill (175, 80, 100);
    ellipse (520, 350, 250, 370);   // hair (back poof)

    fill (220, 80, 100);
    ellipse (266, 315, 100, 100);   // hair (side poof, back)

    fill (222, 132, 136);
    ellipse (400, 400, 350, 350);   // main face (light pink)

    fill (217, 113, 118);
    ellipse (467, 400, 215, 290);   // face shade (dark pink)

    fill (220, 80, 100);
    ellipse (410, 225, 390, 200);   // hair (main poof, top)

    fill (185, 80, 100);
    ellipse (525, 320, 100, 100);   // hair (side poof, upper right)

    fill (185, 80, 100);
    ellipse (560, 375, 100, 100);   // hair (side poof, lower right)

    fill (180, 80, 100);
    ellipse (455, 226, 300, 190);   // hair shade (main poof, top)

    fill (220, 130, 150);
    ellipse (275, 200, 30, 30);     // hair shine (smol, top)

    fill (220, 130, 150);
    ellipse (230, 300, 20, 20);     // hair shine (smol, side)

    fill (220, 130, 150);
    ellipse (250, 240, 50, 50);     // hair shine (bigger, top)

    fill (0);
    ellipse (300, 405, 15, 15);     // mouth (left)

    fill (0);
    ellipse (400, 405, 15, 15);     // mouth (right)

    fill (0);
    rect (300, 400, 100, 10);       // mouth bridge (center)

    fill (220, 150, 150);
    ellipse (400, 365, 10, 40);    // tear (right)

    fill (190, 120, 120);
    ellipse (300, 365, 10, 40);    // tear (left)

    fill (0);
    ellipse (300, 350, 10, 10);     // eye (left)

    fill (0);
    ellipse (400, 350, 10, 10);     // eye (right)

    fill (0);
    arc (400, 340, 50, 100, 180, PI, PIE);   // eye (right)

    fill (0);
    arc (300, 340, 50, 100, 180, PI, PIE);   // eye (right)

    fill (217, 113, 118);
    ellipse (350, 450, 50, 50);          // chin (dark)

    fill (222, 132, 136);
    ellipse (350, 460, 40, 40);          // chin (light)

}

/* Notes: Wednesday, Aug. 30, 2017

____________________________________________________________

    Week 1 Submission Notes: 
        Submit "Assignments" through AutoLab in a .zip file.
        Submit "Projects" as blogposts, through WordPress.

____________________________________________________________


    Co-ordinates and Drawing:

    For example: "line(1, 0, 4, 5);"
    This expression will draw a line from points (1,0) to (4, 5). These are modeled by (x, y).
    In computing, however, the axes are slightly different. X is conserved, with positive numbers
    going right, and negatives going left. But the Y axis is opposite; negative numbers go up, and 
    positive numbers go down. 

    For example: "rect(1, 2, 4, 3);" which is modeled by "rect(x, y, width, height);" 
    This expression will draw a rectangle from the point (x = 1, y = 2);

    In a more advanced way, you can use Mode commands (rectMode, etc.) to change the way in which
    the program interprets that data. rectMode(center), for instance, will draw the rectange from
    the center instead of the top-left corner, as "rect()" will. 

    When creating a new sketch, input the following code:

    function setup() {
        // put setup code here
        createCanvas(1000, 1000);
    }
 
    function draw() {
        // put drawing code here
    }

    This will allow the sketch to...sketch.

    ___________________________________

    Here is an introduction to shapes:

    in:

    function draw() {
        
        // draw a point:
        ellipse(x, y);                         modeled after "ellipse(x1, y1);"

        // draw a line:
        line(30, 30, 50, 50);                  modeled after "line(x1, y1, x2, y2);"

        // draw a rectangle:
        rect(30, 30, 50, 50);                  modeled after "rect(x1, y1, x2, y2);"
                                               where (x1, y1) is the first point (left, top)
                                               and (x2, y2) is the second (right, bottom).
                                               The rectangle will fill in from the first point
                                               to the second.

        // draw circle:
        ellipse(300, 300, 250, 250)            modeled after "ellipse(x, y, width, height);"
                                               where (x, y) plots the point of the center,
                                               width extends it sideways (width/2) in -x, / +x,
                                               and height entends it upwards (height/2) in -y / +y.

        // draw a triangle:
        triangle(30, 75, 50, 20, 85, 70);      modeled after "triangle(x1, y1, x2, y2, x3, y3);"
                                               where (x1, y1) are the co-ordinates for the first
                                               point (leftmost); (x2, y2) are the co-ordinates
                                               for the second point, and (x3, y3) are the co-
                                               ordinates for the third point (rightmost).
        
        // draw a quadrilateral:
        quad(30, 40, 50, 40, 60, 60, 70, 90);  modeled after "quad(x1, y1, x2, y2, x3, y3, x4, y4);"
                                               where each edge of the point, starting from the top-left
                                               and ending with the bottom-right, are plotted with each 
                                               pair of points (x1, y1), (x2, y2), etc.

        // draw an arc;
        arc(50, 55, 50, 50, 0, half_pi);       modeled after "arc(x, y, width, height, angle, angle, [mode]);"
                                               where (x, y) are the center of the arc's ellipse, (width, height)
                                               are the width and height of the ellipse. "angle, angle" are the
                                               angle values to start and stop the arc, respectively - this value
                                               is expressed in radians. [Mode] is either CHORD or PIE. 
    }
    ______________________________________________________________________________

    Drawing shapes is great, but perhaps we want the shapes to not look like shit?
    You can add many parameters before actually drawing the shape. You must add all
    setup information before drawing the shape, otherwise it will not work. 

    Parameters work top-to-bottom; if you write "fill(0)" on line 5, everything
    after line 5 will be "filled" with that color (in this case, black). 
    To redefine fill colors, you must write more "fill(x)" commands further down.

    Here is an introduction to parameters:

    fill(0);                to fill a shape black
    fill(255, 255, 255);    to fill a shape white
    fill(0, 56, 101);       to fill a shape a random color (RGB values)

    stroke(0);              to outline a shape in black
    stroke(255, 255, 255);  to outline a shape in white
    stroke(0, 0, 255)       to outline a shape in a color

    You can set the stroke weight (how thick the outline "stroke(x)" creates will be), with:

    strokeWeight (10);      in which (x) is a pixel value ("strokeWeight (10)" will create an outline
                            with a thickness of 10 pixels).

    noStroke();             will remove stroke from objects, since objects are stroked by default.
                            i.e. if you do not type 
__________________________________________________________________________________________________

*/