Play
:quality(85)/https://cdn.frvr.ai/683a970d465073e366fa271c.png)
:quality(85)/https://cdn.frvr.ai/683a96d7465073e366fa2719.png)
#PatternPop
#InteractiveArt
#TapToCreate
#GenerativeDesign
#MobileFun
Creation History
User prompt
farklı renklerde olsun ekrana bir kere tıklayınca rastgele büyük bir desen çıksın sonra sil yazısı ekle ona tıklayınca hepsi islinsin ingilizce
User prompt
renkler parlasın ışıltılar saçsın ve renkler bir araya gelip desenler oluştursun güzel resim gibi
Code edit (1 edits merged)
Please save this source code
User prompt
Pattern Pop: Tap to Reveal
Initial prompt
ekrana tıklandığında farklı desenler çıkan uygulama yap ingilizce profesyonel ol en iyisiniyap
/****
* Plugins
****/
var tween = LK.import("@upit/tween.v1");
/****
* Classes
****/
// Pattern class: a container for a randomly generated pattern at a given position.
var Pattern = Container.expand(function () {
var self = Container.call(this);
// Generate a random pattern on creation
// Patterns: single shape, cluster, or overlay
function randomColor() {
// Return a random bright color, sometimes as a gradient (simulated by overlaying two colors)
var colors = [0xff5e5b, 0xffc857, 0x4ecdc4, 0x556270, 0x3a86ff, 0xffbe0b, 0xfb5607, 0x8338ec, 0xff006e, 0x06d6a0];
if (Math.random() < 0.3) {
// Simulate a gradient by returning an array of two colors
var c1 = colors[Math.floor(Math.random() * colors.length)];
var c2 = colors[Math.floor(Math.random() * colors.length)];
return [c1, c2];
}
return colors[Math.floor(Math.random() * colors.length)];
}
function randomShape() {
// Return 'box' or 'ellipse'
return Math.random() < 0.5 ? 'box' : 'ellipse';
}
function randomSize() {
// Return a size between 120 and 400 px
return 120 + Math.floor(Math.random() * 280);
}
function randomRotation() {
// Return a random rotation in radians
return Math.random() * Math.PI * 2;
}
function randomAlpha() {
// Return a random alpha between 0.7 and 1
return 0.7 + Math.random() * 0.3;
}
function randomPatternType() {
// 0: single, 1: cluster, 2: overlay
var r = Math.random();
if (r < 0.5) return 0;
if (r < 0.8) return 1;
return 2;
}
// Generate the pattern
function generatePattern() {
var type = randomPatternType();
if (type === 0) {
// Single shape
var w = randomSize();
var h = randomSize();
var shape = randomShape();
var color = randomColor();
if (Array.isArray(color)) {
// Simulate a gradient by overlaying two shapes with different colors and alpha
var asset1 = self.attachAsset({
anchorX: 0.5,
anchorY: 0.5
}, {});
asset1.tint = color[0];
asset1.rotation = randomRotation();
asset1.alpha = randomAlpha();
var asset2 = self.attachAsset({
anchorX: 0.5,
anchorY: 0.5
}, {});
asset2.tint = color[1];
asset2.rotation = randomRotation();
asset2.alpha = 0.5 + Math.random() * 0.3;
} else {
var asset = self.attachAsset({
anchorX: 0.5,
anchorY: 0.5
}, {});
asset.tint = color;
asset.rotation = randomRotation();
asset.alpha = randomAlpha();
}
} else if (type === 1) {
// Cluster: 3-6 shapes in a circle
var count = 3 + Math.floor(Math.random() * 4);
var radius = 80 + Math.random() * 120;
for (var i = 0; i < count; i++) {
var angle = Math.PI * 2 / count * i + Math.random() * 0.3;
var w = randomSize() * (0.5 + Math.random() * 0.7);
var h = randomSize() * (0.5 + Math.random() * 0.7);
var shape = randomShape();
var color = randomColor();
if (Array.isArray(color)) {
// Simulate a gradient by overlaying two shapes
var asset1 = self.attachAsset({
anchorX: 0.5,
anchorY: 0.5
}, {});
asset1.tint = color[0];
asset1.x = Math.cos(angle) * radius;
asset1.y = Math.sin(angle) * radius;
asset1.rotation = randomRotation();
asset1.alpha = randomAlpha();
var asset2 = self.attachAsset({
anchorX: 0.5,
anchorY: 0.5
}, {});
asset2.tint = color[1];
asset2.x = Math.cos(angle) * radius;
asset2.y = Math.sin(angle) * radius;
asset2.rotation = randomRotation();
asset2.alpha = 0.5 + Math.random() * 0.3;
} else {
var asset = self.attachAsset({
anchorX: 0.5,
anchorY: 0.5
}, {});
asset.tint = color;
asset.x = Math.cos(angle) * radius;
asset.y = Math.sin(angle) * radius;
asset.rotation = randomRotation();
asset.alpha = randomAlpha();
}
}
} else {
// Overlay: 2-3 shapes stacked with different rotations
var overlays = 2 + Math.floor(Math.random() * 2);
for (var j = 0; j < overlays; j++) {
var w = randomSize() * (0.7 + Math.random() * 0.5);
var h = randomSize() * (0.7 + Math.random() * 0.5);
var shape = randomShape();
var color = randomColor();
if (Array.isArray(color)) {
var asset1 = self.attachAsset({
anchorX: 0.5,
anchorY: 0.5
}, {});
asset1.tint = color[0];
asset1.rotation = randomRotation();
asset1.alpha = 0.5 + Math.random() * 0.5;
var asset2 = self.attachAsset({
anchorX: 0.5,
anchorY: 0.5
}, {});
asset2.tint = color[1];
asset2.rotation = randomRotation();
asset2.alpha = 0.3 + Math.random() * 0.3;
} else {
var asset = self.attachAsset({
anchorX: 0.5,
anchorY: 0.5
}, {});
asset.tint = color;
asset.rotation = randomRotation();
asset.alpha = 0.5 + Math.random() * 0.5;
}
}
}
}
generatePattern();
// Pop-in animation
self.scale.set(0.2, 0.2);
tween(self.scale, {
x: 1,
y: 1
}, {
duration: 350,
easing: tween.elasticOut
});
// Sparkle and glow effect: animate alpha and scale for shimmer
function sparkleEffect(target) {
// Animate alpha up and down for shimmer
var _sparkleTween = function sparkleTween() {
tween(target, {
alpha: 1
}, {
duration: 180 + Math.random() * 120,
easing: tween.sineIn,
onComplete: function onComplete() {
tween(target, {
alpha: 0.7 + Math.random() * 0.3
}, {
duration: 180 + Math.random() * 120,
easing: tween.sineOut,
onComplete: _sparkleTween
});
}
});
};
_sparkleTween();
// Animate scale for a pulsing glow
var _pulseTween = function pulseTween() {
tween(target.scale, {
x: 1.08,
y: 1.08
}, {
duration: 320 + Math.random() * 120,
easing: tween.sineIn,
onComplete: function onComplete() {
tween(target.scale, {
x: 1,
y: 1
}, {
duration: 320 + Math.random() * 120,
easing: tween.sineOut,
onComplete: _pulseTween
});
}
});
};
_pulseTween();
}
// Apply sparkle effect to all children (shapes) of the pattern
for (var i = 0; i < self.children.length; i++) {
sparkleEffect(self.children[i]);
}
return self;
});
/****
* Initialize Game
****/
var game = new LK.Game({
backgroundColor: 0xffffff // White background for a clean canvas
});
/****
* Game Code
****/
// We'll use the tween plugin for simple pop-in animations.
/*
We will use only shapes for patterns, with random colors and sizes.
No need to predefine assets, as LK will auto-create them as needed.
*/
// No score, no timer, no GUI overlays
// Store all patterns for possible future management (e.g., clearing, layering)
var patterns = [];
// Helper: don't allow patterns in the top-left 100x100 px (menu area)
function isInMenuArea(x, y) {
return x < 100 && y < 100;
}
// On tap/click anywhere, create a new pattern at that location
game.down = function (x, y, obj) {
// Don't allow patterns in menu area
if (isInMenuArea(x, y)) return;
var pattern = new Pattern();
pattern.x = x;
pattern.y = y;
patterns.push(pattern);
game.addChild(pattern);
};
// Optional: allow dragging patterns (fun for creativity)
// Only one pattern can be dragged at a time
var dragPattern = null;
var dragOffsetX = 0;
var dragOffsetY = 0;
// On down, check if a pattern is tapped (topmost first)
game.down = function (x, y, obj) {
if (isInMenuArea(x, y)) return;
// Check for pattern under pointer, topmost first
for (var i = patterns.length - 1; i >= 0; i--) {
var p = patterns[i];
// Use bounding box for hit test
var bounds = p.getBounds();
if (x >= p.x + bounds.x && x <= p.x + bounds.x + bounds.width && y >= p.y + bounds.y && y <= p.y + bounds.y + bounds.height) {
dragPattern = p;
dragOffsetX = p.x - x;
dragOffsetY = p.y - y;
// Bring to front
game.removeChild(p);
game.addChild(p);
return;
}
}
// If no pattern tapped, create a new one
var pattern = new Pattern();
pattern.x = x;
pattern.y = y;
patterns.push(pattern);
game.addChild(pattern);
dragPattern = pattern;
dragOffsetX = 0;
dragOffsetY = 0;
};
// On move, drag the selected pattern
game.move = function (x, y, obj) {
if (dragPattern) {
dragPattern.x = x + dragOffsetX;
dragPattern.y = y + dragOffsetY;
}
};
// On up, stop dragging
game.up = function (x, y, obj) {
dragPattern = null;
};
// No update loop needed, as patterns are static after creation
// That's it! Pattern Pop: tap to create, drag to arrange, endless fun. ===================================================================
--- original.js
+++ change.js
@@ -11,10 +11,16 @@
var self = Container.call(this);
// Generate a random pattern on creation
// Patterns: single shape, cluster, or overlay
function randomColor() {
- // Return a random bright color
+ // Return a random bright color, sometimes as a gradient (simulated by overlaying two colors)
var colors = [0xff5e5b, 0xffc857, 0x4ecdc4, 0x556270, 0x3a86ff, 0xffbe0b, 0xfb5607, 0x8338ec, 0xff006e, 0x06d6a0];
+ if (Math.random() < 0.3) {
+ // Simulate a gradient by returning an array of two colors
+ var c1 = colors[Math.floor(Math.random() * colors.length)];
+ var c2 = colors[Math.floor(Math.random() * colors.length)];
+ return [c1, c2];
+ }
return colors[Math.floor(Math.random() * colors.length)];
}
function randomShape() {
// Return 'box' or 'ellipse'
@@ -47,14 +53,33 @@
var w = randomSize();
var h = randomSize();
var shape = randomShape();
var color = randomColor();
- var asset = self.attachAsset({
- anchorX: 0.5,
- anchorY: 0.5
- }, {});
- asset.rotation = randomRotation();
- asset.alpha = randomAlpha();
+ if (Array.isArray(color)) {
+ // Simulate a gradient by overlaying two shapes with different colors and alpha
+ var asset1 = self.attachAsset({
+ anchorX: 0.5,
+ anchorY: 0.5
+ }, {});
+ asset1.tint = color[0];
+ asset1.rotation = randomRotation();
+ asset1.alpha = randomAlpha();
+ var asset2 = self.attachAsset({
+ anchorX: 0.5,
+ anchorY: 0.5
+ }, {});
+ asset2.tint = color[1];
+ asset2.rotation = randomRotation();
+ asset2.alpha = 0.5 + Math.random() * 0.3;
+ } else {
+ var asset = self.attachAsset({
+ anchorX: 0.5,
+ anchorY: 0.5
+ }, {});
+ asset.tint = color;
+ asset.rotation = randomRotation();
+ asset.alpha = randomAlpha();
+ }
} else if (type === 1) {
// Cluster: 3-6 shapes in a circle
var count = 3 + Math.floor(Math.random() * 4);
var radius = 80 + Math.random() * 120;
@@ -63,16 +88,39 @@
var w = randomSize() * (0.5 + Math.random() * 0.7);
var h = randomSize() * (0.5 + Math.random() * 0.7);
var shape = randomShape();
var color = randomColor();
- var asset = self.attachAsset({
- anchorX: 0.5,
- anchorY: 0.5
- }, {});
- asset.x = Math.cos(angle) * radius;
- asset.y = Math.sin(angle) * radius;
- asset.rotation = randomRotation();
- asset.alpha = randomAlpha();
+ if (Array.isArray(color)) {
+ // Simulate a gradient by overlaying two shapes
+ var asset1 = self.attachAsset({
+ anchorX: 0.5,
+ anchorY: 0.5
+ }, {});
+ asset1.tint = color[0];
+ asset1.x = Math.cos(angle) * radius;
+ asset1.y = Math.sin(angle) * radius;
+ asset1.rotation = randomRotation();
+ asset1.alpha = randomAlpha();
+ var asset2 = self.attachAsset({
+ anchorX: 0.5,
+ anchorY: 0.5
+ }, {});
+ asset2.tint = color[1];
+ asset2.x = Math.cos(angle) * radius;
+ asset2.y = Math.sin(angle) * radius;
+ asset2.rotation = randomRotation();
+ asset2.alpha = 0.5 + Math.random() * 0.3;
+ } else {
+ var asset = self.attachAsset({
+ anchorX: 0.5,
+ anchorY: 0.5
+ }, {});
+ asset.tint = color;
+ asset.x = Math.cos(angle) * radius;
+ asset.y = Math.sin(angle) * radius;
+ asset.rotation = randomRotation();
+ asset.alpha = randomAlpha();
+ }
}
} else {
// Overlay: 2-3 shapes stacked with different rotations
var overlays = 2 + Math.floor(Math.random() * 2);
@@ -80,14 +128,32 @@
var w = randomSize() * (0.7 + Math.random() * 0.5);
var h = randomSize() * (0.7 + Math.random() * 0.5);
var shape = randomShape();
var color = randomColor();
- var asset = self.attachAsset({
- anchorX: 0.5,
- anchorY: 0.5
- }, {});
- asset.rotation = randomRotation();
- asset.alpha = 0.5 + Math.random() * 0.5;
+ if (Array.isArray(color)) {
+ var asset1 = self.attachAsset({
+ anchorX: 0.5,
+ anchorY: 0.5
+ }, {});
+ asset1.tint = color[0];
+ asset1.rotation = randomRotation();
+ asset1.alpha = 0.5 + Math.random() * 0.5;
+ var asset2 = self.attachAsset({
+ anchorX: 0.5,
+ anchorY: 0.5
+ }, {});
+ asset2.tint = color[1];
+ asset2.rotation = randomRotation();
+ asset2.alpha = 0.3 + Math.random() * 0.3;
+ } else {
+ var asset = self.attachAsset({
+ anchorX: 0.5,
+ anchorY: 0.5
+ }, {});
+ asset.tint = color;
+ asset.rotation = randomRotation();
+ asset.alpha = 0.5 + Math.random() * 0.5;
+ }
}
}
}
generatePattern();
@@ -99,8 +165,55 @@
}, {
duration: 350,
easing: tween.elasticOut
});
+ // Sparkle and glow effect: animate alpha and scale for shimmer
+ function sparkleEffect(target) {
+ // Animate alpha up and down for shimmer
+ var _sparkleTween = function sparkleTween() {
+ tween(target, {
+ alpha: 1
+ }, {
+ duration: 180 + Math.random() * 120,
+ easing: tween.sineIn,
+ onComplete: function onComplete() {
+ tween(target, {
+ alpha: 0.7 + Math.random() * 0.3
+ }, {
+ duration: 180 + Math.random() * 120,
+ easing: tween.sineOut,
+ onComplete: _sparkleTween
+ });
+ }
+ });
+ };
+ _sparkleTween();
+ // Animate scale for a pulsing glow
+ var _pulseTween = function pulseTween() {
+ tween(target.scale, {
+ x: 1.08,
+ y: 1.08
+ }, {
+ duration: 320 + Math.random() * 120,
+ easing: tween.sineIn,
+ onComplete: function onComplete() {
+ tween(target.scale, {
+ x: 1,
+ y: 1
+ }, {
+ duration: 320 + Math.random() * 120,
+ easing: tween.sineOut,
+ onComplete: _pulseTween
+ });
+ }
+ });
+ };
+ _pulseTween();
+ }
+ // Apply sparkle effect to all children (shapes) of the pattern
+ for (var i = 0; i < self.children.length; i++) {
+ sparkleEffect(self.children[i]);
+ }
return self;
});
/****
Used plugins
@upit/tween
