Shifty-eyed Wookie

Chewbacca

by sym3tri

HTML

<script type="application/processing">
int cw = 300;
int ch = 250;
color brown = #875800;
color lbrown = #946000;
color black = #000000;
color white = #ffffff;
int mX = 0;
int mY = 0;

void setup() {
    size(cw, ch);
    // grey bg
    background(245);
    frameRate(30);

    // head
    fill(brown);
    stroke(black);
    smooth(); // antialias our shape
    strokeWeight(1);
    ellipse(cw/2, ch/2, 120, 150);

    // nose
    fill(black);
    stroke(black);
    ellipse(cw/2, ch/2, 15, 10);
    
    // mouth
    fill(lbrown);
    stroke(lbrown);
    ellipse(cw/2, ch/2+30, 70, 45);
    
    fill(black);
    stroke(black);
    ellipse(cw/2, ch/2+30, 50, 25);
    
    fill(white);
    stroke(white);
    
    // top teeth
    arc(cw/2-7, ch/2+19, 12, 12, radians(0), radians(170));
    arc(cw/2+7, ch/2+19, 12, 12, radians(10), radians(180));
    arc(cw/2-18, ch/2+21, 8, 8, radians(-10), radians(135));
    arc(cw/2+18, ch/2+21, 8, 8, radians(35), radians(190));
    
    // bottom teeth
    arc(cw/2-7, ch/2+41, 12, 12, radians(190), radians(360));
    arc(cw/2+7, ch/2+41, 12, 12, radians(180), radians(350));
    arc(cw/2-17, ch/2+38, 8, 8, radians(210), radians(380));
    arc(cw/2+17, ch/2+38, 8, 8, radians(160), radians(330));

    noLoop();
}
    
void draw() {
    // eyes
    stroke(black);
    fill(black);
    ellipse(cw/2-20, ch/2-20, 15, 15);
    ellipse(cw/2+20, ch/2-20, 15, 15);
    
    // left inner
    fill(white);
    int lx = cw/2-20 - ((cw/2 - mX)/(cw/2));
    int ly = ch/2-20 - ((ch/2 - mY)/(ch/2));
    ellipse(lx, ly, 8, 8);
    
    // right inner
    int rx = (cw/2+20) - ((cw/2 - mX)/(cw/2));
    int ry = (ch/2-20) - ((ch/2 - mY)/(ch/2));
    ellipse(rx, ry, 8, 8);
}
    
void mouseMoved() {
    mX = mouseX;
    mY = mouseY;
    redraw();
}
 
 </script>
<canvas width="200px" height="200px"></canvas>

JavaScript

var scripts=document.getElementsByTagName("script");
for(var i=0;i<scripts.length;i++) {
    if(scripts[i].type=="application/processing"){
        var src=scripts[i].src,canvas=scripts[i].nextSibling;
        if(src&&src.indexOf("#")){
           canvas=document.getElementById(src.substr(src.indexOf("#")+1));
        }else{
            while(canvas&&canvas.nodeName.toUpperCase()!="CANVAS")
                canvas=canvas.nextSibling;
        }
        if(canvas){
            new Processing(canvas,scripts[i].text);
        }
    }
}