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; j++) {
gridPositions.push({
x: i * elementWidth + elementWidth / 2 + (2048 - elementWidth * gridSize) / 2,
y: j * elementWidth + elementWidth / 2 + (2732 - elementWidth * gridSize) / 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();
game.children.forEach(function (child, index) {
if (child instanceof Particle) {
var size = Math.random() * 1;
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;
var radius = 500;
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: 1000,
easing: randomTweenFunction
});
}
});
}; ===================================================================
--- original.js
+++ change.js
@@ -44,23 +44,18 @@
clickMeText.x = 2048 / 2;
clickMeText.y = 2732 / 2;
game.addChild(clickMeText);
// Create a grid of positions for the particles
-var circlePositions = [];
var gridPositions = [];
-var circleSize = 500;
-var gridSize = 50;
-var numParticles = 500;
-for (var i = 0; i < numParticles; i++) {
- var angle = i / numParticles * Math.PI * 2;
- circlePositions.push({
- x: 1024 + Math.cos(angle) * circleSize,
- y: 1366 + Math.sin(angle) * circleSize
- });
- gridPositions.push({
- x: i % gridSize * (2048 / gridSize),
- y: Math.floor(i / gridSize) * (2732 / gridSize)
- });
+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++) {
+ gridPositions.push({
+ x: i * elementWidth + elementWidth / 2 + (2048 - elementWidth * gridSize) / 2,
+ y: j * elementWidth + elementWidth / 2 + (2732 - elementWidth * gridSize) / 2
+ });
+ }
}
game.down = function () {
if (clickMeText) {
tween(clickMeText, {
@@ -77,23 +72,28 @@
});
}
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 positionType = Math.floor(Math.random() * 3);
+ var setupType = Math.random();
game.children.forEach(function (child, index) {
if (child instanceof Particle) {
- var size = Math.random() * 1 * (positionType === 0 ? .5 : 1);
+ var size = Math.random() * 1;
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 use a circle position
- if (positionType === 0) {
+ // 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 (positionType === 1) {
+ } else if (setupType < 0.66) {
targetPosition = {
x: Math.random() * 2048,
y: Math.random() * 2732
};
} else {
- targetPosition = circlePositions[index % circlePositions.length];
+ 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)
+ };
}
tween(child, {
x: targetPosition.x,
y: targetPosition.y,