Permalink
Browse files

changed titles

  • Loading branch information...
1 parent 2ff58b2 commit 6a54b3b3cb7db8dcd12dd8b2184c037b65f332df @ChrisJan00 committed Aug 28, 2011
Showing with 311 additions and 2 deletions.
  1. +1 −1 circlesquids.html
  2. +15 −0 consumed.html
  3. +114 −0 consumed.js
  4. +1 −0 index.html
  5. +179 −0 perlinsimplex.js
  6. +1 −1 runningbrushes.html
View
@@ -1,6 +1,6 @@
<html><head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
-<title>ProceduralTest</title>
+<title>CircleSquid</title>
<script type="text/javascript" src="circlesquid.js"></script>
</head>
View
@@ -0,0 +1,15 @@
+<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
@@ -0,0 +1,114 @@
+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
@@ -8,6 +8,7 @@
<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="consumed.html">Consumed</a></p> -->
</center>
</body>
</html>
View
@@ -0,0 +1,179 @@
+// Ported from Stefan Gustavson's java implementation
+// http://staffwww.itn.liu.se/~stegu/simplexnoise/simplexnoise.pdf
+// Read Stefan's excellent paper for details on how this code works.
+//
+// Sean McCullough banksean@gmail.com
+
+/**
+ * You can pass in a random number generator object if you like.
+ * It is assumed to have a random() method.
+ */
+var SimplexNoise = function(r) {
+ if (r == undefined) r = Math;
+ this.grad3 = [[1,1,0],[-1,1,0],[1,-1,0],[-1,-1,0],
+ [1,0,1],[-1,0,1],[1,0,-1],[-1,0,-1],
+ [0,1,1],[0,-1,1],[0,1,-1],[0,-1,-1]];
+ this.p = [];
+ for (var i=0; i<256; i++) {
+ this.p[i] = Math.floor(r.random()*256);
+ }
+ // To remove the need for index wrapping, double the permutation table length
+ this.perm = [];
+ for(var i=0; i<512; i++) {
+ this.perm[i]=this.p[i & 255];
+ }
+
+ // A lookup table to traverse the simplex around a given point in 4D.
+ // Details can be found where this table is used, in the 4D noise method.
+ this.simplex = [
+ [0,1,2,3],[0,1,3,2],[0,0,0,0],[0,2,3,1],[0,0,0,0],[0,0,0,0],[0,0,0,0],[1,2,3,0],
+ [0,2,1,3],[0,0,0,0],[0,3,1,2],[0,3,2,1],[0,0,0,0],[0,0,0,0],[0,0,0,0],[1,3,2,0],
+ [0,0,0,0],[0,0,0,0],[0,0,0,0],[0,0,0,0],[0,0,0,0],[0,0,0,0],[0,0,0,0],[0,0,0,0],
+ [1,2,0,3],[0,0,0,0],[1,3,0,2],[0,0,0,0],[0,0,0,0],[0,0,0,0],[2,3,0,1],[2,3,1,0],
+ [1,0,2,3],[1,0,3,2],[0,0,0,0],[0,0,0,0],[0,0,0,0],[2,0,3,1],[0,0,0,0],[2,1,3,0],
+ [0,0,0,0],[0,0,0,0],[0,0,0,0],[0,0,0,0],[0,0,0,0],[0,0,0,0],[0,0,0,0],[0,0,0,0],
+ [2,0,1,3],[0,0,0,0],[0,0,0,0],[0,0,0,0],[3,0,1,2],[3,0,2,1],[0,0,0,0],[3,1,2,0],
+ [2,1,0,3],[0,0,0,0],[0,0,0,0],[0,0,0,0],[3,1,0,2],[0,0,0,0],[3,2,0,1],[3,2,1,0]];
+};
+
+SimplexNoise.prototype.dot = function(g, x, y) {
+ return g[0]*x + g[1]*y;
+};
+
+SimplexNoise.prototype.noise = function(xin, yin) {
+ var n0, n1, n2; // Noise contributions from the three corners
+ // Skew the input space to determine which simplex cell we're in
+ var F2 = 0.5*(Math.sqrt(3.0)-1.0);
+ var s = (xin+yin)*F2; // Hairy factor for 2D
+ var i = Math.floor(xin+s);
+ var j = Math.floor(yin+s);
+ var G2 = (3.0-Math.sqrt(3.0))/6.0;
+ var t = (i+j)*G2;
+ var X0 = i-t; // Unskew the cell origin back to (x,y) space
+ var Y0 = j-t;
+ var x0 = xin-X0; // The x,y distances from the cell origin
+ var y0 = yin-Y0;
+ // For the 2D case, the simplex shape is an equilateral triangle.
+ // Determine which simplex we are in.
+ var i1, j1; // Offsets for second (middle) corner of simplex in (i,j) coords
+ if(x0>y0) {i1=1; j1=0;} // lower triangle, XY order: (0,0)->(1,0)->(1,1)
+ else {i1=0; j1=1;} // upper triangle, YX order: (0,0)->(0,1)->(1,1)
+ // A step of (1,0) in (i,j) means a step of (1-c,-c) in (x,y), and
+ // a step of (0,1) in (i,j) means a step of (-c,1-c) in (x,y), where
+ // c = (3-sqrt(3))/6
+ var x1 = x0 - i1 + G2; // Offsets for middle corner in (x,y) unskewed coords
+ var y1 = y0 - j1 + G2;
+ var x2 = x0 - 1.0 + 2.0 * G2; // Offsets for last corner in (x,y) unskewed coords
+ var y2 = y0 - 1.0 + 2.0 * G2;
+ // Work out the hashed gradient indices of the three simplex corners
+ var ii = i & 255;
+ var jj = j & 255;
+ var gi0 = this.perm[ii+this.perm[jj]] % 12;
+ var gi1 = this.perm[ii+i1+this.perm[jj+j1]] % 12;
+ var gi2 = this.perm[ii+1+this.perm[jj+1]] % 12;
+ // Calculate the contribution from the three corners
+ var t0 = 0.5 - x0*x0-y0*y0;
+ if(t0<0) n0 = 0.0;
+ else {
+ t0 *= t0;
+ n0 = t0 * t0 * this.dot(this.grad3[gi0], x0, y0); // (x,y) of grad3 used for 2D gradient
+ }
+ var t1 = 0.5 - x1*x1-y1*y1;
+ if(t1<0) n1 = 0.0;
+ else {
+ t1 *= t1;
+ n1 = t1 * t1 * this.dot(this.grad3[gi1], x1, y1);
+ }
+ var t2 = 0.5 - x2*x2-y2*y2;
+ if(t2<0) n2 = 0.0;
+ else {
+ t2 *= t2;
+ n2 = t2 * t2 * this.dot(this.grad3[gi2], x2, y2);
+ }
+ // Add contributions from each corner to get the final noise value.
+ // The result is scaled to return values in the interval [-1,1].
+ return 70.0 * (n0 + n1 + n2);
+};
+
+// 3D simplex noise
+SimplexNoise.prototype.noise3d = function(xin, yin, zin) {
+ var n0, n1, n2, n3; // Noise contributions from the four corners
+ // Skew the input space to determine which simplex cell we're in
+ var F3 = 1.0/3.0;
+ var s = (xin+yin+zin)*F3; // Very nice and simple skew factor for 3D
+ var i = Math.floor(xin+s);
+ var j = Math.floor(yin+s);
+ var k = Math.floor(zin+s);
+ var G3 = 1.0/6.0; // Very nice and simple unskew factor, too
+ var t = (i+j+k)*G3;
+ var X0 = i-t; // Unskew the cell origin back to (x,y,z) space
+ var Y0 = j-t;
+ var Z0 = k-t;
+ var x0 = xin-X0; // The x,y,z distances from the cell origin
+ var y0 = yin-Y0;
+ var z0 = zin-Z0;
+ // For the 3D case, the simplex shape is a slightly irregular tetrahedron.
+ // Determine which simplex we are in.
+ var i1, j1, k1; // Offsets for second corner of simplex in (i,j,k) coords
+ var i2, j2, k2; // Offsets for third corner of simplex in (i,j,k) coords
+ if(x0>=y0) {
+ if(y0>=z0)
+ { i1=1; j1=0; k1=0; i2=1; j2=1; k2=0; } // X Y Z order
+ else if(x0>=z0) { i1=1; j1=0; k1=0; i2=1; j2=0; k2=1; } // X Z Y order
+ else { i1=0; j1=0; k1=1; i2=1; j2=0; k2=1; } // Z X Y order
+ }
+ else { // x0<y0
+ if(y0<z0) { i1=0; j1=0; k1=1; i2=0; j2=1; k2=1; } // Z Y X order
+ else if(x0<z0) { i1=0; j1=1; k1=0; i2=0; j2=1; k2=1; } // Y Z X order
+ else { i1=0; j1=1; k1=0; i2=1; j2=1; k2=0; } // Y X Z order
+ }
+ // A step of (1,0,0) in (i,j,k) means a step of (1-c,-c,-c) in (x,y,z),
+ // a step of (0,1,0) in (i,j,k) means a step of (-c,1-c,-c) in (x,y,z), and
+ // a step of (0,0,1) in (i,j,k) means a step of (-c,-c,1-c) in (x,y,z), where
+ // c = 1/6.
+ var x1 = x0 - i1 + G3; // Offsets for second corner in (x,y,z) coords
+ var y1 = y0 - j1 + G3;
+ var z1 = z0 - k1 + G3;
+ var x2 = x0 - i2 + 2.0*G3; // Offsets for third corner in (x,y,z) coords
+ var y2 = y0 - j2 + 2.0*G3;
+ var z2 = z0 - k2 + 2.0*G3;
+ var x3 = x0 - 1.0 + 3.0*G3; // Offsets for last corner in (x,y,z) coords
+ var y3 = y0 - 1.0 + 3.0*G3;
+ var z3 = z0 - 1.0 + 3.0*G3;
+ // Work out the hashed gradient indices of the four simplex corners
+ var ii = i & 255;
+ var jj = j & 255;
+ var kk = k & 255;
+ var gi0 = this.perm[ii+this.perm[jj+this.perm[kk]]] % 12;
+ var gi1 = this.perm[ii+i1+this.perm[jj+j1+this.perm[kk+k1]]] % 12;
+ var gi2 = this.perm[ii+i2+this.perm[jj+j2+this.perm[kk+k2]]] % 12;
+ var gi3 = this.perm[ii+1+this.perm[jj+1+this.perm[kk+1]]] % 12;
+ // Calculate the contribution from the four corners
+ var t0 = 0.6 - x0*x0 - y0*y0 - z0*z0;
+ if(t0<0) n0 = 0.0;
+ else {
+ t0 *= t0;
+ n0 = t0 * t0 * this.dot(this.grad3[gi0], x0, y0, z0);
+ }
+ var t1 = 0.6 - x1*x1 - y1*y1 - z1*z1;
+ if(t1<0) n1 = 0.0;
+ else {
+ t1 *= t1;
+ n1 = t1 * t1 * this.dot(this.grad3[gi1], x1, y1, z1);
+ }
+ var t2 = 0.6 - x2*x2 - y2*y2 - z2*z2;
+ if(t2<0) n2 = 0.0;
+ else {
+ t2 *= t2;
+ n2 = t2 * t2 * this.dot(this.grad3[gi2], x2, y2, z2);
+ }
+ var t3 = 0.6 - x3*x3 - y3*y3 - z3*z3;
+ if(t3<0) n3 = 0.0;
+ else {
+ t3 *= t3;
+ n3 = t3 * t3 * this.dot(this.grad3[gi3], x3, y3, z3);
+ }
+ // Add contributions from each corner to get the final noise value.
+ // The result is scaled to stay just inside [-1,1]
+ return 32.0*(n0 + n1 + n2 + n3);
+};
View
@@ -1,6 +1,6 @@
<html><head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
-<title>ProceduralTest</title>
+<title>RunningBrushes</title>
<script type="text/javascript" src="runningbrushes.js"></script>
</head>

0 comments on commit 6a54b3b

Please sign in to comment.