runemadsen / rune.js

A JavaScript library for programming graphic design systems with SVG
http://runemadsen.github.io/rune.js
MIT License
654 stars 35 forks source link

Add ability to update grid parameters and shapes added to grid modules on the draw loop #23

Closed jorditost closed 7 years ago

jorditost commented 7 years ago

It would be nice to be able to update the following parameters in the draw loop:

"Nice-to-have" grid functionalities:

Methods that are not working for shapes inside a grid module:

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!

runemadsen commented 7 years ago

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.

jorditost commented 7 years ago

@runemadsen thanks for the update!