Skip to content

Instantly share code, notes, and snippets.

@Michael-Kelly-Digital-Design

Michael-Kelly-Digital-Design/.block

Forked from dribnet/.block
Created July 17, 2017 01:07
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save Michael-Kelly-Digital-Design/986477a7db0bca7cd8690e1f85c9582e to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save Michael-Kelly-Digital-Design/986477a7db0bca7cd8690e1f85c9582e to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. Guest User revised this gist Jul 31, 2017. 1 changed file with 9 additions and 16 deletions.
    25 changes: 9 additions & 16 deletions README.md
    View file
    Original file line number Diff line number Diff line change
    @@ -1,25 +1,18 @@
    ## PS1 MDDN 342 2017
    #### Oldman-geddon

    This README describes the matrix of selectively randomised faces completed for task 5
    >This README is a summation of the 5 parts in problem set 1 for MDDN342

    My old man was originally made with a select range of possibilities in mind. Therefore I am mostly only imposing restrictions on the *distribution* of the parameters and not the upper/lower bounds.
    ### Part 1 | First Faces
    The first faces I drew for this project were those of Mario and Luigi of the Nintendo universe. We were told to draw 'Two recognisable faces' and I wanted to make mine two separate but similar faces that were individually recognisable. With a simple color change in the hat, I acheived this differentiation.

    I chose this radial layout because I liked the idea of a group of small, geriatric disembodied heads worhsipping a much larger leader-head. In the name of absurdism, I ran with this vision.
    ### Part 2 | Drawing Styles

    *Giant head is pleased with these results.*
    I thought my chubby-cheeked Mario looked ver bayish, and I the cutesy style that I had found with my first face. My second drawing became a drooling baby. My baby sparked in me a fascination with age extremes, so I flipped the coin and drew a geriatric man for my final face. I spent a long time tweaking the ranges of the parameters for these faces to make sure the interpolation between extremes was not jarring; this made part 4 (distribution) a lot easier.

    ---

    The forehead wrinkles are very likely to be dark, this is also linked to a higher probability of whiter hair.
    ### Part 3 & 4 | Randomisation + Distribution

    For the ears, I actually increased the range of possible sizes because I liked the goofy looking big-eared men that resulted in. I kept the distriution tight to make comically large ears a refreshing rarity. The average is on the larger size of the average however, as the ears are among the few body parts to continue growing in old age.
    Moving from sliders to generated faces was a simple transition. I had already spent time curating a parameter range in part 2, and implementing Tom's code was fairly straight forward. Since I got to eliminate two drawing styles with these stages, there was a good deal of releif in paring the sketch file down by about 40%

    The faces' angle parameter was only lightly clustered around an average as it has nothing to do with the characterisation of the faces. Face angle is simply a device to give variation to the population diagram.

    The average size of the spectacles changes depending on the state of a face's mouth is to help convey mood more consistently. The glasses are larger if the face is smiling and smaller if the face is frowning. The population is tightly clustered on the average, as very small or large glasses look quite comical and can be distracting in large numbers.

    I wanted to display a wider range of emotions in a population, so the value controlling the smile of a face does not gravitate toward a mean. The mouth curve already ties into the size of the eyes, so I thought that would be enough to give the mood of each face some cohesion.

    Dark and numerous liver spots felt too distracting to lace a population too heavily with, so I kept the mean very tightly clustered arond the 2 spot mark.
    ### Part 5 | Final

    Having creative freedom with the layout of the final face population was a lot of fun. I opted for a radial design, 14 disembodied heads floating around an almighty aged leader. I imagined a cult of old heads the whole time I was coding this. Laughs were had.
  2. Michael-Kelly-Digital-Design revised this gist Jul 29, 2017. 1 changed file with 1 addition and 5 deletions.
    6 changes: 1 addition & 5 deletions purview.json
    View file
    Original file line number Diff line number Diff line change
    @@ -10,7 +10,7 @@
    },
    {
    "sha": "3e8e5688564f9eec1227df4cee0c43e4c8f2b54f",
    "name": "experiment"
    "name": "portraits"
    },
    {
    "sha": "970c627ab3efdcb7ba2e0637af59f0392af7736f",
    @@ -19,10 +19,6 @@
    {
    "sha": "23077ba1ba4f4e4aa51b59409d844363b3e0427f",
    "name": "drawing_styles"
    },
    {
    "sha": "e3e03e40943eb62d590a05c894502ece4ee927ce",
    "name": "portraits"
    }
    ]
    }
  3. Michael-Kelly-Digital-Design revised this gist Jul 29, 2017. 1 changed file with 28 additions and 0 deletions.
    28 changes: 28 additions & 0 deletions purview.json
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,28 @@
    {
    "commits": [
    {
    "sha": "65cc0d3a68bc8db94d0076bc61c77b2d56df010e",
    "name": "final"
    },
    {
    "sha": "bd71e918950c0dfc282fa0d4cc1dca3770554469",
    "name": "distribution"
    },
    {
    "sha": "3e8e5688564f9eec1227df4cee0c43e4c8f2b54f",
    "name": "experiment"
    },
    {
    "sha": "970c627ab3efdcb7ba2e0637af59f0392af7736f",
    "name": "randomize"
    },
    {
    "sha": "23077ba1ba4f4e4aa51b59409d844363b3e0427f",
    "name": "drawing_styles"
    },
    {
    "sha": "e3e03e40943eb62d590a05c894502ece4ee927ce",
    "name": "portraits"
    }
    ]
    }
  4. Michael-Kelly-Digital-Design revised this gist Jul 29, 2017. 4 changed files with 71 additions and 56 deletions.
    31 changes: 18 additions & 13 deletions README.md
    View file
    Original file line number Diff line number Diff line change
    @@ -1,20 +1,25 @@
    ## PS1 MDDN 342 2017
    #### Oldman-geddon

    This README describes the matrix of randomised faces completed for task 3
    This README describes the matrix of selectively randomised faces completed for task 5

    Face #1; and the design I am going to move forward with, is a parametric old man inspired by my baby face (#3). The old man has configurable worry lines, mood, liver spots, glasses and ears. The liver spots parameter contains both scalar and discrete elements: the sketch will draw 1, 2, or 3 spots depending on the slider's value, and the spots will get progressively darker as the the value ramps up. The worry lines get darker & lighter. The man's mouth will curve up and down depending on the mouth parameter, and the size of his ears and the lenses of his glasses will change dependant on their respective variables.
    My old man was originally made with a select range of possibilities in mind. Therefore I am mostly only imposing restrictions on the *distribution* of the parameters and not the upper/lower bounds.

    The second face is a version of the Mario & Luigi sketch I made earlier. This version casts luigi aside (don't worry, he's used to it!) and draws our sewer-spelunking hero with some features mapped to four of the sliders:
    - Mousache slant
    - Pupil dilation
    - Moustache bushiness: modulates the size of the individual ellipses that make up the moustache. also modulates the size of mario's nose
    - Cheek chubbiness
    I chose this radial layout because I liked the idea of a group of small, geriatric disembodied heads worhsipping a much larger leader-head. In the name of absurdism, I ran with this vision.

    I liked the art style that I used for my Mario. I thought that his cheeks made him look like a baby so I decided to make my next face that of a baby. I used 4 sliders for this onel giving control over:
    - nose size
    - cheek chub
    - mouth openness
    - 'alertness' when baby is tired he starts to drool and has trouble keeping his eyes open
    *Giant head is pleased with these results.*

    ---

    The forehead wrinkles are very likely to be dark, this is also linked to a higher probability of whiter hair.

    For the ears, I actually increased the range of possible sizes because I liked the goofy looking big-eared men that resulted in. I kept the distriution tight to make comically large ears a refreshing rarity. The average is on the larger size of the average however, as the ears are among the few body parts to continue growing in old age.

    The faces' angle parameter was only lightly clustered around an average as it has nothing to do with the characterisation of the faces. Face angle is simply a device to give variation to the population diagram.

    The average size of the spectacles changes depending on the state of a face's mouth is to help convey mood more consistently. The glasses are larger if the face is smiling and smaller if the face is frowning. The population is tightly clustered on the average, as very small or large glasses look quite comical and can be distracting in large numbers.

    I wanted to display a wider range of emotions in a population, so the value controlling the smile of a face does not gravitate toward a mean. The mouth curve already ties into the size of the eyes, so I thought that would be enough to give the mood of each face some cohesion.

    Dark and numerous liver spots felt too distracting to lace a population too heavily with, so I kept the mean very tightly clustered arond the 2 spot mark.

    In the third face I tried out a darker robot idea. This robot is always staring right at you and might have a wide or narrow head. His middle eye is a lazy eye.
    Binary file modified preview.jpg
    View file
    Loading
    Sorry, something went wrong. Reload?
    Sorry, we cannot display this file.
    Sorry, this file is invalid so it cannot be displayed.
    96 changes: 53 additions & 43 deletions sketch.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,5 +1,5 @@
    var canvasWidth = 1100;
    var canvasHeight = 720;
    var canvasWidth = 960;
    var canvasHeight = 500;
    var slider1, slider2, slider3, slider4, slider5;
    var faceSelector;

    @@ -25,7 +25,7 @@ var bg_color2 = [47, 59, 64];
    var bg_color3 = [70, 70, 120];


    function changeRandomSeed() {
    function changeRandomSeed() { //focusedRandom now draws new random values
    curRandomSeed = curRandomSeed + 1;
    lastSwapTime = millis();
    }
    @@ -35,61 +35,71 @@ function mouseClicked() {
    }

    function setup() {

    // create the drawing canvas, save the canvas element
    var main_canvas = createCanvas(canvasWidth, canvasHeight);
    main_canvas.parent('canvasContainer');

    curRandomSeed = int(focusedRandom(0, 100)); //set new random seed
    angleMode(DEGREES);
    }

    function faceGen(x, y, w, h) { //determine face parameters, draw face

    curRandomSeed = int(focusedRandom(0, 100));
    var tilt_value = focusedRandom(-30, 30, 3, 1);
    var ear_value = focusedRandom(0.6, 1.4, 2, 0.95);
    var smile_value = focusedRandom(-0.1, 2.1);
    if(smile_value<1){
    var eye_value = focusedRandom(0.7, 1.3, 3, 1.1);
    }
    else{

    // rotation in degrees
    angleMode(DEGREES);
    var eye_value = focusedRandom(0.7, 1.3, 3, 0.9);

    }
    var wrinkle_value = focusedRandom(-0.2, 1, 2, 0.8);
    var spots_value = focusedRandom(0, 4, 4, 2);

    drawFace1(x, y, w, h, tilt_value, ear_value, eye_value, smile_value, wrinkle_value, spots_value);
    }

    function draw() {
    if(millis() > lastSwapTime + millisPerSwap) {
    changeRandomSeed();
    }

    if (millis() > lastSwapTime + millisPerSwap) {
    changeRandomSeed();
    }
    background(255);
    resetFocusedRandom(curRandomSeed);

    noStroke();

    // use same size / y_pos for all faces
    var w = canvasWidth / 5;
    var h = canvasHeight / 3;

    //face 1 : old

    push();
    translate(width / 2, height / 2);
    fill(bg_color1);
    rect(0, 0, width, height);

    for (var i = 0; i < 3; i++) {
    for (var j = 0; j < 5; j++) {
    var y = h / 2 + h * i;
    var x = w / 2 + w * j;
    var tilt_value = focusedRandom(-15, 15, 4, 0);
    var ear_value = focusedRandom(0.6, 1.4, 2, 0.95);
    var smile_value = focusedRandom(-0.1, 2.1, 2, 1.2);
    var eye_value = focusedRandom(0.7, 1.3);
    var wrinkle_value = focusedRandom(0, 1, 2, 0.4);
    var spots_value = focusedRandom(0, 3, 2, 1);

    drawFace1(x, y, w, h, tilt_value, ear_value, eye_value, smile_value, wrinkle_value, spots_value);
    }
    ellipse(0,0,height/1.01,height/1.01)
    fill(255,12);
    ellipse(0,0,height/1.2,height/1.2);
    ellipse(0,0,height/1.4,height/1.4);
    ellipse(0,0,height/1.6,height/1.6);
    ellipse(0,0,height/1.8,height/1.8);
    ellipse(0,0,height/2,height/2);
    rotate(180);
    faceGen(0,0, height / 2, height / 2);
    rotate(-180);
    for (var i = 0; i < 14; i++) {
    rotate(360/14);
    faceGen(0,height/2.5,height/6,height/6);
    }
    pop();


    }
    //_______________DRAW FUNCTIONS______________//

    function drawFace1(x, y, w, h, tilt, ears, eyes, smile, frown, spots) {
    //OLD

    //OLDMAN
    push();
    translate(x, y);
    rotate(tilt);
    rotate(tilt+180);
    scale(w/200,h/200);
    var shadow_color = editAlpha(blush_color, 0.65);

    fill(skin_tone);
    @@ -103,26 +113,26 @@ function drawFace1(x, y, w, h, tilt, ears, eyes, smile, frown, spots) {
    ellipse(-10, 84, 25, 25); // butt chin left
    ellipse(10, 84, 25, 25); //butt chin right

    //hair
    fill(215 + 10 * spots);
    push();
    translate(-63, -40);
    rotate(23);
    ellipse(0, 0, 35, 60); //hair left
    pop();

    push();
    translate(63, -40);
    rotate(-23);
    ellipse(0, 0, 35, 60); // hair right
    pop();


    //mouth
    noFill();
    stroke(blush_color);
    strokeWeight(2+2*Math.abs(smile-1));
    strokeWeight(2 + 2 * Math.abs(smile - 1)); //scale stroke to smile amount, between 2pt and 4pt
    curve(-40, 50 * smile, -20, 50, 20, 50, 40, 50 * smile); //curve(cpx1, cpy1, x1, y1, x2, y2, cpx2, cpy2);
    strokeWeight(3);

    //eyes (glasses)
    noStroke();
    fill(255, 140);
    @@ -177,23 +187,23 @@ function drawFace1(x, y, w, h, tilt, ears, eyes, smile, frown, spots) {

    //liver spots
    var spot_color_value;
    spot_color_value = editAlpha(spot_color, spots / 4 + 0.25);
    if (Math.floor(spots > 0)) {
    spot_color_value = editAlpha(spot_color, spots / 5 + 0.25);
    if (Math.floor(spots > 1)) {
    push();
    fill(spot_color_value);
    translate(23, -63);
    ellipse(0, 0, 4, 4);
    pop();
    }
    if (Math.floor(spots > 1)) {
    if (Math.floor(spots > 2)) {
    push();
    fill(spot_color_value);
    translate(20, -71);
    rotate(-45);
    ellipse(0, 0, 8, 6);
    pop();
    }
    if (Math.floor(spots > 2)) {
    if (Math.floor(spots > 3)) {
    push();
    fill(spot_color_value);
    translate(32, -68);
    @@ -209,7 +219,7 @@ function drawFace1(x, y, w, h, tilt, ears, eyes, smile, frown, spots) {
    //___________LEVEL 2 FUNCTIONS__________\\
    //used by ren

    function ampLify(inp, ampChange) { // multiply multiplier value as if negative values began at #1
    function ampLify(inp, ampChange) {// used to change parameter values relative to their deviation from 1 (amplitude)
    var v = (inp - 1) * ampChange;
    v += 1;
    return v;
    Binary file modified thumbnail.png
    View file
    Loading
    Sorry, something went wrong. Reload?
    Sorry, we cannot display this file.
    Sorry, this file is invalid so it cannot be displayed.
  5. Guest User revised this gist Jul 27, 2017. 2 changed files with 42 additions and 295 deletions.
    27 changes: 1 addition & 26 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -31,32 +31,7 @@
    <div id="canvasContainer"></div>
    </div>
    <div class="inner" id="controls" height="500px">
    <table>
    <tr>
    <td>Setting 1</td>
    <td id="slider1Container"></td>
    </tr>
    <tr>
    <td>Setting 2</td>
    <td id="slider2Container"></td>
    </tr>
    <tr>
    <td>Setting 3</td>
    <td id="slider3Container"></td>
    </tr>
    <tr>
    <td>Setting 4</td>
    <td id="slider4Container"></td>
    </tr>
    <tr>
    <td>Setting 5</td>
    <td id="slider5Container"></td>
    </tr>
    <tr>
    <td>Face</td>
    <td id="selector1Container"></td>
    </tr>
    </table>

    </div>
    </div>
    </table>
    310 changes: 41 additions & 269 deletions sketch.js
    View file
    Original file line number Diff line number Diff line change
    @@ -3,11 +3,11 @@ var canvasHeight = 720;
    var slider1, slider2, slider3, slider4, slider5;
    var faceSelector;


    var lastSwapTime = 0;
    var millisPerSwap = 5000;

    //color store
    var bg_color = "#white";
    var fg_color1 = "#5b412a";
    var fg_color2 = "#7b611a";
    var stroke_color = "#c78a5b";
    var skin_tone = "#ffe3d8";
    var nose_tone = "#ffc8bf";
    var blush_color = "#f9ab90";
    @@ -24,18 +24,14 @@ var bg_color1 = [183, 214, 182];
    var bg_color2 = [47, 59, 64];
    var bg_color3 = [70, 70, 120];

    var fg_color1 = [151, 102, 52];
    var fg_color2 = [56, 91, 194];
    var fg_color3 = [206, 207, 180];

    var stroke_color1 = [95, 52, 8];
    var stroke_color2 = [210, 219, 189];
    var stroke_color3 = [50, 50, 50];

    var colorHair = [20, 20, 0];

    function changeRandomSeed() {
    curRandomSeed = curRandomSeed + 1;
    lastSwapTime = millis();
    }

    function mouseClicked() {
    changeRandomSeed();
    }

    function setup() {
    @@ -47,102 +43,53 @@ function setup() {

    curRandomSeed = int(focusedRandom(0, 100));

    randButton = createButton('randomize');
    randButton.mousePressed(changeRandomSeed);
    randButton.parent('selector1Container');

    // create sliders
    faceSelector = createSelect();
    faceSelector.option('1');
    faceSelector.option('2');
    faceSelector.option('3');
    // faceSelector.option('all')
    faceSelector.value('1');
    faceSelector.parent('selector1Container');

    // rotation in degrees
    angleMode(DEGREES);
    }

    function draw() {
    resetFocusedRandom(curRandomSeed);
    if(millis() > lastSwapTime + millisPerSwap) {
    changeRandomSeed();
    }

    noStroke();
    resetFocusedRandom(curRandomSeed);

    var mode = faceSelector.value();
    noStroke();

    // use same size / y_pos for all faces
    var w = canvasWidth / 5;
    var h = canvasHeight / 3;

    //face 1 : brown
    if (mode == '1') {

    fill(bg_color1);
    rect(0, 0, width, height);

    for (var i = 0; i < 3; i++) {
    for (var j = 0; j < 5; j++) {
    var y = h / 2 + h * i;
    var x = w / 2 + w * j;
    var ear_value = focusedRandom(0.7, 1.3);
    var smile_value = focusedRandom(-0.1, 2.1);
    var eye_value = focusedRandom(0.7, 1.3);
    var wrinkle_value = focusedRandom(0, 0.7);
    var spots_value = focusedRandom(0, 3);
    drawFace1(x, y, w, h, ear_value, eye_value, smile_value, wrinkle_value, spots_value );
    }
    }
    }
    //face 1 : old

    //face 2 : Mario
    if (mode == '2') {

    fill(bg_color2);
    rect(0, 0, width, height);

    for (var i = 0; i < 3; i++) {
    for (var j = 0; j < 5; j++) {
    var y = h / 2 + h * i;
    var x = w / 2 + w * j;
    var stache_slant_value = focusedRandom(0.8, 1.8);
    var dilation_value = int(focusedRandom(0.75, 1.25));
    var stache_bush_value = focusedRandom(0.9, 1.4);
    var cheek_chub_value = focusedRandom(0.9, 1.1);
    drawFace2(x, y, w, h, stache_slant_value, stache_bush_value, cheek_chub_value, dilation_value); }
    }

    }
    // face 3 : babby
    if (mode == '3') {

    fill(bg_color2);
    rect(0, 0, width, height);

    for (var i = 0; i < 3; i++) {
    for (var j = 0; j < 5; j++) {
    var y = h / 2 + h * i;
    var x = w / 2 + w * j;
    var hair_volume_value = focusedRandom(0.8, 1.8);
    var nose_size_value = int(focusedRandom(0.6, 1.4));
    var mouth_gape_value = focusedRandom(0.9, 1.4);
    var cheek_chub_value = focusedRandom(0.9, 1.1);
    var drool_drip_value = focusedRandom(0.9, 1.45);
    drawFace3(x, y, w, h, hair_volume_value,mouth_gape_value,cheek_chub_value,drool_drip_value); }
    //x, y, w, h, hair_volume, mouth_size, cheek_chub, nose_size, drool_drip
    fill(bg_color1);
    rect(0, 0, width, height);

    for (var i = 0; i < 3; i++) {
    for (var j = 0; j < 5; j++) {
    var y = h / 2 + h * i;
    var x = w / 2 + w * j;
    var tilt_value = focusedRandom(-15, 15, 4, 0);
    var ear_value = focusedRandom(0.6, 1.4, 2, 0.95);
    var smile_value = focusedRandom(-0.1, 2.1, 2, 1.2);
    var eye_value = focusedRandom(0.7, 1.3);
    var wrinkle_value = focusedRandom(0, 1, 2, 0.4);
    var spots_value = focusedRandom(0, 3, 2, 1);

    drawFace1(x, y, w, h, tilt_value, ear_value, eye_value, smile_value, wrinkle_value, spots_value);
    }

    }

    }

    }
    //_______________DRAW FUNCTIONS______________//

    function drawFace1(x, y, w, h, ears, eyes, smile, frown, spots) {
    function drawFace1(x, y, w, h, tilt, ears, eyes, smile, frown, spots) {
    //OLD

    push();
    translate(x, y);

    rotate(tilt);
    var shadow_color = editAlpha(blush_color, 0.65);

    fill(skin_tone);
    @@ -173,9 +120,9 @@ function drawFace1(x, y, w, h, ears, eyes, smile, frown, spots) {
    //mouth
    noFill();
    stroke(blush_color);
    strokeWeight(3);
    strokeWeight(2+2*Math.abs(smile-1));
    curve(-40, 50 * smile, -20, 50, 20, 50, 40, 50 * smile); //curve(cpx1, cpy1, x1, y1, x2, y2, cpx2, cpy2);

    strokeWeight(3);
    //eyes (glasses)
    noStroke();
    fill(255, 140);
    @@ -186,13 +133,13 @@ function drawFace1(x, y, w, h, ears, eyes, smile, frown, spots) {
    ellipse(-25, 5, 35 * eyes, 35 * eyes); //lens L
    ellipse(25, 5, 35 * eyes, 35 * eyes); //lens R
    curve(-15, 20, -7.5 * ampLify(eyes, -2), 2, 7.5 * ampLify(eyes, -2), 2, 15, 20); //bridge
    line(42 * ampLify(eyes, 0.35), -2 * ampLify(eyes, 0.35), 66, -12); //glasses leg R
    line(-42 * ampLify(eyes, 0.35), -2 * ampLify(eyes, 0.35), -66, -12); //glasses leg L
    line(42 * ampLify(eyes, 0.35), -2 * ampLify(eyes, 0.35), 70, -12); //glasses leg R
    line(-42 * ampLify(eyes, 0.35), -2 * ampLify(eyes, 0.35), -70, -12); //glasses leg L
    noStroke();

    //ears
    push()
    translate(-65 - ears * 15, 0);
    translate(-65 - ears * 20, 0);
    scale(ears, ears);
    fill(shadow_color);
    ellipse(1, 2, 26, 49); //ear shadow left
    @@ -206,7 +153,7 @@ function drawFace1(x, y, w, h, ears, eyes, smile, frown, spots) {
    pop();

    push();
    translate(65 + ears * 15, 0)
    translate(65 + ears * 20, 0)
    scale(ears, ears);
    fill(shadow_color);
    ellipse(-1, 2, 26, 49); //ear shadow right
    @@ -258,184 +205,9 @@ function drawFace1(x, y, w, h, ears, eyes, smile, frown, spots) {

    }

    function drawFace2(x, y, w, h, stache_slant, stache_bush, cheek_chub, dilation) {

    push();
    //move to position,
    translate(x, y);


    //hat base
    noStroke();
    fill(hat_color_red);
    ellipse(0, -85, 150, 100);

    //face
    var chin_offset = ampLify(cheek_chub, 0.15); // allow scaling of chin w/o changing position of forehead
    chin_offset *= 220;
    fill(skin_tone);
    ellipse(0, chin_offset / 2 - 110, 160, chin_offset);
    ellipse(-22, 23, 150 * cheek_chub, 150 * cheek_chub); //cheeks
    ellipse(22, 23, 150 * cheek_chub, 150 * cheek_chub);
    fill(hat_color_red);
    ellipse(0, -81, 150, 60); // hat mask

    //blush
    fill(blush_color);
    ellipse(68 * cheek_chub, 24, 25 * cheek_chub, 20 * cheek_chub);
    ellipse(-68 * cheek_chub, 24, 25 * cheek_chub, 20 * cheek_chub);

    //stache
    moustache_6(100 * stache_bush, 45, 15 * stache_bush, 14 * stache_slant);


    //eyes
    fill("white");
    ellipse(-35, -25, 60, 80); //whites
    ellipse(35, -25, 60, 80);
    noStroke();
    fill(eye_color);
    ellipse(-35, -13, 35, 45); //irises
    ellipse(35, -13, 35, 45);
    fill("black");
    ellipse(-35, -13, 23 * dilation, 31 * dilation); //pupils
    ellipse(35, -13, 23 * dilation, 31 * dilation);

    //nose
    var nose_size_mod = ampLify(stache_bush, 0.15) //slight scaling of nose base with stache bushiness
    stroke(blush_color);
    fill(nose_tone);
    ellipse(0, 20, 70 * nose_size_mod, 58 * nose_size_mod); //nose base
    noStroke();
    fill(editAlpha(skin_tone, 0.7));
    ellipse(0, 16, 58 * nose_size_mod, 48 * nose_size_mod); //highlight

    // logo
    fill("white");
    ellipse(0, -100, 40, 40);
    stroke(hat_color_red);
    strokeWeight(2.5);
    ellipse(0, -100, 30, 30);
    strokeWeight(1.1);

    //hat brim
    fill(hat_color_red);
    stroke(color(40, 40));
    ellipse(0, -62, 135, 22);

    pop();

    }

    function drawFace3(x, y, w, h, hair_volume, mouth_size, cheek_chub, nose_size, drool_drip) {
    //BABYFACE
    push();
    //move to position,
    translate(x, y);

    //face
    fill(skin_tone);
    ellipse(0, 0, 170, 180);
    ellipse(-32, 20, 110 * cheek_chub, 120 * cheek_chub); //cheeks
    ellipse(32, 20, 110 * cheek_chub, 120 * cheek_chub);
    fill(hat_color_red);
    //ellipse(0, -81, 150, 60); // hat mask

    //blush
    fill(blush_color);
    ellipse(45 * cheek_chub, 18, 25 * cheek_chub, 20 * cheek_chub);
    ellipse(-45 * cheek_chub, 18, 25 * cheek_chub, 20 * cheek_chub);

    //eyes
    fill("white");
    ellipse(-26, -18, 32, 35); //whites
    ellipse(26, -18, 32, 35);
    noStroke();
    fill("black");
    ellipse(-26, -26 + 8 * drool_drip, 6, 6); //pupils
    ellipse(26, -26 + 8 * drool_drip, 6, 6);

    //nose
    var nose_size_mod = ampLify(nose_size, 0.8); //slight scaling of nose base with stache bushiness
    stroke(blush_color);
    fill(nose_tone);
    ellipse(0, 20, 28 * nose_size_mod, 22 * nose_size_mod); //nose base
    noStroke();
    fill(color('rgba(255, 227, 216,0.6)'));
    ellipse(0, 19, 22 * nose_size_mod, 19 * nose_size_mod); //highlight

    //mouth
    var mouth_size_mod = mouth_size;
    var drool_drip_mod;
    fill('black');
    ellipse(0, 55, 30 * mouth_size_mod, 25 * mouth_size_mod);
    fill(blush_color);
    ellipse(2 * mouth_size_mod, 62 + (2.5 * mouth_size_mod), 15 * mouth_size_mod, 10 * mouth_size_mod);
    noFill();
    stroke(skin_tone);
    strokeWeight(7);
    ellipse(0, 55, 30 * mouth_size_mod, 25 * mouth_size_mod);

    //drool
    noStroke();
    if (drool_drip > 1 && drool_drip < 1.25) { // one droplet of drool drips down face and grows in size
    fill(drool_color);
    var drool_height = 3 * ampLify(drool_drip, 7);
    var drool_y = 12 * mouth_size_mod + 21 + drool_height + drool_drip * 24
    ellipse(9 * mouth_size_mod, drool_y, 5, drool_height);
    }
    if (drool_drip > 1.25) { // second droplet is rendered once first reaches length cap
    fill(drool_color);
    var drool_height = 3 * ampLify(1.25, 7);
    var drool_y = 12 * mouth_size_mod + 21 + drool_height + drool_drip * 24
    ellipse(9 * mouth_size_mod, drool_y, 5, drool_height);
    ellipse(9 * mouth_size_mod, drool_y - drool_height * 1.1, 5, drool_height);
    }

    //brow mask
    rectMode(CENTER);
    fill(skin_tone);
    rect(0, -72 + 20 * drool_drip, 100, 35);
    pop();

    }

    //___________LEVEL 2 FUNCTIONS__________\\
    //used by render functions

    function moustache_6(wid, yOff, bush, slant) { //moustache is a series of O's arranged in a curve
    push();
    var b;
    var y; // y holds the value for each circle used to render the stache
    for (var i = 0; i < 5; i++) {
    b = bush;
    x = i - 2;
    y = (i % 3) * wid / slant;
    switch (i) {
    case 0:
    y = -0.5 * wid / slant;
    b *= 0.85;
    break;
    case 2:
    y = 1.8 * wid / slant;
    b *= 1.1;
    break;
    case 3:
    y = wid / slant;
    break;
    case 4:
    y = -0.5 * wid / slant;
    b *= 0.85;
    break;
    }
    //draw a dot
    fill(stache_color);
    noStroke();
    ellipse(x * wid / 6, y + yOff, b * wid / 60);

    }
    pop();
    }
    //used by ren

    function ampLify(inp, ampChange) { // multiply multiplier value as if negative values began at #1
    var v = (inp - 1) * ampChange;
  6. Guest User revised this gist Jul 27, 2017. 4 changed files with 103 additions and 111 deletions.
    7 changes: 5 additions & 2 deletions README.md
    View file
    Original file line number Diff line number Diff line change
    @@ -1,17 +1,20 @@
    ## PS1 MDDN 342 2017

    This README explains the three different paramaterized faces for part2.
    This README describes the matrix of randomised faces completed for task 3

    Face #1; and the design I am going to move forward with, is a parametric old man inspired by my baby face (#3). The old man has configurable worry lines, mood, liver spots, glasses and ears. The liver spots parameter contains both scalar and discrete elements: the sketch will draw 1, 2, or 3 spots depending on the slider's value, and the spots will get progressively darker as the the value ramps up. The worry lines get darker & lighter. The man's mouth will curve up and down depending on the mouth parameter, and the size of his ears and the lenses of his glasses will change dependant on their respective variables.

    The second face is a version of the Mario & Luigi sketch I made earlier. This version casts luigi aside (don't worry, he's used to it!) and draws our sewer-spelunking hero with some features mapped to four of the sliders:
    - Mousache slant
    - Pupil dilation
    - Moustache bushiness: modulates the size of the individual ellipses that make up the moustache. also modulates the size of mario's nose
    - Cheek chubbiness

    I liked the art style that i used for my Mario. I thought that his cheeks made him look like a baby so I decided to make my next face that of a baby. I used 4 sliders for this onel giving control over:
    I liked the art style that I used for my Mario. I thought that his cheeks made him look like a baby so I decided to make my next face that of a baby. I used 4 sliders for this onel giving control over:
    - nose size
    - cheek chub
    - mouth openness
    - 'alertness' when baby is tired he starts to drool and has trouble keeping his eyes open


    In the third face I tried out a darker robot idea. This robot is always staring right at you and might have a wide or narrow head. His middle eye is a lazy eye.
    Binary file modified preview.jpg
    View file
    Loading
    Sorry, something went wrong. Reload?
    Sorry, we cannot display this file.
    Sorry, this file is invalid so it cannot be displayed.
    207 changes: 98 additions & 109 deletions sketch.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,5 +1,5 @@
    var canvasWidth = 960;
    var canvasHeight = 500;
    var canvasWidth = 1100;
    var canvasHeight = 720;
    var slider1, slider2, slider3, slider4, slider5;
    var faceSelector;

    @@ -34,121 +34,110 @@ var stroke_color3 = [50, 50, 50];

    var colorHair = [20, 20, 0];

    var m_x
    var m_y
    function changeRandomSeed() {
    curRandomSeed = curRandomSeed + 1;
    }

    function setup() {

    // create the drawing canvas, save the canvas element
    var main_canvas = createCanvas(canvasWidth, canvasHeight);
    main_canvas.parent('canvasContainer');

    // create sliders
    slider1 = createSlider(0, 100, 50);
    slider2 = createSlider(0, 100, 50);
    slider3 = createSlider(0, 100, 50);
    slider4 = createSlider(0, 100, 50);
    slider5 = createSlider(0, 100, 50);

    slider1.parent('slider1Container');
    slider2.parent('slider2Container');
    slider3.parent('slider3Container');
    slider4.parent('slider4Container');
    slider5.parent('slider5Container');

    curRandomSeed = int(focusedRandom(0, 100));

    randButton = createButton('randomize');
    randButton.mousePressed(changeRandomSeed);
    randButton.parent('selector1Container');

    // create sliders
    faceSelector = createSelect();
    faceSelector.option('1');
    faceSelector.option('2');
    faceSelector.option('3');
    faceSelector.option('all')
    faceSelector.value('all');
    // faceSelector.option('all')
    faceSelector.value('1');
    faceSelector.parent('selector1Container');

    // rotation in degrees
    angleMode(DEGREES);
    }

    function draw() {
    resetFocusedRandom(curRandomSeed);

    noStroke();

    var mode = faceSelector.value();

    if (mode != 'all') {
    if (mode == '1') {
    background(bg_color1);
    } else if (mode == '2') {
    background(bg_color2);
    } else if (mode == '3') {
    background(bg_color3);
    }
    }

    var s1 = slider1.value();
    var s2 = slider2.value();
    var s3 = slider3.value();
    var s4 = slider4.value();
    var s5 = slider5.value();

    // use same size / y_pos for all faces
    var face_w = canvasWidth / 4;
    var face_h = face_w;
    var face_y = height / 2;
    var face_x = width / 2;
    var w = canvasWidth / 5;
    var h = canvasHeight / 3;

    //face 1 : brown
    if (mode == '1' || mode == 'all') {
    if (mode == '1') {

    fill(bg_color1);
    rect(0, 0, width / 3, height);
    var ear_value = map(s1, 0, 100, 0.7, 1.3);
    var smile_value = map(s3, 0, 100, -0.1, 2.1);
    var eye_value = map(s2, 0, 100, 0.7, 1.3);
    var wrinkle_value = map(s4,0,100,0,0.7);
    var spots_value = map(s5,0,100,0,3);

    if (mode == 'all') {
    face_x = width / 6;
    rect(0, 0, width, height);

    for (var i = 0; i < 3; i++) {
    for (var j = 0; j < 5; j++) {
    var y = h / 2 + h * i;
    var x = w / 2 + w * j;
    var ear_value = focusedRandom(0.7, 1.3);
    var smile_value = focusedRandom(-0.1, 2.1);
    var eye_value = focusedRandom(0.7, 1.3);
    var wrinkle_value = focusedRandom(0, 0.7);
    var spots_value = focusedRandom(0, 3);
    drawFace1(x, y, w, h, ear_value, eye_value, smile_value, wrinkle_value, spots_value );
    }
    }

    drawFace1(face_x, face_y, face_w, face_h, ear_value, eye_value, smile_value,wrinkle_value,spots_value);
    }

    //face 2 : Mario
    if (mode == '2' || mode == 'all') {
    if (mode == '2') {

    fill(bg_color2);
    rect(width / 3, 0, 2 * width / 3, height);
    var stache_slant_value = map(s1, 100, 0, 0.8, 1.8);
    var dilation_value = map(s2, 0, 100, 0.75, 1.25);
    var stache_bush_value = map(s3, 0, 100, 0.9, 1.4);
    var cheek_chub_value = map(s4, 0, 100, 0.9, 1.1);
    if (mode == 'all') {
    face_x = 3 * width / 6;
    rect(0, 0, width, height);

    for (var i = 0; i < 3; i++) {
    for (var j = 0; j < 5; j++) {
    var y = h / 2 + h * i;
    var x = w / 2 + w * j;
    var stache_slant_value = focusedRandom(0.8, 1.8);
    var dilation_value = int(focusedRandom(0.75, 1.25));
    var stache_bush_value = focusedRandom(0.9, 1.4);
    var cheek_chub_value = focusedRandom(0.9, 1.1);
    drawFace2(x, y, w, h, stache_slant_value, stache_bush_value, cheek_chub_value, dilation_value); }
    }

    drawFace2(face_x, face_y, face_w, face_h, stache_slant_value, stache_bush_value, cheek_chub_value, dilation_value);

    }
    // face 3 : babby
    if (mode == '3' || mode == 'all') {

    fill(bg_color3);
    rect(2 * width / 3, 0, 2 * width / 3, height);
    var hair_volume_value = map(s1, 100, 0, 0.8, 1.8);
    var nose_size_value = map(s2, 0, 100, 0.6, 1.4);
    var mouth_gape_value = map(s3, 0, 100, 0.9, 1.4);
    var cheek_chub_value = map(s4, 0, 100, 0.9, 1.1);
    var drool_drip_value = map(s5, 0, 100, 0.9, 1.45);
    if (mode == 'all') {
    face_x = 5 * width / 6;
    if (mode == '3') {

    fill(bg_color2);
    rect(0, 0, width, height);

    for (var i = 0; i < 3; i++) {
    for (var j = 0; j < 5; j++) {
    var y = h / 2 + h * i;
    var x = w / 2 + w * j;
    var hair_volume_value = focusedRandom(0.8, 1.8);
    var nose_size_value = int(focusedRandom(0.6, 1.4));
    var mouth_gape_value = focusedRandom(0.9, 1.4);
    var cheek_chub_value = focusedRandom(0.9, 1.1);
    var drool_drip_value = focusedRandom(0.9, 1.45);
    drawFace3(x, y, w, h, hair_volume_value,mouth_gape_value,cheek_chub_value,drool_drip_value); }
    //x, y, w, h, hair_volume, mouth_size, cheek_chub, nose_size, drool_drip
    }

    drawFace3(face_x, face_y, face_w, face_h, hair_volume_value, mouth_gape_value, cheek_chub_value, nose_size_value, drool_drip_value);

    }

    }

    }
    //_______________DRAW FUNCTIONS______________//

    function drawFace1(x, y, w, h, ears, eyes, smile,frown,spots) {
    function drawFace1(x, y, w, h, ears, eyes, smile, frown, spots) {
    //OLD

    push();
    @@ -167,7 +156,7 @@ function drawFace1(x, y, w, h, ears, eyes, smile,frown,spots) {
    ellipse(-10, 84, 25, 25); // butt chin left
    ellipse(10, 84, 25, 25); //butt chin right

    fill(215+10*spots);
    fill(215 + 10 * spots);
    push();
    translate(-63, -40);
    rotate(23);
    @@ -232,39 +221,39 @@ function drawFace1(x, y, w, h, ears, eyes, smile,frown,spots) {
    pop();

    //frown lines
    var frown_color_value = editAlpha(blush_color,frown);
    var frown_color_value = editAlpha(blush_color, frown);
    stroke(frown_color_value);
    strokeWeight(2);
    curve(45,-70, 25,-50, -25,-50, -45,-70);
    curve(45,-50, 15,-43, -15,-43, -45,-50);
    curve(45,-25, 25,-35, -25,-35, -45,-25);

    //liver spots
    var spot_color_value;
    spot_color_value = editAlpha(spot_color,spots/4+0.25);
    if(Math.floor(spots>0)){
    push();
    fill(spot_color_value);
    translate(23,-63);
    ellipse(0,0,4,4);
    pop();
    }
    if(Math.floor(spots>1)){
    push();
    fill(spot_color_value);
    translate(20,-71);
    rotate(-45);
    ellipse(0,0,8,6);
    pop();
    }
    if(Math.floor(spots>2)){
    push();
    fill(spot_color_value);
    translate(32,-68);
    rotate(52);
    ellipse(0,0,10,7);
    pop();
    }
    curve(45, -70, 25, -50, -25, -50, -45, -70);
    curve(45, -50, 15, -43, -15, -43, -45, -50);
    curve(45, -25, 25, -35, -25, -35, -45, -25);

    //liver spots
    var spot_color_value;
    spot_color_value = editAlpha(spot_color, spots / 4 + 0.25);
    if (Math.floor(spots > 0)) {
    push();
    fill(spot_color_value);
    translate(23, -63);
    ellipse(0, 0, 4, 4);
    pop();
    }
    if (Math.floor(spots > 1)) {
    push();
    fill(spot_color_value);
    translate(20, -71);
    rotate(-45);
    ellipse(0, 0, 8, 6);
    pop();
    }
    if (Math.floor(spots > 2)) {
    push();
    fill(spot_color_value);
    translate(32, -68);
    rotate(52);
    ellipse(0, 0, 10, 7);
    pop();
    }
    pop();

    }
    @@ -318,7 +307,7 @@ function drawFace2(x, y, w, h, stache_slant, stache_bush, cheek_chub, dilation)
    fill(nose_tone);
    ellipse(0, 20, 70 * nose_size_mod, 58 * nose_size_mod); //nose base
    noStroke();
    fill(editAlpha(skin_tone,0.7));
    fill(editAlpha(skin_tone, 0.7));
    ellipse(0, 16, 58 * nose_size_mod, 48 * nose_size_mod); //highlight

    // logo
    Binary file modified thumbnail.png
    View file
    Loading
    Sorry, something went wrong. Reload?
    Sorry, we cannot display this file.
    Sorry, this file is invalid so it cannot be displayed.
  7. Michael-Kelly-Digital-Design revised this gist Jul 25, 2017. 3 changed files with 1 addition and 1 deletion.
    Binary file modified preview.jpg
    View file
    Loading
    Sorry, something went wrong. Reload?
    Sorry, we cannot display this file.
    Sorry, this file is invalid so it cannot be displayed.
    2 changes: 1 addition & 1 deletion sketch.js
    View file
    Original file line number Diff line number Diff line change
    @@ -61,7 +61,7 @@ function setup() {
    faceSelector.option('2');
    faceSelector.option('3');
    faceSelector.option('all')
    faceSelector.value('1');
    faceSelector.value('all');
    faceSelector.parent('selector1Container');

    // rotation in degrees
    Binary file modified thumbnail.png
    View file
    Loading
    Sorry, something went wrong. Reload?
    Sorry, we cannot display this file.
    Sorry, this file is invalid so it cannot be displayed.
  8. Michael-Kelly-Digital-Design revised this gist Jul 25, 2017. 3 changed files with 3 additions and 3 deletions.
    Binary file modified preview.jpg
    View file
    Loading
    Sorry, something went wrong. Reload?
    Sorry, we cannot display this file.
    Sorry, this file is invalid so it cannot be displayed.
    6 changes: 3 additions & 3 deletions sketch.js
    View file
    Original file line number Diff line number Diff line change
    @@ -20,7 +20,7 @@ var drool_color = "#99c0ff";
    var spot_color = "#c18672";

    // global variables for colors
    var bg_color1 = [225, 206, 187];
    var bg_color1 = [183, 214, 182];
    var bg_color2 = [47, 59, 64];
    var bg_color3 = [70, 70, 120];

    @@ -167,7 +167,7 @@ function drawFace1(x, y, w, h, ears, eyes, smile,frown,spots) {
    ellipse(-10, 84, 25, 25); // butt chin left
    ellipse(10, 84, 25, 25); //butt chin right

    fill('white');
    fill(215+10*spots);
    push();
    translate(-63, -40);
    rotate(23);
    @@ -318,7 +318,7 @@ function drawFace2(x, y, w, h, stache_slant, stache_bush, cheek_chub, dilation)
    fill(nose_tone);
    ellipse(0, 20, 70 * nose_size_mod, 58 * nose_size_mod); //nose base
    noStroke();
    fill(color('rgba(255, 227, 216,0.7)'));
    fill(editAlpha(skin_tone,0.7));
    ellipse(0, 16, 58 * nose_size_mod, 48 * nose_size_mod); //highlight

    // logo
    Binary file modified thumbnail.png
    View file
    Loading
    Sorry, something went wrong. Reload?
    Sorry, we cannot display this file.
    Sorry, this file is invalid so it cannot be displayed.
  9. Michael-Kelly-Digital-Design revised this gist Jul 25, 2017. 2 changed files with 0 additions and 0 deletions.
    Binary file modified preview.jpg
    View file
    Loading
    Sorry, something went wrong. Reload?
    Sorry, we cannot display this file.
    Sorry, this file is invalid so it cannot be displayed.
    Binary file modified thumbnail.png
    View file
    Loading
    Sorry, something went wrong. Reload?
    Sorry, we cannot display this file.
    Sorry, this file is invalid so it cannot be displayed.
  10. Michael-Kelly-Digital-Design revised this gist Jul 25, 2017. 2 changed files with 113 additions and 41 deletions.
    2 changes: 1 addition & 1 deletion README.md
    View file
    Original file line number Diff line number Diff line change
    @@ -8,7 +8,7 @@ The second face is a version of the Mario & Luigi sketch I made earlier. This ve
    - Moustache bushiness: modulates the size of the individual ellipses that make up the moustache. also modulates the size of mario's nose
    - Cheek chubbiness

    I liked the art style that my Mario. I thought that his cheeks made him look like a baby so I decided to make my next face that of a baby. I used 4 sliders for this onel giving control over:
    I liked the art style that i used for my Mario. I thought that his cheeks made him look like a baby so I decided to make my next face that of a baby. I used 4 sliders for this onel giving control over:
    - nose size
    - cheek chub
    - mouth openness
    152 changes: 112 additions & 40 deletions sketch.js
    View file
    Original file line number Diff line number Diff line change
    @@ -17,6 +17,7 @@ var hat_color_red = "#ce4a4a";
    var eye_color = "#83cbff";
    var stache_color = "#593510";
    var drool_color = "#99c0ff";
    var spot_color = "#c18672";

    // global variables for colors
    var bg_color1 = [225, 206, 187];
    @@ -99,14 +100,17 @@ function draw() {

    fill(bg_color1);
    rect(0, 0, width / 3, height);
    var tilt_value = map(s1, 0, 100, -90, 90);
    var mouth_value = map(s3, 0, 100, 0, 200);
    var eye_value = Math.floor(map(s2, 0, 100, 1, 3));
    var ear_value = map(s1, 0, 100, 0.7, 1.3);
    var smile_value = map(s3, 0, 100, -0.1, 2.1);
    var eye_value = map(s2, 0, 100, 0.7, 1.3);
    var wrinkle_value = map(s4,0,100,0,0.7);
    var spots_value = map(s5,0,100,0,3);

    if (mode == 'all') {
    face_x = width / 6;
    }

    drawFace1(face_x, face_y, face_w, face_h, tilt_value, eye_value, mouth_value);
    drawFace1(face_x, face_y, face_w, face_h, ear_value, eye_value, smile_value,wrinkle_value,spots_value);
    }
    //face 2 : Mario
    if (mode == '2' || mode == 'all') {
    @@ -139,67 +143,128 @@ function draw() {

    drawFace3(face_x, face_y, face_w, face_h, hair_volume_value, mouth_gape_value, cheek_chub_value, nose_size_value, drool_drip_value);
    }
    m_x = mouseX;
    m_y = mouseY;

    }

    //_______________DRAW FUNCTIONS______________//

    function drawFace1(x, y, w, h, tilt_value, eye_value, mouth_value) {
    function drawFace1(x, y, w, h, ears, eyes, smile,frown,spots) {
    //OLD

    push();
    translate(x, y);

    rotate(tilt_value);
    var old_shadow_color = color(blush_color);
    old_shadow_color._array[3] = 0.65;
    var shadow_color = editAlpha(blush_color, 0.65);

    fill(skin_tone);
    ellipse(0, 0, 165, 185); // face

    fill(old_shadow_color);
    ellipse(0,77,30,20); // lower frown line (upper shin shadow)
    fill(skin_tone);
    ellipse(0,77,32,18); // mask for lower frown line

    ellipse(-10,84,25,25); // butt chin left
    ellipse(10,84,25,25); //butt chin right
    fill(shadow_color);
    ellipse(0, 77, 30, 20); // lower frown line (upper shin shadow)
    fill(skin_tone);
    ellipse(0, 77, 32, 18); // mask for lower frown line

    ellipse(-10, 84, 25, 25); // butt chin left
    ellipse(10, 84, 25, 25); //butt chin right

    push();
    fill('white');
    push();
    translate(-63, -40);
    rotate(23);
    ellipse(0, 0, 35, 60); //hair left
    pop();

    push();
    fill('white')
    translate(63, -40);
    rotate(-23);
    ellipse(0, 0, 35, 60); // hair right
    pop();


    fill(old_shadow_color);
    ellipse(-79,2,26,49); //ear shadow left
    ellipse(79,2,26,49); //ear shadow right
    fill(skin_tone);
    ellipse(-80,0,30,50); //ear left
    ellipse(80,0,30,50); //ear right

    fill(old_shadow_color);
    ellipse(-82,0,12,18); //inner ear shadow left
    ellipse(82,0,12,18); // inner ear shadow right
    fill(skin_tone);
    noStroke();
    ellipse(-76,2,10,10); //inner shadow mask left
    ellipse(76,2,10,10); // inner shadow mask right


    fill('red');
    textSize(12);
    text((m_x - x) + " , " + (m_y - y), mouseX - x, mouseY - y);


    //mouth
    noFill();
    stroke(blush_color);
    strokeWeight(3);
    curve(-40, 50 * smile, -20, 50, 20, 50, 40, 50 * smile); //curve(cpx1, cpy1, x1, y1, x2, y2, cpx2, cpy2);

    //eyes (glasses)
    noStroke();
    fill(255, 140);
    ellipse(-23, 8, 30 * eyes, 25 * eyes); //lens L Highlight
    ellipse(23, 8, 30 * eyes, 25 * eyes); //lens R Highlight
    stroke(180);
    fill(255, 60);
    ellipse(-25, 5, 35 * eyes, 35 * eyes); //lens L
    ellipse(25, 5, 35 * eyes, 35 * eyes); //lens R
    curve(-15, 20, -7.5 * ampLify(eyes, -2), 2, 7.5 * ampLify(eyes, -2), 2, 15, 20); //bridge
    line(42 * ampLify(eyes, 0.35), -2 * ampLify(eyes, 0.35), 66, -12); //glasses leg R
    line(-42 * ampLify(eyes, 0.35), -2 * ampLify(eyes, 0.35), -66, -12); //glasses leg L
    noStroke();

    //ears
    push()
    translate(-65 - ears * 15, 0);
    scale(ears, ears);
    fill(shadow_color);
    ellipse(1, 2, 26, 49); //ear shadow left
    fill(skin_tone);
    ellipse(-0, 0, 30, 50); //ear left
    fill(shadow_color);
    ellipse(-2, 0, 12, 18); //inner ear shadow left
    fill(skin_tone);
    noStroke();
    ellipse(4, 2, 10, 10); //inner shadow mask left
    pop();

    push();
    translate(65 + ears * 15, 0)
    scale(ears, ears);
    fill(shadow_color);
    ellipse(-1, 2, 26, 49); //ear shadow right
    fill(skin_tone);
    ellipse(0, 0, 30, 50); //ear right

    fill(shadow_color);
    ellipse(2, 0, 12, 18); // inner ear shadow right
    fill(skin_tone);
    noStroke();
    ellipse(-4, 2, 10, 10); // inner shadow mask right
    pop();

    //frown lines
    var frown_color_value = editAlpha(blush_color,frown);
    stroke(frown_color_value);
    strokeWeight(2);
    curve(45,-70, 25,-50, -25,-50, -45,-70);
    curve(45,-50, 15,-43, -15,-43, -45,-50);
    curve(45,-25, 25,-35, -25,-35, -45,-25);

    //liver spots
    var spot_color_value;
    spot_color_value = editAlpha(spot_color,spots/4+0.25);
    if(Math.floor(spots>0)){
    push();
    fill(spot_color_value);
    translate(23,-63);
    ellipse(0,0,4,4);
    pop();
    }
    if(Math.floor(spots>1)){
    push();
    fill(spot_color_value);
    translate(20,-71);
    rotate(-45);
    ellipse(0,0,8,6);
    pop();
    }
    if(Math.floor(spots>2)){
    push();
    fill(spot_color_value);
    translate(32,-68);
    rotate(52);
    ellipse(0,0,10,7);
    pop();
    }
    pop();

    }
    @@ -387,7 +452,14 @@ function ampLify(inp, ampChange) { // multiply multiplier value as if negative v
    var v = (inp - 1) * ampChange;
    v += 1;
    return v;
    }

    function editAlpha(col, val) {
    //input color stored as hex code String
    //return p5 color object feat. updated alpha
    var v = color(col);
    v._array[3] = val;
    return v;
    }

    function keyTyped() {
  11. Guest User revised this gist Jul 24, 2017. 3 changed files with 232 additions and 217 deletions.
    Binary file modified preview.jpg
    View file
    Loading
    Sorry, something went wrong. Reload?
    Sorry, we cannot display this file.
    Sorry, this file is invalid so it cannot be displayed.
    449 changes: 232 additions & 217 deletions sketch.js
    View file
    Original file line number Diff line number Diff line change
    @@ -33,7 +33,8 @@ var stroke_color3 = [50, 50, 50];

    var colorHair = [20, 20, 0];


    var m_x
    var m_y

    function setup() {

    @@ -59,7 +60,7 @@ function setup() {
    faceSelector.option('2');
    faceSelector.option('3');
    faceSelector.option('all')
    faceSelector.value('all');
    faceSelector.value('1');
    faceSelector.parent('selector1Container');

    // rotation in degrees
    @@ -138,241 +139,255 @@ function draw() {

    drawFace3(face_x, face_y, face_w, face_h, hair_volume_value, mouth_gape_value, cheek_chub_value, nose_size_value, drool_drip_value);
    }
    m_x = mouseX;
    m_y = mouseY;
    }

    //_______________DRAW FUNCTIONS______________//

    function drawFace1(x, y, w, h, tilt_value, eye_value, mouth_value) {
    push();
    translate(x, y);

    rotate(tilt_value);
    var old_shadow_color = color(blush_color);
    old_shadow_color._array[3] = 0.65;

    fill(skin_tone);
    ellipse(0, 0, 165, 185); // face

    fill(old_shadow_color);
    ellipse(0,77,30,20); // lower frown line (upper shin shadow)
    fill(skin_tone);
    ellipse(0,77,32,18); // mask for lower frown line

    ellipse(-10,84,25,25); // butt chin left
    ellipse(10,84,25,25); //butt chin right


    push();
    fill('white');
    translate(-63, -40);
    rotate(23);
    ellipse(0, 0, 35, 60); //hair left
    pop();

    push();
    fill('white')
    translate(63, -40);
    rotate(-23);
    ellipse(0, 0, 35, 60); // hair right
    pop();


    fill(old_shadow_color);
    ellipse(-79,2,26,49); //ear shadow left
    ellipse(79,2,26,49); //ear shadow right
    fill(skin_tone);
    ellipse(-80,0,30,50); //ear left
    ellipse(80,0,30,50); //ear right

    fill(old_shadow_color);
    ellipse(-82,0,12,18); //inner ear shadow left
    ellipse(82,0,12,18); // inner ear shadow right
    fill(skin_tone);
    noStroke();
    ellipse(-76,2,10,10); //inner shadow mask left
    ellipse(76,2,10,10); // inner shadow mask right


    fill('red');
    textSize(12);
    text((m_x - x) + " , " + (m_y - y), mouseX - x, mouseY - y);

    pop();

    //_______________DRAW FUNCTIONS______________//

    function drawFace1(x, y, w, h, tilt_value, eye_value, mouth_value) {

    push();
    translate(x, y);
    rotate(tilt_value);

    var extent = 0;
    if (h < w) {
    extent = h / 2;
    } else {
    extent = w / 2;
    }
    var scale = extent / 220.0;

    fill(fg_color1);
    ellipse(0, 0, 300 * scale, 400 * scale);

    // eyes
    if (eye_value === 1 || eye_value == 3) {
    fill(bg_color1);
    ellipse(0, -80 * scale, 50 * scale, 30 * scale);
    fill(fg_color1);
    ellipse(-10 * scale, -80 * scale, 20 * scale, 20 * scale);
    }

    if (eye_value >= 2) {
    fill(bg_color1);
    ellipse(-50 * scale, -80 * scale, 50 * scale, 30 * scale);
    ellipse(50 * scale, -80 * scale, 50 * scale, 30 * scale);

    fill(fg_color1);
    ellipse(-60 * scale, -80 * scale, 20 * scale, 20 * scale);
    ellipse(40 * scale, -80 * scale, 20 * scale, 20 * scale);
    }

    // mouth
    fill(bg_color1);
    ellipse(0 * scale, 70 * scale, 150 * scale, mouth_value * scale);
    pop();
    }

    }
    function drawFace2(x, y, w, h, stache_slant, stache_bush, cheek_chub, dilation) {

    function drawFace2(x, y, w, h, stache_slant, stache_bush, cheek_chub, dilation) {
    push();
    //move to position,
    translate(x, y);

    push();
    //move to position,
    translate(x, y);

    //hat base
    noStroke();
    fill(hat_color_red);
    ellipse(0, -85, 150, 100);

    //face
    var chin_offset = ampLify(cheek_chub, 0.15); // allow scaling of chin w/o changing position of forehead
    chin_offset *= 220;
    fill(skin_tone);
    ellipse(0, chin_offset / 2 - 110, 160, chin_offset);
    ellipse(-22, 23, 150 * cheek_chub, 150 * cheek_chub); //cheeks
    ellipse(22, 23, 150 * cheek_chub, 150 * cheek_chub);
    fill(hat_color_red);
    ellipse(0, -81, 150, 60); // hat mask

    //blush
    fill(blush_color);
    ellipse(68 * cheek_chub, 24, 25 * cheek_chub, 20 * cheek_chub);
    ellipse(-68 * cheek_chub, 24, 25 * cheek_chub, 20 * cheek_chub);

    //stache
    moustache_6(100 * stache_bush, 45, 15 * stache_bush, 14 * stache_slant);


    //eyes
    fill("white");
    ellipse(-35, -25, 60, 80); //whites
    ellipse(35, -25, 60, 80);
    noStroke();
    fill(eye_color);
    ellipse(-35, -13, 35, 45); //irises
    ellipse(35, -13, 35, 45);
    fill("black");
    ellipse(-35, -13, 23 * dilation, 31 * dilation); //pupils
    ellipse(35, -13, 23 * dilation, 31 * dilation);

    //nose
    var nose_size_mod = ampLify(stache_bush, 0.15) //slight scaling of nose base with stache bushiness
    stroke(blush_color);
    fill(nose_tone);
    ellipse(0, 20, 70 * nose_size_mod, 58 * nose_size_mod); //nose base
    noStroke();
    fill(color('rgba(255, 227, 216,0.7)'));
    ellipse(0, 16, 58 * nose_size_mod, 48 * nose_size_mod); //highlight

    //hat base
    noStroke();
    fill(hat_color_red);
    ellipse(0, -85, 150, 100);

    //face
    var chin_offset = (cheek_chub - 1) * 0.15 + 1; // allow scaling of chin w/o changing position of forehead
    chin_offset *= 220;
    fill(skin_tone);
    ellipse(0, chin_offset / 2 - 110, 160, chin_offset);
    ellipse(-22, 23, 150 * cheek_chub, 150 * cheek_chub); //cheeks
    ellipse(22, 23, 150 * cheek_chub, 150 * cheek_chub);
    fill(hat_color_red);
    ellipse(0, -81, 150, 60); // hat mask

    //blush
    fill(blush_color);
    ellipse(68 * cheek_chub, 24, 25 * cheek_chub, 20 * cheek_chub);
    ellipse(-68 * cheek_chub, 24, 25 * cheek_chub, 20 * cheek_chub);

    //stache
    moustache_6(100 * stache_bush, 45, 15 * stache_bush, 14 * stache_slant);


    //eyes
    fill("white");
    ellipse(-35, -25, 60, 80); //whites
    ellipse(35, -25, 60, 80);
    noStroke();
    fill(eye_color);
    ellipse(-35, -13, 35, 45); //irises
    ellipse(35, -13, 35, 45);
    fill("black");
    ellipse(-35, -13, 23 * dilation, 31 * dilation); //pupils
    ellipse(35, -13, 23 * dilation, 31 * dilation);

    //nose
    var nose_size_mod = (stache_bush - 1) * 0.2 + 1 //slight scaling of nose base with stache bushiness
    stroke(blush_color);
    fill(nose_tone);
    ellipse(0, 20, 75 * nose_size_mod, 62 * nose_size_mod); //nose base
    noStroke();
    fill(color('rgba(255, 227, 216,0.7)'));
    ellipse(0, 16, 60 * nose_size_mod, 50 * nose_size_mod); //highlight
    // logo
    fill("white");
    ellipse(0, -100, 40, 40);
    stroke(hat_color_red);
    strokeWeight(2.5);
    ellipse(0, -100, 30, 30);
    strokeWeight(1.1);

    // logo
    fill("white");
    ellipse(0, -100, 40, 40);
    stroke(hat_color_red);
    strokeWeight(2.5);
    ellipse(0, -100, 30, 30);
    strokeWeight(1.1);
    //hat brim
    fill(hat_color_red);
    stroke(color(40, 40));
    ellipse(0, -62, 135, 22);

    //hat brim
    fill(hat_color_red);
    stroke(color(40, 40));
    ellipse(0, -62, 135, 22);
    pop();

    pop();
    }

    function drawFace3(x, y, w, h, hair_volume, mouth_size, cheek_chub, nose_size, drool_drip) {
    //BABYFACE
    push();
    //move to position,
    translate(x, y);

    //face
    fill(skin_tone);
    ellipse(0, 0, 170, 180);
    ellipse(-32, 20, 110 * cheek_chub, 120 * cheek_chub); //cheeks
    ellipse(32, 20, 110 * cheek_chub, 120 * cheek_chub);
    fill(hat_color_red);
    //ellipse(0, -81, 150, 60); // hat mask

    //blush
    fill(blush_color);
    ellipse(45 * cheek_chub, 18, 25 * cheek_chub, 20 * cheek_chub);
    ellipse(-45 * cheek_chub, 18, 25 * cheek_chub, 20 * cheek_chub);

    //eyes
    fill("white");
    ellipse(-26, -18, 32, 35); //whites
    ellipse(26, -18, 32, 35);
    noStroke();
    fill("black");
    ellipse(-26, -26 + 8 * drool_drip, 6, 6); //pupils
    ellipse(26, -26 + 8 * drool_drip, 6, 6);

    //nose
    var nose_size_mod = ampLify(nose_size, 0.8); //slight scaling of nose base with stache bushiness
    stroke(blush_color);
    fill(nose_tone);
    ellipse(0, 20, 28 * nose_size_mod, 22 * nose_size_mod); //nose base
    noStroke();
    fill(color('rgba(255, 227, 216,0.6)'));
    ellipse(0, 19, 22 * nose_size_mod, 19 * nose_size_mod); //highlight

    //mouth
    var mouth_size_mod = mouth_size;
    var drool_drip_mod;
    fill('black');
    ellipse(0, 55, 30 * mouth_size_mod, 25 * mouth_size_mod);
    fill(blush_color);
    ellipse(2 * mouth_size_mod, 62 + (2.5 * mouth_size_mod), 15 * mouth_size_mod, 10 * mouth_size_mod);
    noFill();
    stroke(skin_tone);
    strokeWeight(7);
    ellipse(0, 55, 30 * mouth_size_mod, 25 * mouth_size_mod);

    //drool
    noStroke();
    if (drool_drip > 1 && drool_drip < 1.25) { // one droplet of drool drips down face and grows in size
    fill(drool_color);
    var drool_height = 3 * ampLify(drool_drip, 7);
    var drool_y = 12 * mouth_size_mod + 21 + drool_height + drool_drip * 24
    ellipse(9 * mouth_size_mod, drool_y, 5, drool_height);
    }

    function drawFace3(x, y, w, h, hair_volume, mouth_size, cheek_chub, nose_size, drool_drip) {
    //BABYFACE
    push();
    //move to position,
    translate(x, y);

    //face
    fill(skin_tone);
    ellipse(0, 0, 170, 180);
    ellipse(-32, 20, 110 * cheek_chub, 120 * cheek_chub); //cheeks
    ellipse(32, 20, 110 * cheek_chub, 120 * cheek_chub);
    fill(hat_color_red);
    //ellipse(0, -81, 150, 60); // hat mask

    //blush
    fill(blush_color);
    ellipse(45 * cheek_chub, 18, 25 * cheek_chub, 20 * cheek_chub);
    ellipse(-45 * cheek_chub, 18, 25 * cheek_chub, 20 * cheek_chub);

    //eyes
    fill("white");
    ellipse(-26, -18, 32, 35); //whites
    ellipse(26, -18, 32, 35);
    noStroke();
    fill("black");
    ellipse(-26, -26 + 8 * drool_drip_value, 6, 6); //pupils
    ellipse(26, -26 + 8 * drool_drip_value, 6, 6);

    //nose
    var nose_size_mod = (nose_size - 1) * 0.8 + 1 //slight scaling of nose base with stache bushiness
    stroke(blush_color);
    fill(nose_tone);
    ellipse(0, 20, 28 * nose_size_mod, 22 * nose_size_mod); //nose base
    noStroke();
    fill(color('rgba(255, 227, 216,0.6)'));
    ellipse(0, 19, 24 * nose_size_mod, 20 * nose_size_mod); //highlight

    //mouth
    var mouth_size_mod = mouth_size;
    var drool_drip_mod;
    fill('black');
    ellipse(0, 55, 30 * mouth_size_mod, 25 * mouth_size_mod);
    fill(blush_color);
    ellipse(2 * mouth_size_mod, 62 + (2.5 * mouth_size_mod), 15 * mouth_size_mod, 10 * mouth_size_mod);
    noFill();
    stroke(skin_tone);
    strokeWeight(7);
    ellipse(0, 55, 30 * mouth_size_mod, 25 * mouth_size_mod);

    //drool
    noStroke();
    if (drool_drip > 1 && drool_drip < 1.25) { // one droplet of drool drips down face and grows in size
    fill(drool_color);
    var drool_height = 3 * ampLify(drool_drip, 7);
    var drool_y = 12 * mouth_size_mod + 21 + drool_height + drool_drip * 24
    ellipse(9 * mouth_size_mod, drool_y, 5, drool_height);
    }
    if (drool_drip > 1.25) { // second droplet is rendered once first reaches length cap
    fill(drool_color);
    var drool_height = 3 * ampLify(1.25, 7);
    var drool_y = 12 * mouth_size_mod + 21 + drool_height + drool_drip * 24
    ellipse(9 * mouth_size_mod, drool_y, 5, drool_height);
    ellipse(9 * mouth_size_mod, drool_y - drool_height * 1.1, 5, drool_height);
    }

    //sleepy mask
    rectMode(CENTER);
    fill(skin_tone);
    rect(0, -72 + 20 * drool_drip, 100, 35);
    pop();

    if (drool_drip > 1.25) { // second droplet is rendered once first reaches length cap
    fill(drool_color);
    var drool_height = 3 * ampLify(1.25, 7);
    var drool_y = 12 * mouth_size_mod + 21 + drool_height + drool_drip * 24
    ellipse(9 * mouth_size_mod, drool_y, 5, drool_height);
    ellipse(9 * mouth_size_mod, drool_y - drool_height * 1.1, 5, drool_height);
    }

    //brow mask
    rectMode(CENTER);
    fill(skin_tone);
    rect(0, -72 + 20 * drool_drip, 100, 35);
    pop();

    }



    //___________LEVEL 2 FUNCTIONS__________\\
    //used by render functions

    function moustache_6(wid, yOff, bush, slant) { //moustache is a series of O's arranged in a curve
    push();
    var b;
    var y; // y holds the value for each circle used to render the stache
    for (var i = 0; i < 5; i++) {
    b = bush;
    x = i - 2;
    y = (i % 3) * wid / slant;
    switch (i) {
    case 0:
    y = -0.5 * wid / slant;
    b *= 0.85;
    break;
    case 2:
    y = 1.8 * wid / slant;
    b *= 1.1;
    break;
    case 3:
    y = wid / slant;
    break;
    case 4:
    y = -0.5 * wid / slant;
    b *= 0.85;
    break;
    }
    //draw a dot
    fill(stache_color);
    noStroke();
    ellipse(x * wid / 6, y + yOff, b * wid / 60);

    //___________LEVEL 2 FUNCTIONS__________\\
    //used by render functions

    function moustache_6(wid, yOff, bush, slant) { //moustache is a series of O's arranged in a curve
    push();
    var b;
    var y; // y holds the value for each circle used to render the stache
    for (var i = 0; i < 5; i++) {
    b = bush;
    x = i - 2;
    y = (i % 3) * wid / slant;
    switch (i) {
    case 0:
    y = -0.5 * wid / slant;
    b *= 0.85;
    break;
    case 2:
    y = 1.8 * wid / slant;
    b *= 1.1;
    break;
    case 3:
    y = wid / slant;
    break;
    case 4:
    y = -0.5 * wid / slant;
    b *= 0.85;
    break;
    }
    pop();
    //draw a dot
    fill(stache_color);
    noStroke();
    ellipse(x * wid / 6, y + yOff, b * wid / 60);

    }
    pop();
    }

    function ampLify(inp, ampChange) { // multiply multiplier value as if negative values began at #1
    var v = (inp - 1) * ampChange;
    v += 1;
    return v;
    function ampLify(inp, ampChange) { // multiply multiplier value as if negative values began at #1
    var v = (inp - 1) * ampChange;
    v += 1;
    return v;

    }
    }

    function keyTyped() {
    Binary file modified thumbnail.png
    View file
    Loading
    Sorry, something went wrong. Reload?
    Sorry, we cannot display this file.
    Sorry, this file is invalid so it cannot be displayed.
  12. Michael-Kelly-Digital-Design revised this gist Jul 23, 2017. 4 changed files with 228 additions and 178 deletions.
    12 changes: 10 additions & 2 deletions README.md
    View file
    Original file line number Diff line number Diff line change
    @@ -2,8 +2,16 @@

    This README explains the three different paramaterized faces for part2.

    In my case, in each of my faces I use 3 sliders. For the first face I used my previous solution but added controls for the tilt, mouth openess, and number of eyes.
    The second face is a version of the Mario & Luigi sketch I made earlier. This version casts luigi aside (don't worry, he's used to it!) and draws our sewer-spelunking hero with some features mapped to four of the sliders:
    - Mousache slant
    - Pupil dilation
    - Moustache bushiness: modulates the size of the individual ellipses that make up the moustache. also modulates the size of mario's nose
    - Cheek chubbiness

    In the second version I was mostly thinking about eyes and hair. For the eyes, there is a true/false variable which determines if the face is blinking as well as a continuous variable for shifting the eye left and right. The hair ranges from stubble to bushy.
    I liked the art style that my Mario. I thought that his cheeks made him look like a baby so I decided to make my next face that of a baby. I used 4 sliders for this onel giving control over:
    - nose size
    - cheek chub
    - mouth openness
    - 'alertness' when baby is tired he starts to drool and has trouble keeping his eyes open

    In the third face I tried out a darker robot idea. This robot is always staring right at you and might have a wide or narrow head. His middle eye is a lazy eye.
    Binary file modified preview.jpg
    View file
    Loading
    Sorry, something went wrong. Reload?
    Sorry, we cannot display this file.
    Sorry, this file is invalid so it cannot be displayed.
    394 changes: 218 additions & 176 deletions sketch.js
    View file
    Original file line number Diff line number Diff line change
    @@ -12,9 +12,11 @@ var skin_tone = "#ffe3d8";
    var nose_tone = "#ffc8bf";
    var blush_color = "#f9ab90";
    var hat_color_green = "#7bbc60";
    var hat_stroke_red = "#a32525"
    var hat_color_red = "#ce4a4a";
    var eye_color = "#83cbff";
    var stache_color = "#593510";
    var drool_color = "#99c0ff";

    // global variables for colors
    var bg_color1 = [225, 206, 187];
    @@ -118,226 +120,266 @@ function draw() {
    face_x = 3 * width / 6;
    }

    drawFace2(face_x, face_y, face_w, face_h, stache_slant_value, stache_bush_value, cheek_chub_value,dilation_value);
    drawFace2(face_x, face_y, face_w, face_h, stache_slant_value, stache_bush_value, cheek_chub_value, dilation_value);
    }
    // face 3 : robot
    // face 3 : babby
    if (mode == '3' || mode == 'all') {

    fill(bg_color3);
    rect(2 * width / 3, 0, width, height);
    var width_value = map(s1, 0, 100, 0, 100);
    var mouth_value = map(s3, 0, 100, 0, 200);
    var eye_value = Math.floor(map(s2, 0, 100, 0, 3));
    rect(2 * width / 3, 0, 2 * width / 3, height);
    var hair_volume_value = map(s1, 100, 0, 0.8, 1.8);
    var nose_size_value = map(s2, 0, 100, 0.6, 1.4);
    var mouth_gape_value = map(s3, 0, 100, 0.9, 1.4);
    var cheek_chub_value = map(s4, 0, 100, 0.9, 1.1);
    var drool_drip_value = map(s5, 0, 100, 0.9, 1.45);
    if (mode == 'all') {
    face_x = 5 * width / 6;
    }

    drawFace3(face_x, face_y, face_w, face_h, width_value, eye_value, mouth_value);
    drawFace3(face_x, face_y, face_w, face_h, hair_volume_value, mouth_gape_value, cheek_chub_value, nose_size_value, drool_drip_value);
    }
    }


    //_______________DRAW FUNCTIONS______________//
    //_______________DRAW FUNCTIONS______________//

    function drawFace1(x, y, w, h, tilt_value, eye_value, mouth_value) {
    function drawFace1(x, y, w, h, tilt_value, eye_value, mouth_value) {

    push();
    translate(x, y);
    rotate(tilt_value);
    push();
    translate(x, y);
    rotate(tilt_value);

    var extent = 0;
    if (h < w) {
    extent = h / 2;
    } else {
    extent = w / 2;
    }
    var scale = extent / 220.0;

    fill(fg_color1);
    ellipse(0, 0, 300 * scale, 400 * scale);
    var extent = 0;
    if (h < w) {
    extent = h / 2;
    } else {
    extent = w / 2;
    }
    var scale = extent / 220.0;

    // eyes
    if (eye_value === 1 || eye_value == 3) {
    fill(bg_color1);
    ellipse(0, -80 * scale, 50 * scale, 30 * scale);
    fill(fg_color1);
    ellipse(-10 * scale, -80 * scale, 20 * scale, 20 * scale);
    }
    ellipse(0, 0, 300 * scale, 400 * scale);

    // eyes
    if (eye_value === 1 || eye_value == 3) {
    fill(bg_color1);
    ellipse(0, -80 * scale, 50 * scale, 30 * scale);
    fill(fg_color1);
    ellipse(-10 * scale, -80 * scale, 20 * scale, 20 * scale);
    }

    if (eye_value >= 2) {
    fill(bg_color1);
    ellipse(-50 * scale, -80 * scale, 50 * scale, 30 * scale);
    ellipse(50 * scale, -80 * scale, 50 * scale, 30 * scale);

    fill(fg_color1);
    ellipse(-60 * scale, -80 * scale, 20 * scale, 20 * scale);
    ellipse(40 * scale, -80 * scale, 20 * scale, 20 * scale);
    }

    if (eye_value >= 2) {
    // mouth
    fill(bg_color1);
    ellipse(-50 * scale, -80 * scale, 50 * scale, 30 * scale);
    ellipse(50 * scale, -80 * scale, 50 * scale, 30 * scale);
    ellipse(0 * scale, 70 * scale, 150 * scale, mouth_value * scale);
    pop();

    fill(fg_color1);
    ellipse(-60 * scale, -80 * scale, 20 * scale, 20 * scale);
    ellipse(40 * scale, -80 * scale, 20 * scale, 20 * scale);
    }

    // mouth
    fill(bg_color1);
    ellipse(0 * scale, 70 * scale, 150 * scale, mouth_value * scale);
    pop();

    }
    function drawFace2(x, y, w, h, stache_slant, stache_bush, cheek_chub, dilation) {

    function drawFace2(x, y, w, h, stache_slant, stache_bush, cheek_chub, dilation) {
    push();
    //move to position,
    translate(x, y);

    // function head(hatCol, xoff, yoff, rot) { //(color, xOffset, yOffset, rotation)

    push();
    //move to position,
    translate(x, y);
    //hat base
    noStroke();
    fill(hat_color_red);
    ellipse(0, -85, 150, 100);

    //face
    var chin_offset = (cheek_chub - 1) * 0.15 + 1; // allow scaling of chin w/o changing position of forehead
    chin_offset *= 220;
    fill(skin_tone);
    ellipse(0, chin_offset / 2 - 110, 160, chin_offset);
    ellipse(-22, 23, 150 * cheek_chub, 150 * cheek_chub); //cheeks
    ellipse(22, 23, 150 * cheek_chub, 150 * cheek_chub);
    fill(hat_color_red);
    ellipse(0, -81, 150, 60); // hat mask

    //blush
    fill(blush_color);
    ellipse(68 * cheek_chub, 24, 25 * cheek_chub, 20 * cheek_chub);
    ellipse(-68 * cheek_chub, 24, 25 * cheek_chub, 20 * cheek_chub);

    //stache
    moustache_6(100 * stache_bush, 45, 15 * stache_bush, 14 * stache_slant);


    //eyes
    fill("white");
    ellipse(-35, -25, 60, 80); //whites
    ellipse(35, -25, 60, 80);
    noStroke();
    fill(eye_color);
    ellipse(-35, -13, 35, 45); //irises
    ellipse(35, -13, 35, 45);
    fill("black");
    ellipse(-35, -13, 23 * dilation, 31 * dilation); //pupils
    ellipse(35, -13, 23 * dilation, 31 * dilation);

    //nose
    var nose_size_mod = (stache_bush - 1) * 0.2 + 1 //slight scaling of nose base with stache bushiness
    stroke(blush_color);
    fill(nose_tone);
    ellipse(0, 20, 75 * nose_size_mod, 62 * nose_size_mod); //nose base
    noStroke();
    fill(color('rgba(255, 227, 216,0.7)'));
    ellipse(0, 16, 60 * nose_size_mod, 50 * nose_size_mod); //highlight

    // logo
    fill("white");
    ellipse(0, -100, 40, 40);
    stroke(hat_color_red);
    strokeWeight(2.5);
    ellipse(0, -100, 30, 30);
    strokeWeight(1.1);

    //hat base
    noStroke();
    fill(hat_color_red);
    ellipse(0, -85, 150, 100);

    //face
    var chin_offset = (cheek_chub - 1) * 0.15 + 1; // allow scaling of chin w/o changing position of forehead
    chin_offset *= 220;
    fill(skin_tone);
    ellipse(0, chin_offset / 2 - 110, 160, chin_offset);
    ellipse(-22, 23, 150 * cheek_chub, 150 * cheek_chub); //cheeks
    ellipse(22, 23, 150 * cheek_chub, 150 * cheek_chub);
    fill(hat_color_red);
    ellipse(0, -81, 150, 60); // hat mask

    //blush
    fill(blush_color);
    ellipse(68*cheek_chub,24,25*cheek_chub,20*cheek_chub);
    ellipse(-68*cheek_chub,24,25*cheek_chub,20*cheek_chub);

    //stache
    moustache_6(100 * stache_bush, 45, 15 * stache_bush, 14 * stache_slant);


    //eyes
    fill("white");
    ellipse(-35, -25, 60, 80); //whites
    ellipse(35, -25, 60, 80);
    noStroke();
    fill(eye_color);
    ellipse(-35, -13, 35, 45); //irises
    ellipse(35, -13, 35, 45);
    fill("black");
    ellipse(-35, -13, 23 * dilation, 31 * dilation); //pupils
    ellipse(35, -13, 23 * dilation, 31 * dilation);

    //nose
    var nose_size_mod = (stache_bush-1)*0.2 +1//slight scaling of nose base with stache bushiness
    var highlight_alpha = ((dilation-1)*2.5+1)*0.6;
    stroke(blush_color);
    fill(nose_tone);
    ellipse(0, 20, 75*nose_size_mod, 62*nose_size_mod); //nose base
    noStroke();
    fill(color('rgba(255, 227, 216,'+highlight_alpha+')'));
    ellipse(0, 16, 60*nose_size_mod, 50*nose_size_mod); //highlight
    //hat brim
    fill(hat_color_red);
    stroke(color(40, 40));
    ellipse(0, -62, 135, 22);

    // logo
    fill("white");
    ellipse(0, -100, 40, 40);
    stroke(hat_color_red);
    strokeWeight(2.5);
    ellipse(0, -100, 30, 30);
    strokeWeight(1.1);
    pop();

    //hat brim
    fill(hat_color_red);
    stroke(bg_color);
    ellipse(0, -62, 135, 22);
    }

    pop();
    function drawFace3(x, y, w, h, hair_volume, mouth_size, cheek_chub, nose_size, drool_drip) {
    //BABYFACE
    push();
    //move to position,
    translate(x, y);

    //face
    fill(skin_tone);
    ellipse(0, 0, 170, 180);
    ellipse(-32, 20, 110 * cheek_chub, 120 * cheek_chub); //cheeks
    ellipse(32, 20, 110 * cheek_chub, 120 * cheek_chub);
    fill(hat_color_red);
    //ellipse(0, -81, 150, 60); // hat mask

    //blush
    fill(blush_color);
    ellipse(45 * cheek_chub, 18, 25 * cheek_chub, 20 * cheek_chub);
    ellipse(-45 * cheek_chub, 18, 25 * cheek_chub, 20 * cheek_chub);

    //eyes
    fill("white");
    ellipse(-26, -18, 32, 35); //whites
    ellipse(26, -18, 32, 35);
    noStroke();
    fill("black");
    ellipse(-26, -26 + 8 * drool_drip_value, 6, 6); //pupils
    ellipse(26, -26 + 8 * drool_drip_value, 6, 6);

    //nose
    var nose_size_mod = (nose_size - 1) * 0.8 + 1 //slight scaling of nose base with stache bushiness
    stroke(blush_color);
    fill(nose_tone);
    ellipse(0, 20, 28 * nose_size_mod, 22 * nose_size_mod); //nose base
    noStroke();
    fill(color('rgba(255, 227, 216,0.6)'));
    ellipse(0, 19, 24 * nose_size_mod, 20 * nose_size_mod); //highlight

    //mouth
    var mouth_size_mod = mouth_size;
    var drool_drip_mod;
    fill('black');
    ellipse(0, 55, 30 * mouth_size_mod, 25 * mouth_size_mod);
    fill(blush_color);
    ellipse(2 * mouth_size_mod, 62 + (2.5 * mouth_size_mod), 15 * mouth_size_mod, 10 * mouth_size_mod);
    noFill();
    stroke(skin_tone);
    strokeWeight(7);
    ellipse(0, 55, 30 * mouth_size_mod, 25 * mouth_size_mod);

    //drool
    noStroke();
    if (drool_drip > 1 && drool_drip < 1.25) { // one droplet of drool drips down face and grows in size
    fill(drool_color);
    var drool_height = 3 * ampLify(drool_drip, 7);
    var drool_y = 12 * mouth_size_mod + 21 + drool_height + drool_drip * 24
    ellipse(9 * mouth_size_mod, drool_y, 5, drool_height);
    }
    if (drool_drip > 1.25) { // second droplet is rendered once first reaches length cap
    fill(drool_color);
    var drool_height = 3 * ampLify(1.25, 7);
    var drool_y = 12 * mouth_size_mod + 21 + drool_height + drool_drip * 24
    ellipse(9 * mouth_size_mod, drool_y, 5, drool_height);
    ellipse(9 * mouth_size_mod, drool_y - drool_height * 1.1, 5, drool_height);
    }

    }
    //sleepy mask
    rectMode(CENTER);
    fill(skin_tone);
    rect(0, -72 + 20 * drool_drip, 100, 35);
    pop();

    function drawFace3(x, y, w, h, width_value, eye_value, mouth_value) {
    push();
    rectMode(CENTER);
    translate(x, y);
    // rotate(width_value);

    var extent = 0;
    if (h < w) {
    extent = h / 2;
    } else {
    extent = w / 2;
    }
    var scale = extent / 220.0;

    stroke(stroke_color2)
    fill(fg_color2);
    rect(0, 0, (300 + width_value) * scale, 400 * scale);

    // eyes
    if (eye_value === 1 || eye_value == 3) {
    fill(bg_color2);
    rect(0, -80 * scale, 50 * scale, 30 * scale);
    fill(fg_color2);
    ellipse(-10 * scale, -80 * scale, 20 * scale, 20 * scale);
    }

    if (eye_value >= 2) {
    fill(bg_color2);
    rect(-60 * scale, -80 * scale, 50 * scale, 30 * scale);
    rect(60 * scale, -80 * scale, 50 * scale, 30 * scale);

    fill(fg_color2);
    ellipse(-60 * scale, -80 * scale, 20 * scale, 20 * scale);
    ellipse(60 * scale, -80 * scale, 20 * scale, 20 * scale);

    //___________LEVEL 2 FUNCTIONS__________\\
    //used by render functions

    function moustache_6(wid, yOff, bush, slant) { //moustache is a series of O's arranged in a curve
    push();
    var b;
    var y; // y holds the value for each circle used to render the stache
    for (var i = 0; i < 5; i++) {
    b = bush;
    x = i - 2;
    y = (i % 3) * wid / slant;
    switch (i) {
    case 0:
    y = -0.5 * wid / slant;
    b *= 0.85;
    break;
    case 2:
    y = 1.8 * wid / slant;
    b *= 1.1;
    break;
    case 3:
    y = wid / slant;
    break;
    case 4:
    y = -0.5 * wid / slant;
    b *= 0.85;
    break;
    }
    //draw a dot
    fill(stache_color);
    noStroke();
    ellipse(x * wid / 6, y + yOff, b * wid / 60);

    }
    pop();
    }

    // mouth
    fill(bg_color2);
    rect(0 * scale, 70 * scale, 150 * scale, mouth_value * scale);
    rectMode(CORNER);
    pop();
    }
    function ampLify(inp, ampChange) { // multiply multiplier value as if negative values began at #1
    var v = (inp - 1) * ampChange;
    v += 1;
    return v;

    }
    }

    function keyTyped() {
    if (key == '!') {
    saveBlocksImages();
    } else if (key == '@') {
    saveBlocksImages(true);
    console.log("printing")
    }
    }


    //_________________LEVEL 2 FUNCTIONS__________\\

    function moustache_6(wid, yOff, bush, slant) { //moustache is a series of O's arranged in a curve
    push();
    var b;
    var y; // y holds the value for each circle used to render the stache
    for (var i = 0; i < 5; i++) {
    b = bush;
    x = i - 2;
    y = (i % 3) * wid / slant;
    switch (i) {
    case 0:
    y = -0.5 * wid / slant;
    b *= 0.85;
    break;
    case 2:
    y = 1.8 * wid / slant;
    b *= 1.1;
    break;
    case 3:
    y = wid / slant;
    break;
    case 4:
    y = -0.5 * wid / slant;
    b *= 0.85;
    break;
    }
    //draw a dot
    fill(stache_color);
    noStroke();
    ellipse(x * wid / 6, y + yOff, b * wid / 60);

    }
    pop()
    }
    Binary file modified thumbnail.png
    View file
    Loading
    Sorry, something went wrong. Reload?
    Sorry, we cannot display this file.
    Sorry, this file is invalid so it cannot be displayed.
  13. Michael-Kelly-Digital-Design revised this gist Jul 21, 2017. 2 changed files with 0 additions and 0 deletions.
    Binary file modified preview.jpg
    View file
    Loading
    Sorry, something went wrong. Reload?
    Sorry, we cannot display this file.
    Sorry, this file is invalid so it cannot be displayed.
    Binary file modified thumbnail.png
    View file
    Loading
    Sorry, something went wrong. Reload?
    Sorry, we cannot display this file.
    Sorry, this file is invalid so it cannot be displayed.
  14. Michael-Kelly-Digital-Design revised this gist Jul 21, 2017. 1 changed file with 240 additions and 194 deletions.
    434 changes: 240 additions & 194 deletions sketch.js
    View file
    Original file line number Diff line number Diff line change
    @@ -9,7 +9,6 @@ var fg_color1 = "#5b412a";
    var fg_color2 = "#7b611a";
    var stroke_color = "#c78a5b";
    var skin_tone = "#ffe3d8";
    var skin_tone_highlght;
    var nose_tone = "#ffc8bf";
    var blush_color = "#f9ab90";
    var hat_color_green = "#7bbc60";
    @@ -34,207 +33,219 @@ var colorHair = [20, 20, 0];



    function setup () {
    skin_tone_highlght = color('rgba(255, 227, 216, 0.8)');
    // create the drawing canvas, save the canvas element
    var main_canvas = createCanvas(canvasWidth, canvasHeight);
    main_canvas.parent('canvasContainer');

    // create sliders
    slider1 = createSlider(0, 100, 50);
    slider2 = createSlider(0, 100, 50);
    slider3 = createSlider(0, 100, 50);
    slider4 = createSlider(0, 100, 50);
    slider5 = createSlider(0, 100, 50);

    slider1.parent('slider1Container');
    slider2.parent('slider2Container');
    slider3.parent('slider3Container');
    slider4.parent('slider4Container');
    slider5.parent('slider5Container');

    faceSelector = createSelect();
    faceSelector.option('1');
    faceSelector.option('2');
    faceSelector.option('3');
    faceSelector.option('all')
    faceSelector.value('all');
    faceSelector.parent('selector1Container');

    // rotation in degrees
    angleMode(DEGREES);
    function setup() {

    // create the drawing canvas, save the canvas element
    var main_canvas = createCanvas(canvasWidth, canvasHeight);
    main_canvas.parent('canvasContainer');

    // create sliders
    slider1 = createSlider(0, 100, 50);
    slider2 = createSlider(0, 100, 50);
    slider3 = createSlider(0, 100, 50);
    slider4 = createSlider(0, 100, 50);
    slider5 = createSlider(0, 100, 50);

    slider1.parent('slider1Container');
    slider2.parent('slider2Container');
    slider3.parent('slider3Container');
    slider4.parent('slider4Container');
    slider5.parent('slider5Container');

    faceSelector = createSelect();
    faceSelector.option('1');
    faceSelector.option('2');
    faceSelector.option('3');
    faceSelector.option('all')
    faceSelector.value('all');
    faceSelector.parent('selector1Container');

    // rotation in degrees
    angleMode(DEGREES);
    }

    function draw () {
    noStroke();
    function draw() {
    noStroke();

    var mode = faceSelector.value();
    var mode = faceSelector.value();

    if (mode != 'all') {
    if (mode == '1') {
    background(bg_color1);
    if (mode != 'all') {
    if (mode == '1') {
    background(bg_color1);
    } else if (mode == '2') {
    background(bg_color2);
    } else if (mode == '3') {
    background(bg_color3);
    }
    }
    else if (mode == '2') {
    background(bg_color2);
    }
    else if (mode == '3') {
    background(bg_color3);
    }
    }

    var s1 = slider1.value();
    var s2 = slider2.value();
    var s3 = slider3.value();
    var s4 = slider4.value();
    var s5 = slider5.value();

    // use same size / y_pos for all faces
    var face_w = canvasWidth / 4;
    var face_h = face_w;
    var face_y = height / 2;
    var face_x = width / 2;

    if (mode == '1' || mode == 'all') {
    // draw 1st face
    fill(bg_color1);
    rect(0, 0, width/3, height);
    var tilt_value = map(s1, 0, 100, -90, 90);
    var mouth_value = map(s3, 0, 100, 0, 200);
    var eye_value = Math.floor(map(s2, 0, 100, 1, 3));
    if (mode == 'all') {
    face_x = width / 6;
    }
    drawFace1(face_x, face_y, face_w, face_h, tilt_value, eye_value, mouth_value);
    }

    if (mode == '2' || mode == 'all') {
    // draw 2nd face
    fill(bg_color2);
    rect(width/3, 0, 2*width/3, height);
    var hair_value = map(s1, 0, 100, 2, 90);
    var blink_value = Math.floor(map(s3, 0, 100, 0, 1));
    var eye_value = map(s2, 0, 100, -15, 15);
    if (mode == 'all') {
    face_x = 3 * width / 6;
    var s1 = slider1.value();
    var s2 = slider2.value();
    var s3 = slider3.value();
    var s4 = slider4.value();
    var s5 = slider5.value();

    // use same size / y_pos for all faces
    var face_w = canvasWidth / 4;
    var face_h = face_w;
    var face_y = height / 2;
    var face_x = width / 2;

    //face 1 : brown
    if (mode == '1' || mode == 'all') {

    fill(bg_color1);
    rect(0, 0, width / 3, height);
    var tilt_value = map(s1, 0, 100, -90, 90);
    var mouth_value = map(s3, 0, 100, 0, 200);
    var eye_value = Math.floor(map(s2, 0, 100, 1, 3));
    if (mode == 'all') {
    face_x = width / 6;
    }

    drawFace1(face_x, face_y, face_w, face_h, tilt_value, eye_value, mouth_value);
    }
    //face 2 : Mario
    if (mode == '2' || mode == 'all') {

    fill(bg_color2);
    rect(width / 3, 0, 2 * width / 3, height);
    var stache_slant_value = map(s1, 100, 0, 0.8, 1.8);
    var dilation_value = map(s2, 0, 100, 0.75, 1.25);
    var stache_bush_value = map(s3, 0, 100, 0.9, 1.4);
    var cheek_chub_value = map(s4, 0, 100, 0.9, 1.1);
    if (mode == 'all') {
    face_x = 3 * width / 6;
    }

    drawFace2(face_x, face_y, face_w, face_h, stache_slant_value, stache_bush_value, cheek_chub_value,dilation_value);
    }
    drawFace2(face_x, face_y, face_w, face_h, hair_value, eye_value, blink_value);
    }

    if (mode == '3' || mode == 'all') {
    // draw 3nd face
    fill(bg_color3);
    rect(2*width/3, 0, width, height);
    var width_value = map(s1, 0, 100, 0, 100);
    var mouth_value = map(s3, 0, 100, 0, 200);
    var eye_value = Math.floor(map(s2, 0, 100, 0, 3));
    if (mode == 'all') {
    face_x = 5 * width / 6;
    // face 3 : robot
    if (mode == '3' || mode == 'all') {

    fill(bg_color3);
    rect(2 * width / 3, 0, width, height);
    var width_value = map(s1, 0, 100, 0, 100);
    var mouth_value = map(s3, 0, 100, 0, 200);
    var eye_value = Math.floor(map(s2, 0, 100, 0, 3));
    if (mode == 'all') {
    face_x = 5 * width / 6;
    }

    drawFace3(face_x, face_y, face_w, face_h, width_value, eye_value, mouth_value);
    }
    drawFace3(face_x, face_y, face_w, face_h, width_value, eye_value, mouth_value);
    }
    }


    //_______________DRAW FUNCTIONS______________//

    function drawFace1(x, y, w, h, tilt_value, eye_value, mouth_value) {

    push();
    translate(x, y);
    rotate(tilt_value);

    var extent = 0;
    if(h < w) {
    extent = h / 2;
    }
    else {
    extent = w / 2;
    }
    var scale = extent / 220.0;

    fill(fg_color1);
    ellipse(0, 0, 300 * scale, 400 * scale);
    push();
    translate(x, y);
    rotate(tilt_value);

    var extent = 0;
    if (h < w) {
    extent = h / 2;
    } else {
    extent = w / 2;
    }
    var scale = extent / 220.0;

    // eyes
    if (eye_value === 1 || eye_value == 3) {
    fill(bg_color1);
    ellipse( 0, -80 * scale, 50 * scale, 30 * scale);
    fill(fg_color1);
    ellipse(-10 * scale, -80 * scale, 20 * scale, 20 * scale);
    }
    ellipse(0, 0, 300 * scale, 400 * scale);

    // eyes
    if (eye_value === 1 || eye_value == 3) {
    fill(bg_color1);
    ellipse(0, -80 * scale, 50 * scale, 30 * scale);
    fill(fg_color1);
    ellipse(-10 * scale, -80 * scale, 20 * scale, 20 * scale);
    }

    if (eye_value >= 2) {
    fill(bg_color1);
    ellipse(-50 * scale, -80 * scale, 50 * scale, 30 * scale);
    ellipse( 50 * scale, -80 * scale, 50 * scale, 30 * scale);
    if (eye_value >= 2) {
    fill(bg_color1);
    ellipse(-50 * scale, -80 * scale, 50 * scale, 30 * scale);
    ellipse(50 * scale, -80 * scale, 50 * scale, 30 * scale);

    fill(fg_color1);
    ellipse(-60 * scale, -80 * scale, 20 * scale, 20 * scale);
    ellipse( 40 * scale, -80 * scale, 20 * scale, 20 * scale);
    }
    fill(fg_color1);
    ellipse(-60 * scale, -80 * scale, 20 * scale, 20 * scale);
    ellipse(40 * scale, -80 * scale, 20 * scale, 20 * scale);
    }

    // mouth
    fill(bg_color1);
    ellipse(0 * scale, 70 * scale, 150 * scale, mouth_value * scale);
    pop();
    // mouth
    fill(bg_color1);
    ellipse(0 * scale, 70 * scale, 150 * scale, mouth_value * scale);
    pop();

    }

    function drawFace2(x, y, w, h, hair_value, eye_value, blink_value) {
    // function head(hatCol, xoff, yoff, rot) { //(color, xOffset, yOffset, rotation)
    function drawFace2(x, y, w, h, stache_slant, stache_bush, cheek_chub, dilation) {

    // function head(hatCol, xoff, yoff, rot) { //(color, xOffset, yOffset, rotation)

    push();
    //move to position, rotate
    translate(xoff, yoff);
    rotate(rot);
    //move to position,
    translate(x, y);


    //hat base
    noStroke();
    fill(hatCol);
    fill(hat_color_red);
    ellipse(0, -85, 150, 100);

    //face
    var chin_offset = (cheek_chub - 1) * 0.15 + 1; // allow scaling of chin w/o changing position of forehead
    chin_offset *= 220;
    fill(skin_tone);
    ellipse(0, 0, 160, 220);
    ellipse(-22, 23, 150, 150); //cheeks
    ellipse(22, 23, 150, 150);
    fill(hatCol);
    ellipse(0, -83, 150, 60); // hat mask
    ellipse(0, chin_offset / 2 - 110, 160, chin_offset);
    ellipse(-22, 23, 150 * cheek_chub, 150 * cheek_chub); //cheeks
    ellipse(22, 23, 150 * cheek_chub, 150 * cheek_chub);
    fill(hat_color_red);
    ellipse(0, -81, 150, 60); // hat mask

    //blush
    fill(blush_color);
    ellipse(68*cheek_chub,24,25*cheek_chub,20*cheek_chub);
    ellipse(-68*cheek_chub,24,25*cheek_chub,20*cheek_chub);

    //stache
    moustache_6(100 * stache_bush, 45, 15 * stache_bush, 14 * stache_slant);

    moustache_6(140, 45, 15, 14);

    //eyes
    fill("white");
    ellipse(-35, -25, 60, 80);
    ellipse(-35, -25, 60, 80); //whites
    ellipse(35, -25, 60, 80);

    //puils
    noStroke();
    fill(eye_color);
    ellipse(-35, -13, 35, 45);
    ellipse(-35, -13, 35, 45); //irises
    ellipse(35, -13, 35, 45);
    fill("black");
    ellipse(-35, -13, 22, 32);
    ellipse(35, -13, 22, 32);
    ellipse(-35, -13, 23 * dilation, 31 * dilation); //pupils
    ellipse(35, -13, 23 * dilation, 31 * dilation);

    //nose
    var nose_size_mod = (stache_bush-1)*0.2 +1//slight scaling of nose base with stache bushiness
    var highlight_alpha = ((dilation-1)*2.5+1)*0.6;
    stroke(blush_color);
    fill(nose_tone);
    ellipse(0, 20, 75, 62);
    ellipse(0, 20, 75*nose_size_mod, 62*nose_size_mod); //nose base
    noStroke();
    fill(skin_tone_highlght);
    ellipse(0,16,58,48);
    fill(color('rgba(255, 227, 216,'+highlight_alpha+')'));
    ellipse(0, 16, 60*nose_size_mod, 50*nose_size_mod); //highlight

    // logo
    fill("white");
    ellipse(0, -100, 40, 40);
    stroke(hatCol);
    ellipse(0, -100, 40, 40);
    stroke(hat_color_red);
    strokeWeight(2.5);
    ellipse(0, -100, 30, 30);
    strokeWeight(1.1);
    ellipse(0, -100, 30, 30);
    strokeWeight(1.1);

    //hat brim
    fill(hatCol);
    fill(hat_color_red);
    stroke(bg_color);
    ellipse(0, -62, 135, 22);

    @@ -243,55 +254,90 @@ function drawFace2(x, y, w, h, hair_value, eye_value, blink_value) {
    }

    function drawFace3(x, y, w, h, width_value, eye_value, mouth_value) {
    push();
    rectMode(CENTER);
    translate(x, y);
    // rotate(width_value);

    var extent = 0;
    if(h < w) {
    extent = h / 2;
    }
    else {
    extent = w / 2;
    }
    var scale = extent / 220.0;

    stroke(stroke_color2)
    fill(fg_color2);
    rect(0, 0, (300 + width_value) * scale, 400 * scale);

    // eyes
    if (eye_value === 1 || eye_value == 3) {
    fill(bg_color2);
    rect( 0, -80 * scale, 50 * scale, 30 * scale);
    push();
    rectMode(CENTER);
    translate(x, y);
    // rotate(width_value);

    var extent = 0;
    if (h < w) {
    extent = h / 2;
    } else {
    extent = w / 2;
    }
    var scale = extent / 220.0;

    stroke(stroke_color2)
    fill(fg_color2);
    ellipse(-10 * scale, -80 * scale, 20 * scale, 20 * scale);
    }
    rect(0, 0, (300 + width_value) * scale, 400 * scale);

    // eyes
    if (eye_value === 1 || eye_value == 3) {
    fill(bg_color2);
    rect(0, -80 * scale, 50 * scale, 30 * scale);
    fill(fg_color2);
    ellipse(-10 * scale, -80 * scale, 20 * scale, 20 * scale);
    }

    if (eye_value >= 2) {
    fill(bg_color2);
    rect(-60 * scale, -80 * scale, 50 * scale, 30 * scale);
    rect( 60 * scale, -80 * scale, 50 * scale, 30 * scale);
    if (eye_value >= 2) {
    fill(bg_color2);
    rect(-60 * scale, -80 * scale, 50 * scale, 30 * scale);
    rect(60 * scale, -80 * scale, 50 * scale, 30 * scale);

    fill(fg_color2);
    ellipse(-60 * scale, -80 * scale, 20 * scale, 20 * scale);
    ellipse( 60 * scale, -80 * scale, 20 * scale, 20 * scale);
    }

    // mouth
    fill(bg_color2);
    rect(0 * scale, 70 * scale, 150 * scale, mouth_value * scale);
    rectMode(CORNER);
    pop();
    fill(fg_color2);
    ellipse(-60 * scale, -80 * scale, 20 * scale, 20 * scale);
    ellipse(60 * scale, -80 * scale, 20 * scale, 20 * scale);
    }

    // mouth
    fill(bg_color2);
    rect(0 * scale, 70 * scale, 150 * scale, mouth_value * scale);
    rectMode(CORNER);
    pop();
    }


    function keyTyped() {
    if (key == '!') {
    saveBlocksImages();
    }
    else if (key == '@') {
    saveBlocksImages(true);
    }
    if (key == '!') {
    saveBlocksImages();
    } else if (key == '@') {
    saveBlocksImages(true);
    }
    }


    //_________________LEVEL 2 FUNCTIONS__________\\

    function moustache_6(wid, yOff, bush, slant) { //moustache is a series of O's arranged in a curve
    push();
    var b;
    var y; // y holds the value for each circle used to render the stache
    for (var i = 0; i < 5; i++) {
    b = bush;
    x = i - 2;
    y = (i % 3) * wid / slant;
    switch (i) {
    case 0:
    y = -0.5 * wid / slant;
    b *= 0.85;
    break;
    case 2:
    y = 1.8 * wid / slant;
    b *= 1.1;
    break;
    case 3:
    y = wid / slant;
    break;
    case 4:
    y = -0.5 * wid / slant;
    b *= 0.85;
    break;
    }
    //draw a dot
    fill(stache_color);
    noStroke();
    ellipse(x * wid / 6, y + yOff, b * wid / 60);

    }
    pop()
    }
  15. Guest User revised this gist Jul 20, 2017. 1 changed file with 160 additions and 141 deletions.
    301 changes: 160 additions & 141 deletions sketch.js
    View file
    Original file line number Diff line number Diff line change
    @@ -3,7 +3,39 @@ var canvasHeight = 500;
    var slider1, slider2, slider3, slider4, slider5;
    var faceSelector;

    //color store
    var bg_color = "#white";
    var fg_color1 = "#5b412a";
    var fg_color2 = "#7b611a";
    var stroke_color = "#c78a5b";
    var skin_tone = "#ffe3d8";
    var skin_tone_highlght;
    var nose_tone = "#ffc8bf";
    var blush_color = "#f9ab90";
    var hat_color_green = "#7bbc60";
    var hat_color_red = "#ce4a4a";
    var eye_color = "#83cbff";
    var stache_color = "#593510";

    // global variables for colors
    var bg_color1 = [225, 206, 187];
    var bg_color2 = [47, 59, 64];
    var bg_color3 = [70, 70, 120];

    var fg_color1 = [151, 102, 52];
    var fg_color2 = [56, 91, 194];
    var fg_color3 = [206, 207, 180];

    var stroke_color1 = [95, 52, 8];
    var stroke_color2 = [210, 219, 189];
    var stroke_color3 = [50, 50, 50];

    var colorHair = [20, 20, 0];



    function setup () {
    skin_tone_highlght = color('rgba(255, 227, 216, 0.8)');
    // create the drawing canvas, save the canvas element
    var main_canvas = createCanvas(canvasWidth, canvasHeight);
    main_canvas.parent('canvasContainer');
    @@ -33,22 +65,80 @@ function setup () {
    angleMode(DEGREES);
    }

    // global variables for colors
    var bg_color1 = [225, 206, 187];
    var bg_color2 = [47, 59, 64];
    var bg_color3 = [70, 70, 120];
    function draw () {
    noStroke();

    var fg_color1 = [151, 102, 52];
    var fg_color2 = [56, 91, 194];
    var fg_color3 = [206, 207, 180];
    var mode = faceSelector.value();

    var stroke_color1 = [95, 52, 8];
    var stroke_color2 = [210, 219, 189];
    var stroke_color3 = [50, 50, 50];
    if (mode != 'all') {
    if (mode == '1') {
    background(bg_color1);
    }
    else if (mode == '2') {
    background(bg_color2);
    }
    else if (mode == '3') {
    background(bg_color3);
    }
    }

    var s1 = slider1.value();
    var s2 = slider2.value();
    var s3 = slider3.value();
    var s4 = slider4.value();
    var s5 = slider5.value();

    // use same size / y_pos for all faces
    var face_w = canvasWidth / 4;
    var face_h = face_w;
    var face_y = height / 2;
    var face_x = width / 2;

    if (mode == '1' || mode == 'all') {
    // draw 1st face
    fill(bg_color1);
    rect(0, 0, width/3, height);
    var tilt_value = map(s1, 0, 100, -90, 90);
    var mouth_value = map(s3, 0, 100, 0, 200);
    var eye_value = Math.floor(map(s2, 0, 100, 1, 3));
    if (mode == 'all') {
    face_x = width / 6;
    }
    drawFace1(face_x, face_y, face_w, face_h, tilt_value, eye_value, mouth_value);
    }

    if (mode == '2' || mode == 'all') {
    // draw 2nd face
    fill(bg_color2);
    rect(width/3, 0, 2*width/3, height);
    var hair_value = map(s1, 0, 100, 2, 90);
    var blink_value = Math.floor(map(s3, 0, 100, 0, 1));
    var eye_value = map(s2, 0, 100, -15, 15);
    if (mode == 'all') {
    face_x = 3 * width / 6;
    }
    drawFace2(face_x, face_y, face_w, face_h, hair_value, eye_value, blink_value);
    }

    if (mode == '3' || mode == 'all') {
    // draw 3nd face
    fill(bg_color3);
    rect(2*width/3, 0, width, height);
    var width_value = map(s1, 0, 100, 0, 100);
    var mouth_value = map(s3, 0, 100, 0, 200);
    var eye_value = Math.floor(map(s2, 0, 100, 0, 3));
    if (mode == 'all') {
    face_x = 5 * width / 6;
    }
    drawFace3(face_x, face_y, face_w, face_h, width_value, eye_value, mouth_value);
    }
    }

    var colorHair = [20, 20, 0];

    //_______________DRAW FUNCTIONS______________//

    function drawFace1(x, y, w, h, tilt_value, eye_value, mouth_value) {

    push();
    translate(x, y);
    rotate(tilt_value);
    @@ -87,72 +177,69 @@ function drawFace1(x, y, w, h, tilt_value, eye_value, mouth_value) {
    fill(bg_color1);
    ellipse(0 * scale, 70 * scale, 150 * scale, mouth_value * scale);
    pop();

    }

    function drawFace2(x, y, w, h, hair_value, eye_value, blink_value) {
    rectMode(CENTER);
    push();
    translate(x, y);

    var extent = 0;
    if(h < w) {
    extent = h / 2;
    }
    else {
    extent = w / 2;
    }
    var scale = extent / 220.0;

    stroke(stroke_color3);
    fill(fg_color3);
    ellipse(0, 0, 300 * scale, 400 * scale);

    // eyes. first check for blinking
    if(blink_value > 0) {
    fill(bg_color3);
    ellipse(-50 * scale, -80 * scale, 50 * scale, 2 * scale);
    ellipse( 50 * scale, -80 * scale, 50 * scale, 2 * scale);
    }
    else {
    fill(bg_color3);
    ellipse(-50 * scale, -80 * scale, 50 * scale, 18 * scale);
    ellipse( 50 * scale, -80 * scale, 50 * scale, 18 * scale);

    fill(fg_color3);
    ellipse((-50 + eye_value) * scale, -80 * scale, 20 * scale, 20 * scale);
    ellipse(( 50 + eye_value) * scale, -80 * scale, 20 * scale, 20 * scale);
    }
    // function head(hatCol, xoff, yoff, rot) { //(color, xOffset, yOffset, rotation)

    push();
    //move to position, rotate
    translate(xoff, yoff);
    rotate(rot);

    //hat base
    noStroke();
    fill(hatCol);
    ellipse(0, -85, 150, 100);

    //face
    fill(skin_tone);
    ellipse(0, 0, 160, 220);
    ellipse(-22, 23, 150, 150); //cheeks
    ellipse(22, 23, 150, 150);
    fill(hatCol);
    ellipse(0, -83, 150, 60); // hat mask

    moustache_6(140, 45, 15, 14);

    //eyes
    fill("white");
    ellipse(-35, -25, 60, 80);
    ellipse(35, -25, 60, 80);

    //puils
    noStroke();
    fill(eye_color);
    ellipse(-35, -13, 35, 45);
    ellipse(35, -13, 35, 45);
    fill("black");
    ellipse(-35, -13, 22, 32);
    ellipse(35, -13, 22, 32);

    //nose
    stroke(blush_color);
    fill(nose_tone);
    ellipse(0, 20, 75, 62);
    noStroke();
    fill(skin_tone_highlght);
    ellipse(0,16,58,48);

    // logo
    fill("white");
    ellipse(0, -100, 40, 40);
    stroke(hatCol);
    strokeWeight(2.5);
    ellipse(0, -100, 30, 30);
    strokeWeight(1.1);

    //hat brim
    fill(hatCol);
    stroke(bg_color);
    ellipse(0, -62, 135, 22);

    pop();

    // mouth
    fill(bg_color3);
    ellipse(0 * scale, 70 * scale, 150 * scale, 20 * scale);

    // TODO: paramaterize hair
    var follicles = [
    [346,138],
    [391,120],
    [391,67],
    [439,76],
    [463,42],
    [487,18],
    [481,101],
    [520,102],
    [520,78],
    [533,54],
    [560,108],
    [580,76],
    [596,124],
    [618,124]
    ];

    resetMatrix();
    fill(colorHair);
    var radius = hair_value * scale;
    for(var i=0; i<follicles.length; i++) {
    ellipse(240+follicles[i][0]/2, 120 + (follicles[i][1]/2), radius, radius);
    }
    rectMode(CORNER);
    resetMatrix();
    }

    function drawFace3(x, y, w, h, width_value, eye_value, mouth_value) {
    @@ -199,74 +286,6 @@ function drawFace3(x, y, w, h, width_value, eye_value, mouth_value) {
    pop();
    }

    function draw () {
    noStroke();

    var mode = faceSelector.value();

    if (mode != 'all') {
    if (mode == '1') {
    background(bg_color1);
    }
    else if (mode == '2') {
    background(bg_color2);
    }
    else if (mode == '3') {
    background(bg_color3);
    }
    }

    var s1 = slider1.value();
    var s2 = slider2.value();
    var s3 = slider3.value();
    var s4 = slider4.value();
    var s5 = slider5.value();

    // use same size / y_pos for all faces
    var face_w = canvasWidth / 4;
    var face_h = face_w;
    var face_y = height / 2;
    var face_x = width / 2;

    if (mode == '1' || mode == 'all') {
    // draw 1st face
    fill(bg_color1);
    rect(0, 0, width/3, height);
    var tilt_value = map(s1, 0, 100, -90, 90);
    var mouth_value = map(s3, 0, 100, 0, 200);
    var eye_value = Math.floor(map(s2, 0, 100, 1, 3));
    if (mode == 'all') {
    face_x = width / 6;
    }
    drawFace1(face_x, face_y, face_w, face_h, tilt_value, eye_value, mouth_value);
    }

    if (mode == '2' || mode == 'all') {
    // draw 2nd face
    fill(bg_color2);
    rect(width/3, 0, 2*width/3, height);
    var hair_value = map(s1, 0, 100, 2, 90);
    var blink_value = Math.floor(map(s3, 0, 100, 0, 1));
    var eye_value = map(s2, 0, 100, -15, 15);
    if (mode == 'all') {
    face_x = 3 * width / 6;
    }
    drawFace2(face_x, face_y, face_w, face_h, hair_value, eye_value, blink_value);
    }

    if (mode == '3' || mode == 'all') {
    // draw 3nd face
    fill(bg_color3);
    rect(2*width/3, 0, width, height);
    var width_value = map(s1, 0, 100, 0, 100);
    var mouth_value = map(s3, 0, 100, 0, 200);
    var eye_value = Math.floor(map(s2, 0, 100, 0, 3));
    if (mode == 'all') {
    face_x = 5 * width / 6;
    }
    drawFace3(face_x, face_y, face_w, face_h, width_value, eye_value, mouth_value);
    }
    }

    function keyTyped() {
    if (key == '!') {
  16. Guest User revised this gist Jul 20, 2017. 5 changed files with 350 additions and 200 deletions.
    18 changes: 9 additions & 9 deletions README.md
    View file
    Original file line number Diff line number Diff line change
    @@ -1,9 +1,9 @@
    ## PS1 MDDN 342 2017
    To test the omniscience of nintendo's lawyers, I decided to make my recognisable faces to be those of the original Game Boys: Mario and Luigi.
    Simplicity was the name of the game in this sketch; Mario's original sprite was designed to hide his hair and mouth to make him easier to animate, So I deigned to keep those hidden. I used only ellipses to make the faces to keep the shapes organic looking while remaining simple.
    I have a distinct moustache planned for our greenest and least favorite brother, as luigi has a stache with two segments as opposed to mario's 5-segmented caterpillar.
    preview.jpg (960x500) and thumbnail.png (230x120).
    ## PS1 MDDN 342 2017

    This README explains the three different paramaterized faces for part2.

    In my case, in each of my faces I use 3 sliders. For the first face I used my previous solution but added controls for the tilt, mouth openess, and number of eyes.

    In the second version I was mostly thinking about eyes and hair. For the eyes, there is a true/false variable which determines if the face is blinking as well as a continuous variable for shifting the eye left and right. The hair ranges from stubble to bushy.

    In the third face I tried out a darker robot idea. This robot is always staring right at you and might have a wide or narrow head. His middle eye is a lazy eye.
    106 changes: 63 additions & 43 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -1,43 +1,63 @@
    <head>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.11/p5.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.11/addons/p5.dom.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/seedrandom/2.4.0/seedrandom.min.js"></script>
    <script src="https://d3js.org/d3-random.v1.min.js"></script>
    <script language="javascript" type="text/javascript" src=".purview_helper.js"></script>
    <script language="javascript" type="text/javascript" src=".focused_random.js"></script>
    <script language="javascript" type="text/javascript" src="sketch.js"></script>

    <style>
    body { padding: 0; margin: 0; }
    .inner { position: absolute; }
    #controls {
    font: 300 12px "Helvetica Neue";
    padding: 5;
    margin: 5;
    background: #f0f0f0;
    opacity: 0.0;
    -webkit-transition: opacity 0.2s ease;
    -moz-transition: opacity 0.2s ease;
    -o-transition: opacity 0.2s ease;
    -ms-transition: opacity 0.2s ease;
    }
    #controls:hover { opacity: 0.9; }
    </style>

    </head>
    <body style="background-color:white">
    <div class="outer">
    <div class="inner">
    <div id="canvasContainer"></div>
    </div>
    <div class="inner" id="controls" height="500px">
    <table>
    <tr>
    <td>(future interface here)</td>
    <td id="selector1Container"></td>
    </tr>
    </table>
    </div>
    </div>
    </table>
    </body>
    <head>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.11/p5.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.11/addons/p5.dom.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/seedrandom/2.4.0/seedrandom.min.js"></script>
    <script src="https://d3js.org/d3-random.v1.min.js"></script>
    <script language="javascript" type="text/javascript" src=".purview_helper.js"></script>
    <script language="javascript" type="text/javascript" src=".focused_random.js"></script>
    <script language="javascript" type="text/javascript" src="sketch.js"></script>

    <style>
    body { padding: 0; margin: 0; }
    .inner { position: absolute; }
    #controls {
    font: 300 12px "Helvetica Neue";
    padding: 5;
    margin: 5;
    background: #f0f0f0;
    opacity: 0.0;
    -webkit-transition: opacity 0.2s ease;
    -moz-transition: opacity 0.2s ease;
    -o-transition: opacity 0.2s ease;
    -ms-transition: opacity 0.2s ease;
    }
    #controls:hover { opacity: 0.9; }
    </style>

    </head>
    <body style="background-color:white">
    <div class="outer">
    <div class="inner">
    <div id="canvasContainer"></div>
    </div>
    <div class="inner" id="controls" height="500px">
    <table>
    <tr>
    <td>Setting 1</td>
    <td id="slider1Container"></td>
    </tr>
    <tr>
    <td>Setting 2</td>
    <td id="slider2Container"></td>
    </tr>
    <tr>
    <td>Setting 3</td>
    <td id="slider3Container"></td>
    </tr>
    <tr>
    <td>Setting 4</td>
    <td id="slider4Container"></td>
    </tr>
    <tr>
    <td>Setting 5</td>
    <td id="slider5Container"></td>
    </tr>
    <tr>
    <td>Face</td>
    <td id="selector1Container"></td>
    </tr>
    </table>
    </div>
    </div>
    </table>
    </body>
    Binary file modified preview.jpg
    View file
    Loading
    Sorry, something went wrong. Reload?
    Sorry, we cannot display this file.
    Sorry, this file is invalid so it cannot be displayed.
    426 changes: 278 additions & 148 deletions sketch.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,148 +1,278 @@
    var canvasWidth = 960;
    var canvasHeight = 500;


    // global variables for colors
    var bg_color = "#white";
    var fg_color1 = "#5b412a";
    var fg_color2 = "#7b611a";
    var stroke_color = "#c78a5b";
    var skin_tone = "#ffe3d8";
    var skin_tone_highlght;
    var nose_tone = "#ffc8bf";
    var blush_color = "#f9ab90";
    var hat_color_green = "#7bbc60";
    var hat_color_red = "#ce4a4a";
    var eye_color = "#83cbff";
    var stache_color = "#593510"

    function setup() {
    // create the drawing canvas, save the canvas element
    main_canvas = createCanvas(canvasWidth, canvasHeight);

    // position each element on the page
    main_canvas.parent('canvasContainer');

    // rotation in degrees
    angleMode(DEGREES);

    skin_tone_highlght = color('rgba(255, 227, 216, 0.8)');
    }

    function draw() {
    // background color
    background(bg_color);
    // stroke color
    stroke(bg_color)
    ellipse();
    head(hat_color_red, 960 / 4, 500 / 2, 0);
    head(hat_color_green, 2.5 * 960 / 4, 500 / 2, 30);
    }

    function head(hatCol, xoff, yoff, rot) { //(color, xOffset, yOffset, rotation)

    push();
    //move to position, rotate
    translate(xoff, yoff);
    rotate(rot);

    //hat base
    noStroke();
    fill(hatCol);
    ellipse(0, -85, 150, 100);

    //face
    fill(skin_tone);
    ellipse(0, 0, 160, 220);
    ellipse(-22, 23, 150, 150); //cheeks
    ellipse(22, 23, 150, 150);
    fill(hatCol);
    ellipse(0, -83, 150, 60); // hat mask

    moustache_6(140, 45, 15, 14);

    //eyes
    fill("white");
    ellipse(-35, -25, 60, 80);
    ellipse(35, -25, 60, 80);

    //puils
    noStroke();
    fill(eye_color);
    ellipse(-35, -13, 35, 45);
    ellipse(35, -13, 35, 45);
    fill("black");
    ellipse(-35, -13, 22, 32);
    ellipse(35, -13, 22, 32);

    //nose
    stroke(blush_color);
    fill(nose_tone);
    ellipse(0, 20, 75, 62);
    noStroke();
    fill(skin_tone_highlght);
    ellipse(0,16,58,48);

    // logo
    fill("white");
    ellipse(0, -100, 40, 40);
    stroke(hatCol);
    strokeWeight(2.5);
    ellipse(0, -100, 30, 30);
    strokeWeight(1.1);

    //hat brim
    fill(hatCol);
    stroke(bg_color);
    ellipse(0, -62, 135, 22);

    pop();
    }

    function moustache_6(wid, yOff, bush, slant) { //moustache is a series of O's arranged in a curve
    push();
    var b;
    var y; // y holds the value for each circle used to render the stache
    for (var i = 0; i < 5; i++) {
    b = bush;
    x = i - 2;
    y = (i%3)*wid/slant;
    switch (i) {
    case 0 :
    y = -0.6 * wid / slant;
    b *= 0.9;
    break;
    case 2:
    y = 1.8 * wid / slant;
    b *= 1.05;
    break;
    case 3:
    y = wid / slant;
    break;
    case 4 :
    y = -0.6 * wid / slant;
    b *= 0.9;
    break;
    }
    //draw a dot
    fill(stache_color);
    noStroke();
    ellipse(x * wid / 6, y + yOff, b * wid / 60);

    }
    pop();
    }


    function moustache_2() { // black 2-segmented moustache for luigi


    }

    function keyTyped() {
    if (key == '!') {
    saveBlocksImages();
    } else if (key == '@') {
    saveBlocksImages(true);
    }
    }
    var canvasWidth = 960;
    var canvasHeight = 500;
    var slider1, slider2, slider3, slider4, slider5;
    var faceSelector;

    function setup () {
    // create the drawing canvas, save the canvas element
    var main_canvas = createCanvas(canvasWidth, canvasHeight);
    main_canvas.parent('canvasContainer');

    // create sliders
    slider1 = createSlider(0, 100, 50);
    slider2 = createSlider(0, 100, 50);
    slider3 = createSlider(0, 100, 50);
    slider4 = createSlider(0, 100, 50);
    slider5 = createSlider(0, 100, 50);

    slider1.parent('slider1Container');
    slider2.parent('slider2Container');
    slider3.parent('slider3Container');
    slider4.parent('slider4Container');
    slider5.parent('slider5Container');

    faceSelector = createSelect();
    faceSelector.option('1');
    faceSelector.option('2');
    faceSelector.option('3');
    faceSelector.option('all')
    faceSelector.value('all');
    faceSelector.parent('selector1Container');

    // rotation in degrees
    angleMode(DEGREES);
    }

    // global variables for colors
    var bg_color1 = [225, 206, 187];
    var bg_color2 = [47, 59, 64];
    var bg_color3 = [70, 70, 120];

    var fg_color1 = [151, 102, 52];
    var fg_color2 = [56, 91, 194];
    var fg_color3 = [206, 207, 180];

    var stroke_color1 = [95, 52, 8];
    var stroke_color2 = [210, 219, 189];
    var stroke_color3 = [50, 50, 50];

    var colorHair = [20, 20, 0];

    function drawFace1(x, y, w, h, tilt_value, eye_value, mouth_value) {
    push();
    translate(x, y);
    rotate(tilt_value);

    var extent = 0;
    if(h < w) {
    extent = h / 2;
    }
    else {
    extent = w / 2;
    }
    var scale = extent / 220.0;

    fill(fg_color1);
    ellipse(0, 0, 300 * scale, 400 * scale);

    // eyes
    if (eye_value === 1 || eye_value == 3) {
    fill(bg_color1);
    ellipse( 0, -80 * scale, 50 * scale, 30 * scale);
    fill(fg_color1);
    ellipse(-10 * scale, -80 * scale, 20 * scale, 20 * scale);
    }

    if (eye_value >= 2) {
    fill(bg_color1);
    ellipse(-50 * scale, -80 * scale, 50 * scale, 30 * scale);
    ellipse( 50 * scale, -80 * scale, 50 * scale, 30 * scale);

    fill(fg_color1);
    ellipse(-60 * scale, -80 * scale, 20 * scale, 20 * scale);
    ellipse( 40 * scale, -80 * scale, 20 * scale, 20 * scale);
    }

    // mouth
    fill(bg_color1);
    ellipse(0 * scale, 70 * scale, 150 * scale, mouth_value * scale);
    pop();
    }

    function drawFace2(x, y, w, h, hair_value, eye_value, blink_value) {
    rectMode(CENTER);
    push();
    translate(x, y);

    var extent = 0;
    if(h < w) {
    extent = h / 2;
    }
    else {
    extent = w / 2;
    }
    var scale = extent / 220.0;

    stroke(stroke_color3);
    fill(fg_color3);
    ellipse(0, 0, 300 * scale, 400 * scale);

    // eyes. first check for blinking
    if(blink_value > 0) {
    fill(bg_color3);
    ellipse(-50 * scale, -80 * scale, 50 * scale, 2 * scale);
    ellipse( 50 * scale, -80 * scale, 50 * scale, 2 * scale);
    }
    else {
    fill(bg_color3);
    ellipse(-50 * scale, -80 * scale, 50 * scale, 18 * scale);
    ellipse( 50 * scale, -80 * scale, 50 * scale, 18 * scale);

    fill(fg_color3);
    ellipse((-50 + eye_value) * scale, -80 * scale, 20 * scale, 20 * scale);
    ellipse(( 50 + eye_value) * scale, -80 * scale, 20 * scale, 20 * scale);
    }

    // mouth
    fill(bg_color3);
    ellipse(0 * scale, 70 * scale, 150 * scale, 20 * scale);

    // TODO: paramaterize hair
    var follicles = [
    [346,138],
    [391,120],
    [391,67],
    [439,76],
    [463,42],
    [487,18],
    [481,101],
    [520,102],
    [520,78],
    [533,54],
    [560,108],
    [580,76],
    [596,124],
    [618,124]
    ];

    resetMatrix();
    fill(colorHair);
    var radius = hair_value * scale;
    for(var i=0; i<follicles.length; i++) {
    ellipse(240+follicles[i][0]/2, 120 + (follicles[i][1]/2), radius, radius);
    }
    rectMode(CORNER);
    resetMatrix();
    }

    function drawFace3(x, y, w, h, width_value, eye_value, mouth_value) {
    push();
    rectMode(CENTER);
    translate(x, y);
    // rotate(width_value);

    var extent = 0;
    if(h < w) {
    extent = h / 2;
    }
    else {
    extent = w / 2;
    }
    var scale = extent / 220.0;

    stroke(stroke_color2)
    fill(fg_color2);
    rect(0, 0, (300 + width_value) * scale, 400 * scale);

    // eyes
    if (eye_value === 1 || eye_value == 3) {
    fill(bg_color2);
    rect( 0, -80 * scale, 50 * scale, 30 * scale);
    fill(fg_color2);
    ellipse(-10 * scale, -80 * scale, 20 * scale, 20 * scale);
    }

    if (eye_value >= 2) {
    fill(bg_color2);
    rect(-60 * scale, -80 * scale, 50 * scale, 30 * scale);
    rect( 60 * scale, -80 * scale, 50 * scale, 30 * scale);

    fill(fg_color2);
    ellipse(-60 * scale, -80 * scale, 20 * scale, 20 * scale);
    ellipse( 60 * scale, -80 * scale, 20 * scale, 20 * scale);
    }

    // mouth
    fill(bg_color2);
    rect(0 * scale, 70 * scale, 150 * scale, mouth_value * scale);
    rectMode(CORNER);
    pop();
    }

    function draw () {
    noStroke();

    var mode = faceSelector.value();

    if (mode != 'all') {
    if (mode == '1') {
    background(bg_color1);
    }
    else if (mode == '2') {
    background(bg_color2);
    }
    else if (mode == '3') {
    background(bg_color3);
    }
    }

    var s1 = slider1.value();
    var s2 = slider2.value();
    var s3 = slider3.value();
    var s4 = slider4.value();
    var s5 = slider5.value();

    // use same size / y_pos for all faces
    var face_w = canvasWidth / 4;
    var face_h = face_w;
    var face_y = height / 2;
    var face_x = width / 2;

    if (mode == '1' || mode == 'all') {
    // draw 1st face
    fill(bg_color1);
    rect(0, 0, width/3, height);
    var tilt_value = map(s1, 0, 100, -90, 90);
    var mouth_value = map(s3, 0, 100, 0, 200);
    var eye_value = Math.floor(map(s2, 0, 100, 1, 3));
    if (mode == 'all') {
    face_x = width / 6;
    }
    drawFace1(face_x, face_y, face_w, face_h, tilt_value, eye_value, mouth_value);
    }

    if (mode == '2' || mode == 'all') {
    // draw 2nd face
    fill(bg_color2);
    rect(width/3, 0, 2*width/3, height);
    var hair_value = map(s1, 0, 100, 2, 90);
    var blink_value = Math.floor(map(s3, 0, 100, 0, 1));
    var eye_value = map(s2, 0, 100, -15, 15);
    if (mode == 'all') {
    face_x = 3 * width / 6;
    }
    drawFace2(face_x, face_y, face_w, face_h, hair_value, eye_value, blink_value);
    }

    if (mode == '3' || mode == 'all') {
    // draw 3nd face
    fill(bg_color3);
    rect(2*width/3, 0, width, height);
    var width_value = map(s1, 0, 100, 0, 100);
    var mouth_value = map(s3, 0, 100, 0, 200);
    var eye_value = Math.floor(map(s2, 0, 100, 0, 3));
    if (mode == 'all') {
    face_x = 5 * width / 6;
    }
    drawFace3(face_x, face_y, face_w, face_h, width_value, eye_value, mouth_value);
    }
    }

    function keyTyped() {
    if (key == '!') {
    saveBlocksImages();
    }
    else if (key == '@') {
    saveBlocksImages(true);
    }
    }
    Binary file modified thumbnail.png
    View file
    Loading
    Sorry, something went wrong. Reload?
    Sorry, we cannot display this file.
    Sorry, this file is invalid so it cannot be displayed.
  17. Guest User revised this gist Jul 20, 2017. 7 changed files with 294 additions and 297 deletions.
    58 changes: 29 additions & 29 deletions .focused_random.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,29 +1,29 @@
    function resetFocusedRandom() {
    return Math.seedrandom(arguments);
    }

    function focusedRandom(min, max, focus, mean) {
    // console.log("hello")
    if(max === undefined) {
    max = min;
    min = 0;
    }
    if(focus === undefined) {
    focus = 1.0;
    }
    if(mean === undefined) {
    mean = (min + max) / 2.0;
    }
    if(focus == 0) {
    return d3.randomUniform(min, max)();
    }
    else if(focus < 0) {
    focus = -1 / focus;
    }
    sigma = (max - mean) / focus;
    val = d3.randomNormal(mean, sigma)();
    if (val > min && val < max) {
    return val;
    }
    return d3.randomUniform(min, max)();
    }
    function resetFocusedRandom() {
    return Math.seedrandom(arguments);
    }
    function focusedRandom(min, max, focus, mean) {
    // console.log("hello")
    if(max === undefined) {
    max = min;
    min = 0;
    }
    if(focus === undefined) {
    focus = 1.0;
    }
    if(mean === undefined) {
    mean = (min + max) / 2.0;
    }
    if(focus == 0) {
    return d3.randomUniform(min, max)();
    }
    else if(focus < 0) {
    focus = -1 / focus;
    }
    sigma = (max - mean) / focus;
    val = d3.randomNormal(mean, sigma)();
    if (val > min && val < max) {
    return val;
    }
    return d3.randomUniform(min, max)();
    }
    134 changes: 67 additions & 67 deletions .purview_helper.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,67 +1,67 @@
    // note: this file is poorly named - it can generally be ignored.

    // helper functions below for supporting blocks/purview

    function saveBlocksImages(doZoom) {
    if(doZoom == null) {
    doZoom = false;
    }

    // generate 960x500 preview.jpg of entire canvas
    // TODO: should this be recycled?
    var offscreenCanvas = document.createElement('canvas');
    offscreenCanvas.width = 960;
    offscreenCanvas.height = 500;
    var context = offscreenCanvas.getContext('2d');
    // background is flat white
    context.fillStyle="#FFFFFF";
    context.fillRect(0, 0, 960, 500);
    context.drawImage(this.canvas, 0, 0, 960, 500);
    // save to browser
    var downloadMime = 'image/octet-stream';
    var imageData = offscreenCanvas.toDataURL('image/jpeg');
    imageData = imageData.replace('image/jpeg', downloadMime);
    p5.prototype.downloadFile(imageData, 'preview.jpg', 'jpg');

    // generate 230x120 thumbnail.png centered on mouse
    offscreenCanvas.width = 230;
    offscreenCanvas.height = 120;

    // background is flat white
    context = offscreenCanvas.getContext('2d');
    context.fillStyle="#FFFFFF";
    context.fillRect(0, 0, 230, 120);

    if(doZoom) {
    // pixelDensity does the right thing on retina displays
    var pd = this._pixelDensity;
    var sx = pd * mouseX - pd * 230/2;
    var sy = pd * mouseY - pd * 120/2;
    var sw = pd * 230;
    var sh = pd * 120;
    // bounds checking - just displace if necessary
    if (sx < 0) {
    sx = 0;
    }
    if (sx > this.canvas.width - sw) {
    sx = this.canvas.width - sw;
    }
    if (sy < 0) {
    sy = 0;
    }
    if (sy > this.canvas.height - sh) {
    sy = this.canvas.height - sh;
    }
    // save to browser
    context.drawImage(this.canvas, sx, sy, sw, sh, 0, 0, 230, 120);
    }
    else {
    // now scaledown
    var full_width = this.canvas.width;
    var full_height = this.canvas.height;
    context.drawImage(this.canvas, 0, 0, full_width, full_height, 0, 0, 230, 120);
    }
    imageData = offscreenCanvas.toDataURL('image/png');
    imageData = imageData.replace('image/png', downloadMime);
    p5.prototype.downloadFile(imageData, 'thumbnail.png', 'png');
    }
    // note: this file is poorly named - it can generally be ignored.
    // helper functions below for supporting blocks/purview
    function saveBlocksImages(doZoom) {
    if(doZoom == null) {
    doZoom = false;
    }
    // generate 960x500 preview.jpg of entire canvas
    // TODO: should this be recycled?
    var offscreenCanvas = document.createElement('canvas');
    offscreenCanvas.width = 960;
    offscreenCanvas.height = 500;
    var context = offscreenCanvas.getContext('2d');
    // background is flat white
    context.fillStyle="#FFFFFF";
    context.fillRect(0, 0, 960, 500);
    context.drawImage(this.canvas, 0, 0, 960, 500);
    // save to browser
    var downloadMime = 'image/octet-stream';
    var imageData = offscreenCanvas.toDataURL('image/jpeg');
    imageData = imageData.replace('image/jpeg', downloadMime);
    p5.prototype.downloadFile(imageData, 'preview.jpg', 'jpg');
    // generate 230x120 thumbnail.png centered on mouse
    offscreenCanvas.width = 230;
    offscreenCanvas.height = 120;
    // background is flat white
    context = offscreenCanvas.getContext('2d');
    context.fillStyle="#FFFFFF";
    context.fillRect(0, 0, 230, 120);
    if(doZoom) {
    // pixelDensity does the right thing on retina displays
    var pd = this._pixelDensity;
    var sx = pd * mouseX - pd * 230/2;
    var sy = pd * mouseY - pd * 120/2;
    var sw = pd * 230;
    var sh = pd * 120;
    // bounds checking - just displace if necessary
    if (sx < 0) {
    sx = 0;
    }
    if (sx > this.canvas.width - sw) {
    sx = this.canvas.width - sw;
    }
    if (sy < 0) {
    sy = 0;
    }
    if (sy > this.canvas.height - sh) {
    sy = this.canvas.height - sh;
    }
    // save to browser
    context.drawImage(this.canvas, sx, sy, sw, sh, 0, 0, 230, 120);
    }
    else {
    // now scaledown
    var full_width = this.canvas.width;
    var full_height = this.canvas.height;
    context.drawImage(this.canvas, 0, 0, full_width, full_height, 0, 0, 230, 120);
    }
    imageData = offscreenCanvas.toDataURL('image/png');
    imageData = imageData.replace('image/png', downloadMime);
    p5.prototype.downloadFile(imageData, 'thumbnail.png', 'png');
    }
    18 changes: 8 additions & 10 deletions README.md
    View file
    Original file line number Diff line number Diff line change
    @@ -1,11 +1,9 @@
    ## PS1 MDDN 342 2017

    This README should be updated as the code changes. Replace
    this placeholder text and use this
    README as a design journal to record your process.
    Be sure to use complete sentences,
    and you can reference your sketch which will appear above.
    The explanation should be short but complete, roughly 100 words.

    Also update both images keeping their original sizes:
    ## PS1 MDDN 342 2017

    To test the omniscience of nintendo's lawyers, I decided to make my recognisable faces to be those of the original Game Boys: Mario and Luigi.
    Simplicity was the name of the game in this sketch; Mario's original sprite was designed to hide his hair and mouth to make him easier to animate, So I deigned to keep those hidden. I used only ellipses to make the faces to keep the shapes organic looking while remaining simple.

    I have a distinct moustache planned for our greenest and least favorite brother, as luigi has a stache with two segments as opposed to mario's 5-segmented caterpillar.


    preview.jpg (960x500) and thumbnail.png (230x120).
    86 changes: 43 additions & 43 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -1,43 +1,43 @@
    <head>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.11/p5.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.11/addons/p5.dom.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/seedrandom/2.4.0/seedrandom.min.js"></script>
    <script src="https://d3js.org/d3-random.v1.min.js"></script>
    <script language="javascript" type="text/javascript" src=".purview_helper.js"></script>
    <script language="javascript" type="text/javascript" src=".focused_random.js"></script>
    <script language="javascript" type="text/javascript" src="sketch.js"></script>

    <style>
    body { padding: 0; margin: 0; }
    .inner { position: absolute; }
    #controls {
    font: 300 12px "Helvetica Neue";
    padding: 5;
    margin: 5;
    background: #f0f0f0;
    opacity: 0.0;
    -webkit-transition: opacity 0.2s ease;
    -moz-transition: opacity 0.2s ease;
    -o-transition: opacity 0.2s ease;
    -ms-transition: opacity 0.2s ease;
    }
    #controls:hover { opacity: 0.9; }
    </style>

    </head>
    <body style="background-color:white">
    <div class="outer">
    <div class="inner">
    <div id="canvasContainer"></div>
    </div>
    <div class="inner" id="controls" height="500px">
    <table>
    <tr>
    <td>(future interface here)</td>
    <td id="selector1Container"></td>
    </tr>
    </table>
    </div>
    </div>
    </table>
    </body>
    <head>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.11/p5.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.11/addons/p5.dom.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/seedrandom/2.4.0/seedrandom.min.js"></script>
    <script src="https://d3js.org/d3-random.v1.min.js"></script>
    <script language="javascript" type="text/javascript" src=".purview_helper.js"></script>
    <script language="javascript" type="text/javascript" src=".focused_random.js"></script>
    <script language="javascript" type="text/javascript" src="sketch.js"></script>
    <style>
    body { padding: 0; margin: 0; }
    .inner { position: absolute; }
    #controls {
    font: 300 12px "Helvetica Neue";
    padding: 5;
    margin: 5;
    background: #f0f0f0;
    opacity: 0.0;
    -webkit-transition: opacity 0.2s ease;
    -moz-transition: opacity 0.2s ease;
    -o-transition: opacity 0.2s ease;
    -ms-transition: opacity 0.2s ease;
    }
    #controls:hover { opacity: 0.9; }
    </style>
    </head>
    <body style="background-color:white">
    <div class="outer">
    <div class="inner">
    <div id="canvasContainer"></div>
    </div>
    <div class="inner" id="controls" height="500px">
    <table>
    <tr>
    <td>(future interface here)</td>
    <td id="selector1Container"></td>
    </tr>
    </table>
    </div>
    </div>
    </table>
    </body>
    Binary file modified preview.jpg
    View file
    Loading
    Sorry, something went wrong. Reload?
    Sorry, we cannot display this file.
    Sorry, this file is invalid so it cannot be displayed.
    295 changes: 147 additions & 148 deletions sketch.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,149 +1,148 @@
    var canvasWidth = 960;
    var canvasHeight = 500;


    // global variables for colors
    var bg_color = "#white";
    var fg_color1 = "#5b412a";
    var fg_color2 = "#7b611a";
    var stroke_color = "#c78a5b";
    var skin_tone = "#ffe3d8";
    var skin_tone_highlght;
    var nose_tone = "#ffc8bf";
    var blush_color = "#f9ab90";
    var hat_color_green = "#7bbc60";
    var hat_color_red = "#ce4a4a";
    var eye_color = "#83cbff";

    function setup() {
    // create the drawing canvas, save the canvas element
    main_canvas = createCanvas(canvasWidth, canvasHeight);

    // position each element on the page
    main_canvas.parent('canvasContainer');

    // rotation in degrees
    angleMode(DEGREES);
    skin_tone_highlght = c = color('rgba(255, 227, 216, 0.8)');
    }


    function draw() {
    // background color
    background(bg_color);
    // stroke color
    stroke(bg_color)
    ellipse();
    head(hat_color_red, 960 / 4, 500 / 2, 0);
    head(hat_color_green, 2.5 * 960 / 4, 500 / 2, 30);
    }


    function head(hatCol, xoff, yoff, rot) { //(color, xOffset, yOffset, rotation)

    push();
    //move to position, rotate
    translate(xoff, yoff);
    rotate(rot);

    //hat base
    stroke(hatCol);
    fill(hatCol);
    ellipse(0, -100, 150, 110);

    //face
    noStroke();
    fill(skin_tone);
    ellipse(0, 0, 160, 220);
    ellipse(-30,30, 150, 150);
    ellipse(30,30, 150, 150);


    // draw two eyes
    fill("white");
    ellipse(-35, -25, 60, 80);
    ellipse(35, -25, 60, 80);

    //set fill back to foreground for eyeballs
    noStroke();
    fill(eye_color);
    ellipse(-35, -10, 35, 45);
    ellipse(35, -10, 35, 45);
    fill("black");
    ellipse(-35, -10, 22, 32);
    ellipse(35, -10, 22, 32);

    //moustache
    moustache_6(140, 45, 15, 14);

    //nose
    stroke(blush_color);
    fill(nose_tone);
    ellipse(0, 20, 75, 62);
    noStroke();
    fill(skin_tone_highlght);
    ellipse(0,16,58,48);

    //hat brim
    noStroke();
    fill(hatCol);
    ellipse(0, -92, 115, 40);
    stroke(bg_color);
    ellipse(0, -77, 115, 30);
    fill("white");
    ellipse(0, -115, 40, 40);

    //bounding box
    fill(255, 0);
    stroke(blush_color);
    rect(-160, -160, 300, 300);

    pop();


    }

    function moustache_6(wid, yOff, bush, slant) { //moustache is a series of O's arranged in a curve
    push();
    var b;
    var y; // y holds the value for each circle used to render the stache
    for (var i = 0; i < 5; i++) {
    b = bush;
    x = i - 2;
    y = (i%3)*wid/slant;
    switch (i) {
    case 0 :
    y = -0.6 * wid / slant;
    b *= 0.9;
    break;
    case 2:
    y = 1.8 * wid / slant;
    b *= 1.05;
    break;
    case 3:
    y = wid / slant;
    break;
    case 4 :
    y = -0.6 * wid / slant;
    b *= 0.9;
    break;
    }
    //draw a dot
    fill("brown");
    noStroke();
    ellipse(x * wid / 6, y + yOff, b * wid / 60);

    }
    pop();
    }


    function moustache_2() {}

    function keyTyped() {
    if (key == '!') {
    saveBlocksImages();
    } else if (key == '@') {
    saveBlocksImages(true);
    }
    var canvasWidth = 960;
    var canvasHeight = 500;


    // global variables for colors
    var bg_color = "#white";
    var fg_color1 = "#5b412a";
    var fg_color2 = "#7b611a";
    var stroke_color = "#c78a5b";
    var skin_tone = "#ffe3d8";
    var skin_tone_highlght;
    var nose_tone = "#ffc8bf";
    var blush_color = "#f9ab90";
    var hat_color_green = "#7bbc60";
    var hat_color_red = "#ce4a4a";
    var eye_color = "#83cbff";
    var stache_color = "#593510"

    function setup() {
    // create the drawing canvas, save the canvas element
    main_canvas = createCanvas(canvasWidth, canvasHeight);

    // position each element on the page
    main_canvas.parent('canvasContainer');

    // rotation in degrees
    angleMode(DEGREES);

    skin_tone_highlght = color('rgba(255, 227, 216, 0.8)');
    }

    function draw() {
    // background color
    background(bg_color);
    // stroke color
    stroke(bg_color)
    ellipse();
    head(hat_color_red, 960 / 4, 500 / 2, 0);
    head(hat_color_green, 2.5 * 960 / 4, 500 / 2, 30);
    }

    function head(hatCol, xoff, yoff, rot) { //(color, xOffset, yOffset, rotation)

    push();
    //move to position, rotate
    translate(xoff, yoff);
    rotate(rot);

    //hat base
    noStroke();
    fill(hatCol);
    ellipse(0, -85, 150, 100);

    //face
    fill(skin_tone);
    ellipse(0, 0, 160, 220);
    ellipse(-22, 23, 150, 150); //cheeks
    ellipse(22, 23, 150, 150);
    fill(hatCol);
    ellipse(0, -83, 150, 60); // hat mask

    moustache_6(140, 45, 15, 14);

    //eyes
    fill("white");
    ellipse(-35, -25, 60, 80);
    ellipse(35, -25, 60, 80);

    //puils
    noStroke();
    fill(eye_color);
    ellipse(-35, -13, 35, 45);
    ellipse(35, -13, 35, 45);
    fill("black");
    ellipse(-35, -13, 22, 32);
    ellipse(35, -13, 22, 32);

    //nose
    stroke(blush_color);
    fill(nose_tone);
    ellipse(0, 20, 75, 62);
    noStroke();
    fill(skin_tone_highlght);
    ellipse(0,16,58,48);

    // logo
    fill("white");
    ellipse(0, -100, 40, 40);
    stroke(hatCol);
    strokeWeight(2.5);
    ellipse(0, -100, 30, 30);
    strokeWeight(1.1);

    //hat brim
    fill(hatCol);
    stroke(bg_color);
    ellipse(0, -62, 135, 22);

    pop();
    }

    function moustache_6(wid, yOff, bush, slant) { //moustache is a series of O's arranged in a curve
    push();
    var b;
    var y; // y holds the value for each circle used to render the stache
    for (var i = 0; i < 5; i++) {
    b = bush;
    x = i - 2;
    y = (i%3)*wid/slant;
    switch (i) {
    case 0 :
    y = -0.6 * wid / slant;
    b *= 0.9;
    break;
    case 2:
    y = 1.8 * wid / slant;
    b *= 1.05;
    break;
    case 3:
    y = wid / slant;
    break;
    case 4 :
    y = -0.6 * wid / slant;
    b *= 0.9;
    break;
    }
    //draw a dot
    fill(stache_color);
    noStroke();
    ellipse(x * wid / 6, y + yOff, b * wid / 60);

    }
    pop();
    }


    function moustache_2() { // black 2-segmented moustache for luigi


    }

    function keyTyped() {
    if (key == '!') {
    saveBlocksImages();
    } else if (key == '@') {
    saveBlocksImages(true);
    }
    }
    Binary file modified thumbnail.png
    View file
    Loading
    Sorry, something went wrong. Reload?
    Sorry, we cannot display this file.
    Sorry, this file is invalid so it cannot be displayed.
  18. @dribnet dribnet revised this gist Jul 19, 2017. 5 changed files with 268 additions and 54 deletions.
    16 changes: 7 additions & 9 deletions README.md
    View file
    Original file line number Diff line number Diff line change
    @@ -1,11 +1,9 @@
    ## PS1 MDDN 342 2017

    This README should be updated as the code changes. Replace
    this placeholder text and use this
    README as a design journal to record your process.
    Be sure to use complete sentences,
    and you can reference your sketch which will appear above.
    The explanation should be short but complete, roughly 100 words.

    Also update both images keeping their original sizes:
    preview.jpg (960x500) and thumbnail.png (230x120).
    This README explains the three different paramaterized faces for part2.

    In my case, in each of my faces I use 3 sliders. For the first face I used my previous solution but added controls for the tilt, mouth openess, and number of eyes.

    In the second version I was mostly thinking about eyes and hair. For the eyes, there is a true/false variable which determines if the face is blinking as well as a continuous variable for shifting the eye left and right. The hair ranges from stubble to bushy.

    In the third face I tried out a darker robot idea. This robot is always staring right at you and might have a wide or narrow head. His middle eye is a lazy eye.
    22 changes: 21 additions & 1 deletion index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -33,7 +33,27 @@
    <div class="inner" id="controls" height="500px">
    <table>
    <tr>
    <td>(future interface here)</td>
    <td>Setting 1</td>
    <td id="slider1Container"></td>
    </tr>
    <tr>
    <td>Setting 2</td>
    <td id="slider2Container"></td>
    </tr>
    <tr>
    <td>Setting 3</td>
    <td id="slider3Container"></td>
    </tr>
    <tr>
    <td>Setting 4</td>
    <td id="slider4Container"></td>
    </tr>
    <tr>
    <td>Setting 5</td>
    <td id="slider5Container"></td>
    </tr>
    <tr>
    <td>Face</td>
    <td id="selector1Container"></td>
    </tr>
    </table>
    Binary file modified preview.jpg
    View file
    Loading
    Sorry, something went wrong. Reload?
    Sorry, we cannot display this file.
    Sorry, this file is invalid so it cannot be displayed.
    284 changes: 240 additions & 44 deletions sketch.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,77 +1,273 @@
    var canvasWidth = 960;
    var canvasHeight = 500;
    var slider1, slider2, slider3, slider4, slider5;
    var faceSelector;

    function setup () {
    // create the drawing canvas, save the canvas element
    main_canvas = createCanvas(canvasWidth, canvasHeight);

    // position each element on the page
    var main_canvas = createCanvas(canvasWidth, canvasHeight);
    main_canvas.parent('canvasContainer');

    // create sliders
    slider1 = createSlider(0, 100, 50);
    slider2 = createSlider(0, 100, 50);
    slider3 = createSlider(0, 100, 50);
    slider4 = createSlider(0, 100, 50);
    slider5 = createSlider(0, 100, 50);

    slider1.parent('slider1Container');
    slider2.parent('slider2Container');
    slider3.parent('slider3Container');
    slider4.parent('slider4Container');
    slider5.parent('slider5Container');

    faceSelector = createSelect();
    faceSelector.option('1');
    faceSelector.option('2');
    faceSelector.option('3');
    faceSelector.option('all')
    faceSelector.value('all');
    faceSelector.parent('selector1Container');

    // rotation in degrees
    angleMode(DEGREES);
    }

    // global variables for colors
    var bg_color = "#c6bdab";
    var fg_color1 = "#5b412a";
    var fg_color2 = "#7b611a";
    var stroke_color = "#c78a5b";
    var bg_color1 = [225, 206, 187];
    var bg_color2 = [47, 59, 64];
    var bg_color3 = [70, 70, 120];

    function draw () {
    // background color
    background(bg_color);
    var fg_color1 = [151, 102, 52];
    var fg_color2 = [56, 91, 194];
    var fg_color3 = [206, 207, 180];

    var stroke_color1 = [95, 52, 8];
    var stroke_color2 = [210, 219, 189];
    var stroke_color3 = [50, 50, 50];

    // stroke color
    stroke(stroke_color)
    var colorHair = [20, 20, 0];

    // move to position1, rotate, draw "head" ellipse
    function drawFace1(x, y, w, h, tilt_value, eye_value, mouth_value) {
    push();
    translate(960/4, 500/2);
    rotate(4);
    fill(fg_color1);
    ellipse(0, 0, 300, 400);
    translate(x, y);
    rotate(tilt_value);

    // set fill to match background color
    fill(bg_color);
    // draw two eyes
    ellipse(-50, -80, 50, 30);
    ellipse( 50, -80, 50, 30);
    var extent = 0;
    if(h < w) {
    extent = h / 2;
    }
    else {
    extent = w / 2;
    }
    var scale = extent / 220.0;

    // set fill back to foreground for eyeballs
    fill(fg_color1);
    ellipse(-60, -80, 20, 20);
    ellipse( 40, -80, 20, 20);
    ellipse(0, 0, 300 * scale, 400 * scale);

    // eyes
    if (eye_value === 1 || eye_value == 3) {
    fill(bg_color1);
    ellipse( 0, -80 * scale, 50 * scale, 30 * scale);
    fill(fg_color1);
    ellipse(-10 * scale, -80 * scale, 20 * scale, 20 * scale);
    }

    if (eye_value >= 2) {
    fill(bg_color1);
    ellipse(-50 * scale, -80 * scale, 50 * scale, 30 * scale);
    ellipse( 50 * scale, -80 * scale, 50 * scale, 30 * scale);

    fill(fg_color1);
    ellipse(-60 * scale, -80 * scale, 20 * scale, 20 * scale);
    ellipse( 40 * scale, -80 * scale, 20 * scale, 20 * scale);
    }

    // mouth-hole with background color
    fill(bg_color);
    ellipse( 0, 70, 150, 20);
    // mouth
    fill(bg_color1);
    ellipse(0 * scale, 70 * scale, 150 * scale, mouth_value * scale);
    pop();
    }

    // move to position2, rotate, draw "head" ellipse
    function drawFace2(x, y, w, h, hair_value, eye_value, blink_value) {
    rectMode(CENTER);
    push();
    translate(3*960/4, 500/2);
    rotate(30);
    fill(fg_color2);
    ellipse(0, 0, 300, 400);
    translate(x, y);

    var extent = 0;
    if(h < w) {
    extent = h / 2;
    }
    else {
    extent = w / 2;
    }
    var scale = extent / 220.0;

    stroke(stroke_color3);
    fill(fg_color3);
    ellipse(0, 0, 300 * scale, 400 * scale);

    // eyes. first check for blinking
    if(blink_value > 0) {
    fill(bg_color3);
    ellipse(-50 * scale, -80 * scale, 50 * scale, 2 * scale);
    ellipse( 50 * scale, -80 * scale, 50 * scale, 2 * scale);
    }
    else {
    fill(bg_color3);
    ellipse(-50 * scale, -80 * scale, 50 * scale, 18 * scale);
    ellipse( 50 * scale, -80 * scale, 50 * scale, 18 * scale);

    fill(fg_color3);
    ellipse((-50 + eye_value) * scale, -80 * scale, 20 * scale, 20 * scale);
    ellipse(( 50 + eye_value) * scale, -80 * scale, 20 * scale, 20 * scale);
    }

    // mouth
    fill(bg_color3);
    ellipse(0 * scale, 70 * scale, 150 * scale, 20 * scale);

    // TODO: paramaterize hair
    var follicles = [
    [346,138],
    [391,120],
    [391,67],
    [439,76],
    [463,42],
    [487,18],
    [481,101],
    [520,102],
    [520,78],
    [533,54],
    [560,108],
    [580,76],
    [596,124],
    [618,124]
    ];

    // set fill to match background color
    fill(bg_color);
    // draw two eyes
    ellipse(-50, -80, 50, 30);
    ellipse( 50, -80, 50, 30);
    resetMatrix();
    fill(colorHair);
    var radius = hair_value * scale;
    for(var i=0; i<follicles.length; i++) {
    ellipse(240+follicles[i][0]/2, 120 + (follicles[i][1]/2), radius, radius);
    }
    rectMode(CORNER);
    resetMatrix();
    }

    function drawFace3(x, y, w, h, width_value, eye_value, mouth_value) {
    push();
    rectMode(CENTER);
    translate(x, y);
    // rotate(width_value);

    var extent = 0;
    if(h < w) {
    extent = h / 2;
    }
    else {
    extent = w / 2;
    }
    var scale = extent / 220.0;

    // set fill back to foreground for eyeballs
    stroke(stroke_color2)
    fill(fg_color2);
    ellipse(-60, -80, 20, 20);
    ellipse( 40, -80, 20, 20);
    rect(0, 0, (300 + width_value) * scale, 400 * scale);

    // mouth-hole with background color
    fill(bg_color);
    ellipse( 0, 70, 150, 20);
    // eyes
    if (eye_value === 1 || eye_value == 3) {
    fill(bg_color2);
    rect( 0, -80 * scale, 50 * scale, 30 * scale);
    fill(fg_color2);
    ellipse(-10 * scale, -80 * scale, 20 * scale, 20 * scale);
    }

    if (eye_value >= 2) {
    fill(bg_color2);
    rect(-60 * scale, -80 * scale, 50 * scale, 30 * scale);
    rect( 60 * scale, -80 * scale, 50 * scale, 30 * scale);

    fill(fg_color2);
    ellipse(-60 * scale, -80 * scale, 20 * scale, 20 * scale);
    ellipse( 60 * scale, -80 * scale, 20 * scale, 20 * scale);
    }

    // mouth
    fill(bg_color2);
    rect(0 * scale, 70 * scale, 150 * scale, mouth_value * scale);
    rectMode(CORNER);
    pop();
    }

    function draw () {
    noStroke();

    var mode = faceSelector.value();

    if (mode != 'all') {
    if (mode == '1') {
    background(bg_color1);
    }
    else if (mode == '2') {
    background(bg_color2);
    }
    else if (mode == '3') {
    background(bg_color3);
    }
    }

    var s1 = slider1.value();
    var s2 = slider2.value();
    var s3 = slider3.value();
    var s4 = slider4.value();
    var s5 = slider5.value();

    // use same size / y_pos for all faces
    var face_w = canvasWidth / 4;
    var face_h = face_w;
    var face_y = height / 2;
    var face_x = width / 2;

    if (mode == '1' || mode == 'all') {
    // draw 1st face
    fill(bg_color1);
    rect(0, 0, width/3, height);
    var tilt_value = map(s1, 0, 100, -90, 90);
    var mouth_value = map(s3, 0, 100, 0, 200);
    var eye_value = Math.floor(map(s2, 0, 100, 1, 3));
    if (mode == 'all') {
    face_x = width / 6;
    }
    drawFace1(face_x, face_y, face_w, face_h, tilt_value, eye_value, mouth_value);
    }

    if (mode == '2' || mode == 'all') {
    // draw 2nd face
    fill(bg_color2);
    rect(width/3, 0, 2*width/3, height);
    var hair_value = map(s1, 0, 100, 2, 90);
    var blink_value = Math.floor(map(s3, 0, 100, 0, 1));
    var eye_value = map(s2, 0, 100, -15, 15);
    if (mode == 'all') {
    face_x = 3 * width / 6;
    }
    drawFace2(face_x, face_y, face_w, face_h, hair_value, eye_value, blink_value);
    }

    if (mode == '3' || mode == 'all') {
    // draw 3nd face
    fill(bg_color3);
    rect(2*width/3, 0, width, height);
    var width_value = map(s1, 0, 100, 0, 100);
    var mouth_value = map(s3, 0, 100, 0, 200);
    var eye_value = Math.floor(map(s2, 0, 100, 0, 3));
    if (mode == 'all') {
    face_x = 5 * width / 6;
    }
    drawFace3(face_x, face_y, face_w, face_h, width_value, eye_value, mouth_value);
    }
    }

    function keyTyped() {
    if (key == '!') {
    saveBlocksImages();
    Binary file modified thumbnail.png
    View file
    Loading
    Sorry, something went wrong. Reload?
    Sorry, we cannot display this file.
    Sorry, this file is invalid so it cannot be displayed.
  19. Michael-Kelly-Digital-Design revised this gist Jul 19, 2017. 2 changed files with 0 additions and 0 deletions.
    Binary file modified preview.jpg
    View file
    Loading
    Sorry, something went wrong. Reload?
    Sorry, we cannot display this file.
    Sorry, this file is invalid so it cannot be displayed.
    Binary file modified thumbnail.png
    View file
    Loading
    Sorry, something went wrong. Reload?
    Sorry, we cannot display this file.
    Sorry, this file is invalid so it cannot be displayed.
  20. Michael-Kelly-Digital-Design revised this gist Jul 19, 2017. 1 changed file with 121 additions and 103 deletions.
    224 changes: 121 additions & 103 deletions sketch.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,131 +1,149 @@
    var canvasWidth = 960;
    var canvasHeight = 500;

    function setup () {
    // create the drawing canvas, save the canvas element
    main_canvas = createCanvas(canvasWidth, canvasHeight);

    // position each element on the page
    main_canvas.parent('canvasContainer');

    // rotation in degrees
    angleMode(DEGREES);
    }

    // global variables for colors
    var bg_color = "#white";
    var fg_color1 = "#5b412a";
    var fg_color2 = "#7b611a";
    var stroke_color = "#c78a5b";
    var skin_tone = "#ffe3d8";
    var nose_tone = "#fcdbcf";
    var skin_tone_highlght;
    var nose_tone = "#ffc8bf";
    var blush_color = "#f9ab90";
    var hat_color_green = "#7bbc60";
    var hat_color_red = "#ce4a4a";
    var eye_color = "#83cbff";

    function draw () {
    // background color
    background(bg_color);
    // stroke color
    stroke(bg_color)
    ellipse();
    head(hat_color_red,960/4,500/2,0);
    head(hat_color_green,2.5*960/4,500/2,30);
    function setup() {
    // create the drawing canvas, save the canvas element
    main_canvas = createCanvas(canvasWidth, canvasHeight);

    // position each element on the page
    main_canvas.parent('canvasContainer');

    // rotation in degrees
    angleMode(DEGREES);
    skin_tone_highlght = c = color('rgba(255, 227, 216, 0.8)');
    }


    function head(hatCol,xoff,yoff,rot) { //(color, xOffset, yOffset, rotation)

    push();
    //move to position, rotate
    translate(xoff, yoff);
    rotate(rot);

    //hat base
    stroke(hatCol);
    fill(hatCol);
    ellipse(0,-115,200,110);

    //face
    stroke(blush_color)
    fill(skin_tone);
    ellipse(0, 0, 220, 250);

    //set fill to match background color
    fill(bg_color);
    // draw two eyes
    ellipse(-35, -25, 60, 80);
    ellipse( 35, -25, 60, 80);

    //set fill back to foreground for eyeballs
    noStroke();
    fill(eye_color);
    ellipse(-35, -10, 35, 45);
    ellipse( 35, -10, 35, 45);
    fill("black");
    ellipse(-35, -10, 22, 32);
    ellipse( 35, -10, 22, 32);

    //nose with blush color
    stroke(blush_color);
    fill(nose_tone);
    ellipse( 0, 15, 65, 55);

    //hat brim
    stroke(bg_color);
    fill(hatCol);
    ellipse(0,-102,150,45);
    fill("white");
    ellipse(0,-140,40,40);

    //bounding box
    fill(255,0);
    stroke(blush_color);
    rect(-160,-160,300,300);
    moustache_6(140,45);
    pop();


    function draw() {
    // background color
    background(bg_color);
    // stroke color
    stroke(bg_color)
    ellipse();
    head(hat_color_red, 960 / 4, 500 / 2, 0);
    head(hat_color_green, 2.5 * 960 / 4, 500 / 2, 30);
    }

    function moustache_6(wid, yOff){
    push()

    var y;
    for(var i = 0; i < 6; i++){

    y = (i % 2)*wid/2;

    switch(i){
    case 5 :
    y = 0;
    break;
    case 4 :
    y = wid/24;
    break;
    case 3 :
    y = 2 * wid/24;
    }

    x = i - 2.5;
    function head(hatCol, xoff, yoff, rot) { //(color, xOffset, yOffset, rotation)

    push();
    //move to position, rotate
    translate(xoff, yoff);
    rotate(rot);

    fill("brown");
    //hat base
    stroke(hatCol);
    fill(hatCol);
    ellipse(0, -100, 150, 110);

    //face
    noStroke();
    fill(skin_tone);
    ellipse(0, 0, 160, 220);
    ellipse(-30,30, 150, 150);
    ellipse(30,30, 150, 150);


    // draw two eyes
    fill("white");
    ellipse(-35, -25, 60, 80);
    ellipse(35, -25, 60, 80);

    //set fill back to foreground for eyeballs
    noStroke();
    fill(eye_color);
    ellipse(-35, -10, 35, 45);
    ellipse(35, -10, 35, 45);
    fill("black");
    ellipse(-35, -10, 22, 32);
    ellipse(35, -10, 22, 32);

    //moustache
    moustache_6(140, 45, 15, 14);

    //nose
    stroke(blush_color);
    fill(nose_tone);
    ellipse(0, 20, 75, 62);
    noStroke();
    ellipse(x * wid/6, y+yOff, 12 * wid/60);
    console.log(y)
    }
    pop();
    fill(skin_tone_highlght);
    ellipse(0,16,58,48);

    //hat brim
    noStroke();
    fill(hatCol);
    ellipse(0, -92, 115, 40);
    stroke(bg_color);
    ellipse(0, -77, 115, 30);
    fill("white");
    ellipse(0, -115, 40, 40);

    //bounding box
    fill(255, 0);
    stroke(blush_color);
    rect(-160, -160, 300, 300);

    pop();


    }

    function moustache_6(wid, yOff, bush, slant) { //moustache is a series of O's arranged in a curve
    push();
    var b;
    var y; // y holds the value for each circle used to render the stache
    for (var i = 0; i < 5; i++) {
    b = bush;
    x = i - 2;
    y = (i%3)*wid/slant;
    switch (i) {
    case 0 :
    y = -0.6 * wid / slant;
    b *= 0.9;
    break;
    case 2:
    y = 1.8 * wid / slant;
    b *= 1.05;
    break;
    case 3:
    y = wid / slant;
    break;
    case 4 :
    y = -0.6 * wid / slant;
    b *= 0.9;
    break;
    }
    //draw a dot
    fill("brown");
    noStroke();
    ellipse(x * wid / 6, y + yOff, b * wid / 60);

    }
    pop();
    }

    function moustache_2(){}

    function moustache_2() {}

    function keyTyped() {
    if (key == '!') {
    saveBlocksImages();
    }
    else if (key == '@') {
    saveBlocksImages(true);
    }
    }
    if (key == '!') {
    saveBlocksImages();
    } else if (key == '@') {
    saveBlocksImages(true);
    }
    }
  21. Michael-Kelly-Digital-Design revised this gist Jul 17, 2017. 3 changed files with 89 additions and 45 deletions.
    Binary file modified preview.jpg
    View file
    Loading
    Sorry, something went wrong. Reload?
    Sorry, we cannot display this file.
    Sorry, this file is invalid so it cannot be displayed.
    134 changes: 89 additions & 45 deletions sketch.js
    View file
    Original file line number Diff line number Diff line change
    @@ -13,70 +13,114 @@ function setup () {
    }

    // global variables for colors
    var bg_color = "#c6bdab";
    var bg_color = "#white";
    var fg_color1 = "#5b412a";
    var fg_color2 = "#7b611a";
    var stroke_color = "#c78a5b";
    var skin_tone = "#ffe3d8";
    var nose_tone = "#fcdbcf";
    var blush_color = "#f9ab90";
    var hat_color_green = "#7bbc60";
    var hat_color_red = "#ce4a4a";
    var eye_color = "#83cbff";

    function draw () {
    render();
    }


    function render () {
    // background color
    background(bg_color);

    // stroke color
    stroke(stroke_color)

    // move to position1, rotate, draw "head" ellipse
    push();
    translate(960/4, 500/2);
    rotate(4);
    fill(fg_color1);
    ellipse(0, 0, 300, 400);
    stroke(bg_color)
    ellipse();
    head(hat_color_red,960/4,500/2,0);
    head(hat_color_green,2.5*960/4,500/2,30);
    }

    // set fill to match background color
    fill(bg_color);
    // draw two eyes
    ellipse(-50, -80, 50, 30);
    ellipse( 50, -80, 50, 30);

    // set fill back to foreground for eyeballs
    fill(fg_color1);
    ellipse(-60, -80, 20, 20);
    ellipse( 40, -80, 20, 20);
    function head(hatCol,xoff,yoff,rot) { //(color, xOffset, yOffset, rotation)

    // mouth-hole with background color
    fill(bg_color);
    ellipse( 0, 70, 150, 20);
    pop();

    // move to position2, rotate, draw "head" ellipse
    push();
    translate(3*960/4, 500/2);
    rotate(30);
    fill(fg_color2);
    ellipse(0, 0, 300, 400);

    // set fill to match background color
    //move to position, rotate
    translate(xoff, yoff);
    rotate(rot);

    //hat base
    stroke(hatCol);
    fill(hatCol);
    ellipse(0,-115,200,110);

    //face
    stroke(blush_color)
    fill(skin_tone);
    ellipse(0, 0, 220, 250);

    //set fill to match background color
    fill(bg_color);
    // draw two eyes
    ellipse(-50, -80, 50, 30);
    ellipse( 50, -80, 50, 30);
    ellipse(-35, -25, 60, 80);
    ellipse( 35, -25, 60, 80);

    //set fill back to foreground for eyeballs
    noStroke();
    fill(eye_color);
    ellipse(-35, -10, 35, 45);
    ellipse( 35, -10, 35, 45);
    fill("black");
    ellipse(-35, -10, 22, 32);
    ellipse( 35, -10, 22, 32);

    //nose with blush color
    stroke(blush_color);
    fill(nose_tone);
    ellipse( 0, 15, 65, 55);

    //hat brim
    stroke(bg_color);
    fill(hatCol);
    ellipse(0,-102,150,45);
    fill("white");
    ellipse(0,-140,40,40);

    //bounding box
    fill(255,0);
    stroke(blush_color);
    rect(-160,-160,300,300);
    moustache_6(140,45);
    pop();

    // set fill back to foreground for eyeballs
    fill(fg_color2);
    ellipse(-60, -80, 20, 20);
    ellipse( 40, -80, 20, 20);

    }

    // mouth-hole with background color
    fill(bg_color);
    ellipse( 0, 70, 150, 20);
    function moustache_6(wid, yOff){
    push()

    var y;
    for(var i = 0; i < 6; i++){

    y = (i % 2)*wid/2;

    switch(i){
    case 5 :
    y = 0;
    break;
    case 4 :
    y = wid/24;
    break;
    case 3 :
    y = 2 * wid/24;
    }

    x = i - 2.5;

    fill("brown");
    noStroke();
    ellipse(x * wid/6, y+yOff, 12 * wid/60);
    console.log(y)
    }
    pop();
    }


    function moustache_2(){}

    function keyTyped() {
    if (key == '!') {
    saveBlocksImages();
    Binary file modified thumbnail.png
    View file
    Loading
    Sorry, something went wrong. Reload?
    Sorry, we cannot display this file.
    Sorry, this file is invalid so it cannot be displayed.
  22. Michael-Kelly-Digital-Design revised this gist Jul 17, 2017. 1 changed file with 5 additions and 0 deletions.
    5 changes: 5 additions & 0 deletions sketch.js
    View file
    Original file line number Diff line number Diff line change
    @@ -19,6 +19,11 @@ var fg_color2 = "#7b611a";
    var stroke_color = "#c78a5b";

    function draw () {
    render();
    }


    function render () {
    // background color
    background(bg_color);

  23. @dribnet dribnet revised this gist Jul 16, 2017. 8 changed files with 233 additions and 0 deletions.
    1 change: 1 addition & 0 deletions .block
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1 @@
    license: mit
    29 changes: 29 additions & 0 deletions .focused_random.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,29 @@
    function resetFocusedRandom() {
    return Math.seedrandom(arguments);
    }

    function focusedRandom(min, max, focus, mean) {
    // console.log("hello")
    if(max === undefined) {
    max = min;
    min = 0;
    }
    if(focus === undefined) {
    focus = 1.0;
    }
    if(mean === undefined) {
    mean = (min + max) / 2.0;
    }
    if(focus == 0) {
    return d3.randomUniform(min, max)();
    }
    else if(focus < 0) {
    focus = -1 / focus;
    }
    sigma = (max - mean) / focus;
    val = d3.randomNormal(mean, sigma)();
    if (val > min && val < max) {
    return val;
    }
    return d3.randomUniform(min, max)();
    }
    67 changes: 67 additions & 0 deletions .purview_helper.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,67 @@
    // note: this file is poorly named - it can generally be ignored.

    // helper functions below for supporting blocks/purview

    function saveBlocksImages(doZoom) {
    if(doZoom == null) {
    doZoom = false;
    }

    // generate 960x500 preview.jpg of entire canvas
    // TODO: should this be recycled?
    var offscreenCanvas = document.createElement('canvas');
    offscreenCanvas.width = 960;
    offscreenCanvas.height = 500;
    var context = offscreenCanvas.getContext('2d');
    // background is flat white
    context.fillStyle="#FFFFFF";
    context.fillRect(0, 0, 960, 500);
    context.drawImage(this.canvas, 0, 0, 960, 500);
    // save to browser
    var downloadMime = 'image/octet-stream';
    var imageData = offscreenCanvas.toDataURL('image/jpeg');
    imageData = imageData.replace('image/jpeg', downloadMime);
    p5.prototype.downloadFile(imageData, 'preview.jpg', 'jpg');

    // generate 230x120 thumbnail.png centered on mouse
    offscreenCanvas.width = 230;
    offscreenCanvas.height = 120;

    // background is flat white
    context = offscreenCanvas.getContext('2d');
    context.fillStyle="#FFFFFF";
    context.fillRect(0, 0, 230, 120);

    if(doZoom) {
    // pixelDensity does the right thing on retina displays
    var pd = this._pixelDensity;
    var sx = pd * mouseX - pd * 230/2;
    var sy = pd * mouseY - pd * 120/2;
    var sw = pd * 230;
    var sh = pd * 120;
    // bounds checking - just displace if necessary
    if (sx < 0) {
    sx = 0;
    }
    if (sx > this.canvas.width - sw) {
    sx = this.canvas.width - sw;
    }
    if (sy < 0) {
    sy = 0;
    }
    if (sy > this.canvas.height - sh) {
    sy = this.canvas.height - sh;
    }
    // save to browser
    context.drawImage(this.canvas, sx, sy, sw, sh, 0, 0, 230, 120);
    }
    else {
    // now scaledown
    var full_width = this.canvas.width;
    var full_height = this.canvas.height;
    context.drawImage(this.canvas, 0, 0, full_width, full_height, 0, 0, 230, 120);
    }
    imageData = offscreenCanvas.toDataURL('image/png');
    imageData = imageData.replace('image/png', downloadMime);
    p5.prototype.downloadFile(imageData, 'thumbnail.png', 'png');
    }
    11 changes: 11 additions & 0 deletions README.md
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,11 @@
    ## PS1 MDDN 342 2017

    This README should be updated as the code changes. Replace
    this placeholder text and use this
    README as a design journal to record your process.
    Be sure to use complete sentences,
    and you can reference your sketch which will appear above.
    The explanation should be short but complete, roughly 100 words.

    Also update both images keeping their original sizes:
    preview.jpg (960x500) and thumbnail.png (230x120).
    43 changes: 43 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,43 @@
    <head>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.11/p5.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.11/addons/p5.dom.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/seedrandom/2.4.0/seedrandom.min.js"></script>
    <script src="https://d3js.org/d3-random.v1.min.js"></script>
    <script language="javascript" type="text/javascript" src=".purview_helper.js"></script>
    <script language="javascript" type="text/javascript" src=".focused_random.js"></script>
    <script language="javascript" type="text/javascript" src="sketch.js"></script>

    <style>
    body { padding: 0; margin: 0; }
    .inner { position: absolute; }
    #controls {
    font: 300 12px "Helvetica Neue";
    padding: 5;
    margin: 5;
    background: #f0f0f0;
    opacity: 0.0;
    -webkit-transition: opacity 0.2s ease;
    -moz-transition: opacity 0.2s ease;
    -o-transition: opacity 0.2s ease;
    -ms-transition: opacity 0.2s ease;
    }
    #controls:hover { opacity: 0.9; }
    </style>

    </head>
    <body style="background-color:white">
    <div class="outer">
    <div class="inner">
    <div id="canvasContainer"></div>
    </div>
    <div class="inner" id="controls" height="500px">
    <table>
    <tr>
    <td>(future interface here)</td>
    <td id="selector1Container"></td>
    </tr>
    </table>
    </div>
    </div>
    </table>
    </body>
    Binary file added preview.jpg
    View file
    Loading
    Sorry, something went wrong. Reload?
    Sorry, we cannot display this file.
    Sorry, this file is invalid so it cannot be displayed.
    82 changes: 82 additions & 0 deletions sketch.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,82 @@
    var canvasWidth = 960;
    var canvasHeight = 500;

    function setup () {
    // create the drawing canvas, save the canvas element
    main_canvas = createCanvas(canvasWidth, canvasHeight);

    // position each element on the page
    main_canvas.parent('canvasContainer');

    // rotation in degrees
    angleMode(DEGREES);
    }

    // global variables for colors
    var bg_color = "#c6bdab";
    var fg_color1 = "#5b412a";
    var fg_color2 = "#7b611a";
    var stroke_color = "#c78a5b";

    function draw () {
    // background color
    background(bg_color);

    // stroke color
    stroke(stroke_color)

    // move to position1, rotate, draw "head" ellipse
    push();
    translate(960/4, 500/2);
    rotate(4);
    fill(fg_color1);
    ellipse(0, 0, 300, 400);

    // set fill to match background color
    fill(bg_color);
    // draw two eyes
    ellipse(-50, -80, 50, 30);
    ellipse( 50, -80, 50, 30);

    // set fill back to foreground for eyeballs
    fill(fg_color1);
    ellipse(-60, -80, 20, 20);
    ellipse( 40, -80, 20, 20);

    // mouth-hole with background color
    fill(bg_color);
    ellipse( 0, 70, 150, 20);
    pop();

    // move to position2, rotate, draw "head" ellipse
    push();
    translate(3*960/4, 500/2);
    rotate(30);
    fill(fg_color2);
    ellipse(0, 0, 300, 400);

    // set fill to match background color
    fill(bg_color);
    // draw two eyes
    ellipse(-50, -80, 50, 30);
    ellipse( 50, -80, 50, 30);

    // set fill back to foreground for eyeballs
    fill(fg_color2);
    ellipse(-60, -80, 20, 20);
    ellipse( 40, -80, 20, 20);

    // mouth-hole with background color
    fill(bg_color);
    ellipse( 0, 70, 150, 20);
    pop();
    }

    function keyTyped() {
    if (key == '!') {
    saveBlocksImages();
    }
    else if (key == '@') {
    saveBlocksImages(true);
    }
    }
    Binary file added thumbnail.png
    View file
    Loading
    Sorry, something went wrong. Reload?
    Sorry, we cannot display this file.
    Sorry, this file is invalid so it cannot be displayed.
  24. @dribnet dribnet created this gist Jan 1, 1974.