|
|
| Line 1: |
Line 1: |
| - | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
| |
| - | <!-- saved from url=(0046)https://www.processing.org/examples/clock.html -->
| |
| - | <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" class=" js no-touch" style=""><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
| |
| - | <title>Clock \ Examples \ Processing.org</title>
| |
| - |
| |
| - | <link rel="icon" href="https://www.processing.org/favicon.ico" type="image/x-icon">
| |
| - |
| |
| - |
| |
| - | <meta name="Author" content="Casey Reas & Ben Fry">
| |
| - | <meta name="Publisher" content="Processing">
| |
| - | <meta name="Keywords" content="Processing, Processing, Interactive Media, Electronic Arts, Programming, Java, Ben Fry, Casey Reas">
| |
| - | <meta name="Description" content="Processing is an electronic sketchbook for developing
| |
| - | ideas. It is a context for learning fundamentals of computer programming
| |
| - | within the context of the electronic arts.">
| |
| - | <meta name="Copyright" content="All contents copyright Ben Fry, Casey Reas, MIT Media Laboratory">
| |
| - |
| |
| - | <script type="text/javascript" async="" src="./Clock Examples Processing.org_files/ga.js"></script><script src="./Clock Examples Processing.org_files/modernizr-2.6.2.touch.js" type="text/javascript"></script>
| |
| - | <link href="./Clock Examples Processing.org_files/style.css" rel="stylesheet" type="text/css">
| |
| - | <style type="text/css">@font-face {
| |
| - | font-family: "PjsEmptyFont";
| |
| - | src: url('data:application/x-font-ttf;base64,AAEAAAAKAIAAAwAgT1MvMgAAAAAAAAEoAAAAVmNtYXAAAAAAAAABiAAAACxnbHlmAAAAAAAAAbwAAAAkaGVhZAAAAAAAAACsAAAAOGhoZWEAAAAAAAAA5AAAACRobXR4AAAAAAAAAYAAAAAGbG9jYQAAAAAAAAG0AAAABm1heHAAAAAAAAABCAAAACBuYW1lAAAAAAAAAeAAAAAgcG9zdAAAAAAAAAIAAAAAEAABAAAAAQAAAkgTY18PPPUACwAgAAAAALSRooAAAAAAyld0xgAAAAAAAQABAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABAAEAAAACAAIAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAEAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACMAIwAAAAAAAAABAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABAAMAAQAAAAwABAAgAAAABAAEAAEAAABB//8AAABB////wAABAAAAAAAAAAgAEgAAAAEAAAAAAAAAAAAAAAAxAAABAAAAAAABAAEAAQAAMTcBAQAAAAAAAgAeAAMAAQQJAAEAAAAAAAMAAQQJAAIAAgAAAAAAAQAAAAAAAAAAAAAAAAAA')
| |
| - | format('truetype');
| |
| - | }</style><style type="text/css"></style></head>
| |
| - | <body id="Examples" onload="">
| |
| - |
| |
| - | <!-- ==================================== PAGE ============================ -->
| |
| - | <div id="container">
| |
| - |
| |
| - | <!-- ==================================== HEADER ============================ --><a id="TOP" name="TOP"></a>
| |
| - |
| |
| - | <!-- ==================================== NAVIGATION ============================ -->
| |
| - |
| |
| | | | |
| - | <!-- ==================================== CONTENT ============================ -->
| |
| - | <div class="content">
| |
| - | <p class="ref-notice"> </p>
| |
| - |
| |
| - |
| |
| - | <div class="example"><script type="application/processing">
| |
| - | int cx, cy;
| |
| - | float secondsRadius;
| |
| - | float minutesRadius;
| |
| - | float hoursRadius;
| |
| - | float clockDiameter;
| |
| - |
| |
| - | void setup() {
| |
| - | size(640, 360);
| |
| - | stroke(255);
| |
| - |
| |
| - | int radius = min(width, height) / 2;
| |
| - | secondsRadius = radius * 0.72;
| |
| - | minutesRadius = radius * 0.60;
| |
| - | hoursRadius = radius * 0.50;
| |
| - | clockDiameter = radius * 1.8;
| |
| - |
| |
| - | cx = width / 2;
| |
| - | cy = height / 2;
| |
| - | }
| |
| - |
| |
| - | void draw() {
| |
| - | background(255, 0, 0);
| |
| - |
| |
| - | // Draw the clock background
| |
| - | fill(80);
| |
| - | noStroke();
| |
| - | ellipse(cx, cy, clockDiameter, clockDiameter);
| |
| - |
| |
| - | // Angles for sin() and cos() start at 3 o'clock;
| |
| - | // subtract HALF_PI to make them start at the top
| |
| - | float s = map(second(), 0, 60, 0, TWO_PI) - HALF_PI;
| |
| - | float m = map(minute() + norm(second(), 0, 60), 0, 60, 0, TWO_PI) - HALF_PI;
| |
| - | float h = map(hour() + norm(minute(), 0, 60), 0, 24, 0, TWO_PI * 2) - HALF_PI;
| |
| - |
| |
| - | // Draw the hands of the clock
| |
| - | stroke(255);
| |
| - | strokeWeight(1);
| |
| - | line(cx, cy, cx + cos(s) * secondsRadius, cy + sin(s) * secondsRadius);
| |
| - | strokeWeight(2);
| |
| - | line(cx, cy, cx + cos(m) * minutesRadius, cy + sin(m) * minutesRadius);
| |
| - | strokeWeight(4);
| |
| - | line(cx, cy, cx + cos(h) * hoursRadius, cy + sin(h) * hoursRadius);
| |
| - |
| |
| - | // Draw the minute ticks
| |
| - | strokeWeight(2);
| |
| - | beginShape(POINTS);
| |
| - | for (int a = 0; a < 360; a+=6) {
| |
| - | float angle = radians(a);
| |
| - | float x = cx + cos(angle) * secondsRadius;
| |
| - | float y = cy + sin(angle) * secondsRadius;
| |
| - | vertex(x, y);
| |
| - | }
| |
| - | endShape();
| |
| - | }
| |
| - | </script><canvas width="640" height="360" tabindex="0" id="__processing0" style="image-rendering: -webkit-optimize-contrast !important;"></canvas>
| |
| - | <p class="doc"><!-- ==================================== FOOTER ============================ --> </p>
| |
| - | </div>
| |
| - | </div>
| |
| - | <div id="footer">
| |
| - | <div id="copyright"></div>
| |
| - | </div>
| |
| - |
| |
| - | </div>
| |
| - | <script src="./Clock Examples Processing.org_files/jquery.min.js"></script>
| |
| - | <script>window.jQuery || document.write('<script src="../javascript/jquery-1.9.1.min.js"><\/script>')</script>
| |
| - | <script src="./Clock Examples Processing.org_files/processing.js" type="text/javascript"></script>
| |
| - | <script src="./Clock Examples Processing.org_files/site.js" type="text/javascript"></script>
| |
| - |
| |
| - | <script type="text/javascript">
| |
| - |
| |
| - | var _gaq = _gaq || [];
| |
| - | _gaq.push(['_setAccount', 'UA-40016511-1']);
| |
| - | _gaq.push(['_setDomainName', 'processing.org']);
| |
| - | _gaq.push(['_trackPageview']);
| |
| - |
| |
| - | (function() {
| |
| - | var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
| |
| - | ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
| |
| - | var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
| |
| - | })();
| |
| - |
| |
| - | </script>
| |
| - |
| |
| - |
| |
| - | <span style="position: absolute; top: 0px; left: 0px; opacity: 0; font-family: PjsEmptyFont, fantasy;">AAAAAAAA</span></body></html>
| |
"
