shenningsgard/angrychopsticks_app.js

## angrychopsticks_app.js
var defaultCode = "float delta = 0.075 * random(1);\n"+
  "int numBoxes = 250;\n"+
  "float c = 0 + random(1);\n\n"+
  "void setup() {\n\n"+
    "\tsize(800,400,P3D);\n\n"+
  "}\n\n"+
  "void update() {\n"+
    "\tc += 0.01 * delta;\n"+
  "}\n\n"+
  "void draw() {\n\n"+
    "\tupdate();\n\n"+
    "\tlights();\n\n"+
    "\tcamera(width/2, height/2, (height/2) / tan(PI/6) + 25000, 0, 0, 0, 0, 1, 0);\n\n"+
    "\tfloat fov = PI/3.0;\n\n"+
    "\tfloat cameraZ = (height/2.0) / tan(fov/2.0);\n\n"+
    "\tperspective(\n"+
      "\t\tfov,\n"+
      "\t\tfloat(width) / float(height),\n"+
      "\t\tcameraZ / 10.0,\n"+
      "\t\tcameraZ * 1000.0\n"+
    "\t);\n\n"+
    "\tbackground(\n"+
      "\t\t(0.5 + (0.5 * sin(PI * c))) * 255,\n"+
      "\t\t(0.5 + (0.5 * sin(PI * c + (PI/2)))) * 255,\n"+
      "\t\t(0.5 + (0.5 * sin(PI * c * 2))) * 255\n"+
    "\t);\n\n"+
    "\tfor (int i = 0; i < numBoxes; i++) {\n\n"+
      "\t\ttranslate(5 * c, 0, sin((-5) * i));\n\n"+
      "\t\tif (i % 2 == 0) {\n"+
        "\t\t\trotateY(c);\n"+
        "\t\t\trotateX(c - i);\n"+
      "\t\t} else {\n"+
        "\t\t\trotateX(c - i);\n"+
        "\t\t\trotateZ(c);\n"+
      "\t\t}\n\n"+
      "\t\ttranslate(cos(10 * i + 10), (-10) * i, 0 );\n\n"+
      "\t\tfill(\n"+
        "\t\t\t(0),\n"+
        "\t\t\t(0),\n"+
        "\t\t\t(0.5 + (0.5 * sin(i*0.1 * c * 10))) * 255\n"+
      "\t\t);\n\n"+
      "\t\trotateZ(c * 10);\n\n"+
      "\t\tbox(500 * sin(c * 1.1) + 10, 10 * i + 10, 20 * sin(PI*i) + 10);\n"+
    "\t}\n\n"+
  "}";

var canvas = document.getElementById("mycanvas");
// attaching the sketchProc function to the canvas
var processingInstance;

var editor = ace.edit("codeBox");
editor.$blockScrolling = Infinity;;
editor.setTheme("ace/theme/xcode");
editor.getSession().setMode("ace/mode/processing");
editor.setValue(defaultCode);

function load() {
  if (processingInstance) {
    processingInstance.exit();
    processingInstance = null;
  }
  processingInstance = new Processing(canvas, Processing.compile( editor.getValue() ));
}

function play() {
  if (processingInstance) {
    processingInstance.loop();
  } else {
    load();
  }
}

function pause() {
  if (processingInstance) {
    processingInstance.noLoop();
  }
}

function saveToDrive() {
  alert("Not available just yet ;)");
  processingInstance.setSize(100,100);
}

## angrychopsticks_index.html

<html>
  <head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

    <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
    <link href="style.css" rel="stylesheet">


    <script src="../js/lib/ace/ace.js"></script>
  </head>
  <body>
    <br />
    <div class="container-fluid">

      <div class="row container-fluid">
        <div class="col-md-1">
        </div>
        <div class="col-md-10">

          <div class="panel panel-default">
            <div class="panel-heading">
              "Angry Chopsticks" by Steve Henningsgard
            </div>
            <div class="panel-body" style="text-align:center; background-color:#F4F4F4;">
              <canvas id="mycanvas" style="width:800px;"></canvas>
            </div>


            <div class="btn-group btn-group-justified" role="group">

              <div class="btn-group" role="group">
                <button type="button" class="btn btn-primary" onclick="load()">
                  <span class="glyphicon glyphicon-open"></span> Load
                </button>
              </div>

              <div class="btn-group" role="group">
                <button type="button" class="btn btn-success" onclick="play()">
                  <span class="glyphicon glyphicon-play"></span> Play
                </button>
              </div>

              <div class="btn-group" role="group">
                <button type="button" class="btn btn-warning" onclick="pause()">
                  <span class="glyphicon glyphicon-pause"></span> Pause
                </button>
              </div>

              <div class="btn-group" role="group">
                <button type="button" class="btn btn-info" onclick="saveToDrive()">
                  <span class="glyphicon glyphicon-floppy-disk"></span> Save to Drive
                </button>
              </div>

            </div>

            <div id="codeBox" style="height:40%; width:100%; background-color:#EEE;"></div>

          </div>

        </div>

        <div class="col-md-1">
        </div>
      </div>

    </div>

      <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
      <script src="../js/lib/processing.js"></script>

      <script src="app.js"></script>

  </body>
</html>

