Painting App

{"name":"Painting App 6-5-2024","description":"Unleash your inner artist with DoodleMaster 5000! This fun and easy-to-use painting app allows you to create magnificent masterpieces with just a few clicks. With an added eraser tool and a clear canvas button, the possibilities are endless!","photo":"https://jippity.s3.amazonaws.com/paintingApp.png","view_count":2,"fork_count":0,"expires_at":null,"created_at":"2024-09-05T16:52:46.287236Z","updated_at":"2024-09-05T16:52:46.287241Z","user_id":5,"status":"PRIVATE","parent_id":1761,"id":3175,"user":{"photo":null,"email":null,"recess_id":"b5574579-4904-b775-ad8e-eff5c085f819","created_at":"2023-12-12T12:00:51.087995Z","reset_token":null,"stripe_customer_id":null,"seats":null,"username":"theop","id":5,"password_hash":null,"updated_at":"2023-12-12T12:00:51.087997Z","reset_token_expiry":null,"subscription_status":null},"code":{"script.js":"// NEXT STEPS:\n// Idea 1: Add a text tool\n// Idea 2: Change the the background color button to a colorSelector, like the brush/draw colorSelector\n// Idea 3: Add brush patterns and textures\n// Idea 4: Add color palette presets\n// Idea 5: Add undo/redo functionality\n// Idea 6: Use sprites as stamps\n// Idea 7: Add layers support\n\n// PAINTING APP TEMPLATE\n// ————— by Kristen —————\n\n// Store the previous mouse position, for drawing continuously without gaps\nlet prevMouseX = -1;\nlet prevMouseY = -1;\n\nlet currentTool = 'brush';\nlet brushSize = 20;\nlet brushColor = '#800080'; // Purple starting color\nlet eraserActive = false;\nlet backgroundColor = 0;\n\nfunction setup() {\n createCanvas(800, 600);\n background(backgroundColor);\n\n // Clear canvas button\n let clearButton = createButton('Clear Canvas');\n clearButton.mousePressed(clearCanvas);\n clearButton.position(10, 10);\n\n // Save Button\n let saveButton = createButton('Save Art');\n saveButton.position(110, 10);\n saveButton.mousePressed(saveArtwork);\n\n // Shape Selector\n let shapeSelector = createSelect();\n shapeSelector.position(180, 10);\n shapeSelector.option('Brush', 'brush');\n shapeSelector.option('Circle', 'circle');\n shapeSelector.option('Square', 'square');\n shapeSelector.option('Triangle', 'triangle');\n shapeSelector.option('Eraser', 'eraser');\n shapeSelector.changed(() => {\n currentTool = shapeSelector.value();\n eraserActive = (currentTool === 'eraser');\n });\n\n // Label for brush color picker\n let brushColorLabel = createSpan('Draw: ');\n brushColorLabel.position(253, 10);\n brushColorLabel.style('color', '#800080'); // Set the label text color to purple\n\n // Brush color picker\n let colorPicker = createColorPicker(brushColor);\n colorPicker.position(295, 10);\n colorPicker.input(() => brushColor = colorPicker.value());\n\n // Brush size selector\n let sizeSelector = createSelect();\n sizeSelector.position(350, 10);\n sizeSelector.option('Small', 5);\n sizeSelector.option('Medium', 20);\n sizeSelector.option('Large', 30);\n sizeSelector.selected('20');\n sizeSelector.changed(() => brushSize = sizeSelector.value());\n\n // Label for background color selectors\n let backgroundColorLabel = createSpan('Background:
(change to a color picker!)');\n backgroundColorLabel.position(425, 10);\n backgroundColorLabel.style('color', '#800080'); // Set the label text color to purple\n\n // Background color selector as a dropdown\n let backgroundColorSelector = createSelect();\n backgroundColorSelector.position(510, 10);\n backgroundColorSelector.option('Black', '#000000');\n backgroundColorSelector.option('White', '#ffffff');\n backgroundColorSelector.selected('#000000'); // Default selection is black\n backgroundColorSelector.changed(() => {\n backgroundColor = backgroundColorSelector.value();\n background(backgroundColor);\n });\n // TODO: This part is left for future functionality implementation of background color selection\n}\n\nfunction draw() {\n if (mouseIsPressed && mouseButton === LEFT && mouseX >= 10 && mouseX <= 800 && mouseY >= 40 && mouseY <= 600) {\n fill(brushColor);\n stroke(brushColor);\n strokeWeight(brushSize);\n\n // Eraser actually just draws the background color over whatever area is getting erased\n if (eraserActive) {\n fill(backgroundColor); // Must be same as background color\n stroke(backgroundColor);\n }\n\n switch (currentTool) {\n case 'brush':\n // Draw a continuous line for brush\n if (prevMouseX > 0 && prevMouseY > 0) {\n line(prevMouseX, prevMouseY, mouseX, mouseY);\n } else {\n point(mouseX, mouseY); // Start of drawing\n }\n break;\n case 'eraser':\n // Draw a continuous line for eraser\n if (prevMouseX > 0 && prevMouseY > 0) {\n line(prevMouseX, prevMouseY, mouseX, mouseY);\n } else {\n point(mouseX, mouseY); // Start of erasing\n }\n break;\n case 'circle':\n case 'square':\n case 'triangle':\n // For shape drawing, we only draw the shape once per mouse press to avoid stamping on drag\n if (prevMouseX === -1 && prevMouseY === -1) {\n drawShape(currentTool, mouseX, mouseY, brushSize);\n }\n break;\n }\n\n // Update the previous mouse position for brush and eraser only\n if (currentTool === 'brush' || currentTool === 'eraser') {\n prevMouseX = mouseX;\n prevMouseY = mouseY;\n }\n } else {\n // Reset the previous mouse position when the mouse is not pressed\n prevMouseX = -1;\n prevMouseY = -1;\n }\n}\n\n// Draws a shape, when the current tool is not brush or eraser\nfunction drawShape(tool, x, y, size) {\n noStroke();\n if (tool === 'circle') {\n ellipse(x, y, size, size);\n } else if (tool === 'square') {\n rectMode(CENTER);\n rect(x, y, size, size);\n } else if (tool === 'triangle') {\n const height = (Math.sqrt(3) / 2) * size;\n triangle(\n x - size / 2, y + height / 3,\n x + size / 2, y + height / 3,\n x, y - 2 * height / 3\n );\n }\n}\n\n// Clear the whole canvas by setting it all to the background color\nfunction clearCanvas() {\n clear();\n background(backgroundColor);\n}\n\n// Save the current drawing to the user's downloads\nfunction saveArtwork() {\n saveCanvas('myMasterpiece', 'jpg');\n}","style.css":"button {\n position: absolute;\n top: 10px;\n left: 10px;\n}","index.html":"\n\n\n\n \n \n Painting App\n \n\n\n\n \n \n\n\n"},"chat_history":[{"project_id":3175,"sender":"human","message":"Let's get started!","deleted":0,"created_at":"2024-09-05T16:52:49.386599Z","output_tokens":null,"code_id":147973,"input_tokens":null,"id":72541},{"project_id":3175,"sender":"ai","message":"","deleted":0,"created_at":"2024-09-05T16:52:49.394892Z","output_tokens":null,"code_id":147973,"input_tokens":null,"id":72542}],"assets":[],"messages_sent":1,"comments":[],"steps":[]}