{"id":333,"date":"2011-11-29T01:00:18","date_gmt":"2011-11-29T09:00:18","guid":{"rendered":"http:\/\/new.joyofprocessing.com\/blog\/?p=333"},"modified":"2011-11-28T18:50:06","modified_gmt":"2011-11-29T02:50:06","slug":"kit-kat-klock","status":"publish","type":"post","link":"https:\/\/joyofprocessing.com\/blog\/2011\/11\/kit-kat-klock\/","title":{"rendered":"Kit Kat Klock"},"content":{"rendered":"<link href='http:\/\/fonts.googleapis.com\/css?family=Limelight' rel='stylesheet' type='text\/css'>\n<script type=\"application\/processing\">\/\/ Kit Kat Klock - Jim Bumgardner\n\n\/\/ @pjs font=\"Limelight\";\n\nPFont font;\nint fontOffset = 24; \/\/ compensates for vertical offset bug in google font rendering\n                     \/\/ set to zero if using vlw font\nvoid setup()\n{\n  size(200,500);\n  smooth();\n  font = createFont(\"Limelight\",48);\n  textFont(font, width*.12);\n}\n\nvoid draw()\n{\n  float clockRadX = width*.4;\n  float clockRadY = width*.5;\n  \n  background(255);\n  float msa = (millis() % 2000)*TWO_PI\/2000; \/\/ Position of tail and eyes in cycle\n  float am = map(minute()+second()\/60.0,0,60,0,TWO_PI); \/\/ angle of minute hand, from 12\n  float ah = map(hour()+minute()\/60.0,0,24,0,TWO_PI*2); \/\/ angle of hour hand, from 12\n  float mLen = width*.3; \/\/ length of hands (m,s,h)\n  float hLen =  width*.2;\n\n  pushMatrix();\n    translate(width\/2,height\/2); \/\/ Much simpler if we translate to the center of the screen\n\n    \/\/ Draw Head\n    fill(0);\n    stroke(0);\n    strokeWeight(1);\n\n    \/\/ Head Center\n    pushMatrix();\n    translate(0, -width*.8);\n\n    \/\/ Head\n    ellipse(0, 0, width*.7, width*.6);\n    \n    \/\/ Whiskers\n    stroke(0);\n    strokeWeight(4);\n    float wLen = width*.4;\n    for (int i = 0; i < 3; ++i) {\n      float a = radians(10 + 5*i);\n      line(0,0, cos(a)*wLen, sin(a)*wLen);\n      line(0,0, cos(PI-a)*wLen, sin(PI-a)*wLen);\n    }\n    \n    \/\/ Muzzle\n    fill(255);\n    stroke(0);\n    strokeWeight(2);\n    arc(0, 0, width*.68, width*.58, 0, PI);    \n    fill(0);\n\n    \/\/ Cheeks\n    ellipse(-width*.175, 0, width*.35, width*.1);\n    ellipse( width*.175, 0, width*.35, width*.1);\n    \/\/ Nose\n    ellipse( 0, 0, width*.2, width*.18);\n    \n    \/\/ Mouth\n    strokeWeight(3);\n    noFill();\n    arc(0, 0, width*.4, width*.35, PI\/5, 4*PI\/5);\n    strokeWeight(1);\n    fill(0);\n    \n    \/\/ Ears\n    beginShape();\n      vertex(-width*.35,0);\n      vertex(-width*.325,-width*.34);\n      vertex(0,-width*.2);\n      vertex(width*.325,-width*.34);\n      vertex(width*.35,0);\n    endShape(CLOSE);\n    \n    \/\/ Eyes\n    float xd = sin(msa)*width*.05;\n    for (int i = 0; i < 2; ++i) {\n      pushMatrix();\n      translate((width*.16) * (i==0?-1:1), -width*.1);\n      fill(255);\n      ellipse(0, 0, width*.24, width*.24);\n      fill(0);\n      beginShape();\n        curveVertex( xd\/2, -width*.09 );\n        curveVertex( xd\/2, -width*.09 );\n        curveVertex( xd-5, 0 );\n        curveVertex( xd\/2, width*.09 );\n        curveVertex( xd+5, 0 );\n        curveVertex( xd\/2, -width*.09 );\n        curveVertex( xd\/2, -width*.09 );\n      endShape();    \n      popMatrix();\n    }\n    popMatrix(); \/\/ end head\n\n\n    \/\/ Tail\n    strokeWeight(20);\n    stroke(0);\n    pushMatrix();\n    rotate(radians(sin(msa)*6));\n    beginShape();\n    for (int i = 0; i < 10; ++i)\n      curveVertex(sin(i*TWO_PI\/10.0)*10,i*height*.55\/10);\n    endShape();\n    popMatrix();\n    strokeWeight(1);\n\n    \/\/ Clock Body\n    fill(0);\n    ellipse(0,0,clockRadX*2.1, clockRadY*2.1);\n\n    noFill();\n    stroke(255);\n    strokeWeight(4);\n    ellipse(0,0,clockRadX*2, clockRadY*2);\n    fill(0);\n    strokeWeight(1);\n    \n    \/\/ Hour markers\n    fill(255);\n    textAlign(CENTER, CENTER);\n    for (int i = 0; i < 12; ++i) {\n      float a = radians(i*30);\n      text(i==0? 12 : i, sin(a)*clockRadX*.8, fontOffset-cos(a)*clockRadY*.8);\n    }\n\n    \/\/ Minute hand\n    fill(255,0,0);\n    strokeWeight(.25);\n    stroke(128);\n    pushMatrix();\n      rotate(am);\n      triangle(-5,10,0,-mLen,5,10); \/\/ draw as if it's at noon, rotation takes care of the rest\n    popMatrix();\n\n    \/\/ Hour hand\n    pushMatrix();\n      rotate(ah);\n      triangle(-5,10,0,-hLen,5,10); \/\/ draw as if it's at noon, rotation takes care of the rest\n    popMatrix();\n\n\n    \/\/ Bow Tie\n    pushMatrix();\n      translate(0, -width*.5);\n      fill(255,255,0);\n      stroke(0);\n      strokeWeight(2);\n      quad(-width*.2,-width*.07, 0, -width*.04,\n           0, width*.04, -width*.2, width*.07);\n      quad( width*.2,-width*.07, 0, -width*.04,\n           0, width*.04,  width*.2, width*.07);\n      ellipse(0,0,width*.12, width*.12);\n      fill(0);\n    popMatrix();\n\n\n  popMatrix();\n}\n\n<\/script><\/p>\n<div class=\"ps_cap\"><a href=\"\/showexample.php?ex=kit_kat_klock\">source<\/a><\/div>\n<p>\n","protected":false},"excerpt":{"rendered":"<p>source<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-333","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/joyofprocessing.com\/blog\/wp-json\/wp\/v2\/posts\/333","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/joyofprocessing.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/joyofprocessing.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/joyofprocessing.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/joyofprocessing.com\/blog\/wp-json\/wp\/v2\/comments?post=333"}],"version-history":[{"count":5,"href":"https:\/\/joyofprocessing.com\/blog\/wp-json\/wp\/v2\/posts\/333\/revisions"}],"predecessor-version":[{"id":338,"href":"https:\/\/joyofprocessing.com\/blog\/wp-json\/wp\/v2\/posts\/333\/revisions\/338"}],"wp:attachment":[{"href":"https:\/\/joyofprocessing.com\/blog\/wp-json\/wp\/v2\/media?parent=333"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/joyofprocessing.com\/blog\/wp-json\/wp\/v2\/categories?post=333"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/joyofprocessing.com\/blog\/wp-json\/wp\/v2\/tags?post=333"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}