index.html 1.6 KB

1234567891011121314151617181920212223242526272829303132333435363738394041
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>using Processing.js with Amber Smalltalk</title>
  5. <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  6. <meta name="author" content="Stefan Krecher" />
  7. <link rel="stylesheet" type="text/css" href='css/style.css' />
  8. <link type="image/x-icon" rel="shortcut icon" href="/favicon.ico"/>
  9. <link href='http://fonts.googleapis.com/css?family=Istok+Web' rel='stylesheet' type='text/css'>
  10. <script type='text/javascript' src='../vendor/amber/js/amber.js'></script>
  11. <script type='text/javascript' src='showdown/showdown.js'></script>
  12. <script type="text/javascript" src="processing-1.4.1.js"></script>
  13. </head>
  14. <body>
  15. A Clock made with <a href="http://processingjs.org">Processing.js</a> and Amber
  16. <p>Examine the <button onClick="smalltalk.Browser._openOn_(smalltalk.ProcessingClock)"> ProcessingClock class</button></p>
  17. <p><canvas id="canvas1" width="200" height="200"></canvas></p>
  18. <script id="script1" type="text/javascript">
  19. // Simple way to attach js code to the canvas is by using a function
  20. function sketchProc(processing) {
  21. // Override draw function, by default it will be called 60 times per second
  22. processing.draw = function() {};
  23. }
  24. var canvas = document.getElementById("canvas1");
  25. // attaching the sketchProc function to the canvas
  26. var p = new Processing(canvas, sketchProc);
  27. </script>
  28. <script type='text/javascript'> loadAmber(
  29. {
  30. packages: [ 'Processing-Examples' ],
  31. packageHome: './',
  32. ready: function() {
  33. smalltalk.ProcessingClock._init()
  34. }
  35. })
  36. </script>
  37. </body>
  38. </html>