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 the current pattern (only one at a time)
var currentPattern = null;
// Helper: don't allow patterns in the top-left 100x100 px (menu area)
function isInMenuArea(x, y) {
return x < 100 && y < 100;
}
// Create the "Clear" button (Text2 object)
var clearBtn = new Text2("Clear", {
size: 100,
fill: "#222",
font: "Arial Black"
});
clearBtn.anchor.set(0.5, 0.5);
// Place the button at the top right, with margin
clearBtn.x = 2048 - 200;
clearBtn.y = 120;
clearBtn.interactive = true;
clearBtn.buttonMode = true;
game.addChild(clearBtn);
// On tap/click anywhere, show a new large pattern at that location (removing the previous one)
game.down = function (x, y, obj) {
// Don't allow patterns in menu area or on the clear button
if (isInMenuArea(x, y)) return;
// If tap is on the clear button, ignore (handled separately)
var btnBounds = clearBtn.getBounds();
if (x >= clearBtn.x + btnBounds.x && x <= clearBtn.x + btnBounds.x + btnBounds.width && y >= clearBtn.y + btnBounds.y && y <= clearBtn.y + btnBounds.y + btnBounds.height) {
return;
}
// Remove previous pattern if exists
if (currentPattern) {
currentPattern.destroy();
currentPattern = null;
}
// Create a new large pattern
var pattern = new Pattern();
pattern.x = x;
pattern.y = y;
// Scale up for "big" effect
pattern.scale.set(1.5 + Math.random() * 0.7, 1.5 + Math.random() * 0.7);
currentPattern = pattern;
game.addChild(pattern);
};
// Handle "Clear" button tap: remove the pattern
clearBtn.down = function (x, y, obj) {
if (currentPattern) {
currentPattern.destroy();
currentPattern = null;
}
};
// No dragging or move/up handlers needed, as only one pattern is shown at a time ===================================================================
--- original.js
+++ change.js
@@ -231,66 +231,54 @@
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 = [];
+// Store the current pattern (only one at a time)
+var currentPattern = null;
// 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
+// Create the "Clear" button (Text2 object)
+var clearBtn = new Text2("Clear", {
+ size: 100,
+ fill: "#222",
+ font: "Arial Black"
+});
+clearBtn.anchor.set(0.5, 0.5);
+// Place the button at the top right, with margin
+clearBtn.x = 2048 - 200;
+clearBtn.y = 120;
+clearBtn.interactive = true;
+clearBtn.buttonMode = true;
+game.addChild(clearBtn);
+// On tap/click anywhere, show a new large pattern at that location (removing the previous one)
game.down = function (x, y, obj) {
- // Don't allow patterns in menu area
+ // Don't allow patterns in menu area or on the clear button
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 tap is on the clear button, ignore (handled separately)
+ var btnBounds = clearBtn.getBounds();
+ if (x >= clearBtn.x + btnBounds.x && x <= clearBtn.x + btnBounds.x + btnBounds.width && y >= clearBtn.y + btnBounds.y && y <= clearBtn.y + btnBounds.y + btnBounds.height) {
+ return;
}
- // If no pattern tapped, create a new one
+ // Remove previous pattern if exists
+ if (currentPattern) {
+ currentPattern.destroy();
+ currentPattern = null;
+ }
+ // Create a new large pattern
var pattern = new Pattern();
pattern.x = x;
pattern.y = y;
- patterns.push(pattern);
+ // Scale up for "big" effect
+ pattern.scale.set(1.5 + Math.random() * 0.7, 1.5 + Math.random() * 0.7);
+ currentPattern = 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;
+// Handle "Clear" button tap: remove the pattern
+clearBtn.down = function (x, y, obj) {
+ if (currentPattern) {
+ currentPattern.destroy();
+ currentPattern = null;
}
};
-// 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.
\ No newline at end of file
+// No dragging or move/up handlers needed, as only one pattern is shown at a time
\ No newline at end of file
Used plugins
@upit/tween
