===================================================================
--- original.js
+++ change.js
@@ -1,6 +1,274 @@
-/****
+/**** 
+* Classes
+****/ 
+var ColorPalette = Container.expand(function () {
+	var self = Container.call(this);
+	// Available colors
+	self.colors = [0xff0000, 0x00ff00, 0x0000ff, 0xffff00, 0xff00ff, 0x00ffff, 0x000000, 0xffffff];
+	self.colorButtons = [];
+	// Create color buttons
+	for (var i = 0; i < self.colors.length; i++) {
+		var colorButton = LK.getAsset('brush', {
+			anchorX: 0.5,
+			anchorY: 0.5,
+			scaleX: 2,
+			scaleY: 2
+		});
+		colorButton.tint = self.colors[i];
+		colorButton.x = 150 + i % 4 * 100;
+		colorButton.y = 100 + Math.floor(i / 4) * 100;
+		colorButton.colorIndex = i;
+		// Add selection indicator
+		colorButton.isSelected = i === 0;
+		if (colorButton.isSelected) {
+			colorButton.scaleX = 2.5;
+			colorButton.scaleY = 2.5;
+		}
+		self.addChild(colorButton);
+		self.colorButtons.push(colorButton);
+	}
+	self.down = function (x, y, obj) {
+		var localPos = self.toLocal(obj.parent.toGlobal(obj.position));
+		// Check which color was clicked
+		for (var i = 0; i < self.colorButtons.length; i++) {
+			var button = self.colorButtons[i];
+			var dx = localPos.x - button.x;
+			var dy = localPos.y - button.y;
+			var distance = Math.sqrt(dx * dx + dy * dy);
+			if (distance < 40) {
+				// Deselect all buttons
+				for (var j = 0; j < self.colorButtons.length; j++) {
+					self.colorButtons[j].isSelected = false;
+					self.colorButtons[j].scaleX = 2;
+					self.colorButtons[j].scaleY = 2;
+				}
+				// Select clicked button
+				button.isSelected = true;
+				button.scaleX = 2.5;
+				button.scaleY = 2.5;
+				// Update canvas brush color
+				if (drawingCanvas) {
+					drawingCanvas.setBrushColor(self.colors[i]);
+				}
+				break;
+			}
+		}
+	};
+	return self;
+});
+// Set a light background for the art app
+var DrawingCanvas = Container.expand(function () {
+	var self = Container.call(this);
+	// Create canvas background
+	var canvasBackground = self.attachAsset('canvas', {
+		anchorX: 0,
+		anchorY: 0
+	});
+	// Drawing state
+	self.isDrawing = false;
+	self.brushSize = 20;
+	self.brushColor = 0xff0000;
+	self.lastX = 0;
+	self.lastY = 0;
+	// Array to store drawn strokes
+	self.strokes = [];
+	self.startDrawing = function (x, y) {
+		self.isDrawing = true;
+		self.lastX = x;
+		self.lastY = y;
+		// Create new stroke
+		var newStroke = [];
+		newStroke.push({
+			x: x,
+			y: y
+		});
+		self.strokes.push(newStroke);
+		// Draw initial point
+		self.drawPoint(x, y);
+	};
+	self.continueDrawing = function (x, y) {
+		if (!self.isDrawing) return;
+		// Add point to current stroke
+		var currentStroke = self.strokes[self.strokes.length - 1];
+		currentStroke.push({
+			x: x,
+			y: y
+		});
+		// Draw line from last position to current
+		self.drawLine(self.lastX, self.lastY, x, y);
+		self.lastX = x;
+		self.lastY = y;
+	};
+	self.stopDrawing = function () {
+		self.isDrawing = false;
+	};
+	self.drawPoint = function (x, y) {
+		var point = LK.getAsset('brush', {
+			anchorX: 0.5,
+			anchorY: 0.5,
+			scaleX: self.brushSize / 20,
+			scaleY: self.brushSize / 20
+		});
+		point.tint = self.brushColor;
+		point.x = x;
+		point.y = y;
+		self.addChild(point);
+	};
+	self.drawLine = function (x1, y1, x2, y2) {
+		// Draw multiple points between start and end to create smooth line
+		var distance = Math.sqrt((x2 - x1) * (x2 - x1) + (y2 - y1) * (y2 - y1));
+		var steps = Math.max(1, Math.floor(distance / 5));
+		for (var i = 0; i <= steps; i++) {
+			var t = i / steps;
+			var x = x1 + (x2 - x1) * t;
+			var y = y1 + (y2 - y1) * t;
+			self.drawPoint(x, y);
+		}
+	};
+	self.clearCanvas = function () {
+		// Remove all drawn elements except canvas background
+		for (var i = self.children.length - 1; i >= 1; i--) {
+			self.children[i].destroy();
+			self.children.splice(i, 1);
+		}
+		self.strokes = [];
+	};
+	self.setBrushSize = function (size) {
+		self.brushSize = Math.max(5, Math.min(50, size));
+	};
+	self.setBrushColor = function (color) {
+		self.brushColor = color;
+	};
+	return self;
+});
+
+/**** 
 * Initialize Game
-****/
+****/ 
 var game = new LK.Game({
 	backgroundColor: 0x000000
-});
\ No newline at end of file
+});
+
+/**** 
+* Game Code
+****/ 
+// Set a light background for the art app
+// Canvas drawing assets
+game.setBackgroundColor(0xf0f0f0);
+// Create drawing canvas
+var drawingCanvas = game.addChild(new DrawingCanvas());
+// Create color palette
+var colorPalette = game.addChild(new ColorPalette());
+// Create UI elements
+var titleText = new Text2('Art Canvas', {
+	size: 80,
+	fill: 0x333333
+});
+titleText.anchor.set(0.5, 0);
+titleText.x = 2048 / 2;
+titleText.y = 20;
+game.addChild(titleText);
+// Create clear button
+var clearButton = LK.getAsset('canvas', {
+	anchorX: 0.5,
+	anchorY: 0.5,
+	scaleX: 0.2,
+	scaleY: 0.1
+});
+clearButton.tint = 0xcccccc;
+clearButton.x = 2048 - 200;
+clearButton.y = 150;
+game.addChild(clearButton);
+var clearText = new Text2('Clear', {
+	size: 40,
+	fill: 0x000000
+});
+clearText.anchor.set(0.5, 0.5);
+clearText.x = clearButton.x;
+clearText.y = clearButton.y;
+game.addChild(clearText);
+// Brush size controls
+var brushSizeText = new Text2('Brush Size: 20', {
+	size: 50,
+	fill: 0x333333
+});
+brushSizeText.anchor.set(0, 0);
+brushSizeText.x = 150;
+brushSizeText.y = 250;
+game.addChild(brushSizeText);
+// Size buttons
+var smallBrushButton = LK.getAsset('brush', {
+	anchorX: 0.5,
+	anchorY: 0.5,
+	scaleX: 0.5,
+	scaleY: 0.5
+});
+smallBrushButton.tint = 0x666666;
+smallBrushButton.x = 200;
+smallBrushButton.y = 350;
+game.addChild(smallBrushButton);
+var mediumBrushButton = LK.getAsset('brush', {
+	anchorX: 0.5,
+	anchorY: 0.5,
+	scaleX: 1,
+	scaleY: 1
+});
+mediumBrushButton.tint = 0x666666;
+mediumBrushButton.x = 300;
+mediumBrushButton.y = 350;
+game.addChild(mediumBrushButton);
+var largeBrushButton = LK.getAsset('brush', {
+	anchorX: 0.5,
+	anchorY: 0.5,
+	scaleX: 2,
+	scaleY: 2
+});
+largeBrushButton.tint = 0x666666;
+largeBrushButton.x = 400;
+largeBrushButton.y = 350;
+game.addChild(largeBrushButton);
+// Game event handlers
+game.down = function (x, y, obj) {
+	// Check if clear button was pressed
+	var dx = x - clearButton.x;
+	var dy = y - clearButton.y;
+	if (Math.abs(dx) < 100 && Math.abs(dy) < 30) {
+		drawingCanvas.clearCanvas();
+		return;
+	}
+	// Check brush size buttons
+	var smallDx = x - smallBrushButton.x;
+	var smallDy = y - smallBrushButton.y;
+	if (Math.sqrt(smallDx * smallDx + smallDy * smallDy) < 30) {
+		drawingCanvas.setBrushSize(10);
+		brushSizeText.setText('Brush Size: 10');
+		return;
+	}
+	var mediumDx = x - mediumBrushButton.x;
+	var mediumDy = y - mediumBrushButton.y;
+	if (Math.sqrt(mediumDx * mediumDx + mediumDy * mediumDy) < 30) {
+		drawingCanvas.setBrushSize(20);
+		brushSizeText.setText('Brush Size: 20');
+		return;
+	}
+	var largeDx = x - largeBrushButton.x;
+	var largeDy = y - largeBrushButton.y;
+	if (Math.sqrt(largeDx * largeDx + largeDy * largeDy) < 30) {
+		drawingCanvas.setBrushSize(40);
+		brushSizeText.setText('Brush Size: 40');
+		return;
+	}
+	// Start drawing on canvas (avoid drawing on UI area)
+	if (y > 400) {
+		drawingCanvas.startDrawing(x, y);
+	}
+};
+game.move = function (x, y, obj) {
+	// Continue drawing if in canvas area
+	if (y > 400) {
+		drawingCanvas.continueDrawing(x, y);
+	}
+};
+game.up = function (x, y, obj) {
+	drawingCanvas.stopDrawing();
+};
\ No newline at end of file