mirror of
https://github.com/dataarts/dat.gui.git
synced 2024-12-12 04:08:27 +00:00
began particle type
This commit is contained in:
parent
6d51c8e609
commit
8313e7f14b
78
demo/demo.js
78
demo/demo.js
@ -1,4 +1,4 @@
|
||||
function Example(string, width, height, textAscent) {
|
||||
function DynamicText(string, width, height, textAscent) {
|
||||
|
||||
this.string = string;
|
||||
|
||||
@ -18,11 +18,15 @@ function Example(string, width, height, textAscent) {
|
||||
r.setAttribute('height', height);
|
||||
c.setAttribute('height', height);
|
||||
|
||||
// document.getElementById('helvetica-demo').appendChild(r);
|
||||
document.getElementById('helvetica-demo').appendChild(c);
|
||||
|
||||
s.font("800 "+textAscent+"px helvetica, arial, sans-serif");
|
||||
var pixels = [];
|
||||
var particles = [];
|
||||
|
||||
var update = function() {
|
||||
s.font = "800 "+textAscent+"px helvetica, arial, sans-serif";
|
||||
|
||||
this.update = function() {
|
||||
|
||||
// Create our reference bitmap
|
||||
s.fillStyle = "#fff";
|
||||
@ -32,27 +36,69 @@ function Example(string, width, height, textAscent) {
|
||||
s.fillText(this.string, 0, this.textAscent);
|
||||
|
||||
// Pull reference
|
||||
var imageData = r.getImageData(0, 0, width, height);
|
||||
var pixels = imageData.data;
|
||||
var imageData = s.getImageData(0, 0, width, height);
|
||||
pixels = imageData.data;
|
||||
|
||||
// Set reference onto particles
|
||||
for(var i = 0; i < pixels.length; i+=4) {
|
||||
|
||||
if(pixels[i] < 255) {
|
||||
var p = getPosition(i);
|
||||
if(particles[i])
|
||||
particles[i].position = p;
|
||||
else
|
||||
particles.push( new Particle(p.x, p.y) );
|
||||
}
|
||||
}
|
||||
|
||||
// Take the string
|
||||
// save a bitmap
|
||||
// and generate particles
|
||||
// in the same points
|
||||
// with hooks for the
|
||||
// GUI
|
||||
};
|
||||
|
||||
var render = function() {
|
||||
// Draw the particles
|
||||
this.render = function(c) {
|
||||
g.fillStyle = c;
|
||||
for(var i = 0; i < particles.length; i++) {
|
||||
var p = particles[i].position;
|
||||
g.fillRect(p.x, p.y, 1, 1);
|
||||
}
|
||||
};
|
||||
|
||||
var getPosition = function(i) {
|
||||
var p = { x: (i - (width * 4) * Math.floor(i/(width * 4))) / 4, y: Math.floor(i/(width * 4)) };
|
||||
return p;
|
||||
};
|
||||
|
||||
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]};
|
||||
return p;
|
||||
};
|
||||
}
|
||||
|
||||
return
|
||||
function Particle(x, y) {
|
||||
var x = x;
|
||||
var y = y;
|
||||
|
||||
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;
|
||||
}
|
||||
});
|
||||
}
|
@ -15,7 +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/demo.js"></script> -->
|
||||
<script type="text/javascript" src="demo/demo.js"></script>
|
||||
<script type="text/javascript">
|
||||
var controllableObject =
|
||||
{
|
||||
@ -33,6 +33,10 @@
|
||||
|
||||
window.onload = function() {
|
||||
|
||||
var testDisplay = new DynamicText("gui-dat", 500, 100, 80);
|
||||
testDisplay.update();
|
||||
testDisplay.render("#000");
|
||||
|
||||
prettyPrint();
|
||||
|
||||
GUI.start();
|
||||
@ -62,6 +66,8 @@
|
||||
</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">gui-dat</span></h1>
|
||||
|
||||
<div id = "helvetica-test"></div>
|
||||
<p>
|
||||
is a super-light javascript library for making GUI elements. It is inspired by <a href = "http://www.sojamo.de/libraries/controlP5/">controlP5</a>.
|
||||
</p>
|
||||
|
Loading…
Reference in New Issue
Block a user