Permalink
Browse files

do it live

  • Loading branch information...
1 parent af98ef4 commit c56058cb25b27062a100ec73e29f9acfee9d215a @qrush committed May 5, 2010
Showing with 221 additions and 292 deletions.
  1. +6 −169 index.html
  2. +100 −0 kidsmash.js
  3. +99 −0 kidsmash.pjs
  4. +1 −0 processing-0.8.min.js
  5. +0 −1 processing.init.js
  6. +0 −122 processing.js
  7. BIN spongie.gif
  8. +15 −0 style.css
View
@@ -1,175 +1,12 @@
<html>
<head>
-<title>Processing.js - Basic Example</title>
-<script language="javascript" src="processing.init.js"></script>
-<script language="javascript" src="processing.js"></script>
+ <title>KID SMASH</title>
+ <link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
-
-<script type="application/processing">
-/*
- PROCESSINGJS.COM - BASIC EXAMPLE
- Delayed Mouse Tracking
- MIT License - Hyper-Metrix.com/F1LT3R
- Native Processing compatible
-*/
-
-// Global variables
-float radius = 50.0;
-int X, Y;
-int nX, nY;
-int delay = 4;
-
-int sX, sY, squareX, squareY;
-int yellowFill = 0, redFill = 121;
-boolean move = true;
-
-var shapes = [];
-
-function makeRect(x, y, h, w, f1, f2, f3) {
- return {
- draw: function() {
- fill(f1, f2, f3);
- rect(x, y, h, w);
- },
- };
-}
-
-// Setup the Processing Canvas
-void setup(){
- size( 500, 500 );
- strokeWeight( 10 );
- frameRate( 15 );
- X = width / 2;
- Y = width / 2;
- nX = X;
- nY = Y;
-}
-
-void mousePressed() {
- shapes.push(makeRect(mouseX, mouseY, 40, 40, randInt(255), randInt(255), randInt(255)));
-}
-
-function randInt(max) {
- return Math.floor(Math.random()*max);
-}
-
-// Main draw loop
-void draw(){
-
- radius = radius + sin( frameCount / 4 );
-
- // Track circle to new destination
- X+=(nX-X)/delay;
- Y+=(nY-Y)/delay;
-
- // Fill canvas grey
- background( 100 );
-
- // Set fill-color to blue
- fill( 0, 121, 184 );
-
- // Set stroke-color white
- stroke(255);
-
- // Draw circle
- ellipse( X, Y, radius, radius );
-
- fill(redFill, 0, yellowFill);
-
- squareX+=(sX-squareX)/delay;
- squareY+=(sY-squareY)/delay;
-
- // Draw rectangle
- rect(squareX, squareY, 30.0, 30.0);
-
- for(var shape in shapes) {
- shapes[shape].draw();
- }
-
-}
-
-// Set circle's next destination
-void mouseMoved(){
- if(move) {
- nX = mouseX;
- nY = mouseY;
- }
-}
-
-void keyPressed() {
- if(key == CODED) {
- if(keyCode == UP) {
- temp = redFill;
- redFill = yellowFill;
- yellowFill = temp;
- }
- } else {
- if(key == 't') {
- temp = redFill;
- redFill = yellowFill;
- yellowFill = temp;
- } else if(key == 's') {
- move = !move;
- }
- }
-}
-</script><canvas width="200px" height="200px"></canvas>
-
-<pre>
-/*
- PROCESSINGJS.COM - BASIC EXAMPLE
- Delayed Mouse Tracking
- MIT License - Hyper-Metrix.com/F1LT3R
- Native Processing compatible
-*/
-
-// Global variables
-float radius = 50.0;
-int X, Y;
-int nX, nY;
-int delay = 16;
-
-// Setup the Processing Canvas
-void setup(){
- size( 200, 200 );
- strokeWeight( 10 );
- frameRate( 15 );
- X = width / 2;
- Y = width / 2;
- nX = X;
- nY = Y;
-}
-
-// Main draw loop
-void draw(){
-
- radius = radius + sin( frameCount / 4 );
-
- // Track circle to new destination
- X+=(nX-X)/delay;
- Y+=(nY-Y)/delay;
-
- // Fill canvas grey
- background( 100 );
-
- // Set fill-color to blue
- fill( 0, 121, 184 );
-
- // Set stroke-color white
- stroke(255);
-
- // Draw circle
- ellipse( X, Y, radius, radius );
-}
-
-
-// Set circle's next destination
-void mouseMoved(){
- nX = mouseX;
- nY = mouseY;
-}
-</pre>
-
+ <h1>KID SMASH</h1>
+ <p>let your kids play on the computer! go fullscreen!</p>
+ <script language="javascript" src="processing-0.8.min.js"></script>
+ <canvas datasrc="kidsmash.pjs" />
</body>
</html>
View
@@ -0,0 +1,100 @@
+// Global variables
+var radius = 50.0;
+var X, Y;
+var nX, nY;
+var delay = 4;
+
+var sX, sY, squareX, squareY;
+var yellowFill = 0, redFill = 121;
+var move = true;
+
+var shapes = [];
+
+function makeRect(x, y, h, w, f1, f2, f3) {
+ return {
+ draw: function() {
+ fill(f1, f2, f3);
+ rect(x, y, h, w);
+ },
+ };
+}
+
+// Setup the Processing Canvas
+function setup(){
+ size( 500, 500 );
+ strokeWeight( 10 );
+ frameRate( 15 );
+ X = width / 2;
+ Y = width / 2;
+ nX = X;
+ nY = Y;
+}
+
+function mousePressed() {
+ shapes.push(makeRect(mouseX, mouseY, 40, 40, randInt(255), randInt(255), randInt(255)));
+}
+
+function randInt(max) {
+ return Math.floor(Math.random()*max);
+}
+
+// Main draw loop
+function draw(){
+
+ radius = radius + sin( frameCount / 4 );
+
+ // Track circle to new destination
+ X+=(nX-X)/delay;
+ Y+=(nY-Y)/delay;
+
+ // Fill canvas grey
+ background( 100 );
+
+ // Set fill-color to blue
+ fill( 0, 121, 184 );
+
+ // Set stroke-color white
+ stroke(255);
+
+ // Draw circle
+ ellipse( X, Y, radius, radius );
+
+ fill(redFill, 0, yellowFill);
+
+ squareX+=(sX-squareX)/delay;
+ squareY+=(sY-squareY)/delay;
+
+ // Draw rectangle
+ rect(squareX, squareY, 30.0, 30.0);
+
+ for(var shape in shapes) {
+ shapes[shape].draw();
+ }
+
+}
+
+// Set circle's next destination
+function mouseMoved(){
+ if(move) {
+ nX = mouseX;
+ nY = mouseY;
+ }
+}
+
+function keyPressed() {
+ if(key == CODED) {
+ if(keyCode == UP) {
+ temp = redFill;
+ redFill = yellowFill;
+ yellowFill = temp;
+ }
+ } else {
+ if(key == 't') {
+ temp = redFill;
+ redFill = yellowFill;
+ yellowFill = temp;
+ } else if(key == 's') {
+ move = !move;
+ }
+ }
+}
View
@@ -0,0 +1,99 @@
+float radius = 50.0;
+int X, Y;
+int nX, nY;
+int delay = 4;
+
+int sX, sY, squareX, squareY;
+int yellowFill = 0, redFill = 121;
+boolean move = true;
+
+var shapes = [];
+
+function makeRect(x, y, h, w, f1, f2, f3) {
+ return {
+ draw: function() {
+ fill(f1, f2, f3);
+ rect(x, y, h, w);
+ },
+ };
+}
+
+// Setup the Processing Canvas
+void setup(){
+ size( 500, 500 );
+ strokeWeight( 10 );
+ frameRate( 15 );
+ X = width / 2;
+ Y = width / 2;
+ nX = X;
+ nY = Y;
+}
+
+void mousePressed() {
+ shapes.push(makeRect(mouseX, mouseY, 40, 40, randInt(255), randInt(255), randInt(255)));
+}
+
+function randInt(max) {
+ return Math.floor(Math.random()*max);
+}
+
+// Main draw loop
+void draw(){
+
+ radius = radius + sin( frameCount / 4 );
+
+ // Track circle to new destination
+ X+=(nX-X)/delay;
+ Y+=(nY-Y)/delay;
+
+ // Fill canvas grey
+ background( 100 );
+
+ // Set fill-color to blue
+ fill( 0, 121, 184 );
+
+ // Set stroke-color white
+ stroke(255);
+
+ // Draw circle
+ ellipse( X, Y, radius, radius );
+
+ fill(redFill, 0, yellowFill);
+
+ squareX+=(sX-squareX)/delay;
+ squareY+=(sY-squareY)/delay;
+
+ // Draw rectangle
+ rect(squareX, squareY, 30.0, 30.0);
+
+ for(var shape in shapes) {
+ shapes[shape].draw();
+ }
+
+}
+
+// Set circle's next destination
+void mouseMoved(){
+ if(move) {
+ nX = mouseX;
+ nY = mouseY;
+ }
+}
+
+void keyPressed() {
+ if(key == CODED) {
+ if(keyCode == UP) {
+ temp = redFill;
+ redFill = yellowFill;
+ yellowFill = temp;
+ }
+ } else {
+ if(key == 't') {
+ temp = redFill;
+ redFill = yellowFill;
+ yellowFill = temp;
+ } else if(key == 's') {
+ move = !move;
+ }
+ }
+}
View

Large diffs are not rendered by default.

Oops, something went wrong.
View

Some generated files are not rendered by default. Learn more.

Oops, something went wrong.
Oops, something went wrong.

0 comments on commit c56058c

Please sign in to comment.