Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

Added two more projects

  • Loading branch information...
commit ef9b975f46eea2ddc882428a5dcc96323703768e 1 parent 6a54b3b
@ChrisJan00 authored
View
2  circlesquids.html → circlesquids/circlesquids.html
@@ -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%">
View
0  circlesquid.js → circlesquids/circlesquids.js
File renamed without changes
View
15 consumed.html
@@ -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
114 consumed.js
@@ -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 index.html
@@ -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>
View
110 oniondoodler/oniondoodler.html
@@ -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>
View
179 perlinsimplex.js
@@ -1,179 +0,0 @@
-// 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
0  runningbrushes.html → runningbrushes/runningbrushes.html
File renamed without changes
View
0  runningbrushes.js → runningbrushes/runningbrushes.js
File renamed without changes
View
0  graphicsmanager.js → vignettes/graphicsmanager.js
File renamed without changes
View
47 vignettes/main.js
@@ -0,0 +1,47 @@
+var graphics = new GraphicsManager();
+var objectMouse = new ClickableObjectManager();
+var mainScene = new SceneManager();
+
+function prepareGame() {
+
+ graphics.init();
+
+ graphics.bgLayer = graphics.createLayer();
+ graphics.shapesLayer = graphics.createLayer();
+ graphics.controlsLayer = graphics.createLayer();
+
+ prepareBackground();
+
+ graphics.redraw();
+
+ objectMouse.registerCanvas( graphics.gameCanvas );
+
+ mainScene.init();
+ objectMouse.registerObject( mainScene );
+}
+
+function prepareBackground() {
+ var ctxt = graphics.getContext(graphics.bgLayer);
+ ctxt.fillStyle="#262626";
+ ctxt.fillRect(0, 0, graphics.width, graphics.height);
+ graphics.markAll();
+}
+
+
+function launchGame() {
+ prepareGame();
+ mainScene.draw();
+}
+
+function colorSquare(oldColor) {
+ if (oldColor == "#CC52AA")
+ return "#234567";
+ if (oldColor == "#234567")
+ return "#43927D";
+ if (oldColor == "#43927D")
+ return "#CC52AA";
+ // default
+ return "#CC52AA";
+}
+
+
View
0  mousemanager.js → vignettes/mousemanager.js
File renamed without changes
View
74 vignettes/rects.js
@@ -0,0 +1,74 @@
+var RectObject = function(x,y,w,h) {
+ var self = this;
+
+ self.dragging = false;
+ self.draggable = true;
+
+ self.setDimensions = function(x,y,w,h) {
+ self.x = x;
+ self.y = y;
+ self.width = w;
+ self.height = h;
+ self.originalX = self.x;
+ self.originalY = self.y;
+ self.originalWidth = self.width;
+ self.originalHeight = self.height;
+ }
+
+ self.setDimensions(x,y,w,h);
+
+ self.setColor = function(c) {
+ self.color = c;
+ self.draw();
+ }
+
+ self.draw = function() {
+ var ctxt = graphics.getContext(graphics.shapesLayer);
+ ctxt.fillStyle = self.color;
+ ctxt.fillRect(self.x, self.y, self.width, self.height);
+ graphics.mark(self.x, self.y, self.width, self.height);
+ //graphics.redraw();
+ }
+
+ self.undraw = function() {
+ var ctxt = graphics.getContext(graphics.shapesLayer);
+ ctxt.clearRect(self.x, self.y, self.width, self.height);
+ graphics.mark(self.x, self.y, self.width, self.height);
+ //graphics.redraw();
+ }
+
+ self.contains = function(x, y) {
+ return x >= self.x && x <= self.x + self.width && y >= self.y && y <= self.y + self.height;
+ }
+
+ ////////////////////////////////////////////////////////////////////////
+ // DRAG AROUND
+ self.pressed = function(mouseX, mouseY, hasMouse) {
+ if (!self.draggable)
+ return;
+ if (!hasMouse) {
+ self.dragging = false;
+ return;
+ }
+ self.dragging = true;
+ self.dx = self.x - mouseX;
+ self.dy = self.y - mouseY;
+ self.drag(mouseX, mouseY);
+ }
+
+ self.released = function(mouseX, mouseY, hasMouse) {
+ self.dragging = false;
+ }
+
+ self.drag = function(mouseX, mouseY, hasMouse) {
+ if (!self.dragging || !self.draggable)
+ return;
+
+ self.undraw();
+ self.x = mouseX + self.dx;
+ self.y = mouseY + self.dy;
+ self.draw();
+ }
+
+ ////////////////////////////////////////////////////////////////////////
+}
View
307 vignettes/scene.js
@@ -0,0 +1,307 @@
+// zoomable scene
+function randColor(n) {
+// switch(Math.floor(Math.random() * 4)) {
+ switch(n % 6) {
+ case 0: return "#CC52AA";
+ case 1: return "#234567";
+ case 2: return "#43927D";
+ case 3: return "#B29311";
+ case 7: return "#CC52AA";
+ case 6: return "#234567";
+ case 5: return "#43927D";
+ case 4: return "#B29311";
+ }
+}
+
+// we have to translate all coords according to zoom
+var SceneManager = function() {
+ var self = this;
+
+ self.vignetteWidth = 800;
+ self.vignetteHeight = 600;
+ self.vignetteDx = 100;
+ self.vignetteDy = 75;
+
+ self.totalWidth = self.vignetteWidth * 4 + self.vignetteDx * 4;
+ self.totalHeight = self.vignetteHeight * 4 + self.vignetteDy * 4;
+
+ self.viewX = 0;
+ self.viewY = 0;
+ self.viewWidth = self.totalWidth;
+ self.viewHeight = self.totalHeight;
+
+ self.rects = [];
+
+ self.init = function() {
+ self.x = 0;
+ self.y = 0;
+ self.width = graphics.width;
+ self.height = graphics.height;
+
+ for (var y = 0; y < 4; y++)
+ for (var x = 0; x < 4; x++) {
+ self.rects.push(new RectObject(self.vignetteDx/2 + x*(self.vignetteWidth+self.vignetteDx),
+ self.vignetteDy/2 + y*(self.vignetteHeight + self.vignetteDy), self.vignetteWidth, self.vignetteHeight));
+ self.rects[self.rects.length-1].color = randColor((x+1)*(y%3+1));
+ self.rects[self.rects.length-1].gridPos = x + y*4;
+ }
+ self.repositionItems();
+ }
+
+ self.repositionItems = function() {
+ var xScale = graphics.width / self.viewWidth;
+ var yScale = graphics.height / self.viewHeight;
+ for (var ii=0; ii < self.rects.length; ii++) {
+ self.rects[ii].x = Math.floor((self.rects[ii].originalX - self.viewX)* xScale);
+ self.rects[ii].y = Math.floor((self.rects[ii].originalY - self.viewY) * yScale);
+ self.rects[ii].width = Math.floor(self.rects[ii].originalWidth * xScale);
+ self.rects[ii].height = Math.floor(self.rects[ii].originalHeight * yScale);
+ }
+ }
+
+ self.setView = function(x, y, width, height) {
+ self.viewX = x;
+ if (self.viewX < 0)
+ self.viewX = 0;
+
+ self.viewY = y;
+ if (self.viewY < 0)
+ self.viewY = 0;
+
+ self.viewWidth = Math.min(width, self.totalWidth);
+ if (self.viewX + self.viewWidth >= self.totalWidth)
+ self.viewX = self.totalWidth - self.viewWidth;
+
+ self.viewHeight = Math.min(height, self.totalHeight);
+ if (self.viewY + self.viewHeight >= self.totalHeight)
+ self.viewY = self.totalHeight - self.viewHeight;
+
+ self.repositionItems();
+ }
+
+ self.draw = function() {
+ for (var ii=0; ii < self.rects.length; ii++)
+ if (self.rects[ii].x < graphics.width && self.rects[ii].x + self.rects[ii].width >= 0
+ && self.rects[ii].y < graphics.height && self.rects[ii].y + self.rects[ii].height >= 0)
+ self.rects[ii].draw();
+ graphics.redraw();
+ }
+
+ self.undraw = function() {
+ for (var ii=0; ii < self.rects.length; ii++)
+ if (self.rects[ii].x < graphics.width && self.rects[ii].x + self.rects[ii].width >= 0
+ && self.rects[ii].y < graphics.height && self.rects[ii].y + self.rects[ii].height >= 0)
+ self.rects[ii].undraw();
+ graphics.redraw();
+ }
+
+ /////////////////////////////////////
+ self.convertFromMouseX = function(mouseX) {
+ var invXScale = self.viewWidth / graphics.width;
+ return self.viewX + mouseX * invXScale;
+ }
+ self.convertFromMouseY = function(mouseY) {
+ var invYScale = self.viewHeight / graphics.height;
+ return self.viewY + mouseY * invYScale;
+ }
+ self.convertToMouseX = function(localX) {
+ var xScale = graphics.width / self.viewWidth;
+ return Math.floor((localX - self.viewX) * xScale);
+ }
+ self.convertToMouseY = function(localY) {
+ var yScale = graphics.height / self.viewHeight;
+ return Math.floor((localY - self.viewY) * yScale);
+ }
+
+ self.zoomed = false;
+ self.moving = false;
+ self.pressed = function(mouseX, mouseY, hasMouse) {
+ if (self.moving)
+ return;
+ if (!self.zoomed) {
+ for (var ii=0; ii<self.rects.length; ii++) {
+ if (self.rects[ii].contains(mouseX, mouseY)) {
+ self.zoomed = self.rects[ii];
+ self.clearControls();
+ self.gotoRect(ii);
+ break;
+ }
+ }
+ } else {
+ // corners
+ if ((mouseX < self.zoomed.x && mouseY < self.zoomed.y) ||
+ (mouseX > self.zoomed.x + self.zoomed.width && mouseY < self.zoomed.y) ||
+ (mouseX < self.zoomed.x && mouseY > self.zoomed.y + self.zoomed.height) ||
+ (mouseX > self.zoomed.x + self.zoomed.width && mouseY > self.zoomed.y + self.zoomed.height)) {
+ self.zoomed = false;
+ self.clearControls();
+ self.gotoView(0, 0, self.totalWidth, self.totalHeight);
+ return;
+ }
+
+ var gridX = self.zoomed.gridPos % 4;
+ var gridY = Math.floor(self.zoomed.gridPos / 4);
+ var gridPos = self.zoomed.gridPos;
+ if (mouseX < self.zoomed.x && gridX>0)
+ gridPos = gridX-1+gridY*4;
+
+ if (mouseX > self.zoomed.x + self.zoomed.width && gridX<3)
+ gridPos = gridX+1+gridY*4;
+
+ if (mouseY < self.zoomed.y && gridY>0)
+ gridPos = gridX+(gridY-1)*4;
+
+ if (mouseY > self.zoomed.y + self.zoomed.height && gridY<3)
+ gridPos = gridX+(gridY+1)*4;
+
+ if (gridPos != self.zoomed.gridPos) {
+ for (var ii=0; ii<self.rects.length; ii++)
+ if (self.rects[ii].gridPos == gridPos) {
+ self.zoomed = self.rects[ii];
+ self.clearControls();
+ self.gotoRect(ii);
+ break;
+ }
+ }
+ }
+ }
+
+ self.gotoRect = function(ii) {
+ self.gotoView( self.rects[ii].originalX - self.vignetteDx*1.5, self.rects[ii].originalY - self.vignetteDy*1.5,
+ self.rects[ii].originalWidth + self.vignetteDx*3, self.rects[ii].originalHeight + self.vignetteDy * 3);
+ }
+
+ self.clearControls = function() {
+ var ctxt = graphics.getContext( graphics.controlsLayer );
+ ctxt.clearRect(0,0,graphics.width,graphics.height);
+ graphics.mark(0,0,graphics.width,graphics.height);
+ self.showUpControl = false;
+ self.showDownControl = false;
+ self.showLeftControl = false;
+ self.showRightControl = false;
+ self.showZoomControls = false;
+ }
+
+ self.released = function(mouseX, mouseY, hasMouse) {
+
+ }
+
+ self.hover = function(mouseX, mouseY, hasMouse) {
+ if (self.moving || !self.zoomed)
+ return;
+
+ var showZoomControls = false;
+ var showUpControl = false;
+ var showDownControl = false;
+ var showLeftControl = false;
+ var showRightControl = false;
+ if ((mouseX < self.zoomed.x && mouseY < self.zoomed.y) ||
+ (mouseX > self.zoomed.x + self.zoomed.width && mouseY < self.zoomed.y) ||
+ (mouseX < self.zoomed.x && mouseY > self.zoomed.y + self.zoomed.height) ||
+ (mouseX > self.zoomed.x + self.zoomed.width && mouseY > self.zoomed.y + self.zoomed.height)) {
+ showZoomControls = true;
+ } else {
+ var gridX = self.zoomed.gridPos % 4;
+ var gridY = Math.floor(self.zoomed.gridPos / 4);
+ var gridPos = self.zoomed.gridPos;
+ if (mouseX < self.zoomed.x && gridX>0)
+ showLeftControl = true;
+
+ if (mouseX > self.zoomed.x + self.zoomed.width && gridX<3)
+ showRightControl = true;
+
+ if (mouseY < self.zoomed.y && gridY>0)
+ showUpControl = true;
+
+ if (mouseY > self.zoomed.y + self.zoomed.height && gridY<3)
+ showDownControl = true;
+ }
+
+ var ctxt = graphics.getContext( graphics.controlsLayer );
+ ctxt.fillStyle = "rgba(256,256,256,0.6)";
+ var x1 = self.zoomed.x + self.zoomed.width;
+ var y1 = self.zoomed.y + self.zoomed.height;
+ if (showZoomControls && !self.showZoomControls) {
+ graphics.mark(0,0,graphics.width, graphics.height);
+ ctxt.fillRect(0, 0, self.zoomed.x, self.zoomed.y);
+ ctxt.fillRect(x1, 0, graphics.width - x1, self.zoomed.y);
+ ctxt.fillRect(0, y1, self.zoomed.x, graphics.height - y1);
+ ctxt.fillRect(x1, y1, graphics.width - x1, graphics.height - y1);
+ } else if (self.showZoomControls && !showZoomControls) {
+ graphics.mark(0,0,graphics.width, graphics.height);
+ ctxt.clearRect(0, 0, self.zoomed.x, self.zoomed.y);
+ ctxt.clearRect(x1, 0, graphics.width - x1, self.zoomed.y);
+ ctxt.clearRect(0, y1, self.zoomed.x, graphics.height - y1);
+ ctxt.clearRect(x1, y1, graphics.width - x1, graphics.height - y1);
+ }
+ self.showZoomControls = showZoomControls;
+
+ if (showLeftControl && !self.showLeftControl) {
+ graphics.mark(0, self.zoomed.y, self.zoomed.x, self.zoomed.height);
+ ctxt.fillRect(0, self.zoomed.y, self.zoomed.x, self.zoomed.height);
+ } else if (self.showLeftControl && !showLeftControl) {
+ graphics.mark(0, self.zoomed.y, self.zoomed.x, self.zoomed.height);
+ ctxt.clearRect(0, self.zoomed.y, self.zoomed.x, self.zoomed.height);
+ }
+ self.showLeftControl = showLeftControl;
+
+ if (showRightControl && !self.showRightControl) {
+ graphics.mark(x1, self.zoomed.y, graphics.width - x1, self.zoomed.height);
+ ctxt.fillRect(x1, self.zoomed.y, graphics.width - x1, self.zoomed.height);
+ } else if (self.showRightControl && !showRightControl) {
+ graphics.mark(x1, self.zoomed.y, graphics.width - x1, self.zoomed.height);
+ ctxt.clearRect(x1, self.zoomed.y, graphics.width - x1, self.zoomed.height);
+ }
+ self.showRightControl = showRightControl;
+
+ if (showUpControl && !self.showUpControl) {
+ graphics.mark(self.zoomed.x, 0, self.zoomed.width, self.zoomed.y);
+ ctxt.fillRect(self.zoomed.x, 0, self.zoomed.width, self.zoomed.y);
+ } else if (self.showUpControl && !showUpControl) {
+ graphics.mark(self.zoomed.x, 0, self.zoomed.width, self.zoomed.y);
+ ctxt.clearRect(self.zoomed.x, 0, self.zoomed.width, self.zoomed.y);
+ }
+ self.showUpControl = showUpControl;
+
+ if (showDownControl && !self.showDownControl) {
+ graphics.mark(self.zoomed.x, y1, self.zoomed.width, graphics.height - y1);
+ ctxt.fillRect(self.zoomed.x, y1, self.zoomed.width, graphics.height - y1);
+ } else if (self.showDownControl && !showDownControl) {
+ graphics.mark(self.zoomed.x, y1, self.zoomed.width, graphics.height - y1);
+ ctxt.clearRect(self.zoomed.x, y1, self.zoomed.width, graphics.height - y1);
+ }
+ self.showDownControl = showDownControl;
+
+ graphics.redraw();
+ }
+
+ self.gotoView = function(vx, vy, vw, vh) {
+ self.viewXDest = vx;
+ self.viewYDest = vy;
+ self.viewWidthDest = vw;
+ self.viewHeightDest = vh;
+
+ self.frame = 30;
+ self.frameDelay = 15;
+ self.viewXInc = ( self.viewXDest - self.viewX ) / self.frame;
+ self.viewYInc = ( self.viewYDest - self.viewY ) / self.frame;
+ self.viewWidthInc = ( self.viewWidthDest - self.viewWidth ) / self.frame;
+ self.viewHeightInc = ( self.viewHeightDest - self.viewHeight ) / self.frame;
+ self.moving = true;
+ setTimeout(self.moveView, self.frameDelay);
+ }
+
+ self.moveView = function() {
+ self.undraw();
+ if (self.frame--) {
+ self.setView( self.viewXDest - self.viewXInc * self.frame, self.viewYDest - self.viewYInc * self.frame,
+ self.viewWidthDest - self.viewWidthInc * self.frame, self.viewHeightDest - self.viewHeightInc * self.frame);
+ setTimeout(self.moveView, self.frameDelay);
+ } else {
+ self.setView( self.viewXDest, self.viewYDest, self.viewWidthDest, self.viewHeightDest);
+ self.moving = false;
+ }
+ self.draw();
+ }
+
+}
View
19 vignettes/vignettes.html
@@ -0,0 +1,19 @@
+<html><head>
+<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
+<title>Vignettes</title>
+<script type="text/javascript" src="graphicsmanager.js"></script>
+<script type="text/javascript" src="mousemanager.js"></script>
+<script type="text/javascript" src="rects.js"></script>
+<script type="text/javascript" src="scene.js"></script>
+<script type="text/javascript" src="main.js"></script>
+</head>
+
+<body onload="launchGame();" bgcolor="#000000" style="font-family:sans-serif; height:100%">
+<center>
+<h1><br></h1>
+<canvas id="gameCanvas" style="image-rendering:
+optimizespeed ! important; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);" moz-opaque=""
+width="800" height="600"></canvas>
+</center>
+</body>
+</html>
Please sign in to comment.
Something went wrong with that request. Please try again.