/*
    Joan Lee
    Section D

    This program draws a portrait of me GRIPPING my fruit with symbols that represent me loving fruit.
*/

function preload() {
    joan = loadImage("https://i.imgur.com/eMJulaO.png");
}

function setup() {
    createCanvas(385, 480);
    joan.resize(width, height);
    background(255);
    joan.loadPixels();
}

function draw() {
    //want the image to be revealed where the mouse is
    var pixColor = joan.get(mouseX, mouseY);
    
    //revealing image of me GRIPPING fruit with icons that resemble fruit and my love for it
    noStroke();
    iLoveFruit = ["♥", "⊛", "❂"];

    for(var i = 0; i < 3; i ++) {
        fill(pixColor);
        textSize(random(1, 10));
        text(iLoveFruit[floor(random(iLoveFruit.length))], mouseX, mouseY);
    }
}

/*
    Joan Lee
    Section D

    This program draws an interactive floral composition with mathematical curves.
*/

var nPoints = 400;

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


function draw() {
    background(28,92,76);    //dark green
    
    //drawing flower curve
    push();
    translate(width/2, height/2);
    drawCardioidCurve();
    pop();

    //drawing leaves curve
    push();
    translate(width/2, height/2);
    drawHypotrochoidCurve();
    pop();

}

//--------------------------------------------------
function drawCardioidCurve() {
    //cardioid curve
    push();
    translate(x, y);
    rotate(radians(90));
    var x = constrain(mouseX, 0, width);
    var y = constrain(mouseY, 0, height);
    var a = map(x, 0, width, 0, 40);
    var b = a/2;
   
    //mouse movement interaction
    if (mouseY > height/2) {    //color change
        fill(244,52,4);     //bright red
    } else {
        fill(252,156,132);  //pink
    }

    //cardioid curve parametric equations
    beginShape();
    noStroke();
    for (var i = 0; i < nPoints; i++) {
        var t = map(i, 0, nPoints, 0, TWO_PI);

        x = a * (6 * cos(t) - cos(6 * t));
        y = a * (6 * sin(t) - sin(6 *t));
        vertex(x, y);
    }
    endShape(CLOSE);
    pop();
    
}

//--------------------------------------------------
function drawHypotrochoidCurve() {
    //hypotrochoid curve
    noFill();
    strokeWeight(1);

    //mouse movement interaction

    if (mouseX < width/2) {      //color change
        stroke(4,220,156);  // bright green
    } else {
        stroke(204,236,228);    //pale green
    }

    var x = constrain(mouseX, 0, width);
    var y = constrain(mouseY, 0, height);
    var a = map(x, 0, width, 50, 150);
    var b = map(y, 0, height, 1, 6);
    var h = constrain(mouseY, 50, 90);
    
    //hypotrochoid curve parametric equations
    beginShape();
    for (var i = 0; i < nPoints; i++) {
        var t = map(i, 0, nPoints, 0, TWO_PI);
        
        x = (a - b) * cos(t) + h * cos(t * ((a - b) / b));
        y = (a - b) * sin(t) - h * sin(t * ((a - b) / b));
        vertex(x, y);
    }
    endShape(CLOSE);
    
}

Although the product is not where I wish it was visually, I will just have to improve on that in my next project. The most challenging part was refreshing my memory on radians so that I wouldn’t have to keep plugging in and checking if numbers work.

/*
    Joan Lee
    Section D
*/

var h = 0;
var angle = 0;

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

function draw() {
    background(135 * h, 209 * h, 255 * h);      //whenever the mouse moves horizontally it turns from 0 (black) to a sky blue color

    //earth
    noStroke();
    fill(78, 92, 222);
    ellipse(width / 2, height, 800, 400);

    //orbit, done above both the sun and moon to apply to both the same
    translate(h * width, 100);  //moves the sun and moon as the mouse moves horizontally
    rotate(h * QUARTER_PI);     //rotates by pi/4 radians when the mouse moves horizontally
    
    //sun
    fill(255, 208, 0);
    circle(-width / 2, 325, 100 * h);     //grows when mouse moving to the right

    //moon
    fill(200);
    circle(width / 2, 50, 50 * (1 - h));    //shrinks when mouse moving to the right
    fill(135 * h, 209 * h, 255 * h);                //same fill as the background to ensure it is invisible and hiding the rest of the moon
    circle(width / 2 + 15, 50, 50 * (1 - h));       //circle that hides the rest of the moon so it looks like a crescent moon

    hPosition();        //function defined below

}

function hPosition(){
    h = mouseX / width;     //h is btwn 0 and 1 for simplicity's sake instead of just mouseX
    h = Math.min(h, 1);     //stops the changes when the mouse moves 100% of the canvas horizontally
}

/*
    Joan Lee
    Section D

    Aspects of variability
        4 different expressions with mouse movement
        switching hair color each click
        different posture each click
        background changes every click
*/

var eyeSize = 20;
var faceWidth = 150;
var faceHeight = 180;
var shoulderHeight = 480;
var bodyColor = "white";
var on = false;
var r = 100;
var g = 74;
var b = 65;
var bgColor = 0;

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

