mirror of
https://github.com/dataarts/dat.gui.git
synced 2024-12-12 04:08:27 +00:00
created dynamic title
This commit is contained in:
parent
0dfe848480
commit
df431ca1c0
@ -18,7 +18,7 @@ h1 {
|
|||||||
font-weight: 800;
|
font-weight: 800;
|
||||||
text-transform: lowercase;
|
text-transform: lowercase;
|
||||||
line-height: 80px;
|
line-height: 80px;
|
||||||
margin: 20px 0 30px 0;
|
margin: 20px 0 0 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
h1 a:link, h1 a:visited, h1 a:hover, h1 a:active {
|
h1 a:link, h1 a:visited, h1 a:hover, h1 a:active {
|
||||||
@ -31,6 +31,7 @@ h1 img {
|
|||||||
height: 45px;
|
height: 45px;
|
||||||
-moz-border-radius: 9px;
|
-moz-border-radius: 9px;
|
||||||
border-radius: 9px;
|
border-radius: 9px;
|
||||||
|
margin-bottom: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
h2 {
|
h2 {
|
||||||
|
60
demo/demo.js
60
demo/demo.js
@ -1,6 +1,6 @@
|
|||||||
function DynamicText(string, width, height, textAscent) {
|
function DynamicText(message, width, height, textAscent) {
|
||||||
|
|
||||||
this.string = string;
|
var message = message;
|
||||||
|
|
||||||
this.width = width;
|
this.width = width;
|
||||||
this.height = height;
|
this.height = height;
|
||||||
@ -26,54 +26,74 @@ function DynamicText(string, width, height, textAscent) {
|
|||||||
|
|
||||||
s.font = "800 "+textAscent+"px helvetica, arial, sans-serif";
|
s.font = "800 "+textAscent+"px helvetica, arial, sans-serif";
|
||||||
|
|
||||||
this.update = function() {
|
var createParticles = function(m) {
|
||||||
|
|
||||||
// Create our reference bitmap
|
|
||||||
s.fillStyle = "#fff";
|
s.fillStyle = "#fff";
|
||||||
s.fillRect(0, 0, this.width, this.height);
|
s.fillRect(0, 0, width, height);
|
||||||
|
|
||||||
s.fillStyle = "#000";
|
s.fillStyle = "#222";
|
||||||
s.fillText(this.string, 0, this.textAscent);
|
s.fillText(m, 0, textAscent);
|
||||||
|
|
||||||
// Pull reference
|
// Pull reference
|
||||||
var imageData = s.getImageData(0, 0, width, height);
|
var imageData = s.getImageData(0, 0, width, height);
|
||||||
pixels = imageData.data;
|
pixels = imageData.data;
|
||||||
|
|
||||||
// Set reference onto particles
|
// Set reference onto particles
|
||||||
for(var i = 0; i < pixels.length; i+=4) {
|
for(var i = 0; i < pixels.length; i+=4) {
|
||||||
if(pixels[i] < 255) {
|
if(pixels[i] < 255) {
|
||||||
var p = getPosition(i);
|
var p = getPosition(i);
|
||||||
if(particles[i])
|
var c = getPixel(p.x, p.y);
|
||||||
particles[i].position = p;
|
particles.push( new Particle(p.x, p.y, c) );
|
||||||
else
|
|
||||||
particles.push( new Particle(p.x, p.y) );
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
this.render = function(c) {
|
var render = function() {
|
||||||
g.fillStyle = c;
|
|
||||||
|
g.clearRect(0, 0, width, height);
|
||||||
|
|
||||||
for(var i = 0; i < particles.length; i++) {
|
for(var i = 0; i < particles.length; i++) {
|
||||||
|
particles[i].update();
|
||||||
|
|
||||||
var p = particles[i].position;
|
var p = particles[i].position;
|
||||||
|
g.fillStyle = particles[i].color;
|
||||||
g.fillRect(p.x, p.y, 1, 1);
|
g.fillRect(p.x, p.y, 1, 1);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
var getPosition = function(i) {
|
var getPosition = function(i) {
|
||||||
var p = { x: (i - (width * 4) * Math.floor(i/(width * 4))) / 4, y: Math.floor(i/(width * 4)) };
|
return { x: (i - (width * 4) * Math.floor(i/(width * 4))) / 4, y: Math.floor(i/(width * 4)) };
|
||||||
return p;
|
|
||||||
};
|
};
|
||||||
|
|
||||||
var getPixel = function(x, y) {
|
var getPixel = function(x, y) {
|
||||||
var p = { r: pixels[4 * x * y + 0], g: pixels[4 * x * y + 1], b: pixels[4 * x * y + 2], a: pixels[4 * x * y + 3]};
|
var base = (y * width + x) * 4;
|
||||||
return p;
|
return { r: pixels[base + 0], g: pixels[base + 1], b: pixels[base + 2], a: pixels[base + 3]};
|
||||||
};
|
};
|
||||||
|
|
||||||
|
this.__defineGetter__("message", function() {
|
||||||
|
return message;
|
||||||
|
});
|
||||||
|
|
||||||
|
this.__defineSetter__("message", function(m) {
|
||||||
|
message = m;
|
||||||
|
particles = [];
|
||||||
|
createParticles(message);
|
||||||
|
render();
|
||||||
|
});
|
||||||
|
|
||||||
|
createParticles(message);
|
||||||
|
setInterval(render, 30);
|
||||||
}
|
}
|
||||||
|
|
||||||
function Particle(x, y) {
|
function Particle(x, y, c) {
|
||||||
var x = x;
|
var x = x;
|
||||||
var y = y;
|
var y = y;
|
||||||
|
|
||||||
|
this.color = "rgb("+c.r+", "+c.g+", "+c.b+")";
|
||||||
|
|
||||||
|
this.update = function() {
|
||||||
|
// x+=Math.random() - Math.random();
|
||||||
|
};
|
||||||
|
|
||||||
this.__defineGetter__("x", function() {
|
this.__defineGetter__("x", function() {
|
||||||
return x;
|
return x;
|
||||||
});
|
});
|
||||||
|
@ -34,8 +34,6 @@
|
|||||||
window.onload = function() {
|
window.onload = function() {
|
||||||
|
|
||||||
var testDisplay = new DynamicText("gui-dat", 500, 100, 80);
|
var testDisplay = new DynamicText("gui-dat", 500, 100, 80);
|
||||||
testDisplay.update();
|
|
||||||
testDisplay.render("#000");
|
|
||||||
|
|
||||||
prettyPrint();
|
prettyPrint();
|
||||||
|
|
||||||
@ -51,7 +49,7 @@
|
|||||||
GUI.add(controllableObject, "notchedNum", 0, 800, 100);
|
GUI.add(controllableObject, "notchedNum", 0, 800, 100);
|
||||||
|
|
||||||
// Creates a text field
|
// Creates a text field
|
||||||
GUI.add(document.getElementById('helvetica-demo'), "innerHTML");
|
GUI.add(testDisplay, "message");
|
||||||
|
|
||||||
// Creates a checkbox
|
// Creates a checkbox
|
||||||
GUI.add(controllableObject, "booleanProperty");
|
GUI.add(controllableObject, "booleanProperty");
|
||||||
@ -64,7 +62,7 @@
|
|||||||
</script>
|
</script>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<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">gui-dat</span></h1>
|
<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>
|
<div id = "helvetica-test"></div>
|
||||||
<p>
|
<p>
|
||||||
|
Loading…
Reference in New Issue
Block a user