Permalink
Browse files

Added two more projects

  • Loading branch information...
ChrisJan00 committed Mar 7, 2012
1 parent 6a54b3b commit ef9b975f46eea2ddc882428a5dcc96323703768e
@@ -1,7 +1,7 @@
<html><head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>CircleSquid</title>
-<script type="text/javascript" src="circlesquid.js"></script>
+<script type="text/javascript" src="circlesquids.js"></script>
</head>
<body onload="circleSquids.start();" bgcolor="#B5D5F5" style="font-family:sans-serif; height:100%">
File renamed without changes.
View
@@ -1,15 +0,0 @@
-<html><head>
-<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
-<title>Consumed</title>
-<script type="text/javascript" src="perlinsimplex.js"></script>
-<script type="text/javascript" src="consumed.js"></script>
-</head>
-
-<body onload="consumed.start();" bgcolor="#B5D5F5" style="font-family:sans-serif; height:100%">
-<center>
-<canvas id="gameCanvas" style="image-rendering:
-optimizespeed ! important; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);" moz-opaque=""
-width="1200" height="700"></canvas>
-</center>
-</body>
-</html>
View
@@ -1,114 +0,0 @@
-var Consumed = function() {
- var self = this;
-
- self.prepare = function() {
-
- self.canvas = document.getElementById("gameCanvas");
- self.ctxt = self.canvas.getContext("2d");
-
- self.simplex = new SimplexNoise();
-
- self.side = 20;
- self.x = self.canvas.width*5/11;
- self.y = self.canvas.height/4;
- self.z = 0;
- //canvas.addEventListener('mousedown', startRandomWalk, false);
-
- }
-
- self.clean = function() {
- self.ctxt.clearRect(0,0, self.canvas.width, self.canvas.height);
- self.ctxt.fillStyle="#000000";
- self.ctxt.fillRect(0, 0, self.canvas.width, self.canvas.height);
- }
-
- self.start = function() {
- self.prepare();
- self.clean();
-
- self.ctxt.fillStyle = "#6e0c9e";
- self.ctxt.fillRect(self.canvas.width*5/11, self.canvas.height/4, self.canvas.width/11, self.canvas.height/2);
- //self.iteration();
- //self.draw();
- //setTimeout(self.iteration, 10);
- //setInterval(self.iteration, 15);
- }
-
- self.draw = function() {
- var side = 1;
- for (var x = 0; x<self.canvas.width / side; x++)
- for (var y=0; y<self.canvas.height / side; y++) {
- var col = Math.floor((self.simplex.noise(x/self.canvas.width*10, y/self.canvas.height*10)+1)*128);
- self.ctxt.fillStyle="rgba(0,"+col+",0,1)"
- self.ctxt.fillRect(x*side, y*side, side, side);
- }
-
- self.busy = false;
-
- }
-
- self.Aiteration = function() {
- for (var xx = self.canvas.width*5/11; xx < self.canvas.width*6/11; xx++)
- for (var yy = self.canvas.height/4; yy < self.canvas.height*3/4; yy++) {
-
- // draw box
- var percent = (self.simplex.noise3d(xx/self.canvas.width*10, yy/self.canvas.height*10, self.z/self.canvas.width*10)+1) / 2;
-
- var red = Math.floor(percent*3 + 110);
- var green = Math.floor(percent*3 + 12);
- var blue = Math.floor(percent*3 + 158);
- self.ctxt.fillStyle = "rgba("+red+","+green+","+blue+",1)";
-
- self.ctxt.fillRect(xx, yy, 1, 1);
-
- }
- //self.draw();
- self.z++;
- if (self.z == self.canvas.width) {
- self.z = 0;
- }
- setTimeout(self.iteration, 0);
- }
-
- self.iteration = function() {
- for (var ii = 0; ii<self.canvas.width/11; ii++) {
- // draw box
- var percent = (self.simplex.noise3d(self.x/self.canvas.width*10, self.y/self.canvas.height*10, self.z/self.canvas.width*10)+1) / 2;
- //var col = Math.floor(*128);
-
- //var purpleArea = self.x>= self.canvas.width*5/11 && self.x<=self.canvas.width*6/11 && self.y >= self.canvas.height/4 && self.y<=self.canvas.height*3/4;
-
- //if (purpleArea) {
- // "#6e0c9e" 110, 12, 158
- var red = Math.floor(percent*13 + 110);
- var green = Math.floor(percent*13 + 12);
- var blue = Math.floor(percent*13 + 158);
- self.ctxt.fillStyle = "rgba("+red+","+green+","+blue+",1)";
- //} else {
- // var col = Math.floor(percent*3+2);
- // self.ctxt.fillStyle = "rgba("+col+","+col+","+col+",1)";
- //}
- self.ctxt.fillRect(self.x,self.y,1,1);
-
- // increase position
- self.x++;
- if (self.x >= self.canvas.width*6/11) {
- self.x = self.canvas.width*5/11;
- self.y++;
- if (self.y >= self.canvas.height*3/4) {
- self.y = self.canvas.height/4;
- self.z++;
- if (self.z >= self.canvas.width) {
- self.z = 0;
- }
- }
- }
- }
- //self.draw();
-
- setTimeout(self.iteration, 0);
- }
-
-}
-
-var consumed = new Consumed();
View
@@ -6,8 +6,10 @@
<body bgcolor="#B5D5F5" style="font-family:sans-serif; height:100%">
<center>
<H1>Procedural Aesthetics</H1>
-<p><a href="circlesquids.html">Circle Squids</a></p>
-<p><a href="runningbrushes.html">Running Brushes</a></p>
+<p><a href="circlesquids/circlesquids.html">Circle Squids</a></p>
+<p><a href="runningbrushes/runningbrushes.html">Running Brushes</a></p>
+<p><a href="vignettes/vignettes.html">Vignettes</a></p>
+<p><a href="oniondoodler/oniondoodler.html">Onion Doodler</a></p>
<!-- <p><a href="consumed.html">Consumed</a></p> -->
</center>
</body>
@@ -0,0 +1,110 @@
+<!--
+ Onion Doodler - Christiaan Janssen - July 2011
+ This program is free software: you can redistribute it and/or modify
+ it under the terms of the GNU General Public License as published by
+ the Free Software Foundation, either version 3 of the License, or
+ (at your option) any later version.
+
+ This program is distributed in the hope that it will be useful,
+ but WITHOUT ANY WARRANTY; without even the implied warranty of
+ MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License
+ along with this program. If not, see <http://www.gnu.org/licenses/>.
+-->
+
+<html>
+<head>
+<title>Onion Doodler</title>
+<style>
+.horzcenter {
+ text-align: center;
+ color: #FFFFFF;
+ font-family: sans-serif;
+}
+</style>
+<script type="text/javascript">
+var canvas, ctxt;
+var isPressed = false;
+var isMouseOut = false;
+var xoffset, yoffset;
+
+function begin() {
+ canvas = document.getElementById("canvas");
+ ctxt = canvas.getContext("2d");
+
+ canvas.addEventListener('mousedown', pressed, false);
+ canvas.addEventListener('mouseup', released, false);
+ canvas.addEventListener('mousemove', moved, false);
+ canvas.addEventListener('mouseout', movedOut, false);
+
+ var obj = canvas;
+ xoffset = 0;
+ yoffset = 0;
+ while (obj) {
+ xoffset += obj.offsetLeft;
+ yoffset += obj.offsetTop;
+ obj = obj.offsetParent;
+ }
+ ctxt.fillStyle = "#FFFFFF";
+ ctxt.fillRect(0, 0, canvas.width, canvas.height);
+ ctxt.fillStyle = "rgba(255,255,255,0.05)";
+ ctxt.strokeStyle = "#000000";
+ ctxt.lineWidth = 2.5;
+}
+
+function pressed( ev ) {
+ ctxt.beginPath();
+ ctxt.moveTo(getCoordX(ev), getCoordY(ev));
+ isPressed = true;
+}
+
+function released( ev ) {
+ moved(ev);
+ isPressed = false;
+ ctxt.stroke();
+ ctxt.fillRect(0, 0, canvas.width, canvas.height);
+}
+
+function moved( ev ) {
+ if (!isPressed) return;
+ if (isMouseOut) {
+ isMouseOut = false;
+ ctxt.moveTo(getCoordX(ev), getCoordY(ev));
+ } else {
+ ctxt.lineTo(getCoordX(ev), getCoordY(ev));
+ }
+}
+
+function movedOut( ev ) {
+ if (isPressed)
+ isMouseOut = true;
+}
+
+function getCoordX( ev ) {
+ if (ev.layerX || ev.layerX == 0) {
+ return ev.layerX - xoffset;
+ } else if (ev.offsetX || ev.offsetX == 0) {
+ return ev.offsetX;
+ }
+ return 0;
+}
+
+function getCoordY( ev ) {
+ if (ev.layerY || ev.layerY == 0) {
+ return ev.layerY - yoffset;
+ } else if (ev.offsetY || ev.offsetY == 0) {
+ return ev.offsetY;
+ }
+ return 0;
+}
+</script>
+</head>
+<body onload="begin()" bgColor="#000000">
+<div class="horzcenter"> <h1>Onion Doodler</h1>
+<canvas id="canvas" style="image-rendering: optimizespeed ! important;" width="800" height="600"></canvas>
+<h6>Instructions: Click and drag. Release to draw. Old strokes fade away. When done, right-click + "Save Image As...". Reload page to erase picture</h6>
+</div>
+</body>
+</html>
Oops, something went wrong.

0 comments on commit ef9b975

Please sign in to comment.