Code edit (14 edits merged)
Please save this source code
Code edit (7 edits merged)
Please save this source code
User prompt
So currently we have a grid setup and a random setup. I also want one where all the elements or all the particles are just in a circle. While maintaining the current options
User prompt
Please fix the bug: 'Script error.' in or related to this line: 'targetPosition = gridPositions[index % gridPositions.length];' Line Number: 87
User prompt
So currently we have a grid setup and a random setup. I also want one where all the elements or all the particles are just in a circle.
Code edit (1 edits merged)
Please save this source code
/**** * Plugins ****/ var tween = LK.import("@upit/tween.v1"); /**** * Classes ****/ var Particle = Container.expand(function () { var self = Container.call(this); var particleGraphics = self.attachAsset('particle', { anchorX: 0.5, anchorY: 0.5 }); self.tint = 0xffffff * Math.random(); self.rotation = Math.PI * 2 * Math.random(); particleGraphics.blendMode = 1; }); /**** * Initialize Game ****/ var game = new LK.Game({ backgroundColor: 0x000000 //Init game with black background }); /**** * Game Code ****/ for (var i = 0; i < 500; i++) { var particle = game.addChild(new Particle()); var angle = Math.random() * Math.PI * 2; var radius = Math.random() * 200; particle.x = 1024 + Math.cos(angle) * radius; particle.y = 1366 + Math.sin(angle) * radius; particle.scale.set(4, 4); } var clickMeText = new Text2('Click Me', { size: 150, fill: 0x000000, weight: 800 }); clickMeText.anchor.set(0.5, 0.5); clickMeText.x = 2048 / 2; clickMeText.y = 2732 / 2; game.addChild(clickMeText); // Create a grid of positions for the particles var gridPositions = []; var gridSize = 13; var elementWidth = 150; // width of the particle element for (var i = 0; i < gridSize; i++) { for (var j = 0; j < gridSize + 4; j++) { gridPositions.push({ x: i * elementWidth + elementWidth / 2 + (2048 - elementWidth * gridSize) / 2, y: j * elementWidth + elementWidth / 2 + (2732 - elementWidth * (gridSize + 4)) / 2 }); } } game.down = function () { if (clickMeText) { tween(clickMeText, { y: -200 }, { duration: 500, easing: tween.easeIn, onFinish: function onFinish() { if (clickMeText) { clickMeText.destroy(); clickMeText = null; } } }); } var tweenFunctions = [tween.linear, tween.easeIn, tween.easeOut, tween.elasticIn, tween.elasticOut, tween.bounceIn, tween.bounceOut, tween.easeInOut, tween.bounceInOut, tween.elasticInOut]; var randomTweenFunction = tweenFunctions[Math.floor(Math.random() * tweenFunctions.length)]; var setupType = Math.random(); var sizeRand = Math.random() * 2; var radius = Math.random() * 1000; var tweenLength = 1200 * Math.random() + 300; var tweenDelay = Math.random() * 3; game.children.forEach(function (child, index) { if (child instanceof Particle) { var size = Math.random() * sizeRand; var targetPosition; // One third of the time, use a grid position, one third of the time use a random position, one third of the time arrange in a circle if (setupType < 0.33) { targetPosition = gridPositions[index % gridPositions.length]; } else if (setupType < 0.66) { targetPosition = { x: Math.random() * 2048, y: Math.random() * 2732 }; } else { var angle = 2 * Math.PI * index / game.children.length; targetPosition = { x: 1024 + radius * Math.cos(angle), y: 1366 + radius * Math.sin(angle) }; } tween(child, { x: targetPosition.x, y: targetPosition.y, scaleX: size, scaleY: size, rotation: Math.random() * Math.PI * 2, tint: Math.random() * 0xffffff }, { duration: tweenLength, easing: randomTweenFunction, delay: index * tweenDelay }); } }); };
===================================================================
--- original.js
+++ change.js
@@ -48,12 +48,12 @@
var gridPositions = [];
var gridSize = 13;
var elementWidth = 150; // width of the particle element
for (var i = 0; i < gridSize; i++) {
- for (var j = 0; j < gridSize; j++) {
+ for (var j = 0; j < gridSize + 4; j++) {
gridPositions.push({
x: i * elementWidth + elementWidth / 2 + (2048 - elementWidth * gridSize) / 2,
- y: j * elementWidth + elementWidth / 2 + (2732 - elementWidth * gridSize) / 2
+ y: j * elementWidth + elementWidth / 2 + (2732 - elementWidth * (gridSize + 4)) / 2
});
}
}
game.down = function () {
@@ -73,11 +73,15 @@
}
var tweenFunctions = [tween.linear, tween.easeIn, tween.easeOut, tween.elasticIn, tween.elasticOut, tween.bounceIn, tween.bounceOut, tween.easeInOut, tween.bounceInOut, tween.elasticInOut];
var randomTweenFunction = tweenFunctions[Math.floor(Math.random() * tweenFunctions.length)];
var setupType = Math.random();
+ var sizeRand = Math.random() * 2;
+ var radius = Math.random() * 1000;
+ var tweenLength = 1200 * Math.random() + 300;
+ var tweenDelay = Math.random() * 3;
game.children.forEach(function (child, index) {
if (child instanceof Particle) {
- var size = Math.random() * 1;
+ var size = Math.random() * sizeRand;
var targetPosition;
// One third of the time, use a grid position, one third of the time use a random position, one third of the time arrange in a circle
if (setupType < 0.33) {
targetPosition = gridPositions[index % gridPositions.length];
@@ -87,9 +91,8 @@
y: Math.random() * 2732
};
} else {
var angle = 2 * Math.PI * index / game.children.length;
- var radius = 500;
targetPosition = {
x: 1024 + radius * Math.cos(angle),
y: 1366 + radius * Math.sin(angle)
};
@@ -98,13 +101,14 @@
x: targetPosition.x,
y: targetPosition.y,
scaleX: size,
scaleY: size,
- rotation: setupType >= .66 ? 0 : Math.random() * Math.PI * 2,
+ rotation: Math.random() * Math.PI * 2,
tint: Math.random() * 0xffffff
}, {
- duration: 1000,
- easing: randomTweenFunction
+ duration: tweenLength,
+ easing: randomTweenFunction,
+ delay: index * tweenDelay
});
}
});
};
\ No newline at end of file