Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using it's URL and the proper URL extention.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                //- 
  Monkey Business (Animated)
  Grant Jenkins, August 2022

  Animation based off:
  https://miro.medium.com/max/700/1*mzFefEQwsHF_F7F_NbCzcg.gif

canvas#canvas
script(src="https://cdn.jsdelivr.net/processing.js/1.4.8/processing.min.js")
              
            
!

CSS

              
                * {
  margin: 0;
  box-sizing: border-box;
  overflow: hidden;
}
body {
  background: #FEDB5B;
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  
  canvas {
    box-shadow: 0.2em 0.2em 2em #0008;
    border: none;
    outline: none;
  }
}
              
            
!

JS

              
                var sketchProc = function(processingInstance) {
  with (processingInstance) {
    size(600, 600); 
    frameRate(60);    
    smooth();
    
Object.constructor.prototype.new = function() {
    var obj = Object.create(this.prototype);
    this.apply(obj, arguments);
    return obj;
};

var Cactus = (function() {
    Cactus = function(args) {
        this.x = args.x || 100; //100 is just off the right of the screen
        this.y = args.y || 0; //10 is pot on the ground
        this.colors = args.colors || {
            pot: color(123, 206, 246),
            cactus: color(100, 189, 107),
            shadow: color(40, 40, 40, 20)
        };
        this.anim = {
            cactus: { // bezier(541, 449, 541, 469, 541, 488, 541, 507);
                x1: 541,
                y1: 449,
                x2: 541,
                y2: 469,
                x3: 541,
                y3: 488,
                x4: 541,
                y4: 507,
                xoff: 0
            },
            feet: {
                y1: 0,
                y2: 0,
                speed: 25
            }
        };
        this.timer = args.timer || 0;
        this.state = args.state || 0;
    };
    Cactus.prototype = {
        draw: function() {
            pushMatrix();
                translate(this.x, this.y);
                
                //cactus
                noFill();
                stroke(this.colors.cactus);
                strokeWeight(21);
                // bezier(541, 449, 541, 469, 541, 488, 541, 507);
                bezier( this.anim.cactus.x1 + this.anim.cactus.xoff, this.anim.cactus.y1, 
                        this.anim.cactus.x2 + this.anim.cactus.xoff * 0.75, this.anim.cactus.y2, 
                        this.anim.cactus.x3 + this.anim.cactus.xoff * 0.5, this.anim.cactus.y3, 
                        this.anim.cactus.x4, this.anim.cactus.y4);
                
                //branches
                strokeWeight(10);
                //left branch
                bezier( 541 + this.anim.cactus.xoff, 470, 
                        529 + this.anim.cactus.xoff, 470, 
                        520 + this.anim.cactus.xoff, 475, 
                        520 + this.anim.cactus.xoff, 459);
                //right branch
                bezier( 540 + this.anim.cactus.xoff, 481, 
                        552 + this.anim.cactus.xoff, 482, 
                        561 + this.anim.cactus.xoff, 484, 
                        561 + this.anim.cactus.xoff, 473);
                
                //feet
                strokeWeight(8);
                line(533, 536, 533, 550 + this.anim.feet.y1);
                line(546, 536, 546, 550 + this.anim.feet.y2);
                strokeWeight(1);
                
                //pot
                noStroke();
                fill(this.colors.pot);
                quad(517, 500, 562, 500, 554, 545, 525, 545);
                fill(this.colors.shadow);
                quad(540, 500, 562, 500, 554, 545, 540, 545);
            popMatrix();
        },
        update: function() {
            this.timer = (this.timer + 1) % 210;
            
            switch(this.state) {
                case 0: //walk in
                    this.x = constrain(this.x - 2, 0, this.x);
                    
                    if(this.x > 0) {
                        var s = sin(radians(this.timer * this.anim.feet.speed)) * 5;
                        this.anim.feet.y1 = constrain(s, -5, 0);
                        this.anim.feet.y2 = constrain(-s, -5, 0);
                    }
                    else {
                        this.anim.feet.y1 = ~~lerp(this.anim.feet.y1, 0, 0.10);
                        this.anim.feet.y2 = ~~lerp(this.anim.feet.y2, 0, 0.10);
                        
                        this.anim.cactus.xoff = lerp(this.anim.cactus.xoff, 0, 0.15);
                    }

                    if(this.timer >= 90) {
                        this.state++;
                    }
                    
                    break;
                case 1: //sit
                    this.y = constrain(this.y + 2.0, this.y, 10);
                    this.anim.feet.y1 = constrain(this.anim.feet.y1 - 2, -10, this.anim.feet.y1);
                    this.anim.feet.y2 = constrain(this.anim.feet.y2 - 2, -10, this.anim.feet.y2);
                    
                    if(this.timer >= 150) {
                        this.state++;
                    }
                    
                    break;
                case 2: //slide out
                    this.x = constrain(this.x + 4, 0, 100);
                    
                    this.anim.cactus.xoff = lerp(this.anim.cactus.xoff, -10, 0.20);
                    
                    if(this.timer === 0) {
                        this.y = 0;
                        this.anim.feet.y1 = 0;
                        this.anim.feet.y2 = 0;
                        this.anim.cactus.xoff = 15;
                        this.state = 0;
                    }
                    
                    break;
            }
        },
        go: function() {
            this.draw();
            this.update();
        }
    };
    return Cactus;
})();

var Cup = (function() {
    Cup = function(args) {
        this.x = args.x || 0;
        this.y = args.y || 0;
        this.timer = args.timer || 0;
        this.move = 0;
        this.colors = args.colors || {
            cup: color(247, 132, 32),
            bag: color(254, 156, 48),
            shadow: color(40, 40, 40, 20),
            face: color(255, 231, 239)
        };
        this.steam = [
            {
                x: 404,
                y: 335,
                vy: -0.15,
                vx: 1.05,
                opacity: 255,
                bx: 404,
                by: 360,
                diameter: 5
            },
            {
                x: 411,
                y: 335,
                vy: -0.12,
                vx: 1.00,
                opacity: 255,
                bx: 411,
                by: 355,
                diameter: 4
            },
            {
                x: 419,
                y: 335,
                vy: -0.18,
                vx: 1.10,
                opacity: 255,
                bx: 419,
                by: 360,
                diameter: 5
            }
        ];
        this.teabag = {
            angle: 0,
            one: 0,
            two: 30,
            three: -15
        };
    };
    Cup.prototype = {
        draw: function() {
            pushMatrix();
                translate(this.x, this.y + sin(radians(this.move * 3)) * 5);
                translate(442, 368);
                rotate(radians(-2));
                translate(-442, -368);
                
                //steam (animated)
                noStroke();
                for(var i = 0; i < this.steam.length; i++) {
                    var item = this.steam[i];
                    fill(255, item.opacity);
                    ellipse(item.x, item.y, item.diameter, item.diameter);
                }
                
                //handle
                noFill();
                stroke(this.colors.cup);
                strokeWeight(5);
                ellipse(432, 358, 20, 20);
                strokeWeight(1);
                
                //cup
                noStroke();
                fill(this.colors.cup);
                rect(394, 343, 35, 42, 3);
                //shading
                fill(this.colors.shadow);
                rect(411, 343, 18, 42, 0, 3, 3, 0);
                
                //teabag
                pushMatrix();
                    translate(409, 343);
                    rotate(radians(this.teabag.angle));
                    translate(-409, -343);
                    
                    strokeWeight(2);
                    stroke(this.colors.bag);
                    bezier(409, 343, 405, 347, 405, 351, 405, 360);
                    strokeWeight(1);
                    noStroke();
                    fill(this.colors.bag);
                    rect(400, 356, 10, 10, 3);
                popMatrix();
                
                //monkey hand over the handle
                noStroke();
                fill(this.colors.face);
                ellipse(449, 358, 30, 30);
                
            popMatrix();
        },
        update: function() {
            this.timer = (this.timer + 1) % 210;
            this.move++;
            
            //move the steam
            for(var i = 0; i < this.steam.length; i++) {
                var item = this.steam[i];
                
                if(this.timer > 30 && this.timer < 60) {
                    item.opacity-= 8;
                    item.x+= item.vx;
                }
                if(this.timer < 240) {
                    item.y+= item.vy;
                }
                if(this.timer === 60) {
                    item.opacity = 255;
                    item.x = item.bx;
                    item.y = item.by;
                }
            }
            
            //rotate teabag
            if(this.timer > 5 && this.timer < 15) {
                this.teabag.angle = lerp(this.teabag.angle, this.teabag.two, 0.3);
            }
            else if(this.timer > 15 && this.timer < 30) {
                this.teabag.angle = lerp(this.teabag.angle, this.teabag.three, 0.2);
            }
            
            else {
                this.teabag.angle = lerp(this.teabag.angle, this.teabag.one, 0.2);
            }
        },
        go: function() {
            this.draw();
            this.update();
        }
    };
    return Cup;
})();

var Phone = (function() {
    Phone = function(args) {
        this.x = args.x || 0;
        this.y = args.y || 0;
        this.w = args.w || 16;
        this.h = args.h || 50;
        this.angle = args.angle || 0;
        this.timer = args.timer || 0;
        this.move = 0;
        this.colors = args.colors || {
            phone: color(255, 255, 255),
            antenna: color(164, 164, 164),
            shadow: color(231, 231, 231),
            face: color(255, 231, 239)
        };
    };
    Phone.prototype = {
        draw: function() {
            pushMatrix();
                translate(this.x, this.y + sin(radians(this.move * 3)) * 5);
                
                pushMatrix();
                    translate(310 + this.w/2, 343 + this.h/2);
                    rotate(radians(this.angle));

                    //phone
                    noStroke();
                    fill(this.colors.phone);
                    rect(2, -30, this.w, this.h, 4);
                    fill(this.colors.shadow);
                    rect(12, -30, this.w - 10, this.h, 0, 8, 8, 0);
                    //antenna
                    strokeWeight(3);
                    stroke(this.colors.antenna);
                    line(8, -this.h * 0.5, 8, -this.h * 0.75);
                    strokeWeight(1);
                popMatrix();

                //monkey hand over the handle
                noStroke();
                fill(this.colors.face);
                ellipse(314, 370, 30, 30);
            popMatrix();
        },
        update: function() {
            this.timer = (this.timer + 1) % 210;
            this.move++;

            //rotate phone
            if(this.timer < 45) {
                this.angle = lerp(this.angle, 30, 0.3);
            }
            else if(this.timer >= 45 && this.timer < 60) {
                this.angle = random(25, 35);
            }
            else if(this.timer >= 60 && this.timer < 80) {
                this.angle = lerp(this.angle, 30, 0.3);
            }
            else {
                this.angle = lerp(this.angle, -10, 0.2);
            }
        },
        go: function() {
            this.draw();
            this.update();
        }
    };
    return Phone;
})();

var Paper = (function() {
    Paper = function(args) {
        this.x = args.x || 400;
        this.y = args.y || -100;
        this.w = args.w || 100;
        this.h = args.h || 134;
        this.angle = args.angle || 0;
        this.timer = args.timer || 0;
        this.move = 0;
        this.colors = args.colors || {
            paper: color(255, 255, 255),
            lines: color(214, 214, 214),
            body: color(234, 82, 82),
            face: color(255, 231, 239)
        };
        this.anim = {
            paper: {
                x: 0,
                y: 0,
                angle: 0,
                one: {
                    x: 183,
                    y: 188,
                    angle: 40
                },
                two: {
                    x: -100,
                    y: 200,
                    angle: 0
                },
                three: {
                    x: 400,
                    y: -100,
                    angle: 0
                }
            },
            leg: {
                x: 195,
                y: 282,
                one: {
                    x: 183,
                    y: 188
                },
                two: {
                    x: 231,
                    y: 296
                },
                three: {
                    x: 195,
                    y: 282
                }
            },
            arms: {
                top: {
                    x1: 70,
                    y1: -100,
                    x2: 120,
                    y2: -80,
                    x3: 170,
                    y3: -60,
                    x4: 220,
                    y4: -40,
                    one: {
                        x1: 70,
                        y1: -100,
                        x2: 120,
                        y2: -80,
                        x3: 170,
                        y3: -60,
                        x4: 220,
                        y4: -40, 
                    },
                    two: {
                        x1: 70,
                        y1: -20,
                        x2: 80,
                        y2: 50,
                        x3: 90,
                        y3: 90,
                        x4: 110,
                        y4: 125
                    }
                },
                left: {
                    x1: -10,
                    y1: 400,
                    x2: -60,
                    y2: 400,
                    x3: -40,
                    y3: 400,
                    x4: -20,
                    y4: 395,
                    one: {
                        x1: -10,
                        y1: 400,
                        x2: 40,
                        y2: 380,
                        x3: 70,
                        y3: 360,
                        x4: 105,
                        y4: 335 
                    },
                    two: {
                        x1: -20,
                        y1: 400,
                        x2: -20,
                        y2: 380,
                        x3: -20,
                        y3: 360,
                        x4: -20,
                        y4: 265 
                    },
                    three: {
                        x1: -10,
                        y1: 400,
                        x2: -60,
                        y2: 400,
                        x3: -40,
                        y3: 400,
                        x4: -20,
                        y4: 395 
                    }
                }
            }
        };
    };
    Paper.prototype = {
        draw: function() {
            pushMatrix();
                translate(this.x, this.y + sin(radians(this.move * 3)) * 5);
                rotate(radians(this.anim.paper.angle));
                
                //paper
                noStroke();
                fill(this.colors.paper);
                rect(-this.w, -this.h * 0.5, this.w, this.h);
                
                //lines on paper
                stroke(this.colors.lines);
                strokeWeight(4);
                for(var i = 0; i < 4; i++) {
                    line(-this.w * 0.87, -this.h * 0.38 + i*28, -this.w * 0.2, -this.h * 0.38 + i*28);
                    line(-this.w * 0.87, -this.h * 0.32 + i*28, -this.w * 0.5, -this.h * 0.32 + i*28);
                }
                strokeWeight(1);
            popMatrix();
            
            //left arm
            noFill();
            strokeWeight(15);
            stroke(this.colors.body);
            bezier( this.anim.arms.left.x1, this.anim.arms.left.y1,
                    this.anim.arms.left.x2, this.anim.arms.left.y2,
                    this.anim.arms.left.x3, this.anim.arms.left.y3,
                    this.anim.arms.left.x4, this.anim.arms.left.y4);
            strokeWeight(1);
            noStroke();
            fill(this.colors.face);
            ellipse(this.anim.arms.left.x4, this.anim.arms.left.y4, 30, 30);
            
            //top arm
            noFill();
            strokeWeight(15);
            stroke(this.colors.body);
            bezier( this.anim.arms.top.x1, this.anim.arms.top.y1,
                    this.anim.arms.top.x2, this.anim.arms.top.y2,
                    this.anim.arms.top.x3, this.anim.arms.top.y3,
                    this.anim.arms.top.x4, this.anim.arms.top.y4 + sin(radians(this.move * 3)) * 5);
            strokeWeight(1);
            noStroke();
            fill(this.colors.face);
            ellipse(this.anim.arms.top.x4, this.anim.arms.top.y4 + sin(radians(this.move * 3)) * 5, 30, 30);
        },
        updateLimbs: function(from, to, speed) {
            from.x2 = lerp(from.x2, to.x2, speed);
            from.y2 = lerp(from.y2, to.y2, speed);
            from.x3 = lerp(from.x3, to.x3, speed);
            from.y3 = lerp(from.y3, to.y3, speed);
            from.x4 = lerp(from.x4, to.x4, speed);
            from.y4 = lerp(from.y4, to.y4, speed);
        },
        update: function() {
            this.timer = (this.timer + 1) % 210;
            this.move++;
            
            //left arm
            if(this.timer < 165) {
                this.updateLimbs(this.anim.arms.left, this.anim.arms.left.three, 0.1);
            }
            else if(this.timer < 195) {
                this.updateLimbs(this.anim.arms.left, this.anim.arms.left.one, 0.2);
            }
            else {
                this.updateLimbs(this.anim.arms.left, this.anim.arms.left.two, 0.2);
            }
            
            //top arm
            if(this.timer > 5 && this.timer < 70) {
                this.updateLimbs(this.anim.arms.top, this.anim.arms.top.two, 0.12);
            }
            else {
                this.updateLimbs(this.anim.arms.top, this.anim.arms.top.one, 0.1);
            }

            //calculate position of arm/hand
            if(this.timer < 60) {
                this.anim.leg.x = lerp(this.anim.leg.x, this.anim.leg.one.x, 0.1);
                this.anim.leg.y = lerp(this.anim.leg.y, this.anim.leg.one.y, 0.1);
            }
            else if(this.timer < 180) {
                this.anim.leg.x = lerp(this.anim.leg.x, this.anim.leg.two.x, 0.1);
                this.anim.leg.y = lerp(this.anim.leg.y, this.anim.leg.two.y, 0.1);
            }
            else {
                this.anim.leg.x = lerp(this.anim.leg.x, this.anim.leg.three.x, 0.2);
                this.anim.leg.y = lerp(this.anim.leg.y, this.anim.leg.three.y, 0.2);
            }
            
            //move/rotate paper
            if(this.timer < 60) {
                this.x = lerp(this.x, this.anim.paper.one.x, 0.1);
                this.y = lerp(this.y, this.anim.paper.one.y, 0.1);
                this.anim.paper.angle = lerp(this.anim.paper.angle, this.anim.paper.one.angle, 0.1);
            }
            else if(this.timer < 180) {
                this.x = this.anim.leg.x;
                this.y = this.anim.leg.y;
                this.anim.paper.angle = lerp(this.anim.paper.angle, -50, 0.1);
            }
            else if(this.timer < 195) {
                this.x = this.anim.leg.x;
                this.y = this.anim.leg.y;
                this.anim.paper.angle = lerp(this.anim.paper.angle, -30, 0.1);
            }
            else if(this.timer < 209) {
                this.x = lerp(this.x, this.anim.paper.two.x, 0.1);
                this.y = lerp(this.y, this.anim.paper.two.y, 0.1);
                this.anim.paper.angle = lerp(this.anim.paper.angle, this.anim.paper.two.angle, 0.1);
            }
            else {
                this.x = this.anim.paper.three.x;
                this.y = this.anim.paper.three.y;
                this.anim.paper.angle = 0;
            }
        },
        go: function() {
            this.draw();
            this.update();
        }
    };
    return Paper;
})();

var Monkey = (function() {
    Monkey = function(args) {
        this.x = args.x || 0;
        this.y = args.y || 0;
        this.timer = args.timer || 0;
        this.move = 0;
        this.speed = args.speed || 2;
        this.state = args.state || 0;
        this.colors = args.colors || {
            body: color(234, 82, 82),
            face: color(255, 231, 239),
            shadow: color(40, 40, 40, 20),
            black: color(67)
        };
        this.anim = {
            body: {
                x: 0,
                y: 0
            },
            face: {
                x: 0,
                y: 0
            },
            eyes: {
                x: 0,
                y: 0
            },
            mouth: {
                x: 0,
                diameter: 5
            },
            tail: {
                x1: 433,
                y1: -10,
                x2: 443,
                y2: 120,
                x3: 392,
                y3: 60,
                x4: 400,
                y4: 177
            },
            arms: {
                right: { // bezier(361, 240, 251, 264, 234, 362, 328, 327);
                    x1: 361,
                    y1: 240,
                    x2: 251,
                    y2: 230,
                    x3: 234,
                    y3: 346,
                    x4: 323,
                    y4: 366,
                    one: {
                        x1: 361,
                        y1: 240,
                        x2: 251,
                        y2: 230,
                        x3: 234,
                        y3: 346,
                        x4: 323,
                        y4: 366
                    },
                    two: {
                        x1: 361,
                        y1: 240,
                        x2: 251,
                        y2: 264,
                        x3: 234,
                        y3: 362,
                        x4: 333,
                        y4: 327 
                    },
                    timer: 0
                },
                left: { // bezier(435, 307, 492, 375, 504, 445, 437, 504);
                    x1: 435,
                    y1: 307,
                    x2: 492,
                    y2: 375,
                    x3: 504,
                    y3: 445,
                    x4: 437,
                    y4: 504,
                    one: {
                        x1: 435,
                        y1: 307,
                        x2: 492,
                        y2: 375,
                        x3: 504,
                        y3: 445,
                        x4: 437,
                        y4: 504
                    },
                    two: {
                        x1: 435,
                        y1: 307,
                        x2: 492,
                        y2: 375,
                        x3: 504,
                        y3: 445,
                        x4: 437,
                        y4: 530
                    },
                    three: {
                        x1: 435,
                        y1: 307,
                        x2: 492,
                        y2: 375,
                        x3: 504,
                        y3: 445,
                        x4: 461,
                        y4: 530
                    },
                    four: {
                        x1: 435,
                        y1: 307,
                        x2: 512,
                        y2: 345,
                        x3: 544,
                        y3: 425,
                        x4: 585,
                        y4: 490
                    },
                    timer: 0
                }
            },
            legs: {
                right: { // bezier(366, 184, 293, 174, 234, 241, 195, 282);
                    x1: 366,
                    y1: 184,
                    x2: 293,
                    y2: 174,
                    x3: 234,
                    y3: 241,
                    x4: 195,
                    y4: 282,
                    one: {
                        x1: 366,
                        y1: 184,
                        x2: 293,
                        y2: 144,
                        x3: 234,
                        y3: 171,
                        x4: 183,
                        y4: 188
                    },
                    two: {
                        x1: 366,
                        y1: 184,
                        x2: 293,
                        y2: 174,
                        x3: 249,
                        y3: 241,
                        x4: 231,
                        y4: 296
                    },
                    three: {
                        x1: 366,
                        y1: 184,
                        x2: 293,
                        y2: 174,
                        x3: 234,
                        y3: 241,
                        x4: 195,
                        y4: 282
                    },
                    timer: 0
                },
                left: { // bezier(421, 186, 522, 247, 535, 304, 459, 377);
                    x1: 421,
                    y1: 186,
                    x2: 522,
                    y2: 247,
                    x3: 535,
                    y3: 304,
                    x4: 459,
                    y4: 377,
                    one: {
                        x1: 421,
                        y1: 186,
                        x2: 522,
                        y2: 247,
                        x3: 535,
                        y3: 304,
                        x4: 459,
                        y4: 377
                    },
                    two: {
                        x1: 421,
                        y1: 186,
                        x2: 522,
                        y2: 227,
                        x3: 535,
                        y3: 284,
                        x4: 449,
                        y4: 357
                    },
                    timer: 0
                }
            }
        };
    };
    Monkey.prototype = {
        draw: function() {
            pushMatrix();
                translate(0, sin(radians(this.move * 3)) * 5);
                
                //tail
                noFill();
                stroke(this.colors.body);
                strokeWeight(15);
                pushMatrix();
                    translate(0, cos(radians(this.move * 3)) * 5);
                    bezier(433, -20, 443, 125, 388, 40, 400, 182);
                    popMatrix();
                strokeWeight(1);
                
                //right arm
                noFill();
                stroke(this.colors.body);
                strokeWeight(15);
                bezier( this.anim.arms.right.x1, this.anim.arms.right.y1,
                        this.anim.arms.right.x2, this.anim.arms.right.y2,
                        this.anim.arms.right.x3, this.anim.arms.right.y3,
                        this.anim.arms.right.x4, this.anim.arms.right.y4);
                //right hand
                noStroke();
                fill(this.colors.face);
                ellipse(this.anim.arms.right.x4, this.anim.arms.right.y4, 30, 30);
                
                //left arm
                noFill();
                stroke(this.colors.body);
                strokeWeight(15);
                bezier( this.anim.arms.left.x1, this.anim.arms.left.y1,
                        this.anim.arms.left.x2, this.anim.arms.left.y2,
                        this.anim.arms.left.x3, this.anim.arms.left.y3,
                        this.anim.arms.left.x4, this.anim.arms.left.y4 - sin(radians(this.move * 3)) * 5);
                //left hand
                noStroke();
                fill(this.colors.face);
                ellipse(this.anim.arms.left.x4, this.anim.arms.left.y4 - sin(radians(this.move * 3)) * 5, 30, 30);
                
                //legs
                noFill();
                stroke(this.colors.body);
                strokeWeight(15);
                //right leg
                bezier( this.anim.legs.right.x1, this.anim.legs.right.y1,
                        this.anim.legs.right.x2, this.anim.legs.right.y2,
                        this.anim.legs.right.x3, this.anim.legs.right.y3,
                        this.anim.legs.right.x4, this.anim.legs.right.y4);
                //right foot
                noStroke();
                fill(this.colors.face);
                ellipse(this.anim.legs.right.x4, this.anim.legs.right.y4, 30, 30);
                
                //left leg
                noFill();
                stroke(this.colors.body);
                strokeWeight(15);
                bezier( this.anim.legs.left.x1, this.anim.legs.left.y1,
                        this.anim.legs.left.x2, this.anim.legs.left.y2,
                        this.anim.legs.left.x3, this.anim.legs.left.y3,
                        this.anim.legs.left.x4, this.anim.legs.left.y4);
                //left foot
                noStroke();
                fill(this.colors.face);
                ellipse(this.anim.legs.left.x4, this.anim.legs.left.y4, 30, 30);
                strokeWeight(1);
                
                //body
                fill(this.colors.body);
                rect(348, 199, 96, 100);
                fill(this.colors.shadow);
                rect(348 + 48, 199, 96 - 48, 100);
                //arcs
                fill(this.colors.body);
                arc(348 + 48, 200, 96, 89, radians(180), radians(360));
                fill(this.colors.shadow);
                arc(348 + 48, 200, 96, 89, radians(270), radians(360));
                
                //right ear
                fill(this.colors.body);
                ellipse(339, 285, 30, 30);
                fill(this.colors.face);
                ellipse(341, 286, 21, 20);
                
                //left ear
                fill(this.colors.body);
                ellipse(454, 285, 30, 30);
                fill(this.colors.face);
                ellipse(452, 286, 21, 20);
                fill(this.colors.shadow);
                ellipse(454, 285, 30, 30);
                
                //head
                noStroke();
                fill(this.colors.body);
                ellipse(397, 303, 104, 104);
                fill(this.colors.shadow);
                arc(397, 303, 104, 104, radians(-90), radians(90));
                
                //face
                pushMatrix();
                    translate(this.anim.face.x, this.anim.face.y);
     
                    //face
                    //right eye
                    fill(this.colors.face);
                    ellipse(380, 299, 46, 46);
                    
                    //left eye
                    fill(this.colors.face);
                    ellipse(412, 299, 46, 46);
                    fill(this.colors.shadow);
                    ellipse(412, 299, 46, 46);
                    fill(this.colors.face);
                    rect(389, 283, 8, 15);
                    
                    //nose
                    fill(this.colors.face);
                    ellipse(397, 316, 41, 41);
                    fill(this.colors.shadow);
                    arc(397, 316, 41, 41, radians(-90), radians(90));
                    
                    //nostrils
                    fill(this.colors.black);
                    ellipse(393, 311, 4, 4);
                    ellipse(400, 311, 4, 4);
    
                    //right eye ball
                    fill(this.colors.black);
                    ellipse(380 + this.anim.eyes.x, 299 + this.anim.eyes.y, 9, 9);
                    
                    //left eye ball
                    fill(this.colors.black);
                    ellipse(412 + this.anim.eyes.x, 299 + this.anim.eyes.y, 9, 9);
                    
                    //mouth
                    fill(this.colors.black);
                    ellipse(397 + this.anim.mouth.x, 323, this.anim.mouth.diameter, this.anim.mouth.diameter);
                popMatrix();
            popMatrix();
        },
        updateLimbs: function(from, to, speed) {
            from.x2 = lerp(from.x2, to.x2, speed);
            from.y2 = lerp(from.y2, to.y2, speed);
            from.x3 = lerp(from.x3, to.x3, speed);
            from.y3 = lerp(from.y3, to.y3, speed);
            from.x4 = lerp(from.x4, to.x4, speed);
            from.y4 = lerp(from.y4, to.y4, speed);
        },
        updateLeftLeg: function() {
            this.anim.legs.left.timer = (this.anim.legs.left.timer + 1) % 210;
            
            if(this.anim.legs.left.timer < 90) {
                this.updateLimbs(this.anim.legs.left, this.anim.legs.left.two, 0.2);
            }
            else {
                this.updateLimbs(this.anim.legs.left, this.anim.legs.left.one, 0.2);
            }
        },
        updateRightLeg: function() {
            this.anim.legs.right.timer = (this.anim.legs.right.timer + 1) % 210;
            
            if(this.anim.legs.right.timer < 60) {
                this.updateLimbs(this.anim.legs.right, this.anim.legs.right.one, 0.1);
            }
            else if(this.anim.legs.right.timer < 180) {
                this.updateLimbs(this.anim.legs.right, this.anim.legs.right.two, 0.1);
            }
            else {
                this.updateLimbs(this.anim.legs.right, this.anim.legs.right.three, 0.2);
            }
        },
        updateRightArm: function() {
            this.anim.arms.right.timer = (this.anim.arms.right.timer + 1) % 210;
            
            if(this.anim.arms.right.timer < 80) {
                this.updateLimbs(this.anim.arms.right, this.anim.arms.right.one, 0.2);
            }
            else {
                this.updateLimbs(this.anim.arms.right, this.anim.arms.right.two, 0.2);
            }
        },
        updateLeftArm: function() {
            this.anim.arms.left.timer = (this.anim.arms.left.timer + 1) % 210;
            
            if(this.anim.arms.left.timer < 10) {
                this.updateLimbs(this.anim.arms.left, this.anim.arms.left.one, 0.2);
            }
            else if(this.anim.arms.left.timer < 20) {
                this.updateLimbs(this.anim.arms.left, this.anim.arms.left.two, 0.2);
            }
            else if(this.anim.arms.left.timer < 30) {
                this.updateLimbs(this.anim.arms.left, this.anim.arms.left.one, 0.2);
            }
            else if(this.anim.arms.left.timer < 40) {
                this.updateLimbs(this.anim.arms.left, this.anim.arms.left.two, 0.2);
            }
            else if(this.anim.arms.left.timer < 50) {
                this.updateLimbs(this.anim.arms.left, this.anim.arms.left.one, 0.2);
            }
            else if(this.anim.arms.left.timer < 60) {
                this.updateLimbs(this.anim.arms.left, this.anim.arms.left.two, 0.2);
            }
            else if(this.anim.arms.left.timer < 70) {
                this.updateLimbs(this.anim.arms.left, this.anim.arms.left.one, 0.2);
            }
            else if(this.anim.arms.left.timer < 80) {
                this.updateLimbs(this.anim.arms.left, this.anim.arms.left.three, 0.2);
            }
            else if(this.anim.arms.left.timer < 90) {
                this.updateLimbs(this.anim.arms.left, this.anim.arms.left.one, 0.2);
            }
            else if(this.anim.arms.left.timer < 100) {
                this.updateLimbs(this.anim.arms.left, this.anim.arms.left.two, 0.2);
            }
            else if(this.anim.arms.left.timer < 145) {
                this.updateLimbs(this.anim.arms.left, this.anim.arms.left.one, 0.2);
            }
            else if(this.anim.arms.left.timer < 190) {
                this.updateLimbs(this.anim.arms.left, this.anim.arms.left.four, 0.11);
            }
            else {
                this.updateLimbs(this.anim.arms.left, this.anim.arms.left.one, 0.2);
            }
        },
        updateFace: function() {
            //face/nostrils
            if(this.timer < 60) {
                this.anim.face.x = lerp(this.anim.face.x, -2, 0.2);
                this.anim.face.y = lerp(this.anim.face.y, -2, 0.2);
            }
            else if(this.timer < 120) {
                this.anim.face.x = lerp(this.anim.face.x, -2, 0.2);
                this.anim.face.y = lerp(this.anim.face.y, 3, 0.2);
            }
            else if(this.timer < 180) {
                this.anim.face.x = lerp(this.anim.face.x, 2, 0.2);
                this.anim.face.y = lerp(this.anim.face.y, 3, 0.2);
            }
            else {
                this.anim.face.x = lerp(this.anim.face.x, 0, 0.2);
                this.anim.face.y = lerp(this.anim.face.y, 0, 0.2);
            }
                
            //eyes
            if(this.timer < 20) {
                this.anim.eyes.x = lerp(this.anim.eyes.x, 2, 0.2);
                this.anim.eyes.y = lerp(this.anim.eyes.y, 4, 0.2);
            }
            else if(this.timer < 80) {
                this.anim.eyes.x = lerp(this.anim.eyes.x, 2, 0.2);
                this.anim.eyes.y = lerp(this.anim.eyes.y, 4, 0.2);
            }
            else if(this.timer < 100) {
                this.anim.eyes.x = lerp(this.anim.eyes.x, -2, 0.2);
                this.anim.eyes.y = lerp(this.anim.eyes.y, 0, 0.2);
            }
            else if(this.timer < 160) {
                this.anim.eyes.x = lerp(this.anim.eyes.x, 4, 0.2);
                this.anim.eyes.y = lerp(this.anim.eyes.y, 3, 0.2);
            }
            else if(this.timer < 200) {
                this.anim.eyes.x = lerp(this.anim.eyes.x, -3, 0.2);
                this.anim.eyes.y = lerp(this.anim.eyes.y, 1, 0.2);
            }
            else {
                this.anim.eyes.x = lerp(this.anim.eyes.x, 0, 0.2);
                this.anim.eyes.y = lerp(this.anim.eyes.y, 0, 0.2);
            }
            
            //mouth
            if(this.timer > 10 && this.timer < 30) {
                this.anim.mouth.x = lerp(this.anim.mouth.x, 8, 0.2);
                this.anim.mouth.diameter = lerp(this.anim.mouth.diameter, 10, 0.2);
            }
            else if(this.timer < 50) {
                this.anim.mouth.x = lerp(this.anim.mouth.x, 7, 0.2);
                this.anim.mouth.diameter = lerp(this.anim.mouth.diameter, 6, 0.2);
            }
            else if(this.timer < 90) {
                this.anim.mouth.x = lerp(this.anim.mouth.x, 0, 0.2);
                this.anim.mouth.diameter = lerp(this.anim.mouth.diameter, 5, 0.2);
            }
            else if(this.timer < 140) {
                this.anim.mouth.x = lerp(this.anim.mouth.x, -6, 0.2);
                this.anim.mouth.diameter = lerp(this.anim.mouth.diameter, 5, 0.2);
            }
            else if(this.timer < 180) {
                this.anim.mouth.x = lerp(this.anim.mouth.x, -6, 0.2);
                this.anim.mouth.diameter = lerp(this.anim.mouth.diameter, 4, 0.2);
            }
            else {
                this.anim.mouth.x = lerp(this.anim.mouth.x, -4, 0.2);
                this.anim.mouth.diameter = lerp(this.anim.mouth.diameter, 5, 0.2);
            }
        },
        update: function() {
            this.timer = (this.timer + 1) % 210;
            this.move++;
            
            this.updateFace();
            this.updateLeftLeg();
            this.updateRightLeg();
            this.updateRightArm();
            this.updateLeftArm();
        },
        go: function() {
            this.draw();
            this.update();
        }
    };
    return Monkey;
})();

var App = (function() {
    App = function() {
        this.timer = 0;
        this.monkey = Monkey.new({});
        this.cactus = Cactus.new({});
        this.cup = Cup.new({});
        this.phone = Phone.new({});
        this.paper = Paper.new({});
        this.keys = { //animated keys on keyboard
            one: 0,
            two: 0
        };
        this.colors = {
            light: color(255, 247, 225),
            medium: color(255, 247, 172),
            dark: color(255, 239, 130)
        };
        this.font = createFont("Courier", 20);
    };
    App.prototype = {
        office: function() {
            //ground
            noStroke();
            fill(239, 123, 34);
            rect(0, 555, width, 10);
            
            //bottom book
            noStroke();
            fill(90);
            rect(60, 530, 110, 5);
            rect(60, 550, 110, 5);
            rect(60, 530, 10, 25);
            fill(255);
            rect(70, 535, 95, 15);
            
            //middle book
            fill(90, 180, 235);
            rect(70, 510, 94, 5);
            rect(70, 525, 94, 5);
            rect(155, 510, 9, 20);
            fill(255);
            rect(75, 515, 80, 10);
            
            //top book
            fill(125, 205, 245);
            rect(70, 490, 87, 5);
            rect(70, 505, 87, 5);
            rect(70, 490, 7, 20);
            fill(255);
            rect(77, 495, 76, 10);
            
            //pencils
            strokeWeight(5);
            stroke(90, 180, 235);
            line(98, 422, 106, 449);
            stroke(125, 205, 245);
            line(105, 414, 112, 449);
            stroke(100, 190, 100);
            line(134, 409, 126, 449);
            strokeWeight(1);
            
            //pencil holder
            noStroke();
            fill(255);
            rect(98, 440, 35, 50);
            fill(230);
            rect(115, 440, 18, 50);
            
            //keyboard keys
            fill(145);
            for(var i = 0; i < 4; i++) {
                rect(319 + i * 27, 540, 15, 10, 3);
            }
            
            //last two keys that are animated
            rect(427, 540 + this.keys.one, 15, 10, 3);
            rect(454, 540 + this.keys.two, 15, 10, 3);
            
            //keyboard
            fill(255);
            rect(295, 545, 197, 10);
            
            //computer monitor
            fill(90);
            rect(195, 400, 192, 130, 5);
            //computer stand
            fill(230);
            quad(269, 550, 277, 479, 305, 479, 315, 550);
            //computer base
            fill(214);
            rect(257, 548, 69, 7);
            //logo on computer
            pushStyle();
                textFont(this.font);
                textAlign(CENTER, CENTER);
                fill(214, 50);
                text(":p", 291, 450);
            popStyle();
        },
        scene: function() {
            background(254, 219, 91);
            
            noStroke();
            fill(this.colors.dark);
            rect(0, 0, 60, 28, 4);
            rect(-20, 40, 60, 28, 4);
            rect(250, 120, 80, 28, 4);
            rect(550, 60, 60, 28, 4);
            rect(40, 325, 65, 28, 4);
            
            fill(this.colors.medium);
            rect(250, 155, 65, 28, 4);
            
            fill(this.colors.light);
            rect(47, 36, 70, 28, 4);
            rect(207, 120, 35, 28, 4);
            
        },
        draw: function() {
            this.scene();
            
            this.paper.go();
            
            this.office();
            
            this.cactus.go();

            this.monkey.go();
            
            this.cup.go();
            
            this.phone.go();
        },
        updateKeys: function() {
            if(this.timer > 20 && this.timer < 25) { //first key
                this.keys.one = lerp(this.keys.one, 3, 0.5);
            }
            else if(this.timer < 35) {
                this.keys.one = lerp(this.keys.one, 0, 0.5);
            }
            else if(this.timer < 45) { //first key
                this.keys.one = lerp(this.keys.one, 3, 0.5);
            }
            else if(this.timer < 55) {
                this.keys.one = lerp(this.keys.one, 0, 0.5);
            }
            else if(this.timer < 65) { //first key
                this.keys.one = lerp(this.keys.one, 3, 0.5);
            }
            else if(this.timer < 75) {
                this.keys.one = lerp(this.keys.one, 0, 0.5);
            }
            else if(this.timer < 85) { //second key
                this.keys.two = lerp(this.keys.two, 3, 0.5);
            }
            else if(this.timer < 95) {
                this.keys.two = lerp(this.keys.two, 0, 0.5);
            }
            else if(this.timer < 105) { //first key
                this.keys.one = lerp(this.keys.one, 3, 0.5);
            }
            else {
                this.keys.one = lerp(this.keys.one, 0, 0.5);
                this.keys.two = lerp(this.keys.two, 0, 0.5);
            }
        },
        update: function() {
            this.timer = (this.timer + 1) % 210;
            
            this.updateKeys();

            this.cup.x = this.monkey.anim.legs.left.x4 - 449;
            this.cup.y = this.monkey.anim.legs.left.y4 - 358;
            
            this.phone.x = this.monkey.anim.arms.right.x4 - 314;
            this.phone.y = this.monkey.anim.arms.right.y4 - 370;
        },
        go: function() {
          this.draw();
          this.update();
        }
    };
    return App;
})();

var app = new App();

draw = function() {
    app.go();
};
    
  }
}

var canvas = document.getElementById("canvas"); 
var processingInstance = new Processing(canvas, sketchProc);
              
            
!
999px

Console