Permalink
Browse files

completion and cleanups

  • Loading branch information...
1 parent 45fbb6e commit ecd4b5f62f5c565549582cccd6a89fe40b9033d9 @einaros committed Oct 7, 2011
Showing with 142 additions and 101 deletions.
  1. +1 −1 package.json
  2. +0 −98 public/index.html
  3. +4 −0 public/jq.js
  4. +11 −0 public/requestanimframe.js
  5. +124 −0 public/trig-paperjs.html
  6. +2 −2 server.js
View
@@ -14,4 +14,4 @@
"express": "latest"
},
"devDependencies": {}
-}
+}
View
@@ -1,98 +0,0 @@
-<!DOCTYPE html>
-<html>
- <head>
- <style>
- body {
- margin: 0;
- padding: 0;
- overflow: hidden;
- }
- </style>
- <script src="paper.js"></script>
- <script>
- window.onload = function() {
- var circleCenterPt = new paper.Point(200, 300);
- var circleRadius = 75;
- var sineWaveLength = 400;
- var cosWaveLength = 300;
-
- paper.setup(document.getElementById('canvas'));
- var sineWaveStep = sineWaveLength/360;
- var cosWaveStep = cosWaveLength/360;
- var angle = 0;
-
- var circle = new paper.Path.Circle(circleCenterPt, circleRadius);
- circle.strokeColor = 'blue';
-
- var xAxis = new paper.Path.Line(
- new paper.Point(0, circleCenterPt.y),
- new paper.Point(circleCenterPt.x + sineWaveLength, circleCenterPt.y));
- xAxis.strokeColor = 'gray';
-
- var yAxis = new paper.Path.Line(
- new paper.Point(circleCenterPt.x, 0),
- new paper.Point(circleCenterPt.x, 500));
- yAxis.strokeColor = 'gray';
-
- var marker = new paper.Path.Circle(new paper.Point(10, 10), 5);
- marker.strokeColor = 'blue';
- marker.fillColor = 'white';
-
- var sineWave = new paper.Path();
- sineWave.strokeColor = 'green';
- for (var i = 0; i < sineWaveLength/sineWaveStep; ++i) {
- sineWave.add(new paper.Point(
- circleCenterPt.x + i * sineWaveStep,
- circleCenterPt.y - Math.sin((angle + i) / 180 * Math.PI) * circleRadius));
- }
- var sineWaveMarker = new paper.Path.Line(
- sineWave.segments[0].point.clone(),
- sineWave.segments[0].point.clone());
- sineWaveMarker.strokeColor = 'black';
- sineWaveMarker.dashArray = [2, 2];
-
- var cosWave = new paper.Path();
- cosWave.strokeColor = 'green';
- for (var i = 0; i < cosWaveLength/cosWaveStep; ++i) {
- cosWave.add(new paper.Point(
- circleCenterPt.x + Math.cos((angle + i) / 180 * Math.PI) * circleRadius,
- circleCenterPt.y - i * cosWaveStep));
- }
- var cosWaveMarker = new paper.Path.Line(
- cosWave.segments[0].point.clone(),
- cosWave.segments[0].point.clone());
- cosWaveMarker.strokeColor = 'black';
- cosWaveMarker.dashArray = [2, 2];
-
- paper.view.draw();
-
- function redraw() {
- var a = (angle++) / 180 * Math.PI;
- marker.position.x = circleCenterPt.x + Math.cos(a) * circleRadius;
- marker.position.y = circleCenterPt.y + Math.sin(a) * circleRadius;
-
- for (var i = sineWave.segments.length - 1; i > 0; --i) {
- sineWave.segments[i].point.y = sineWave.segments[i - 1].point.y;
- }
- sineWave.segments[0].point.y = marker.position.y;
- sineWaveMarker.segments[0].point = marker.position.clone();
- sineWaveMarker.segments[1].point = sineWave.segments[0].point.clone();
-
- for (var i = cosWave.segments.length - 1; i > 0; --i) {
- cosWave.segments[i].point.x = cosWave.segments[i - 1].point.x;
- }
- cosWave.segments[0].point.x = marker.position.x;
- cosWaveMarker.segments[0].point = marker.position.clone();
- cosWaveMarker.segments[1].point = cosWave.segments[0].point.clone();
-
- paper.view.draw();
- }
-
- setInterval(redraw, 1000/60);
- }
- </script>
- </head>
- <body>
- <canvas resize id="canvas">
- </body>
-</html>
View
Oops, something went wrong.
@@ -0,0 +1,11 @@
+// shim layer with setTimeout fallback
+window.requestAnimFrame = (function(){
+ return window.requestAnimationFrame ||
+ window.webkitRequestAnimationFrame ||
+ window.mozRequestAnimationFrame ||
+ window.oRequestAnimationFrame ||
+ window.msRequestAnimationFrame ||
+ function(/* function */ callback, /* DOMElement */ element){
+ window.setTimeout(callback, 1000 / 60);
+ };
+})();
@@ -0,0 +1,124 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <style>
+ body {
+ margin: 0;
+ padding: 0;
+ overflow: hidden;
+ }
+ </style>
+ <script src="jq.js"></script>
+ <script src="paper.js"></script>
+ <script src="requestanimframe.js"></script>
+ <script>
+ jQuery(function($) {
+ var circleCenterPt = new paper.Point(200, 300);
+ var circleRadius = 75;
+ var sineWaveLength = 400;
+ var cosineWaveLength = 300;
+
+ paper.setup($('canvas')[0]);
+ var sineWaveStep = sineWaveLength/360;
+ var cosineWaveStep = cosineWaveLength/360;
+ var angle = 0;
+
+ var circle = new paper.Path.Circle(circleCenterPt, circleRadius);
+ circle.strokeColor = 'blue';
+
+ // Add x-axis
+ var xAxis = new paper.Path.Line(
+ new paper.Point(0, circleCenterPt.y),
+ new paper.Point(circleCenterPt.x + sineWaveLength, circleCenterPt.y));
+ xAxis.strokeColor = 'gray';
+ var xAxisText = new paper.PointText(circleCenterPt.add([sineWaveLength - 100, 20]));
+ xAxisText.fillColor = 'gray';
+ xAxisText.content = 'sine wave';
+
+ // Add y-axis
+ var yAxis = new paper.Path.Line(
+ new paper.Point(circleCenterPt.x, 0),
+ new paper.Point(circleCenterPt.x, cosineWaveLength + circleCenterPt.x));
+ yAxis.strokeColor = 'gray';
+ var yAxisText = new paper.PointText(new paper.Point(circleCenterPt.x + 10, 20));
+ yAxisText.fillColor = 'gray';
+ yAxisText.content = 'cosine wave';
+
+ // Add circle angle marker
+ var marker = new paper.Path.Circle(new paper.Point(10, 10), 5);
+ marker.strokeColor = 'blue';
+ marker.fillColor = 'white';
+
+ // Add angle text
+ var angleDegText = new paper.PointText(circleCenterPt.add([circleRadius, circleRadius]));
+ angleDegText.fillColor = 'gray';
+ angleDegText.content = '';
+ var angleRadText = new paper.PointText(angleDegText.position.add([0, 20]));
+ angleRadText.fillColor = 'gray';
+ angleRadText.content = '';
+
+ // Add sine path, which maps to the y-axis
+ var sineWave = new paper.Path();
+ sineWave.strokeColor = 'green';
+ for (var i = 0; i < sineWaveLength/sineWaveStep; ++i) {
+ sineWave.add(circleCenterPt.add([
+ i * sineWaveStep,
+ -Math.sin((angle + i) / 180 * Math.PI) * circleRadius
+ ]));
+ }
+ var sineWaveMarker = new paper.Path.Line();
+ sineWaveMarker.strokeColor = 'black';
+ sineWaveMarker.dashArray = [2, 2];
+
+ // Add a cosine path, which maps to the x-axis
+ var cosineWave = new paper.Path();
+ cosineWave.strokeColor = 'green';
+ for (var i = 0; i < cosineWaveLength/cosineWaveStep; ++i) {
+ cosineWave.add(circleCenterPt.add([
+ Math.cos((angle + i) / 180 * Math.PI) * circleRadius,
+ -i * cosineWaveStep
+ ]));
+ }
+ var cosineWaveMarker = new paper.Path.Line();
+ cosineWaveMarker.strokeColor = 'black';
+ cosineWaveMarker.dashArray = [2, 2];
+
+ function animate() {
+ // Update marker position on the circle
+ var a = (angle++) / 180 * Math.PI;
+ marker.position.x = circleCenterPt.x + Math.cos(a) * circleRadius;
+ marker.position.y = circleCenterPt.y + Math.sin(a) * circleRadius;
+
+ // Update degree and (rounded) radian angle text
+ angleDegText.content = (angle % 360) + '°';
+ angleRadText.content = Math.round((a % (Math.PI*2)) * 1000)/1000 + ' rad';
+
+ // Update sine wave points, essentially just moving them one step back
+ // then add a fresh point to the current angle
+ for (var i = sineWave.segments.length - 1; i > 0; --i) {
+ sineWave.segments[i].point.y = sineWave.segments[i - 1].point.y;
+ }
+ sineWave.segments[0].point.y = marker.position.y;
+ sineWaveMarker.segments[0].point = marker.position.clone();
+ sineWaveMarker.segments[1].point = sineWave.segments[0].point.clone();
+
+ // Same as above, but for the cosine points
+ for (var i = cosineWave.segments.length - 1; i > 0; --i) {
+ cosineWave.segments[i].point.x = cosineWave.segments[i - 1].point.x;
+ }
+ cosineWave.segments[0].point.x = marker.position.x;
+ cosineWaveMarker.segments[0].point = marker.position.clone();
+ cosineWaveMarker.segments[1].point = cosineWave.segments[0].point.clone();
+
+ // Redraw!
+ paper.view.draw();
+ requestAnimFrame(animate);
+ }
+ animate();
+ });
+ </script>
+ </head>
+ <body>
+ <canvas resize>
+ </body>
+</html>
View
@@ -1,4 +1,4 @@
var express = require('express');
var app = express.createServer();
-app.listen(8000);
-app.use(express.static(__dirname + '/public'));
+app.listen(8002);
+app.use(express.static(__dirname + '/public'));

0 comments on commit ecd4b5f

Please sign in to comment.