StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POModifying Paperjs canvas example Moving Multiple Items
text
Body
copied!<p>On the Paperjs site, there is an example of Moving Multiple Items on this page <a href="http://paperjs.org/tutorials/animation/creating-animations/" rel="nofollow">http://paperjs.org/tutorials/animation/creating-animations/</a> The moving items are floating circles going left to right continuously. I am trying to modify this example to get the circles floating from the bottom to the top continuously. So far, I have managed to get them to float from the bottom to the top but for some reason, it is not continuous. </p> <p>The other modification that I am trying to do with the example is to get the circles to have random colors based on a given array of colors. So far, the random color is only generated each time the page is refreshed and loaded.</p> <ol> <li><p>How can I get the circles to float from bottom to top CONTINUOUSLY?</p></li> <li><p>How can I get the circles to be randomly colored in the animation and not just on page load?</p></li> </ol> <p>Here is my MODIFIED code:</p> <pre><code>// The amount of circles we want to make: var count = 50; /*random colors for circles*/ var circleColors = new Array(); circleColors[0] = "#2ab4e4";//BLUE circleColors[1] = "#a2a7a6";//GREY circleColors[2] = "#ef7047";//ORANGE circleColors[3] = "#ffffff";//WHITE /*end random colors for circles*/ // Create a symbol, which we will use to place instances of later: var path = new Path.Circle({ center: [0, 0], radius: 35, fillColor: circleColors[Math.floor(Math.random() * circleColors.length)] }); 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); placedSymbol.scale(i / count); } // 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.y -= item.bounds.height / 20; // If the item has left the view on the right, move it back // to the left: if (item.bounds.bottom > view.size.height) { item.position.y = -item.bounds.height; } } } </code></pre> <p>Here is the ORIGINAL code from Paperjs:</p> <pre><code>// The amount of circles we want to make: var count = 150; // Create a symbol, which we will use to place instances of later: var path = new Path.Circle({ center: [0, 0], radius: 10, fillColor: 'white', 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); placedSymbol.scale(i / count); } // 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 / 20; // 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; } } } </code></pre>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload