user1477388 user1477388 - 1 month ago 16
Javascript Question

How to Change Color of Symbols in PaperJs

I don't know how to create a jsfiddle for Paper.js since I keep getting "domain policy" restrictions; but you can test by going here and clicking run: http://paperjs.org/tutorials/animation/creating-animations/#moving-multiple-items

I have the following code:

// The amount of circles we want to make:
var count = 50;

// Create a symbol, which we will use to place instances of later:
var point = new Point(20, 20);
var size = new Size(60, 60);

var path = new Path.Rectangle({
point: point,
size: size,
fillColor: 'grey',
strokeColor: 'black'
});

var symbol = new Symbol(path);

// Place the instances of the symbol:
for (var i = 0; i < count; i++) {
// The center position is a random point in the view:
var center = Point.random() * view.size;
var placedSymbol = symbol.place(center);
var placedSymbol = symbol.place(center);
placedSymbol.scale(i / count);

if (i % 5 == 0) {
placedSymbol.style = {
fillColor: new Color(1, 0, 0),
strokeColor: 'black',
strokeWidth: 5
};
}
}

console.log(project.activeLayer.children[0]);

// The onFrame function is called up to 60 times a second:
function onFrame(event) {
// Run through the active layer's children list and change
// the position of the placed symbols:
for (var i = 0; i < count; i++) {
var item = project.activeLayer.children[i];

// Move the item 1/20th of its width to the right. This way
// larger circles move faster than smaller circles:
item.position.x += item.bounds.width / 100;

//if (i % 5 == 0)
//item.fillColor = new Color(1, 0, 0);

// If the item has left the view on the right, move it back
// to the left:
if (item.bounds.left > view.size.width) {
item.position.x = -item.bounds.width;
}
}
}


I know I can just change the color of the path like this:

var path = new Path.Rectangle({
point: point,
size: size,
fillColor: 'grey',
strokeColor: 'black'
});


But, I want to change the color of only specific rectangles which are divisible by five:

if (i % 5 == 0) {
placedSymbol.style = {
fillColor: new Color(1, 0, 0),
strokeColor: 'black',
strokeWidth: 5
};
}


But, the fill color never changes! What is the proper way to change the fill color/ style of only certain symbols?

Answer

The answer for me was to not use symbols at all, just use paths like so:

// The amount of circles we want to make:
var count = 150;

// Create a symbol, which we will use to place instances of later:


// Place the instances of the symbol:
for (var i = 0; i < count; i++) {
    // The center position is a random point in the view:
    var path = new Path.Circle({
        center: Point.random() * view.size,
        radius: i / count + 0.5,
        fillColor: 'white',
        strokeColor: 'black'
    });
    if (i % 10 == 0)
        path.style.fillColor = '#eee';
}

// The onFrame function is called up to 60 times a second:
function onFrame(event) {
    // Run through the active layer's children list and change
    // the position of the placed symbols:
    for (var i = 0; i < count; i++) {
        var item = project.activeLayer.children[i];

        // Move the item 1/20th of its width to the right. This way
        // larger circles move faster than smaller circles:
        item.position.x += item.bounds.width / 300;

        // If the item has left the view on the right, move it back
        // to the left:
        if (item.bounds.left > view.size.width) {
            item.position.x = -item.bounds.width;
        }
    }
}