Add ability to update grid parameters and shapes added to grid modules on the draw loop
jorditost opened this issue · comments
Jordi Tost commented
It would be nice to be able to update the following parameters in the draw loop:
"Nice-to-have" grid functionalities:
- Update grid position (x, y)
- Update grid size (width, height and moduleWidth, moduleHeight)
- Remove grid from stage
Methods that are not working for shapes inside a grid module:
- move
- radius
- etc.
Here an example:
var r = new Rune({
container: "#canvas",
width: 800,
height: 800,
debug: true
});
// Create a rectangle to fill the entire screen
// and a smaller rectangle on top
var grid = r.grid({
x: 50,
y: 50,
width: r.width - 100,
height: r.height - 100,
gutter: 20,
columns: 3,
rows: 3
});
var circs = [];
var size = 40;
for(var i = 0; i < 50; i++)
{
var color = new Rune.Color(Rune.random(0, 255), Rune.random(0, 255), Rune.random(0, 255));
var x = Rune.random(size, grid.state.moduleWidth - size);
var y = Rune.random(size, grid.state.moduleHeight - size);
var circle = r.circle(x, y, size).fill(color).stroke(false);
// we use .ceil because numbers start at 1
var randomCol = Math.ceil(Rune.random(grid.state.columns));
var randomRow = Math.ceil(Rune.random(grid.state.rows));
grid.add(circle, randomCol, randomRow);
circs.push(circle);
}
// r.draw();
r.on('update', function(frame) {
console.log("update - number of circles: " + circs.length);
// Move circles inside the grid
for (var i = 0; i < circs.length; i++) {
var x = Rune.random(-1, 1);
var y = Rune.random(-1, 1);
circs[i].move(x, y, true);
}
});
r.play();
Or is there already a workaround to work with?
Thanks Rune in advance for your support!
Rune Skjoldborg Madsen commented
Thanks for the comments! The Grid
object had a few problems, which should be fixed now in the new 1.0.0
release. Give it a try and let me know what you think. You should be able to use all the shape functions now, as well as grid.move()
, etc.
Jordi Tost commented
@runemadsen thanks for the update!