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

began particle type

Browse Source
This commit is contained in:
jonobr1 2011-01-25 19:30:05 -07:00
parent 6d51c8e609
commit 8313e7f14b
2 changed files with 74 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

86
demo/demo.js
View File

@ -1,4 +1,4 @@
function Example(string, width, height, textAscent) {
function DynamicText(string, width, height, textAscent) {
this.string = string;
@ -13,16 +13,20 @@ function Example(string, width, height, textAscent) {
var c = document.createElement('canvas');
var g = c.getContext('2d');
r.setAttribute('width', width);
c.setAttribute('width', width);
r.setAttribute('width', width);
c.setAttribute('width', width);
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) {
return
}
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;
};
}
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;
}
});
}

8
index.html
View File

@ -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>