|
|
(5 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 & 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"> </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">
| |
- | // The next line is needed if running in JavaScript Mode with Processing.js
| |
- | /* @pjs preload="http://i.imgur.com/gDccyRX.png, http://i.imgur.com/V6756WQ.png, http://i.imgur.com/qmz6Tqx.png, http://i.imgur.com/kTG3cjw.png, http://i.imgur.com/rXLfh0n.png, http://i.imgur.com/DF3iOQN.png, http://i.imgur.com/HsgqFiR.png, http://i.imgur.com/yt3xRrC.png, http://i.imgur.com/oqpG7r6.png, http://i.imgur.com/tVs8PA3.png, http://i.imgur.com/8TgXchE.png, http://i.imgur.com/k2JxEjl.png, http://i.imgur.com/87sB8SH.png, http://i.imgur.com/vWEOnlj.png, http://i.imgur.com/sua0hIH.png, http://i.imgur.com/o2V20If.png, http://i.imgur.com/V2v8JpM.png, http://i.imgur.com/7VmOmW1.png, http://i.imgur.com/NW22Blc.png, http://i.imgur.com/9uJagVU.png, http://i.imgur.com/C7xi9eF.png, http://i.imgur.com/V8Tyv9D.png, http://i.imgur.com/14eMBR8.png, http://i.imgur.com/rKe6hVf.png, http://i.imgur.com/i9jxTsO.png, http://i.imgur.com/i9jxTsO.png, http://i.imgur.com/EY7xXur.png, http://i.imgur.com/qiWx2fF.png, http://i.imgur.com/2YUI7lW.png, http://i.imgur.com/KQ0ZyBA.png, http://i.imgur.com/ermi0iK.png, http://i.imgur.com/EKrOZM8.png, http://i.imgur.com/8VAJ6Bt.png, http://i.imgur.com/t2kTiPr.png, http://i.imgur.com/UmJRy3m.png, http://i.imgur.com/nkWwyFH.png, http://i.imgur.com/klMOhVr.png, http://i.imgur.com/CfREnca.png, http://i.imgur.com/1Sk2HSE.png, http://i.imgur.com/ymhoulY.png, http://i.imgur.com/G7MdUHm.png, http://i.imgur.com/P5kUXSf.png, http://i.imgur.com/oW2kyrW.png, http://i.imgur.com/wrpjZ1g.png, http://i.imgur.com/oi4cINP.png, http://i.imgur.com/wyzfNAg.jpg"; */
| |
- | int numberOfDNA;
| |
- | DNAPiece[] dna;
| |
| | | |
- | //DNAPiece's
| + | </body> |
- | | + | </html> |
- | PImage img_gfp;
| + | |
- | String name_gfp = "Green fluorescent protein";
| + | |
- | | + | |
- | PImage img_t7;
| + | |
- | String name_t7 = "promotor T7";
| + | |
- | | + | |
- | PImage img_terminator;
| + | |
- | String name_terminator = "Terminator";
| + | |
- | | + | |
- | PImage img_antibiores;
| + | |
- | String name_antibiores = "Antibiotic resistant";
| + | |
- | | + | |
- | PImage img_tntP;
| + | |
- | String name_tntP = "promotor TNT";
| + | |
- | | + | |
- | PImage img_o2;
| + | |
- | String name_o2 = "Oxygen Promotor";
| + | |
- | | + | |
- | PImage img_display;
| + | |
- | String name_display = "Display Protein";
| + | |
- | | + | |
- | PImage img_linker;
| + | |
- | String name_linker = "Linker";
| + | |
- | | + | |
- | PImage img_mri;
| + | |
- | String name_mri = "MRI-protein";
| + | |
- | | + | |
- | PImage img_keke;
| + | |
- | String name_keke = "Zwitter ion";
| + | |
- | | + | |
- | PImage img_inhi;
| + | |
- | String name_inhi = "Inhibitor";
| + | |
- | | + | |
- | //down here two more image's are made whith are the same every time
| + | |
- | PImage handInDNA;
| + | |
- | PImage info;
| + | |
- | //this integer (pieceOfDNAForUse) is set on two. That means the first two DNA piece are available right from the start.
| + | |
- | int pieceOfDNAForUse = 2;
| + | |
- | | + | |
- | //image's for levels
| + | |
- | | + | |
- | PImage wellDone;
| + | |
- | PImage toBad;
| + | |
- | //LEVEL 1
| + | |
- | PImage level1_1;
| + | |
- | PImage logo1_1;
| + | |
- | //PImage wellDone1_1;
| + | |
- | //PImage toBad1_1;
| + | |
- | | + | |
- | PImage level1_2;
| + | |
- | PImage logo1_2;
| + | |
- | //PImage wellDone1_2;
| + | |
- | //PImage toBad1_2;
| + | |
- | | + | |
- | PImage level1_3;
| + | |
- | PImage logo1_3;
| + | |
- | //PImage wellDone1_2;
| + | |
- | //PImage toBad1_2;
| + | |
- | | + | |
- | PImage logo1_max;
| + | |
- | | + | |
- | //LEVEL 2
| + | |
- | PImage level2_1;
| + | |
- | PImage logo2_1;
| + | |
- | //PImage wellDone2_1;
| + | |
- | //PImage toBad2_1;
| + | |
- | | + | |
- | PImage level2_2;
| + | |
- | PImage logo2_2;
| + | |
- | //PImage wellDone2_2;
| + | |
- | //PImage toBad2_2;
| + | |
- | | + | |
- | PImage logo2_max;
| + | |
- | | + | |
- | PImage background;
| + | |
- | | + | |
- | | + | |
- | //levels
| + | |
- | MasterLevel[] theRealLevels;
| + | |
- | SubLevel[] level1;
| + | |
- | SubLevel[] level2;
| + | |
- | | + | |
- | //every level has a strain whith it want to pass. You add them over here (use the name_ String so you can change the name of DNA piece at one point in the code)
| + | |
- | String[] eis1_1 = {name_gfp, name_terminator};
| + | |
- | String[] eis1_2 = {name_t7, name_gfp, name_terminator};
| + | |
- | String[] eis1_3 = {name_t7, name_gfp, name_terminator, name_antibiores};
| + | |
- | String[] eis2_1 = {name_tntP, name_gfp, name_terminator, name_antibiores};
| + | |
- | String[] eis2_2 = {name_o2, name_gfp, name_terminator, name_antibiores};
| + | |
- | String[] eis3_1 = {name_t7, name_gfp, name_terminator, name_antibiores};
| + | |
- | String[] eis3_2a = {name_o2, name_inhi, name_terminator, name_antibiores};
| + | |
- | String[] eis3_2b = {name_t7, name_mri, name_terminator, name_antibiores};
| + | |
- | String[] eis3_3 = {name_t7, name_display, name_linker, name_keke, name_terminator, name_antibiores};
| + | |
- | String[] empty = {};
| + | |
- | | + | |
- | //making of the items you can pick up with you mouse
| + | |
- | Plasmide plasmide1;
| + | |
- | Plasmide plasmide2;
| + | |
- | boolean secondPlas = false;
| + | |
- | | + | |
- | //Image's of infoBoards
| + | |
- | PImage infoBoard[];
| + | |
- | | + | |
- | //left side
| + | |
- | int stripLeft = 160;
| + | |
- | | + | |
- | //right side
| + | |
- | int stripRight = 80;
| + | |
- | PImage binOn;
| + | |
- | PImage binOff;
| + | |
- | Button bin;
| + | |
- | | + | |
- | PImage helpOn;
| + | |
- | PImage helpOff;
| + | |
- | Button helpButton;
| + | |
- | int currentHelpScreen = 1;
| + | |
- | int maxNumberOfHelpScreens = 3;
| + | |
- | PImage[] helpScreen;
| + | |
- | | + | |
- | | + | |
- | //remaining
| + | |
- | int itemOnMouse;
| + | |
- | boolean somethingOnMouse;
| + | |
- | int infoNumber =0;
| + | |
- | int level = 0;
| + | |
- | boolean thereIsInfoToShow = true;
| + | |
- | | + | |
- | PImage img; // Declare variable "a" of type PImage
| + | |
- | | + | |
- | void setup() {
| + | |
- | size(640, 360);
| + | |
- | //size(1000, 800);
| + | |
- | textAlign(CENTER);
| + | |
- | //image's
| + | |
- | | + | |
- | level1_1 = loadImage("http://i.imgur.com/V6756WQ.png");
| + | |
- | level1_2 = loadImage("http://i.imgur.com/qmz6Tqx.png");
| + | |
- | level1_3 = loadImage("http://i.imgur.com/kTG3cjw.png");
| + | |
- | level2_1 = loadImage("http://i.imgur.com/rXLfh0n.png");
| + | |
- | level2_2 = loadImage("http://i.imgur.com/DF3iOQN.png");
| + | |
- | wellDone = loadImage("http://i.imgur.com/P5kUXSf.png");
| + | |
- | toBad = loadImage("http://i.imgur.com/G7MdUHm.png");
| + | |
- | logo1_1 = loadImage("http://i.imgur.com/qiWx2fF.png");
| + | |
- | logo1_2 = loadImage("http://i.imgur.com/2YUI7lW.png");
| + | |
- | logo1_3 = loadImage("http://i.imgur.com/KQ0ZyBA.png");
| + | |
- | logo2_1 = loadImage("http://i.imgur.com/EKrOZM8.png");
| + | |
- | logo2_2 = loadImage("http://i.imgur.com/8VAJ6Bt.png");
| + | |
- | logo1_max = loadImage("http://i.imgur.com/ermi0iK.png");
| + | |
- | logo2_max = loadImage("http://i.imgur.com/t2kTiPr.png");
| + | |
- |
| + | |
- | helpOn = loadImage("http://i.imgur.com/oqpG7r6.png");
| + | |
- | helpOff = loadImage("http://i.imgur.com/yt3xRrC.png");
| + | |
- |
| + | |
- | handInDNA = loadImage("http://i.imgur.com/HsgqFiR.png");
| + | |
- | info = loadImage("http://i.imgur.com/87sB8SH.png");
| + | |
- | background = loadImage("http://i.imgur.com/wrpjZ1g.png");
| + | |
- |
| + | |
- | img_gfp = loadImage("http://i.imgur.com/klMOhVr.png");
| + | |
- | img_t7 = loadImage("http://i.imgur.com/CfREnca.png");
| + | |
- | img_terminator = loadImage("http://i.imgur.com/1Sk2HSE.png");
| + | |
- | img_antibiores = loadImage("http://i.imgur.com/wyzfNAg.jpg");
| + | |
- | img_tntP = loadImage("http://i.imgur.com/ymhoulY.png");
| + | |
- | img_o2 = loadImage("http://i.imgur.com/oW2kyrW.png");
| + | |
- | img_display = loadImage("http://i.imgur.com/DF3iOQN.png");
| + | |
- | img_linker = loadImage("http://i.imgur.com/UmJRy3m.png");
| + | |
- | img_mri = loadImage("http://i.imgur.com/nkWwyFH.png");
| + | |
- | img_keke = loadImage("http://i.imgur.com/EY7xXur.png");
| + | |
- | img_inhi = loadImage("http://i.imgur.com/i9jxTsO.png");
| + | |
- | binOn = loadImage("http://i.imgur.com/gDccyRX.png");
| + | |
- | binOff = loadImage("http://i.imgur.com/oi4cINP.png");
| + | |
- |
| + | |
- | numberOfDNA = 11;
| + | |
- | infoBoard = new PImage[numberOfDNA + 1];
| + | |
- | infoBoard[1] = loadImage("http://i.imgur.com/vWEOnlj.png");
| + | |
- | infoBoard[2] = loadImage("http://i.imgur.com/sua0hIH.png");
| + | |
- | infoBoard[3] = loadImage("http://i.imgur.com/o2V20If.png");
| + | |
- | infoBoard[4] = loadImage("http://i.imgur.com/V2v8JpM.png");
| + | |
- | infoBoard[5] = loadImage("http://i.imgur.com/7VmOmW1.png");
| + | |
- | infoBoard[6] = loadImage("http://i.imgur.com/NW22Blc.png");
| + | |
- | infoBoard[7] = loadImage("http://i.imgur.com/9uJagVU.png");
| + | |
- | infoBoard[8] = loadImage("http://i.imgur.com/C7xi9eF.png");
| + | |
- | infoBoard[9] = loadImage("http://i.imgur.com/V8Tyv9D.png");
| + | |
- | infoBoard[10] = loadImage("http://i.imgur.com/14eMBR8.png");
| + | |
- | infoBoard[11] = loadImage("http://i.imgur.com/rKe6hVf.png");
| + | |
- |
| + | |
- | helpScreen = new PImage[maxNumberOfHelpScreens];
| + | |
- | helpScreen[0] = loadImage("http://i.imgur.com/tVs8PA3.png");
| + | |
- | helpScreen[1] = loadImage("http://i.imgur.com/8TgXchE.png");
| + | |
- | helpScreen[2] = loadImage("http://i.imgur.com/k2JxEjl.png");
| + | |
- |
| + | |
- | //grapping items
| + | |
- | | + | |
- |
| + | |
- | dna = new DNAPiece[numberOfDNA + 1];
| + | |
- | dna[0] = new DNAPiece(10, 10, img_gfp, name_gfp, 1, color(0, 255, 0));
| + | |
- | dna[1] = new DNAPiece(10, 80, img_terminator, name_terminator, 2, color(200,200,200));
| + | |
- | dna[2] = new DNAPiece(10, 150, img_t7, name_t7, 3, color(255,0,100));
| + | |
- | dna[3] = new DNAPiece(10, 220, img_antibiores, name_antibiores, 4, color(255,255,255));
| + | |
- | dna[4] = new DNAPiece(10, 290, img_tntP, name_tntP, 5, color(255,100,0));
| + | |
- | dna[5] = new DNAPiece(10, 360, img_o2, name_o2, 6, color(255, 0, 0));
| + | |
- | dna[6] = new DNAPiece(10, 430, img_display, name_display, 7, color(100,51,102));
| + | |
- | dna[7] = new DNAPiece(10, 500, img_linker, name_linker, 8, color(0,105,106));
| + | |
- | dna[8] = new DNAPiece(10, 570, img_mri, name_mri, 9, color(255,125,255));
| + | |
- | dna[9] = new DNAPiece(10, 640, img_keke, name_keke, 10, color(255,0,255));
| + | |
- | dna[10] = new DNAPiece(10, 710, img_inhi, name_inhi, 11, color(100,100,255));
| + | |
- | plasmide1 = new Plasmide(250, 100, 500, 450, 2);
| + | |
- | plasmide2 = new Plasmide(350, 425, 350, 300, 2);
| + | |
- |
| + | |
- | //buttons right
| + | |
- | bin = new Button((width-stripRight)+10, 20, binOn, binOff);
| + | |
- | helpButton = new Button((width-stripRight)+10, 700, helpOn, helpOff);
| + | |
- | helpButton.isItOn = true;
| + | |
- |
| + | |
- | //levels
| + | |
- | | + | |
- | level1 = new SubLevel[3];
| + | |
- | level2 = new SubLevel[1];
| + | |
- | level1[0] = new SubLevel(eis1_1,empty, logo1_1, level1_1, wellDone, 1, 1);
| + | |
- | level1[1] = new SubLevel(eis1_2,empty, logo1_2, level1_2, wellDone, 1, 2);
| + | |
- | level1[2] = new SubLevel(eis1_3,empty, logo1_3, level1_3, wellDone, 1, 2);
| + | |
- | level2[0] = new SubLevel(eis2_1,empty, logo2_1, level2_1, wellDone, 2, 1);
| + | |
- | //level2[1] = new SubLevel(eis2_2,empty, logo2_2, level2_2, wellDone, 2, 2);
| + | |
- |
| + | |
- | | + | |
- | theRealLevels = new MasterLevel[2];
| + | |
- | theRealLevels[0] = new MasterLevel(level1, toBad, logo1_max, (width-stripRight)+10, 100);
| + | |
- | theRealLevels[1] = new MasterLevel(level2, toBad, logo2_max, (width-stripRight)+10, 180);
| + | |
- |
| + | |
- | // The image file must be in the data folder of the current sketch
| + | |
- | // to load successfully
| + | |
- | img = loadImage("http://i.imgur.com/wyzfNAg.jpg"); // Load the image into the program
| + | |
- | }
| + | |
- | | + | |
- | void draw() {
| + | |
- | // Displays the image at its actual size at point (0,0)
| + | |
- | image(img, mouseX, mouseY);
| + | |
- | // Displays the image at point (0, height/2) at half of its size
| + | |
- | image(img, 0, height/2, img.width/2, img.height/2);
| + | |
- | }
| + | |
- | </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>
| + | |
Some older browsers don't support iframes.
If they don't, the iframe will not be visible.