library-mirrors/dat.gui
1
0
Fork 0
mirror of https://github.com/dataarts/dat.gui.git synced 2024-12-12 04:08:27 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

example is now officially awesome

Browse Source
This commit is contained in:
jonobr1 2011-01-26 16:25:40 -07:00
parent 678967c3d6
commit 64383925eb
4 changed files with 250 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
demo/demo.css
View File

@ -4,8 +4,8 @@
}
body {
padding: 0 20px 20px 20px;
font: 9.5px/13px Lucida Grande, sans-serif;
padding: 0 20px 20px 20px;
}
h1, h2, h3, h4, h5, h6 {
@ -46,6 +46,8 @@ pre {
font: 10px Monaco, monospace;
}
canvas { border: 1px solid #000; }
p { font-size: 125%; max-width: 530px; line-height: 18px; margin-bottom: 36px; }
a:link {

72
demo/demo.js
View File

@ -2,10 +2,16 @@ function DynamicText(message, width, height, textAscent) {
var _this = this;
this.growthSpeed = 0.1;
this.growthSpeed = 0.5;
this.minSize = 0;
this.maxSize = 5;
this.noiseScale = 300;
this.noiseStrength = 10;
this.stepSize = 1;
this.displayOutline = false;
var message = message;
this.width = width;
@ -13,6 +19,13 @@ function DynamicText(message, width, height, textAscent) {
this.textAscent = textAscent;
var colors = [
"#00aeff",
"#0fa954",
"#54396e",
"#e61d5f"
]
var r = document.createElement('canvas');
var s = r.getContext('2d');
@ -29,7 +42,7 @@ function DynamicText(message, width, height, textAscent) {
var pixels = [];
var particles = [];
s.font = "800 "+textAscent+"px helvetica, arial, sans-serif";
s.font = g.font = "800 "+textAscent+"px helvetica, arial, sans-serif";
// Set reference onto particles
for (var i = 0; i < 1000; i++) {
@ -53,10 +66,20 @@ function DynamicText(message, width, height, textAscent) {
g.clearRect(0, 0, width, height);
for (var i = 0; i < particles.length; i++) {
particles[i].update();
particles[i].draw();
if(_this.displayOutline) {
g.globalCompositeOperation = "source-over";
g.strokeStyle = "#000";
g.lineWidth = .25;
g.strokeText(message, 0, textAscent);
}
g.globalCompositeOperation = "darker";
for (var i = 0; i < particles.length; i++) {
g.fillStyle = colors[i%colors.length];
particles[i].render();
}
};
var getPosition = function(i) {
@ -83,23 +106,28 @@ function DynamicText(message, width, height, textAscent) {
setInterval(render, 30);
function Particle(x, y, c) {
this.x = x;
this.y = y;
this.r = 0;
this.update = function() {
this.x += Math.random() - Math.random();
this.y += Math.random() - Math.random();
}
this.draw = function() {
var c = getColor(this.x, this.y);
if (c == "rgb(255,255,255)") {
this.r -= _this.growthSpeed;
} else {
this.r += _this.growthSpeed;
}
this.r = constrain(this.r, _this.minSize, _this.maxSize);
g.beginPath();
g.arc(this.x, this.y, this.r, 0, Math.PI*2, false);
this.p = { x: x, y: y };
this.r = 0;
this.render = function() {
var c = getColor(this.x, this.y);
var angle = noise(this.p.x/_this.noiseScale, this.p.y/_this.noiseScale) * _this.noiseStrength;
var c = getColor(this.p.x, this.p.y);
if (c == "rgb(255,255,255)") {
this.r -= _this.growthSpeed;
} else {
this.r += _this.growthSpeed;
}
this.p.x += Math.cos(angle) * _this.stepSize;
this.p.y += -Math.sin(angle) * _this.stepSize;
this.r = constrain(this.r, _this.minSize, _this.maxSize);
if(this.r <= _this.minSize) {
this.p.x = Math.random() * width;
this.p.y = Math.random() * height;
}
g.beginPath();
g.arc(this.p.x, this.p.y, this.r, 0, Math.PI*2, false);
g.fill();
}
}

181
demo/improvedNoise.js Normal file
View File

@ -0,0 +1,181 @@
// http://mrl.nyu.edu/~perlin/noise/
var ImprovedNoise = function () {
var p = [151,160,137,91,90,15,131,13,201,95,96,53,194,233,7,225,140,36,103,30,69,142,8,99,37,240,21,10,
23,190,6,148,247,120,234,75,0,26,197,62,94,252,219,203,117,35,11,32,57,177,33,88,237,149,56,87,
174,20,125,136,171,168,68,175,74,165,71,134,139,48,27,166,77,146,158,231,83,111,229,122,60,211,
133,230,220,105,92,41,55,46,245,40,244,102,143,54,65,25,63,161,1,216,80,73,209,76,132,187,208,
89,18,169,200,196,135,130,116,188,159,86,164,100,109,198,173,186,3,64,52,217,226,250,124,123,5,
202,38,147,118,126,255,82,85,212,207,206,59,227,47,16,58,17,182,189,28,42,223,183,170,213,119,
248,152,2,44,154,163,70,221,153,101,155,167,43,172,9,129,22,39,253,19,98,108,110,79,113,224,232,
178,185,112,104,218,246,97,228,251,34,242,193,238,210,144,12,191,179,162,241,81,51,145,235,249,
14,239,107,49,192,214,31,181,199,106,157,184,84,204,176,115,121,50,45,127,4,150,254,138,236,205,
93,222,114,67,29,24,72,243,141,128,195,78,66,215,61,156,180];
for ( var i = 0; i < 256 ; i++ ) {
p[ 256 + i ] = p[ i ];
}
function fade( t ) {
return t * t * t * ( t * ( t * 6 - 15 ) + 10 );
}
function lerp( t, a, b ) {
return a + t * ( b - a );
}
function grad( hash, x, y, z ) {
var h = hash & 15;
var u = h < 8 ? x : y, v = h < 4 ? y : h == 12 || h == 14 ? x : z;
return ( ( h & 1 ) == 0 ? u : -u ) + ( ( h & 2 ) == 0 ? v : -v );
}
return {
noise: function ( x, y, z ) {
var floorX = Math.floor( x ), floorY = Math.floor( y ), floorZ = Math.floor( z );
var X = floorX & 255, Y = floorY & 255, Z = floorZ & 255;
x -= floorX;
y -= floorY;
z -= floorZ;
var xMinus1 = x -1, yMinus1 = y - 1, zMinus1 = z - 1;
var u = fade( x ), v = fade( y ), w = fade( z );
var A = p[ X ] + Y, AA = p[ A ] + Z, AB = p[ A + 1 ] + Z, B = p[ X + 1 ] + Y, BA = p[ B ] + Z, BB = p[ B + 1 ] + Z;
return lerp( w, lerp( v, lerp( u, grad( p[ AA ], x, y, z ),
grad( p[ BA ], xMinus1, y, z ) ),
lerp( u, grad( p[ AB ], x, yMinus1, z ),
grad( p[ BB ], xMinus1, yMinus1, z ) ) ),
lerp( v, lerp( u, grad( p[ AA + 1 ], x, y, zMinus1 ),
grad( p[ BA + 1 ], xMinus1, y, z - 1 ) ),
lerp( u, grad( p[ AB + 1 ], x, yMinus1, zMinus1 ),
grad( p[ BB + 1 ], xMinus1, yMinus1, zMinus1 ) ) ) );
}
}
}
var currentRandom = Math.random;
// Pseudo-random generator
function Marsaglia(i1, i2) {
// from http://www.math.uni-bielefeld.de/~sillke/ALGORITHMS/random/marsaglia-c
var z=i1 || 362436069, w= i2 || 521288629;
var nextInt = function() {
z=(36969*(z&65535)+(z>>>16)) & 0xFFFFFFFF;
w=(18000*(w&65535)+(w>>>16)) & 0xFFFFFFFF;
return (((z&0xFFFF)<<16) | (w&0xFFFF)) & 0xFFFFFFFF;
};
this.nextDouble = function() {
var i = nextInt() / 4294967296;
return i < 0 ? 1 + i : i;
};
this.nextInt = nextInt;
}
Marsaglia.createRandomized = function() {
var now = new Date();
return new Marsaglia((now / 60000) & 0xFFFFFFFF, now & 0xFFFFFFFF);
};
// Noise functions and helpers
function PerlinNoise(seed) {
var rnd = seed !== undefined ? new Marsaglia(seed) : Marsaglia.createRandomized();
var i, j;
// http://www.noisemachine.com/talk1/17b.html
// http://mrl.nyu.edu/~perlin/noise/
// generate permutation
var p = new Array(512);
for(i=0;i<256;++i) { p[i] = i; }
for(i=0;i<256;++i) { var t = p[j = rnd.nextInt() & 0xFF]; p[j] = p[i]; p[i] = t; }
// copy to avoid taking mod in p[0];
for(i=0;i<256;++i) { p[i + 256] = p[i]; }
function grad3d(i,x,y,z) {
var h = i & 15; // convert into 12 gradient directions
var u = h<8 ? x : y,
v = h<4 ? y : h===12||h===14 ? x : z;
return ((h&1) === 0 ? u : -u) + ((h&2) === 0 ? v : -v);
}
function grad2d(i,x,y) {
var v = (i & 1) === 0 ? x : y;
return (i&2) === 0 ? -v : v;
}
function grad1d(i,x) {
return (i&1) === 0 ? -x : x;
}
function lerp(t,a,b) { return a + t * (b - a); }
this.noise3d = function(x, y, z) {
var X = Math.floor(x)&255, Y = Math.floor(y)&255, Z = Math.floor(z)&255;
x -= Math.floor(x); y -= Math.floor(y); z -= Math.floor(z);
var fx = (3-2*x)*x*x, fy = (3-2*y)*y*y, fz = (3-2*z)*z*z;
var p0 = p[X]+Y, p00 = p[p0] + Z, p01 = p[p0 + 1] + Z, p1 = p[X + 1] + Y, p10 = p[p1] + Z, p11 = p[p1 + 1] + Z;
return lerp(fz,
lerp(fy, lerp(fx, grad3d(p[p00], x, y, z), grad3d(p[p10], x-1, y, z)),
lerp(fx, grad3d(p[p01], x, y-1, z), grad3d(p[p11], x-1, y-1,z))),
lerp(fy, lerp(fx, grad3d(p[p00 + 1], x, y, z-1), grad3d(p[p10 + 1], x-1, y, z-1)),
lerp(fx, grad3d(p[p01 + 1], x, y-1, z-1), grad3d(p[p11 + 1], x-1, y-1,z-1))));
};
this.noise2d = function(x, y) {
var X = Math.floor(x)&255, Y = Math.floor(y)&255;
x -= Math.floor(x); y -= Math.floor(y);
var fx = (3-2*x)*x*x, fy = (3-2*y)*y*y;
var p0 = p[X]+Y, p1 = p[X + 1] + Y;
return lerp(fy,
lerp(fx, grad2d(p[p0], x, y), grad2d(p[p1], x-1, y)),
lerp(fx, grad2d(p[p0 + 1], x, y-1), grad2d(p[p1 + 1], x-1, y-1)));
};
this.noise1d = function(x) {
var X = Math.floor(x)&255;
x -= Math.floor(x);
var fx = (3-2*x)*x*x;
return lerp(fx, grad1d(p[X], x), grad1d(p[X+1], x-1));
};
}
// these are lifted from Processing.js
// processing defaults
var noiseProfile = { generator: undefined, octaves: 4, fallout: 0.5, seed: undefined};
function noise(x, y, z) {
if(noiseProfile.generator === undefined) {
// caching
noiseProfile.generator = new PerlinNoise(noiseProfile.seed);
}
var generator = noiseProfile.generator;
var effect = 1, k = 1, sum = 0;
for(var i=0; i<noiseProfile.octaves; ++i) {
effect *= noiseProfile.fallout;
switch (arguments.length) {
case 1:
sum += effect * (1 + generator.noise1d(k*x))/2; break;
case 2:
sum += effect * (1 + generator.noise2d(k*x, k*y))/2; break;
case 3:
sum += effect * (1 + generator.noise3d(k*x, k*y, k*z))/2; break;
}
k *= 2;
}
return sum;
};

30
index.html
View File

@ -6,7 +6,7 @@
<link href="gui.css" media="screen" rel="stylesheet" type="text/css" />
<link href="demo/demo.css" media="screen" rel="stylesheet" type="text/css" />
<!-- <script type="text/javascript" src="http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.js"></script>-->
<script type="text/javascript" src="http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.js"></script>
<script type="text/javascript" src="gui.js"></script>
<script type="text/javascript" src="controllers/slider.js"></script>
@ -15,6 +15,7 @@
<script type="text/javascript" src="controllers/controller.number.js"></script>
<script type="text/javascript" src="controllers/controller.boolean.js"></script>
<script type="text/javascript" src="controllers/controller.function.js"></script>
<script type="text/javascript" src="demo/improvedNoise.js"></script>
<script type="text/javascript" src="demo/demo.js"></script>
<script type="text/javascript">
var controllableObject =
@ -35,24 +36,27 @@
var testDisplay = new DynamicText("gui-dat", 600, 300, 160);
// prettyPrint();
prettyPrint();
GUI.start();
// Creates a number box
GUI.add(testDisplay, "minSize", 0, 1);
// Creates a number box
GUI.add(testDisplay, "maxSize", 1, 5);
// Creates a slider (min, max)
GUI.add(testDisplay, "growthSpeed", 0.01, 0.5);
GUI.add(testDisplay, "growthSpeed", 0.01, 1);
// Creates a slider (min, max)
GUI.add(testDisplay, "noiseStrength", 10, 100);
// Creates a slider (min, max)
GUI.add(testDisplay, "stepSize", 1, 4);
// Creates a text field
GUI.add(testDisplay, "message");
// Creates a checkbox
GUI.add(controllableObject, "booleanProperty");
GUI.add(testDisplay, "displayOutline");
// Creates a button
GUI.add(controllableObject, "functionProperty")
@ -73,17 +77,15 @@
</head>
<body>
<h1><a href = "http://twitter.com/guidat"><img src = "demo/assets/favicon.gif" border = "0" alt = "GUI-DAT flag" /></a><span id = "helvetica-demo"></span></h1>
<div id = "helvetica-test"></div>
<p>
<strong>gui-dat</strong> is a lightweight controller library for JavaScript. It allows you to easily manipulate variables and fire functions on the fly.
</p>
<p>&bull; <a href="#"><strong>Download the minified source</strong></a> <small>[2.3kb]</small><br/>
&bull; <a href="http://github.com/jonobr1/GUI-DAT">Contribute on GitHub!</a></p>
<h2>Basic Usage</h2>
<pre id="demo-pre" class="prettyprint">
&lt;script type=&quot;text/javascript&quot; src=&quot;gui.min.js&quot;&gt;&lt;/script&gt;
&lt;script type=&quot;text/javascript&quot;&gt;
@ -105,13 +107,13 @@ var controllableObject =
window.onload = function() {
GUI.start();
// Creates a number box
GUI.add(controllableObject, &quot;numberProperty&quot;);
// Creates a slider (min, max)
GUI.add(controllableObject, &quot;constrainedNum&quot;, -100, 100)
// Creates a slider with notches
GUI.add(controllableObject, &quot;notchedNum&quot;, 0, 800, 100)