Play
:quality(85)/https://cdn.frvr.ai/685d605090a44f852a0727f4.png)
:quality(85)/https://cdn.upit.com/ke6eehmepyp5ncixjjz6arui.jpeg)
:quality(85)/https://cdn.frvr.ai/685d605290a44f852a0727f5.png)
Creation History
User prompt
Añade música de fondeo
User prompt
Elimina las opciones de sabe newby gallery
User prompt
Haz que al pinchar en sabe el cuadro se guarde en la gallery ↪💡 Consider importing and using the following plugins: @upit/storage.v1
User prompt
Haz el botón de clisé en la galería sea mucho más grande
User prompt
Please fix the bug: 'Script error.' in or related to this line: 'storage.paintings.push(paintingData);' Line Number: 295 ↪💡 Consider importing and using the following plugins: @upit/storage.v1
User prompt
Please fix the bug: 'Script error.' in or related to this line: 'storage.paintings.push(paintingData);' Line Number: 295 ↪💡 Consider importing and using the following plugins: @upit/storage.v1
User prompt
Baja los botones de grosor y haz el cuadro más grande
User prompt
Elimina la opción de los colores y haz que el grosor y las opciones ocupen en el espacio restante
User prompt
Cambia los colores que hay por rosa negro morado rojo verde azul amarillo negro blanco marrón
User prompt
Pon el botón de gallery como el de los demas
User prompt
Separa los botones de opciones
User prompt
Separa el botón de opciones en botones individuales
Code edit (1 edits merged)
Please save this source code
User prompt
Pon los botones de opciones en el centro de abaja
User prompt
Pon los botones de color más arruba
User prompt
Haz que los colores estén más en el centro que no se repitan los colores y que añadas más colores
User prompt
Pon los botones the grisor debajo del marco
User prompt
Pon los botones de grosor en el centro
User prompt
Haz los botones de paleta más separados entre si
User prompt
Haz los controles separados y más grandes al igual que la paleta
User prompt
Haz los botones mucho más grandes
User prompt
Haz que los botones estén abajo
User prompt
Haz que al detectar tacto se pinte pero en vez de puntos líneas y aumenta el tamaño de los controles
Code edit (1 edits merged)
Please save this source code
User prompt
Paint Studio - Creative Canvas
/****
* Classes
****/
var BrushButton = Container.expand(function (size, asset) {
var self = Container.call(this);
var button = self.attachAsset(asset, {
anchorX: 0.5,
anchorY: 0.5
});
self.size = size;
self.down = function () {
currentBrushSize = self.size;
updateBrushPreview();
};
return self;
});
var ColorButton = Container.expand(function (color) {
var self = Container.call(this);
var button = self.attachAsset('colorButton', {
anchorX: 0.5,
anchorY: 0.5
});
button.tint = color;
self.color = color;
self.down = function () {
currentColor = self.color;
updateBrushPreview();
};
return self;
});
var PaintDot = Container.expand(function (color, size) {
var self = Container.call(this);
var dot = self.attachAsset('paintDot', {
anchorX: 0.5,
anchorY: 0.5,
scaleX: size / 20,
scaleY: size / 20
});
dot.tint = color;
return self;
});
var ToolButton = Container.expand(function (label, action) {
var self = Container.call(this);
var button = self.attachAsset('toolButton', {
anchorX: 0.5,
anchorY: 0.5
});
var text = new Text2(label, {
size: 24,
fill: 0xFFFFFF
});
text.anchor.set(0.5, 0.5);
self.addChild(text);
self.action = action;
self.down = function () {
self.action();
};
return self;
});
/****
* Initialize Game
****/
var game = new LK.Game({
backgroundColor: 0xf0f0f0
});
/****
* Game Code
****/
// Game state
var isPainting = false;
var currentColor = 0x000000;
var currentBrushSize = 20;
var paintingMode = true;
var isErasing = false;
var currentPaintingDots = [];
var lastPaintX = null;
var lastPaintY = null;
// Canvas setup - made larger
var canvas = game.addChild(LK.getAsset('canvas', {
anchorX: 0.5,
anchorY: 0.5,
x: 1024,
y: 800
}));
// Scale up the canvas to make it larger
canvas.scaleX = 1.3;
canvas.scaleY = 1.3;
// Brush size buttons - moved down
var brushSizes = [{
size: 15,
asset: 'brushSmall'
}, {
size: 30,
asset: 'brushMedium'
}, {
size: 45,
asset: 'brushLarge'
}];
var brushButtons = [];
var brushSpacing = 400;
var brushStartX = 1024 - (brushSizes.length - 1) * brushSpacing / 2;
for (var i = 0; i < brushSizes.length; i++) {
var brushBtn = new BrushButton(brushSizes[i].size, brushSizes[i].asset);
brushBtn.x = brushStartX + i * brushSpacing;
brushBtn.y = 2100;
brushBtn.scaleX = 4.0;
brushBtn.scaleY = 4.0;
game.addChild(brushBtn);
brushButtons.push(brushBtn);
}
// Individual tool buttons - separated with more spacing
var buttonSpacing = 350;
var totalButtons = 2;
var totalWidth = (totalButtons - 1) * buttonSpacing;
var startX = 1024 - totalWidth / 2;
// Clear button
var clearBtn = new ToolButton('Clear', function () {
clearCanvas();
});
clearBtn.x = startX + 0 * buttonSpacing;
clearBtn.y = 2580;
clearBtn.scaleX = 3.5;
clearBtn.scaleY = 3.5;
game.addChild(clearBtn);
// Erase button
var eraseBtn = new ToolButton('Erase', function () {
toggleEraser();
});
eraseBtn.x = startX + 1 * buttonSpacing;
eraseBtn.y = 2580;
eraseBtn.scaleX = 3.5;
eraseBtn.scaleY = 3.5;
game.addChild(eraseBtn);
// Brush preview
var brushPreview = game.addChild(LK.getAsset('brushSmall', {
anchorX: 0.5,
anchorY: 0.5,
x: 1900,
y: 2200
}));
function updateBrushPreview() {
brushPreview.tint = isErasing ? 0xff0000 : currentColor;
brushPreview.scaleX = currentBrushSize / 20;
brushPreview.scaleY = currentBrushSize / 20;
}
function clearCanvas() {
// Remove all paint dots from canvas
for (var i = canvas.children.length - 1; i >= 0; i--) {
var child = canvas.children[i];
if (child instanceof PaintDot) {
canvas.removeChild(child);
}
}
currentPaintingDots = [];
}
function toggleEraser() {
isErasing = !isErasing;
updateBrushPreview();
}
function paintAt(x, y) {
var localPos = canvas.toLocal({
x: x,
y: y
});
// Check if within canvas bounds - updated for larger canvas
if (localPos.x < -1170 || localPos.x > 1170 || localPos.y < -910 || localPos.y > 910) {
return;
}
if (isErasing) {
// Remove dots near the eraser position
for (var i = canvas.children.length - 1; i >= 0; i--) {
var child = canvas.children[i];
if (child instanceof PaintDot) {
var dx = child.x - localPos.x;
var dy = child.y - localPos.y;
var distance = Math.sqrt(dx * dx + dy * dy);
if (distance < currentBrushSize) {
canvas.removeChild(child);
// Remove from currentPaintingDots array
for (var j = currentPaintingDots.length - 1; j >= 0; j--) {
var dot = currentPaintingDots[j];
if (Math.abs(dot.x - localPos.x) < 5 && Math.abs(dot.y - localPos.y) < 5) {
currentPaintingDots.splice(j, 1);
break;
}
}
}
}
}
} else {
// Draw line from last position to current position
if (lastPaintX !== null && lastPaintY !== null) {
// Calculate distance between points
var dx = localPos.x - lastPaintX;
var dy = localPos.y - lastPaintY;
var distance = Math.sqrt(dx * dx + dy * dy);
// Draw dots along the line to create smooth stroke
var steps = Math.max(1, Math.floor(distance / (currentBrushSize * 0.3)));
for (var i = 0; i <= steps; i++) {
var t = i / steps;
var x = lastPaintX + dx * t;
var y = lastPaintY + dy * t;
var dot = new PaintDot(currentColor, currentBrushSize);
dot.x = x;
dot.y = y;
canvas.addChild(dot);
currentPaintingDots.push({
x: x,
y: y,
color: currentColor,
size: currentBrushSize
});
}
} else {
// First dot
var dot = new PaintDot(currentColor, currentBrushSize);
dot.x = localPos.x;
dot.y = localPos.y;
canvas.addChild(dot);
currentPaintingDots.push({
x: localPos.x,
y: localPos.y,
color: currentColor,
size: currentBrushSize
});
}
// Update last paint position
lastPaintX = localPos.x;
lastPaintY = localPos.y;
}
}
// Initialize brush preview
updateBrushPreview();
game.down = function (x, y, obj) {
isPainting = true;
lastPaintX = null;
lastPaintY = null;
paintAt(x, y);
};
game.up = function (x, y, obj) {
isPainting = false;
lastPaintX = null;
lastPaintY = null;
};
game.move = function (x, y, obj) {
if (isPainting) {
paintAt(x, y);
}
};
game.update = function () {
// Game loop - nothing specific needed for painting
}; ===================================================================
--- original.js
+++ change.js
@@ -1,12 +1,5 @@
/****
-* Plugins
-****/
-var storage = LK.import("@upit/storage.v1", {
- paintings: []
-});
-
-/****
* Classes
****/
var BrushButton = Container.expand(function (size, asset) {
var self = Container.call(this);
@@ -34,25 +27,8 @@
updateBrushPreview();
};
return self;
});
-var GalleryButton = Container.expand(function () {
- var self = Container.call(this);
- var button = self.attachAsset('galleryButton', {
- anchorX: 0.5,
- anchorY: 0.5
- });
- var text = new Text2('Gallery', {
- size: 28,
- fill: 0xFFFFFF
- });
- text.anchor.set(0.5, 0.5);
- self.addChild(text);
- self.down = function () {
- showGallery();
- };
- return self;
-});
var PaintDot = Container.expand(function (color, size) {
var self = Container.call(this);
var dot = self.attachAsset('paintDot', {
anchorX: 0.5,
@@ -62,34 +38,8 @@
});
dot.tint = color;
return self;
});
-var PaintingThumbnail = Container.expand(function (paintingData, index) {
- var self = Container.call(this);
- var thumbnail = self.attachAsset('canvas', {
- anchorX: 0.5,
- anchorY: 0.5,
- scaleX: 0.3,
- scaleY: 0.3
- });
- self.paintingData = paintingData;
- self.index = index;
- // Recreate dots on thumbnail
- if (paintingData && paintingData.dots) {
- for (var i = 0; i < paintingData.dots.length; i++) {
- var dotData = paintingData.dots[i];
- var dot = new PaintDot(dotData.color, dotData.size);
- dot.x = dotData.x * 0.3;
- dot.y = dotData.y * 0.3;
- self.addChild(dot);
- }
- }
- self.down = function () {
- loadPainting(self.paintingData);
- hideGallery();
- };
- return self;
-});
var ToolButton = Container.expand(function (label, action) {
var self = Container.call(this);
var button = self.attachAsset('toolButton', {
anchorX: 0.5,
@@ -117,20 +67,15 @@
/****
* Game Code
****/
-// Initialize storage with default values
-if (!storage.paintings) {
- storage.paintings = [];
-}
// Game state
var isPainting = false;
var currentColor = 0x000000;
var currentBrushSize = 20;
var paintingMode = true;
var isErasing = false;
var currentPaintingDots = [];
-var showingGallery = false;
var lastPaintX = null;
var lastPaintY = null;
// Canvas setup - made larger
var canvas = game.addChild(LK.getAsset('canvas', {
@@ -166,52 +111,25 @@
brushButtons.push(brushBtn);
}
// Individual tool buttons - separated with more spacing
var buttonSpacing = 350;
-var totalButtons = 5;
+var totalButtons = 2;
var totalWidth = (totalButtons - 1) * buttonSpacing;
var startX = 1024 - totalWidth / 2;
-// Gallery button
-var galleryBtn = new ToolButton('Gallery', function () {
- showGallery();
-});
-galleryBtn.x = startX + 0 * buttonSpacing;
-galleryBtn.y = 2580;
-galleryBtn.scaleX = 3.5;
-galleryBtn.scaleY = 3.5;
-game.addChild(galleryBtn);
-// New button
-var newBtn = new ToolButton('New', function () {
- newPainting();
-});
-newBtn.x = startX + 1 * buttonSpacing;
-newBtn.y = 2580;
-newBtn.scaleX = 3.5;
-newBtn.scaleY = 3.5;
-game.addChild(newBtn);
-// Save button
-var saveBtn = new ToolButton('Save', function () {
- savePainting();
-});
-saveBtn.x = startX + 2 * buttonSpacing;
-saveBtn.y = 2580;
-saveBtn.scaleX = 3.5;
-saveBtn.scaleY = 3.5;
-game.addChild(saveBtn);
// Clear button
var clearBtn = new ToolButton('Clear', function () {
clearCanvas();
});
-clearBtn.x = startX + 3 * buttonSpacing;
+clearBtn.x = startX + 0 * buttonSpacing;
clearBtn.y = 2580;
clearBtn.scaleX = 3.5;
clearBtn.scaleY = 3.5;
game.addChild(clearBtn);
// Erase button
var eraseBtn = new ToolButton('Erase', function () {
toggleEraser();
});
-eraseBtn.x = startX + 4 * buttonSpacing;
+eraseBtn.x = startX + 1 * buttonSpacing;
eraseBtn.y = 2580;
eraseBtn.scaleX = 3.5;
eraseBtn.scaleY = 3.5;
game.addChild(eraseBtn);
@@ -221,43 +139,8 @@
anchorY: 0.5,
x: 1900,
y: 2200
}));
-// Gallery container
-var galleryContainer = new Container();
-game.addChild(galleryContainer);
-galleryContainer.visible = false;
-// Gallery background
-var galleryBg = galleryContainer.addChild(LK.getAsset('canvas', {
- anchorX: 0.5,
- anchorY: 0.5,
- x: 1024,
- y: 1366,
- scaleX: 1.2,
- scaleY: 2.0
-}));
-galleryBg.tint = 0x222222;
-// Gallery title
-var galleryTitle = new Text2('Gallery', {
- size: 48,
- fill: 0xFFFFFF
-});
-galleryTitle.anchor.set(0.5, 0.5);
-galleryTitle.x = 1024;
-galleryTitle.y = 200;
-galleryContainer.addChild(galleryTitle);
-// Gallery close button
-var closeGalleryBtn = new ToolButton('Close', function () {
- hideGallery();
-});
-closeGalleryBtn.x = 1024;
-closeGalleryBtn.y = 2500;
-closeGalleryBtn.scaleX = 6.0;
-closeGalleryBtn.scaleY = 6.0;
-galleryContainer.addChild(closeGalleryBtn);
-// Gallery thumbnails container
-var thumbnailsContainer = new Container();
-galleryContainer.addChild(thumbnailsContainer);
function updateBrushPreview() {
brushPreview.tint = isErasing ? 0xff0000 : currentColor;
brushPreview.scaleX = currentBrushSize / 20;
brushPreview.scaleY = currentBrushSize / 20;
@@ -275,77 +158,9 @@
function toggleEraser() {
isErasing = !isErasing;
updateBrushPreview();
}
-function savePainting() {
- if (currentPaintingDots.length === 0) {
- return;
- }
- var paintingData = {
- dots: currentPaintingDots.slice(),
- timestamp: Date.now()
- };
- try {
- if (!storage.paintings) {
- storage.paintings = [];
- }
- storage.paintings.push(paintingData);
- showGallery();
- updateGalleryThumbnails();
- } catch (e) {
- console.log('Error saving painting:', e);
- }
-}
-function newPainting() {
- clearCanvas();
- currentPaintingDots = [];
-}
-function showGallery() {
- galleryContainer.visible = true;
- showingGallery = true;
- updateGalleryThumbnails();
-}
-function hideGallery() {
- galleryContainer.visible = false;
- showingGallery = false;
-}
-function updateGalleryThumbnails() {
- // Clear existing thumbnails
- for (var i = thumbnailsContainer.children.length - 1; i >= 0; i--) {
- thumbnailsContainer.removeChild(thumbnailsContainer.children[i]);
- }
- // Create new thumbnails
- var paintings = storage.paintings || [];
- for (var i = 0; i < paintings.length; i++) {
- var thumbnail = new PaintingThumbnail(paintings[i], i);
- thumbnail.x = 300 + i % 3 * 400;
- thumbnail.y = 400 + Math.floor(i / 3) * 350;
- thumbnailsContainer.addChild(thumbnail);
- }
-}
-function loadPainting(paintingData) {
- clearCanvas();
- currentPaintingDots = [];
- if (paintingData && paintingData.dots) {
- for (var i = 0; i < paintingData.dots.length; i++) {
- var dotData = paintingData.dots[i];
- var dot = new PaintDot(dotData.color, dotData.size);
- dot.x = dotData.x;
- dot.y = dotData.y;
- canvas.addChild(dot);
- currentPaintingDots.push({
- x: dotData.x,
- y: dotData.y,
- color: dotData.color,
- size: dotData.size
- });
- }
- }
-}
function paintAt(x, y) {
- if (showingGallery) {
- return;
- }
var localPos = canvas.toLocal({
x: x,
y: y
});
@@ -418,11 +233,8 @@
}
// Initialize brush preview
updateBrushPreview();
game.down = function (x, y, obj) {
- if (showingGallery) {
- return;
- }
isPainting = true;
lastPaintX = null;
lastPaintY = null;
paintAt(x, y);
