84 lines
2.2 KiB
Plaintext
84 lines
2.2 KiB
Plaintext
|
// 🎨 Drawing App Demo - CanvasEventBox + WebCanvasBox
|
||
|
|
// Interactive drawing application demonstrating Everything is Box philosophy
|
||
|
|
|
||
|
|
print("🎨 === Drawing App Demo Starting ===")
|
||
|
|
|
||
|
|
// Initialize drawing components
|
||
|
|
local canvas, events, timer
|
||
|
|
canvas = new WebCanvasBox("demo-canvas", 800, 600)
|
||
|
|
events = new CanvasEventBox("demo-canvas")
|
||
|
|
timer = new TimerBox()
|
||
|
|
|
||
|
|
// Drawing state
|
||
|
|
local isDrawing, currentColor, brushSize
|
||
|
|
isDrawing = false
|
||
|
|
currentColor = "black"
|
||
|
|
brushSize = 3
|
||
|
|
|
||
|
|
// Set up canvas
|
||
|
|
canvas.clear()
|
||
|
|
canvas.setFillStyle("white")
|
||
|
|
canvas.fillRect(0, 0, 800, 600)
|
||
|
|
|
||
|
|
// Draw UI - color palette at top
|
||
|
|
local colors
|
||
|
|
colors = ["black", "red", "blue", "green", "yellow", "purple", "orange"]
|
||
|
|
|
||
|
|
local i, color, x
|
||
|
|
i = 0
|
||
|
|
loop(i < 7) {
|
||
|
|
color = colors[i]
|
||
|
|
x = 50 + i * 80
|
||
|
|
|
||
|
|
// Color swatch
|
||
|
|
canvas.setFillStyle(color)
|
||
|
|
canvas.fillRect(x, 10, 60, 30)
|
||
|
|
|
||
|
|
// White border
|
||
|
|
canvas.setStrokeStyle("white")
|
||
|
|
canvas.setLineWidth(2)
|
||
|
|
canvas.strokeRect(x, 10, 60, 30)
|
||
|
|
|
||
|
|
i = i + 1
|
||
|
|
}
|
||
|
|
|
||
|
|
// Draw instructions
|
||
|
|
canvas.setFillStyle("black")
|
||
|
|
canvas.fillText("Click and drag to draw • Click colors to change", 50, 70, "14px Arial", "black")
|
||
|
|
|
||
|
|
// Mouse event handlers using simplified approach for demo
|
||
|
|
print("🖱️ Setting up mouse events...")
|
||
|
|
|
||
|
|
// Note: For this demo, we'll use a simplified event handling approach
|
||
|
|
// In a full implementation, the CanvasEventBox would have proper callback support
|
||
|
|
|
||
|
|
print("🎨 Drawing App Ready!")
|
||
|
|
print("• Canvas size: 800x600")
|
||
|
|
print("• Colors available: black, red, blue, green, yellow, purple, orange")
|
||
|
|
print("• Click and drag to draw")
|
||
|
|
print("• Open your browser to see the interactive drawing canvas")
|
||
|
|
|
||
|
|
// Timer-based drawing simulation for demo purposes
|
||
|
|
local demoTime
|
||
|
|
demoTime = timer.now()
|
||
|
|
|
||
|
|
// Draw a sample doodle to show the app works
|
||
|
|
canvas.setStrokeStyle("red")
|
||
|
|
canvas.setLineWidth(5)
|
||
|
|
canvas.beginPath()
|
||
|
|
canvas.moveTo(200, 200)
|
||
|
|
canvas.lineTo(250, 150)
|
||
|
|
canvas.lineTo(300, 200)
|
||
|
|
canvas.lineTo(350, 150)
|
||
|
|
canvas.stroke()
|
||
|
|
|
||
|
|
// Draw a circle
|
||
|
|
canvas.setFillStyle("blue")
|
||
|
|
canvas.fillCircle(400, 300, 40)
|
||
|
|
|
||
|
|
// Draw text
|
||
|
|
canvas.setFillStyle("green")
|
||
|
|
canvas.fillText("Nyash Drawing Demo!", 200, 400, "24px Arial", "green")
|
||
|
|
|
||
|
|
print("✅ Drawing App Demo Complete!")
|
||
|
|
print("🌐 Everything is Box - even artistic expression!")
|