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

Commented up the source to FizzyText and added setName to the pre on index.html

Browse Source
This commit is contained in:
George Michael Brower 2011-01-28 13:26:38 -07:00
parent 918acf8e33
commit 5a1c06798e
3 changed files with 136 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
demo/demo.css
View File

@ -107,12 +107,9 @@ footer {
pre a:link,
pre a:visited,
pre a:active {
color: #ccc;
}
pre a:active,
pre a:hover {
color: #e61d5f;
color: #ccc;
}
code {
@ -128,7 +125,7 @@ code strong {
.str { color: #0fa954; }
.kwd { color: #e61d5f; }
.com { color: #555; }
.typ { color: #606; }
.typ { color: #ccc; }
.lit { color: #00aeff; }
.pun, .opn, .clo { color: #777; }
.pln { color: #ccc; }

150
demo/demo.js
View File

@ -1,31 +1,58 @@
function FizzyText(message) {
// These are the variables that we manipulate with gui-dat.
// Notice they're all defined with "this". That makes them public.
// Otherwise, gui-dat can't see them.
this.growthSpeed = 0.5; // how fast do particles change size?
this.maxSize = 3.2; // how big can they get?
this.noiseStrength = 10; // how turbulent is the flow?
this.speed = 0.4; // how fast do particles move?
this.displayOutline = false; // should we draw the message as a stroke?
// __defineGetter__ and __defineSetter__ makes JavaScript believe that
// we've defined a variable 'this.message'. This way, whenever we
// change the message variable, we can call some more functions.
this.__defineGetter__("message", function () {
return message;
});
this.__defineSetter__("message", function (m) {
message = m;
createBitmap(message);
});
// We can even add functions to the GUI! As long as they have
// 0 arguments, we can call them from the dat-gui panel.
this.explode = function() {
var mag = Math.random()*30+30;
for (var i in particles) {
var angle= Math.random()*Math.PI*2;
particles[i].vx = Math.cos(angle)*mag;
particles[i].vy = Math.sin(angle)*mag;
}
};
////////////////////////////////////////////////////////////////
var _this = this;
var width = 550;
var height = 200;
var textAscent = 82;
var textLeft = 80;
this.growthSpeed = 0.5;
this.minSize = 0;
this.maxSize = 3.2;
this.noiseScale = 300;
this.noiseStrength = 10;
this.speed = 0.4;
this.displayOutline = false;
this.textAscent = textAscent;
var textOffsetLeft = 80;
var noiseScale = 300;
var colors = ["#00aeff", "#0fa954", "#54396e", "#e61d5f"];
// This is the context we use to get a bitmap of text using
// the getImageData function.
var r = document.createElement('canvas');
var s = r.getContext('2d');
// This is the context we actually use to draw.
var c = document.createElement('canvas');
var g = c.getContext('2d');
@ -34,24 +61,33 @@ function FizzyText(message) {
r.setAttribute('height', height);
c.setAttribute('height', height);
// Add our demo to the HTML
document.getElementById('helvetica-demo').appendChild(c);
// Stores bitmap image
var pixels = [];
// Stores a list of particles
var particles = [];
// Set g.font to the same font as the bitmap canvas, incase we
// want to draw some outlines.
s.font = g.font = "800 " + textAscent + "px helvetica, arial, sans-serif";
// Set reference onto particles
// Instantiate some particles
for (var i = 0; i < 1000; i++) {
particles.push(new Particle(Math.random() * width, Math.random() * height));
}
var createBitmap = function (m) {
// This function creates a bitmap of pixels based on your message
// It's called every time we change the message property.
var createBitmap = function (msg) {
s.fillStyle = "#fff";
s.fillRect(0, 0, width, height);
s.fillStyle = "#222";
s.fillText(m, textLeft, textAscent);
s.fillText(msg, textOffsetLeft, textAscent);
// Pull reference
var imageData = s.getImageData(0, 0, width, height);
@ -59,6 +95,7 @@ function FizzyText(message) {
};
// Called once per frame, updates the animation.
var render = function () {
g.clearRect(0, 0, width, height);
@ -67,7 +104,7 @@ function FizzyText(message) {
g.globalCompositeOperation = "source-over";
g.strokeStyle = "#000";
g.lineWidth = .5;
g.strokeText(message, textLeft, textAscent);
g.strokeText(message, textOffsetLeft, textAscent);
}
g.globalCompositeOperation = "darker";
@ -79,6 +116,7 @@ function FizzyText(message) {
};
// Returns x, y coordinates for a given index in the pixel array.
var getPosition = function (i) {
return {
x: (i - (width * 4) * Math.floor(i / (width * 4))) / 4,
@ -86,6 +124,7 @@ function FizzyText(message) {
};
};
// Returns a color for a given pixel in the pixel array.
var getColor = function (x, y) {
var base = (Math.floor(y) * width + Math.floor(x)) * 4;
var c = {
@ -98,66 +137,77 @@ function FizzyText(message) {
return "rgb(" + c.r + "," + c.g + "," + c.b + ")";
};
this.__defineGetter__("message", function () {
return message;
});
this.__defineSetter__("message", function (m) {
message = m;
createBitmap(message);
});
this.explode = function() {
var mag = Math.random()*30+30;
for (var i in particles) {
var angle= Math.random()*Math.PI*2;
particles[i].vx = Math.cos(angle)*mag;
particles[i].vy = Math.sin(angle)*mag;
}
};
// This calls the setter we've defined above, so it also calls
// the createBitmap function.
this.message = message;
// This calls the render function every 30 milliseconds.
setInterval(render, 30);
// This class is responsible for drawing and moving those little
// colored dots.
function Particle(x, y, c) {
// Position
this.x = x;
this.y = y;
this.vx = 0;
this.vy = 0;
// Size of particle
this.r = 0;
this.render = function () {
var c = getColor(this.x, this.y);
var angle = noise(this.x / _this.noiseScale, this.y / _this.noiseScale) * _this.noiseStrength;
// This velocity is used by the explode function.
this.vx = 0;
this.vy = 0;
// Called every frame
this.render = function () {
// What color is the pixel we're sitting on top of?
var c = getColor(this.x, this.y);
// Where should we move?
var angle = noise(this.x / noiseScale, this.y / noiseScale) * _this.noiseStrength;
// Are we within the boundaries of the image?
var onScreen = this.x > 0 && this.x < width &&
this.y > 0 && this.y < height;
var isBlack = c != "rgb(255,255,255)" &&
onScreen;
var isBlack = c != "rgb(255,255,255)" && onScreen;
// If we're on top of a black pixel, grow.
// If not, shrink.
if (isBlack) {
this.r += _this.growthSpeed;
} else {
this.r -= _this.growthSpeed;
}
// This velocity is used by the explode function.
this.vx *= 0.5;
this.vy *= 0.5;
// Change our position based on the flow field and our
// explode velocity.
this.x += Math.cos(angle) * _this.speed + this.vx;
this.y += -Math.sin(angle) * _this.speed + this.vy;
this.r = constrain(this.r, _this.minSize, _this.maxSize);
if (this.r <= _this.minSize) {
this.y += -Math.sin(angle) * _this.speed + this.vy;
this.r = constrain(this.r, 0, _this.maxSize);
// If we're tiny, keep moving around until we find a black
// pixel.
if (this.r <= 0) {
this.x = Math.random() * width;
this.y = Math.random() * height;
return; // Don't draw!
}
if (this.r <= 0) {
return;
}
// Draw the circle.
g.beginPath();
g.arc(this.x, this.y, this.r, 0, Math.PI * 2, false);
g.fill();
}
}
var constrain = function (v, o1, o2) {

34
index.html
View File

@ -4,12 +4,14 @@
<link rel="icon" type="image/png" href="demo/assets/favicon.png" />
<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="gui.min.js"></script>
<script type="text/javascript" src="demo/improvedNoise.js"></script>
<script type="text/javascript" src="demo/demo.js"></script>
<script type="text/javascript">
window.onload = function() {
prettyPrint();
var fizzyText = new FizzyText("gui-dat");
@ -31,7 +33,7 @@
// Fires a function called "explode"
GUI.add(fizzyText, "explode")
.setName('Explode!'); // And changes the name
.setName('Explode!'); // Specify a custom name.
};
@ -60,7 +62,35 @@
</ul>
<h2>Basic Usage</h2>
<pre id="demo-pre" class="prettyprint"><span class="tag">&lt;script</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"text/javascript"</span><span class="pln"> </span><span class="atn">src</span><span class="pun">=</span><span class="atv">"gui.min.js"</span><span class="tag">&gt;&lt;/script&gt;</span><span class="pln"><br></span><span class="tag">&lt;script</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"text/javascript"</span><span class="tag">&gt;</span><span class="pln"><br><br>window</span><span class="pun">.</span><span class="pln">onload </span><span class="pun">=</span><span class="pln"> </span><span class="kwd">function</span><span class="pun">()</span><span class="pln"> </span><span class="pun">{</span><span class="pln"><br><br>&nbsp; &nbsp;</span><span class="kwd">var</span><span class="pln"> fizzyText </span><span class="pun">=</span><span class="pln"> </span><span class="kwd">new</span><span class="pln"> </span><span class="typ"><a href="demo/demo.js">FizzyText</a></span><span class="pun">(</span><span class="str">"gui-dat"</span><span class="pun">);</span><span class="pln"><br><br>&nbsp; &nbsp;GUI</span><span class="pun">.</span><span class="pln">start</span><span class="pun">();</span><span class="pln"><br>&nbsp; &nbsp;<br>&nbsp; &nbsp;</span><span class="com">// Adds a text field</span><span class="pln"><br>&nbsp; &nbsp;GUI</span><span class="pun">.</span><span class="pln">add</span><span class="pun">(</span><span class="pln">fizzyText</span><span class="pun">,</span><span class="pln"> </span><span class="str">"message"</span><span class="pun">);</span><span class="pln"><br>&nbsp; &nbsp;<br>&nbsp; &nbsp;</span><span class="com">// Adds sliders with min and max</span><span class="pln"><br>&nbsp; &nbsp;GUI</span><span class="pun">.</span><span class="pln">add</span><span class="pun">(</span><span class="pln">fizzyText</span><span class="pun">,</span><span class="pln"> </span><span class="str">"maxSize"</span><span class="pun">,</span><span class="pln"> </span><span class="lit">0.5</span><span class="pun">,</span><span class="pln"> </span><span class="lit">7</span><span class="pun">);</span><span class="pln"><br>&nbsp; &nbsp;GUI</span><span class="pun">.</span><span class="pln">add</span><span class="pun">(</span><span class="pln">fizzyText</span><span class="pun">,</span><span class="pln"> </span><span class="str">"growthSpeed"</span><span class="pun">,</span><span class="pln"> </span><span class="lit">0.01</span><span class="pun">,</span><span class="pln"> </span><span class="lit">1</span><span class="pun">);</span><span class="pln"><br>&nbsp; &nbsp;GUI</span><span class="pun">.</span><span class="pln">add</span><span class="pun">(</span><span class="pln">fizzyText</span><span class="pun">,</span><span class="pln"> </span><span class="str">"speed"</span><span class="pun">,</span><span class="pln"> </span><span class="lit">0.1</span><span class="pun">,</span><span class="pln"> </span><span class="lit">2</span><span class="pun">);</span><span class="pln"><br>&nbsp; &nbsp;<br>&nbsp; &nbsp;</span><span class="com">// Adds sliders with min, max and increment.</span><span class="pln"><br>&nbsp; &nbsp;GUI</span><span class="pun">.</span><span class="pln">add</span><span class="pun">(</span><span class="pln">fizzyText</span><span class="pun">,</span><span class="pln"> </span><span class="str">"noiseStrength"</span><span class="pun">,</span><span class="pln"> </span><span class="lit">10</span><span class="pun">,</span><span class="pln"> </span><span class="lit">100</span><span class="pun">,</span><span class="pln"> </span><span class="lit">5</span><span class="pun">);</span><span class="pln"><br>&nbsp; &nbsp;<br>&nbsp; &nbsp;</span><span class="com">// Adds a boolean checkbox</span><span class="pln"><br>&nbsp; &nbsp;GUI</span><span class="pun">.</span><span class="pln">add</span><span class="pun">(</span><span class="pln">fizzyText</span><span class="pun">,</span><span class="pln"> </span><span class="str">"displayOutline"</span><span class="pun">);</span><span class="pln"><br><br>&nbsp; &nbsp;</span><span class="com">// Adds a function button</span><span class="pln"><br>&nbsp; &nbsp;GUI</span><span class="pun">.</span><span class="pln">add</span><span class="pun">(</span><span class="pln">fizzyText</span><span class="pun">,</span><span class="pln"> </span><span class="str">"explode"</span><span class="pun">)</span><span class="pln"><br>&nbsp; &nbsp;<br></span><span class="pun">};</span><span class="pln"><br><br></span><span class="tag">&lt;/script&gt;</span></pre>
<pre id="demo-pre" class="prettyprint">&lt;script type=&quot;text/javascript&quot; src=&quot;demo/demo.js&quot;&gt;&lt;/script&gt;
&lt;script type=&quot;text/javascript&quot;&gt;
window.onload = function() {
var fizzyText = new <a href="demo/demo.js">FizzyText</a>(&quot;gui-dat&quot;);
GUI.start();
// Text field
GUI.add(fizzyText, &quot;message&quot;);
// Sliders with min and max
GUI.add(fizzyText, &quot;maxSize&quot;, 0.5, 7);
GUI.add(fizzyText, &quot;growthSpeed&quot;, 0.01, 1);
GUI.add(fizzyText, &quot;speed&quot;, 0.1, 2);
// Sliders with min, max and increment.
GUI.add(fizzyText, &quot;noiseStrength&quot;, 10, 100, 5);
// Boolean checkbox
GUI.add(fizzyText, &quot;displayOutline&quot;);
// Fires a function called &quot;explode&quot;
GUI.add(fizzyText, &quot;explode&quot;).setName(&#039;Explode!&#039;); // Specify a custom name.
};
&lt;/script&gt;</pre>
<ul id="desc">
<li><strong>gui-dat</strong> will infer the type of the property you're trying to add<br/>(based on its initial value) and create the corresponding control.</li>