mirror of
https://github.com/dataarts/dat.gui.git
synced 2024-12-12 04:08:27 +00:00
Changes to demo
This commit is contained in:
parent
df431ca1c0
commit
8b895727ec
114
demo/demo.js
114
demo/demo.js
@ -1,8 +1,14 @@
|
|||||||
function DynamicText(message, width, height, textAscent) {
|
function DynamicText(message, width, height, textAscent) {
|
||||||
|
|
||||||
|
var _this = this;
|
||||||
|
|
||||||
|
this.growthSpeed = 0.1;
|
||||||
|
this.minSize = 0;
|
||||||
|
this.maxSize = 5;
|
||||||
|
|
||||||
var message = message;
|
var message = message;
|
||||||
|
|
||||||
this.width = width;
|
this.width = width;
|
||||||
this.height = height;
|
this.height = height;
|
||||||
|
|
||||||
this.textAscent = textAscent;
|
this.textAscent = textAscent;
|
||||||
@ -18,7 +24,6 @@ function DynamicText(message, width, height, textAscent) {
|
|||||||
r.setAttribute('height', height);
|
r.setAttribute('height', height);
|
||||||
c.setAttribute('height', height);
|
c.setAttribute('height', height);
|
||||||
|
|
||||||
// document.getElementById('helvetica-demo').appendChild(r);
|
|
||||||
document.getElementById('helvetica-demo').appendChild(c);
|
document.getElementById('helvetica-demo').appendChild(c);
|
||||||
|
|
||||||
var pixels = [];
|
var pixels = [];
|
||||||
@ -26,7 +31,12 @@ function DynamicText(message, width, height, textAscent) {
|
|||||||
|
|
||||||
s.font = "800 "+textAscent+"px helvetica, arial, sans-serif";
|
s.font = "800 "+textAscent+"px helvetica, arial, sans-serif";
|
||||||
|
|
||||||
var createParticles = function(m) {
|
// Set reference onto particles
|
||||||
|
for (var i = 0; i < 1000; i++) {
|
||||||
|
particles.push( new Particle(Math.random()*width, Math.random()*height));
|
||||||
|
}
|
||||||
|
|
||||||
|
var createBitmap = function(m) {
|
||||||
s.fillStyle = "#fff";
|
s.fillStyle = "#fff";
|
||||||
s.fillRect(0, 0, width, height);
|
s.fillRect(0, 0, width, height);
|
||||||
|
|
||||||
@ -37,26 +47,15 @@ function DynamicText(message, width, height, textAscent) {
|
|||||||
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
|
|
||||||
for(var i = 0; i < pixels.length; i+=4) {
|
|
||||||
if(pixels[i] < 255) {
|
|
||||||
var p = getPosition(i);
|
|
||||||
var c = getPixel(p.x, p.y);
|
|
||||||
particles.push( new Particle(p.x, p.y, c) );
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
};
|
||||||
|
|
||||||
var render = function() {
|
var render = function() {
|
||||||
|
|
||||||
g.clearRect(0, 0, width, height);
|
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();
|
particles[i].update();
|
||||||
|
particles[i].draw();
|
||||||
var p = particles[i].position;
|
|
||||||
g.fillStyle = particles[i].color;
|
|
||||||
g.fillRect(p.x, p.y, 1, 1);
|
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
@ -64,9 +63,11 @@ function DynamicText(message, width, height, textAscent) {
|
|||||||
return { 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)) };
|
||||||
};
|
};
|
||||||
|
|
||||||
var getPixel = function(x, y) {
|
var getColor = function(x, y) {
|
||||||
var base = (y * width + x) * 4;
|
var base = (Math.floor(y) * width + Math.floor(x)) * 4;
|
||||||
return { r: pixels[base + 0], g: pixels[base + 1], b: pixels[base + 2], a: pixels[base + 3]};
|
var c = { r: pixels[base + 0], g: pixels[base + 1], b: pixels[base + 2], a: pixels[base + 3]};
|
||||||
|
|
||||||
|
return "rgb("+c.r+","+c.g+","+c.b+")";
|
||||||
};
|
};
|
||||||
|
|
||||||
this.__defineGetter__("message", function() {
|
this.__defineGetter__("message", function() {
|
||||||
@ -75,50 +76,39 @@ function DynamicText(message, width, height, textAscent) {
|
|||||||
|
|
||||||
this.__defineSetter__("message", function(m) {
|
this.__defineSetter__("message", function(m) {
|
||||||
message = m;
|
message = m;
|
||||||
particles = [];
|
createBitmap(message);
|
||||||
createParticles(message);
|
|
||||||
render();
|
|
||||||
});
|
});
|
||||||
|
|
||||||
createParticles(message);
|
createBitmap(message);
|
||||||
setInterval(render, 30);
|
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);
|
||||||
|
g.fill();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
var constrain = function(v, o1, o2) {
|
||||||
|
if (v < o1) v = o1;
|
||||||
|
else if (v > o2) v = o2;
|
||||||
|
return v;
|
||||||
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function Particle(x, y, c) {
|
|
||||||
var x = x;
|
|
||||||
var y = y;
|
|
||||||
|
|
||||||
this.color = "rgb("+c.r+", "+c.g+", "+c.b+")";
|
|
||||||
|
|
||||||
this.update = function() {
|
|
||||||
// x+=Math.random() - Math.random();
|
|
||||||
};
|
|
||||||
|
|
||||||
this.__defineGetter__("x", function() {
|
|
||||||
return x;
|
|
||||||
});
|
|
||||||
|
|
||||||
this.__defineGetter__("y", function() {
|
|
||||||
return y;
|
|
||||||
});
|
|
||||||
|
|
||||||
this.__defineGetter__("position", function() {
|
|
||||||
return { x: x, y: y };
|
|
||||||
});
|
|
||||||
|
|
||||||
this.__defineSetter__("x", function(n) {
|
|
||||||
x = n;
|
|
||||||
});
|
|
||||||
|
|
||||||
this.__defineSetter__("y", function(n) {
|
|
||||||
y = n;
|
|
||||||
});
|
|
||||||
|
|
||||||
// Dependent on Vector format
|
|
||||||
this.__defineSetter__("position", function(p) {
|
|
||||||
if(p.x && p.y) {
|
|
||||||
x = p.x;
|
|
||||||
y = p.y;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
16
index.html
16
index.html
@ -6,7 +6,7 @@
|
|||||||
|
|
||||||
<link href="gui.css" media="screen" rel="stylesheet" type="text/css" />
|
<link href="gui.css" media="screen" rel="stylesheet" type="text/css" />
|
||||||
<link href="demo/demo.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="gui.js"></script>
|
||||||
<script type="text/javascript" src="controllers/slider.js"></script>
|
<script type="text/javascript" src="controllers/slider.js"></script>
|
||||||
@ -33,20 +33,20 @@
|
|||||||
|
|
||||||
window.onload = function() {
|
window.onload = function() {
|
||||||
|
|
||||||
var testDisplay = new DynamicText("gui-dat", 500, 100, 80);
|
var testDisplay = new DynamicText("gui-dat", 600, 300, 160);
|
||||||
|
|
||||||
prettyPrint();
|
// prettyPrint();
|
||||||
|
|
||||||
GUI.start();
|
GUI.start();
|
||||||
|
|
||||||
// Creates a number box
|
// Creates a number box
|
||||||
GUI.add(controllableObject, "numberProperty");
|
GUI.add(testDisplay, "minSize", 0, 1);
|
||||||
|
|
||||||
|
// Creates a number box
|
||||||
|
GUI.add(testDisplay, "maxSize", 1, 5);
|
||||||
|
|
||||||
// Creates a slider (min, max)
|
// Creates a slider (min, max)
|
||||||
GUI.add(controllableObject, "constrainedNum", -100, 100);
|
GUI.add(testDisplay, "growthSpeed", 0.01, 0.5);
|
||||||
|
|
||||||
// Creates a slider with notches
|
|
||||||
GUI.add(controllableObject, "notchedNum", 0, 800, 100);
|
|
||||||
|
|
||||||
// Creates a text field
|
// Creates a text field
|
||||||
GUI.add(testDisplay, "message");
|
GUI.add(testDisplay, "message");
|
||||||
|
Loading…
Reference in New Issue
Block a user