Team:TU Eindhoven/the game

From 2014.igem.org

(Difference between revisions)
 
(23 intermediate revisions not shown)
Line 1: Line 1:
-
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
<html>
-
<!-- saved from url=(0046)https://www.processing.org/examples/clock.html -->
+
<body>
-
<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="https://2014.igem.org/Team:TU_Eindhoven/the_game/processing?action=raw&ctype=text/js"></script>
+
-
<link href="https://2014.igem.org/Team:TU_Eindhoven/the_game/style?action=raw&ctype=text/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 ============================ -->
+
<iframe src="https://www.youtube.com/watch?v=-IL8dUZ1Fxk" width="1000" height="800"></iframe>
-
<div class="content">
+
-
  <p class="ref-notice">&nbsp;</p>
+
 +
<p>Some older browsers don't support iframes.</p>
 +
<p>If they don't, the iframe will not be visible.</p>
-
<div class="example"><script type="application/processing">
 
-
//@pjs preload="https://static.igem.org/mediawiki/2014/9/98/Jasper_TU_Eindhoven.jpg";
 
-
int cx, cy;
 
-
float secondsRadius;
 
-
float minutesRadius;
 
-
float hoursRadius;
 
-
float clockDiameter;
 
-
PImage img;
 
-
void setup() {
+
</body>
-
  size(640, 360);
+
</html>
-
  stroke(255);
+
-
 
+
-
  int radius = min(width, height) / 2;
+
-
  secondsRadius = radius * 0.72;
+
-
  minutesRadius = radius * 0.60;
+
-
  hoursRadius = radius * 0.50;
+
-
  clockDiameter = radius * 1.8;
+
-
  //img = loadImage("Jasper_TU_Eindhoven.jpg");
+
-
 
+
-
  cx = width / 2;
+
-
  cy = height / 2;
+
-
}
+
-
 
+
-
void draw() {
+
-
  background(255, 0, 0);
+
-
  //image(img, 0, 0, width, height);
+
-
  // 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>
+

Latest revision as of 20:28, 17 July 2014

Some older browsers don't support iframes.

If they don't, the iframe will not be visible.

Retrieved from "http://2014.igem.org/Team:TU_Eindhoven/the_game"