## angrychopsticks_style.css
body {
    background-color: #666;
    color: #DDD;
}
	var defaultCode = "float delta = 0.075 * random(1);\n"+
	"int numBoxes = 250;\n"+
	"float c = 0 + random(1);\n\n"+
	"void setup() {\n\n"+
	"\tsize(800,400,P3D);\n\n"+
	"}\n\n"+
	"void update() {\n"+
	"\tc += 0.01 * delta;\n"+
	"}\n\n"+
	"void draw() {\n\n"+
	"\tupdate();\n\n"+
	"\tlights();\n\n"+
	"\tcamera(width/2, height/2, (height/2) / tan(PI/6) + 25000, 0, 0, 0, 0, 1, 0);\n\n"+
	"\tfloat fov = PI/3.0;\n\n"+
	"\tfloat cameraZ = (height/2.0) / tan(fov/2.0);\n\n"+
	"\tperspective(\n"+
	"\t\tfov,\n"+
	"\t\tfloat(width) / float(height),\n"+
	"\t\tcameraZ / 10.0,\n"+
	"\t\tcameraZ * 1000.0\n"+
	"\t);\n\n"+
	"\tbackground(\n"+
	"\t\t(0.5 + (0.5 * sin(PI * c))) * 255,\n"+
	"\t\t(0.5 + (0.5 * sin(PI * c + (PI/2)))) * 255,\n"+
	"\t\t(0.5 + (0.5 * sin(PI * c * 2))) * 255\n"+
	"\t);\n\n"+
	"\tfor (int i = 0; i < numBoxes; i++) {\n\n"+
	"\t\ttranslate(5 * c, 0, sin((-5) * i));\n\n"+
	"\t\tif (i % 2 == 0) {\n"+
	"\t\t\trotateY(c);\n"+
	"\t\t\trotateX(c - i);\n"+
	"\t\t} else {\n"+
	"\t\t\trotateX(c - i);\n"+
	"\t\t\trotateZ(c);\n"+
	"\t\t}\n\n"+
	"\t\ttranslate(cos(10 * i + 10), (-10) * i, 0 );\n\n"+
	"\t\tfill(\n"+
	"\t\t\t(0),\n"+
	"\t\t\t(0),\n"+
	"\t\t\t(0.5 + (0.5 * sin(i0.1 c * 10))) * 255\n"+
	"\t\t);\n\n"+
	"\t\trotateZ(c * 10);\n\n"+
	"\t\tbox(500 * sin(c * 1.1) + 10, 10 * i + 10, 20 * sin(PI*i) + 10);\n"+
	"\t}\n\n"+
	"}";

	var canvas = document.getElementById("mycanvas");
	// attaching the sketchProc function to the canvas
	var processingInstance;

	var editor = ace.edit("codeBox");
	editor.$blockScrolling = Infinity;;
	editor.setTheme("ace/theme/xcode");
	editor.getSession().setMode("ace/mode/processing");
	editor.setValue(defaultCode);

	function load() {
	if (processingInstance) {
	processingInstance.exit();
	processingInstance = null;
	}
	processingInstance = new Processing(canvas, Processing.compile( editor.getValue() ));
	}

	function play() {
	if (processingInstance) {
	processingInstance.loop();
	} else {
	load();
	}
	}

	function pause() {
	if (processingInstance) {
	processingInstance.noLoop();
	}
	}

	function saveToDrive() {
	alert("Not available just yet ;)");
	processingInstance.setSize(100,100);
	}

	<html>
	<head>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

	<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
	<link href="style.css" rel="stylesheet">


	<script src="../js/lib/ace/ace.js"></script>
	</head>
	<body>
	<br />
	<div class="container-fluid">

	<div class="row container-fluid">
	<div class="col-md-1">
	</div>
	<div class="col-md-10">

	<div class="panel panel-default">
	<div class="panel-heading">
	"Angry Chopsticks" by Steve Henningsgard
	</div>
	<div class="panel-body" style="text-align:center; background-color:#F4F4F4;">
	<canvas id="mycanvas" style="width:800px;"></canvas>
	</div>


	<div class="btn-group btn-group-justified" role="group">

	<div class="btn-group" role="group">
	<button type="button" class="btn btn-primary" onclick="load()">
	<span class="glyphicon glyphicon-open"></span> Load
	</button>
	</div>

	<div class="btn-group" role="group">
	<button type="button" class="btn btn-success" onclick="play()">
	<span class="glyphicon glyphicon-play"></span> Play
	</button>
	</div>

	<div class="btn-group" role="group">
	<button type="button" class="btn btn-warning" onclick="pause()">
	<span class="glyphicon glyphicon-pause"></span> Pause
	</button>
	</div>

	<div class="btn-group" role="group">
	<button type="button" class="btn btn-info" onclick="saveToDrive()">
	<span class="glyphicon glyphicon-floppy-disk"></span> Save to Drive
	</button>
	</div>

	</div>

	<div id="codeBox" style="height:40%; width:100%; background-color:#EEE;"></div>

	</div>

	</div>

	<div class="col-md-1">
	</div>
	</div>

	</div>

	<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
	<script src="../js/lib/processing.js"></script>

	<script src="app.js"></script>

	</body>
	</html>