Permalink
Browse files

Reworked some little details and added more text to the firts section.

  • Loading branch information...
1 parent 7f9d80b commit 3902ae31f3328579f3158be7e0d3511e4623f557 @zgrossbart committed Nov 29, 2011
Showing with 51 additions and 9 deletions.
  1. +18 −2 index.css
  2. +27 −5 index.html
  3. +1 −0 paper_animation.pjs
  4. +2 −1 processing_animation.java
  5. +3 −1 raphael_shapes.js
View
@@ -1,11 +1,27 @@
body {
background: #fff;
color: #000;
- font-size: 16px;
+ font-size: 18px;
line-height: 24px;
font-family: "ff-basic-gothic-web-pro", Verdana,Arial,Sans-serif;
}
+a {
+ text-decoration: none;
+
+}
+
+a:hover {
+ text-decoration: underline;
+}
+
+a.sourceLink {
+ position: relative;
+ top: -24px;
+ left: 30px;
+ font-size: 12px;
+}
+
h2 {
text-align: center;
}
@@ -17,7 +33,7 @@ h2 {
height: 200px;
margin: 0 auto;
display: block;
- margin-top: 36px;
+ margin-top: 18px;
}
#main {
View
@@ -43,30 +43,52 @@
<div id="main">
<div id="headers">
- <p>
+ <p style="margin-top: 100px;">
+ Compare the code for Paper, Processing, and Raphael. We'll start by drawing a simple circle.
</p>
+ <p style="margin-top: 200px;">
+ Click the shapes to start the animation.
+ </p>
+
+ <p style="margin-top: 200px;">
+ Click the square to change the color.
+ </p>
</div>
<div id="paper">
- <h2>Paper</h2>
+ <h2><a href="http://paperjs.org/">Paper</a></h2>
<canvas id="paperCircle" class="canvas" width="200" height="200" style="background-color: white;"></canvas>
+ <a href="https://github.com/zgrossbart/3gears/blob/master/paper_circle.pjs" class="sourceLink">view source</a>
+
<canvas id="paperAnimation" class="canvas" width="200" height="200" style="background-color: white;"></canvas>
+ <a href="https://github.com/zgrossbart/3gears/blob/master/paper_animation.pjs" class="sourceLink">view source</a>
+
<canvas id="paperInteraction" class="canvas" width="200" height="200" style="background-color: white;"></canvas>
+ <a href="https://github.com/zgrossbart/3gears/blob/master/paper_interaction.pjs" class="sourceLink">view source</a>
</div>
<div id="processing">
- <h2>Processing</h2>
+ <h2><a href="http://processingjs.org/">Processing</a></h2>
<canvas width="200" height="200" class="canvas" data-processing-sources="processing_circle.java"></canvas>
+ <a href="https://github.com/zgrossbart/3gears/blob/master/processing_circle.java" class="sourceLink">view source</a>
+
<canvas width="200" height="200" class="canvas" data-processing-sources="processing_animation.java"></canvas>
+ <a href="https://github.com/zgrossbart/3gears/blob/master/processing_animation.java" class="sourceLink">view source</a>
+
<canvas width="200" height="200" class="canvas" data-processing-sources="processing_interaction.java"></canvas>
+ <a href="https://github.com/zgrossbart/3gears/blob/master/processing_interaction.java" class="sourceLink">view source</a>
</div>
<div id="raphael">
- <h2>Raphael</h2>
+ <h2><a href="http://raphaeljs.com/">Raphael</a></h2>
<div id="raphaelCircle" class="canvas"></div>
+ <a href="https://github.com/zgrossbart/3gears/blob/master/raphael_shapes.js" class="sourceLink">view source</a>
+
<div id="raphaelAnimation" class="canvas"></div>
- <div id="raphaelInteraction" class="canvas"></div>
+ <a href="https://github.com/zgrossbart/3gears/blob/master/raphael_shapes.js" class="sourceLink">view source</a>
+ <div id="raphaelInteraction" class="canvas"></div>
+ <a href="https://github.com/zgrossbart/3gears/blob/master/raphael_shapes.js" class="sourceLink">view source</a>
</div>
</div>
</body>
View
@@ -10,6 +10,7 @@ function init() {
r = new Path.Rectangle(rectangle);
r.strokeColor = '#ee2a33';
r.strokeWidth = 2;
+ r.rotate(20);
}
function onMouseUp(event) {
@@ -1,4 +1,5 @@
-float angle = 0.0;
+//40 degrees = 0.698131701 radians
+float angle = 0.698131701;
void setup() {
size(200, 200);
View
@@ -34,11 +34,13 @@ shapes = {
'stroke': '#00aeef'
});
+ r.rotate(60);
+
setInterval(function() {
if (!main.raphaelAnimationStopped) {
r.rotate(6);
}
- }, 66);
+ }, 33);
},
createInteraction: function() {

0 comments on commit 3902ae3

Please sign in to comment.