Project 02- Variable Faces, Blowing bubbles

sketch

/* Samantha Ho
Section E 
sch1@andrew.cmu.edu
Project-02*/

var eyeSize = 20;
var faceW = 100;
var faceH = 150;
var textPlacement =100;
var textPlace =150;
var posx = 400;
var posy =200;
var mouthx = 320;
var mouthy = 276;
var mouthw = 100;
var mouthh = 150;
var mouthoutw = 100;
var mouthouth = 150;
var bubbax = 400;
var bubbay =200;
var bubbbx = 400;
var bubbby =200;

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

}

function draw() {
    background(230,230,230);
    //face fill
    fill(230,240,250);
    noStroke();
    ellipse(width / 2.1, height / 2.4, faceW+100,  faceH+60);   
    //face
    strokeWeight(1);
    stroke(60,60,60);
    noFill();
    ellipse(width / 2, height / 2.4, faceW+100,  faceH+60);   
    //mouth
    noStroke();
    fill(200,0,0);
    ellipse(mouthx,mouthy, mouthw/1.6,  mouthh/26);  
    
    noFill();
    stroke(20,20,20);
    ellipse(mouthx,mouthy, mouthoutw/1.6,  mouthouth/26);  
    
    fill(200,0,0);
    noStroke();
    var eyeLX = width / 2 - faceW * 0.45;
    var eyeRX = width / 2 + faceW * 0.45;
    ellipse(eyeLX, height/2, eyeSize, eyeSize);
    ellipse(eyeRX, height/2, eyeSize, eyeSize);
    
    //bubble
    strokeWeight(5);
    stroke(216,216,216);
    fill(250,250,250);
    ellipse(posx+16,posy+76, faceW/2,  faceH/3);
    noStroke();
    fill(230,230,230);
    ellipse(posx+13, posy+80, faceW/2.5,  faceH/3.5);
    stroke(20,20,20);
    strokeWeight(1);
    noFill();
    ellipse(posx+18, posy+80, faceW/1.8,  faceH/2.6);
    
    //bubblea
    stroke(20,20,20);
    strokeWeight(1);
    noFill();
    ellipse(bubbax+18, bubbay+80, faceW/8,  faceH/10);
    //bubbleb
    stroke(20,20,20);
    strokeWeight(1);
    noFill();
    ellipse(bubbbx+18, bubbby+80, faceW/8,  faceH/9);
    
    //bubblewand
    strokeWeight(6);
    stroke(200,0,0);
    noFill();
    ellipse(420, 280, faceW/3.6,  faceH/4);
    rect(420, 301, faceW/70,  faceH/4);
    
    //text try
    noStroke();
    fill(216,216,216);
    textSize(50);
    textFont('Helvetica');
    text('bubbles', textPlacement,100);
    textPlacement = textPlacement +2;
    if(textPlacement>640){
       textPlacement = -350    };
    
    fill(219,216,216);
    textSize(50);
    textFont('Helvetica');
    text('bubbbbles', textPlace,100);
    textPlace = textPlace +6;
    if(textPlace>640){
        textPlace = -350    };
    angleMode(DEGREES);

}

function mousePressed() {
    mouthx= random(320,360);
    mouthw= random(100,40);
    mouthh= random(150,300);
    mouthoutw= random(90,50);
    mouthouth= random(140,400);
    posx = random(400,460);
    posy = random(220,40);
    bubbax = random(400,480);
    bubbay = random(220, 140);
    bubbbx = random(410,500);
    bubbby = random(230, 130);
}

I enjoyed playing around with the variables and I’m excited by the idea of computational animation. I played around with words and strokes, but couldn’t quite nail down how to do opacities on js. On the p5-js references page, the closest thing I could find was blendMode. That being said, I’m looking forward to exploring this further.