Team:TU Eindhoven/the game

From 2014.igem.org

(Difference between revisions)
Line 1: Line 1:
-
<script src="processing-1.0.0.min.js"></script>
+
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-
<canvas data-processing-sources="hello-web.pde"></canvas>
+
<!-- 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 &amp; 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 ============================ -->
 +
<div id="header">
 +
<a href="https://www.processing.org/" title="Back to the Processing cover."><div class="processing-logo no-cover" alt="Processing cover"></div></a>
 +
<form name="search" action="http://www.google.com/search" method="get">
 +
<!--<label>Search processing.org</label>-->
 +
      <p><input type="hidden" name="as_sitesearch" value="processing.org">
 +
      <input type="text" name="as_q" value="" size="20" class="text">
 +
<input type="submit" value=" "></p>
 +
</form>
 +
</div>
 +
<a id="TOP" name="TOP"></a>
 +
 +
<!-- ==================================== NAVIGATION ============================ -->
 +
<div id="navigation">
 +
<div class="navBar" id="mainnav_noSub">
 +
<a href="https://www.processing.org/">Cover</a><br><br>
 +
<a href="https://www.processing.org/download/">Download</a><br><br>
 +
<a href="https://www.processing.org/exhibition/">Exhibition</a><br><br>
 +
<a href="https://www.processing.org/reference/">Reference</a><br>
 +
<a href="https://www.processing.org/reference/libraries/">Libraries</a><br>
 +
<a href="https://www.processing.org/reference/tools/">Tools</a><br>
 +
<a href="https://www.processing.org/reference/environment/">Environment</a><br><br>
 +
<a href="https://www.processing.org/tutorials/">Tutorials</a><br>
 +
<a href="https://www.processing.org/examples/" class="active">Examples</a><br>
 +
<a href="https://www.processing.org/books/">Books</a><br><br>
 +
<a href="https://www.processing.org/overview/">Overview</a><br>
 +
<a href="https://www.processing.org/people/">People</a><br>
 +
<a href="https://www.processing.org/foundation/">Foundation</a><br><br>
 +
<a href="https://www.processing.org/shop/">Shop</a><br><br>
 +
<a href="http://forum.processing.org/" class="outward"><span>»</span>Forum</a><br>
 +
<a href="https://github.com/processing" class="outward"><span>»</span>GitHub</a><br>
 +
<a href="http://wiki.processing.org/w/Report_Bugs" class="outward"><span>»</span>Issues</a><br>
 +
<a href="http://wiki.processing.org/" class="outward"><span>»</span>Wiki</a><br>
 +
<a href="http://wiki.processing.org/w/FAQ" class="outward"><span>»</span>FAQ</a><br>
 +
<a href="https://twitter.com/processingOrg" class="outward"><span>»</span>Twitter</a><br>
 +
<a href="https://www.facebook.com/page.processing" class="outward"><span>»</span>Facebook</a><br>
 +
</div>
 +
</div>
 +
 
 +
 
 +
<!-- ==================================== CONTENT ============================ -->
 +
<div class="content">
 +
 +
 +
<div class="examples-nav"><a href="https://www.processing.org/examples/"><img src="./Clock  Examples  Processing.org_files/back_off.gif" alt="Back to List"> <span class="back-to">Back To List</span></a>
 +
</div>
 +
 
 +
<p class="ref-notice">
 +
This example is for Processing 2+. If you have a previous version, use the examples included with your software. If you see any errors or have suggestions, <a href="https://github.com/processing/processing-docs/issues?state=open">please let us know</a>.
 +
</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"><strong>Clock.</strong> <br>
 +
<br>
 +
The current time can be read with the second(), minute(), and hour() functions. In this example, sin() and cos() values are used to set the position of the hands.</p>
 +
 
 +
<pre class="code">
 +
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(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 &lt; 360; a+=6) {
 +
    float angle = radians(a);
 +
    float x = cx + cos(angle) * secondsRadius;
 +
    float y = cy + sin(angle) * secondsRadius;
 +
    vertex(x, y);
 +
  }
 +
  endShape();
 +
}
 +
</pre>
 +
 
 +
 
 +
</div>
 +
 
 +
 
 +
 +
</div>
 +
 
 +
<!-- ==================================== FOOTER ============================ -->
 +
  <div id="footer">
 +
    <div id="copyright">Processing was initiated by <a href="http://benfry.com/">Ben Fry</a> and <a href="http://reas.com/">Casey Reas</a>. It is developed by a <a href="https://www.processing.org/people/">small team of volunteers</a>.</div>
 +
    <div id="colophon">
 +
 
 +
                    <a href="https://www.processing.org/copyright.html">© Info</a> \
 +
 
 +
                    <span>Linux Web hosting by (mt) <a href="http://www.mediatemple.net/">Media Temple</a>.</span>
 +
 
 +
                </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>

Revision as of 09:33, 16 July 2014

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> Clock \ Examples \ Processing.org

This example is for Processing 2+. If you have a previous version, use the examples included with your software. If you see any errors or have suggestions, please let us know.

Clock.

The current time can be read with the second(), minute(), and hour() functions. In this example, sin() and cos() values are used to set the position of the hands.

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(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();
}
AAAAAAAA