function draw() {
    background(bgColor);

    //hair behind face
    if(on == true){
        fill(r, g, b);
    } else{
        fill(255 - r, 255 - g, 255 - b);
    }
    ellipse(width / 2, height / 2 + (faceHeight / 4), faceWidth + 50, 330);

    //person
    noStroke();
    fill(bodyColor);
    ellipse(width / 2, height, 170, shoulderHeight);    //body
    fill(250, 230, 180);
    ellipse(width / 2, height / 2, faceWidth,  faceHeight);     //head
   
    //eyes
    stroke(0);
    strokeWeight(1);
    fill("white");
    var eyeLX = width / 2 - faceWidth / 4;
    var eyeRX = width / 2 + faceWidth / 4;
    var x = constrain(mouseX, 20, 35);  //eyes getting bigger with mouse moving right
    circle(eyeLX, height / 2, x);
    circle(eyeRX, height / 2, x);   //whites of eyes
    fill(63, 35, 11);
    circle(eyeLX + 1, height / 2, 5);
    circle(eyeRX - 1, height / 2, 5);   //pupils considering interpupillary distance

    //nose
    noFill();
    stroke(205, 179, 156);  //shadow
    strokeWeight(1);
    beginShape();
    curveVertex(width / 2 + 5, height / 2 + 10);
    curveVertex(width / 2 + 5, height / 2 + 10);
    curveVertex(width / 2, height / 2 + 20);
    curveVertex(width / 2 - 5, height / 2 + 10);
    curveVertex(width / 2 - 5, height / 2 + 10);
    endShape();
    
    //mouth
    strokeWeight(4);
    stroke(255, 200, 200);
    fill(0);
    var x1 = constrain(mouseX, 1, 40);
    ellipse(width / 2, height / 2 + 50, 60, x1);    //making mouth bigger with mouse placement
    
    //bangs
    noStroke();
    if(on == true){
        fill(r, g, b);
    } else{
        fill(255 - r, 255 - g, 255 - b);
    }
    arc(width / 2, height / 2 - faceHeight / 6, faceWidth + 10, faceHeight - 30, PI, 0);

    //eyebrows
    fill(73, 45, 35);
    var y = constrain(mouseY, height / 2 - 50, height / 2 - 30);
    rect((width / 2) - (faceWidth / 3), y, 30, 5);      
    rect((width / 2) + (faceWidth / 8), y, 30, 5);  //raised vs furrowed eyebrows with mouse moving up or down
}

function mousePressed() {
    bgColor = random(0, 255);
    faceWidth = random(110, 160);
    faceHeight = random(160, 200);
    shoulderHeight = random(330, 450);
    if(on == true){     //changing hair color each click
        on = false;
    } else{
        on = true;
    }
}

/*
    Joan Lee
    Section D
*/

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

function draw() {
    background(200);

    //hair behind face
    noStroke();
    fill(53, 25, 15);
    rect(65, 100, 170, 300);
    ellipse(70, 260, 70, 350);
    ellipse(230, 260, 70, 350);     //background hair
    ellipse(115, 120, 120, 130);
    ellipse(185, 120, 120, 130);
  
     //body
    fill(223, 205, 230);
    triangle(150, 200, 230, 400, 70, 400);

    //face
    fill(250, 230, 180);
    noStroke();
    quad(75, 100, 225, 100, 230, 230, 70, 230);     //head
    quad(70, 230, 230, 230, 165, 285, 135, 285);    //jaw

    //eyebrows
    stroke(73, 45, 35);
    strokeWeight(5);
    line(171, 150, 206, 152);
    line(94, 152, 129, 150);

    //eyes
    fill(245, 245, 245);
    stroke(0);
    strokeWeight(3);
    arc(110, 180, 35, 25, PI, TWO_PI);
    arc(185, 180, 35, 25, PI, TWO_PI);  //eyeballs and lash line
    fill(63, 35, 11);
    stroke(0);
    strokeWeight(2);
    circle(111, 177, 17);
    circle(184, 177, 17);   //pupils and irises
    fill(255, 225, 215);
    stroke(205, 179, 156);
    strokeWeight(1);
    ellipse(110, 183, 35, 7);
    ellipse(185, 183, 35, 7);   //undereye silkworms

    //nose
    triangle(148, 180, 165, 220, 132, 220);

    //mouth
    stroke(255, 210, 200);  //lips
    strokeWeight(5);
    fill(255);
    arc(148, 233, 70, 50, 0, PI, CHORD);

    //front hair
    stroke(53, 25, 15);
    strokeWeight(1);
    noFill();
    arc(70, 100, 70, 200, TWO_PI, PI - HALF_PI);
    arc(230, 100, 80, 240, PI - HALF_PI, PI);
    arc(240, 100, 150, 190, PI - HALF_PI, PI);
    arc(100, 100, 100, 80, TWO_PI, PI - HALF_PI);
    arc(200, 100, 100, 80, PI - HALF_PI, PI);   //lil baby hairs
    noStroke();
    fill(53, 25, 15);
    arc(60, 95, 110, 170, TWO_PI, PI - HALF_PI);
    arc(230, 100, 80, 170, PI - HALF_PI, PI);   //side bangs
}