Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

Reworked the colors of all the samples.

  • Loading branch information...
commit 7f9d80b686244e7e922323901bac3eee97412315 1 parent 2d95f89
@zgrossbart authored
View
38 index.css
@@ -6,11 +6,18 @@ body {
font-family: "ff-basic-gothic-web-pro", Verdana,Arial,Sans-serif;
}
+h2 {
+ text-align: center;
+}
+
.canvas {
border-radius: 12px;
- background: black;
+ border: thin solid lightgray;
width: 200px;
height: 200px;
+ margin: 0 auto;
+ display: block;
+ margin-top: 36px;
}
#main {
@@ -19,23 +26,40 @@ body {
margin: 0 auto;
}
-#paper {
+#main > div {
+ padding: 10px;
+ overflow: hidden;
+}
+
+#headers {
position: absolute;
left: 0px;
- width: 32%;
+ width: 240px;
+ top: 28px;
+}
+
+#paper {
+ position: absolute;
+ left: 240px;
+ width: 240px;
top: 28px;
}
#processing {
position: absolute;
- left: 33%;
- width: 32%;
+ left: 480px;
+ width: 240px;
top: 28px;
}
#raphael {
position: absolute;
- left: 66%;
- width: 32%;
+ left: 720px;
+ width: 240px;
top: 28px;
}
+
+pre {
+ font-size: 12px;
+ line-height: 14px;
+}
View
21 index.html
@@ -42,34 +42,29 @@
<a href="https://github.com/zgrossbart/3gears" id="forkme"><img style="position: absolute; top: 0px; right: 0px; border: 0;" src="http://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub" /></a>
<div id="main">
+ <div id="headers">
+ <p>
+ </p>
+
+ </div>
<div id="paper">
<h2>Paper</h2>
- <canvas id="paperCircle" class="canvas" width="200" height="200" style="background-color: black;"></canvas>
- <br>
- <br>
- <canvas id="paperAnimation" class="canvas" width="200" height="200" style="background-color: black;"></canvas>
- <br>
- <br>
- <canvas id="paperInteraction" class="canvas" width="200" height="200" style="background-color: black;"></canvas>
+ <canvas id="paperCircle" class="canvas" width="200" height="200" style="background-color: white;"></canvas>
+ <canvas id="paperAnimation" class="canvas" width="200" height="200" style="background-color: white;"></canvas>
+ <canvas id="paperInteraction" class="canvas" width="200" height="200" style="background-color: white;"></canvas>
</div>
<div id="processing">
<h2>Processing</h2>
<canvas width="200" height="200" class="canvas" data-processing-sources="processing_circle.java"></canvas>
- <br>
- <br>
<canvas width="200" height="200" class="canvas" data-processing-sources="processing_animation.java"></canvas>
- <br>
- <br>
<canvas width="200" height="200" class="canvas" data-processing-sources="processing_interaction.java"></canvas>
</div>
<div id="raphael">
<h2>Raphael</h2>
<div id="raphaelCircle" class="canvas"></div>
- <br>
<div id="raphaelAnimation" class="canvas"></div>
- <br>
<div id="raphaelInteraction" class="canvas"></div>
</div>
View
4 paper_animation.pjs
@@ -2,13 +2,13 @@ var r;
function init() {
var c = new Path.Circle(new Point(100, 100), 10);
- c.fillColor = 'white';
+ c.fillColor = '#ee2a33';
var point = new Point(60, 60);
var size = new Size(80, 80);
var rectangle = new Rectangle(point, size);
r = new Path.Rectangle(rectangle);
- r.strokeColor = 'white';
+ r.strokeColor = '#ee2a33';
r.strokeWidth = 2;
}
View
2  paper_circle.pjs
@@ -1,6 +1,6 @@
function init() {
var circle = new Path.Circle(new Point(100, 100), 10);
- circle.fillColor = 'white';
+ circle.fillColor = '#ee2a33';
}
View
6 paper_interaction.pjs
@@ -8,7 +8,7 @@ function init() {
var size = new Size(80, 80);
var rectangle = new Rectangle(point, size);
r = new Path.Rectangle(rectangle);
- r.fillColor = 'white';
+ r.fillColor = '#ee2a33';
}
function onMouseUp(event) {
@@ -16,9 +16,9 @@ function onMouseUp(event) {
if (hitResult && hitResult.item) {
if (hitResult.item.clicked) {
- hitResult.item.fillColor = 'white';
+ hitResult.item.fillColor = '#ee2a33';
} else {
- hitResult.item.fillColor = 'red';
+ hitResult.item.fillColor = '#f00ff0';
}
hitResult.item.clicked = !hitResult.item.clicked;
View
6 processing_animation.java
@@ -14,16 +14,16 @@ void draw() {
return;
}
- background(000);
+ background(#ffffff);
translate(100, 100);
- fill(#FFFFFF);
+ fill(#52b755);
noStroke();
ellipse(0, 0, 20, 20);
rotate(angle);
angle += 0.1;
noFill();
- stroke();
+ stroke(#52b755);
strokeWeight(2);
rect(-40, -40, 80, 80);
View
4 processing_circle.java
@@ -4,9 +4,9 @@ void setup() {
}
void draw() {
- background(000);
+ background(#ffffff);
translate(100, 100);
- fill(#FFFFFF);
+ fill(#52b755);
noStroke();
ellipse(0, 0, 20, 20);
}
View
8 processing_interaction.java
@@ -8,11 +8,13 @@ void setup() {
size(200, 200);
bx = width/2.0;
by = height/2.0;
+ noStroke();
+ fill(#52b755);
frameRate(10);
}
void draw() {
- background(0);
+ background(#ffffff);
// Test if the cursor is over the box
if (mouseX > bx-bs && mouseX < bx+bs &&
@@ -29,9 +31,9 @@ void draw() {
void mousePressed() {
if (bover) {
if (clicked) {
- fill(255, 255, 255);
+ fill(#52b755);
} else {
- fill(255, 0, 0);
+ fill(#f00ff0);
}
clicked = !clicked;
}
View
26 raphael_shapes.js
@@ -3,8 +3,8 @@ shapes = {
var paper = Raphael('raphaelCircle', 200, 200);
var c = paper.ellipse(100, 100, 10, 10);
c.attr({
- 'fill': 'white',
- 'stroke': 'white'
+ 'fill': '#00aeef',
+ 'stroke': '#00aeef'
});
},
@@ -14,8 +14,8 @@ shapes = {
var back = paper.rect(10, 10, 180, 180);
back.attr({
- 'fill': 'black',
- 'stroke': 'black'
+ 'fill': 'white',
+ 'stroke': 'white'
});
back.click(function() {
main.raphaelAnimationStopped = !main.raphaelAnimationStopped;
@@ -24,14 +24,14 @@ shapes = {
var c = paper.ellipse(100, 100, 10, 10);
c.attr({
- 'fill': 'white',
- 'stroke': 'white'
+ 'fill': '#00aeef',
+ 'stroke': '#00aeef'
});
var r = paper.rect(60, 60, 80, 80);
r.attr({
'stroke-width': 2,
- 'stroke': 'white'
+ 'stroke': '#00aeef'
});
setInterval(function() {
@@ -45,8 +45,8 @@ shapes = {
var paper = Raphael('raphaelInteraction', 200, 200);
var r = paper.rect(60, 60, 80, 80);
r.attr({
- 'fill': 'white',
- 'stroke': 'white'
+ 'fill': '#00aeef',
+ 'stroke': '#00aeef'
});
var clicked = false;
@@ -54,13 +54,13 @@ shapes = {
r.click(function() {
if (clicked) {
r.attr({
- 'fill': 'white',
- 'stroke': 'white'
+ 'fill': '#00aeef',
+ 'stroke': '#00aeef'
});
} else {
r.attr({
- 'fill': 'red',
- 'stroke': 'red'
+ 'fill': '#f00ff0',
+ 'stroke': '#f00ff0'
});
}
clicked = !clicked;
Please sign in to comment.
Something went wrong with that request. Please try again.