Guideline-Free Drawing Tool

{"name":"Guideline-Free Drawing Tool","description":"Create a simple yet effective drawing tool that empowers users to draw over a guideline image and export their art without the guideline. This project will teach you how to handle image manipulation and user input in a fun and engaging way, using p5.js. Dive into the world of creative coding and watch as your canvas comes to life, allowing for unhindered artistic expression.","photo":null,"view_count":0,"fork_count":0,"expires_at":null,"created_at":"2025-04-10T18:11:59.027727Z","updated_at":"2025-04-10T18:11:59.027746Z","user_id":182,"status":"PRIVATE","parent_id":7396,"id":7413,"user":{"username":"flower","id":182,"password_hash":"$2b$12$de434VuhlXU4FXHMSwrj/eweUD6F9th0KavH2khb2dmr/Fvdm0idC","updated_at":"2024-08-19T18:23:08.340578Z","reset_token_expiry":null,"subscription_status":null,"photo":null,"email":"lily.gray@alpha.school","recess_id":"4054c251-f71c-4583-8cc4-73403ebdcbec","created_at":"2024-08-19T18:23:08.340576Z","reset_token":null,"stripe_customer_id":null,"seats":null},"code":{"script.js":"let isErasing = false;\nlet drawing = false;\nlet guidelineImage;\nlet drawColor = '#000000';\nlet penThickness = 4;\nlet uploadedImage;\nlet imgX, imgY, imgWidth, imgHeight;\nlet isDragging = false;\nlet offsetX, offsetY;\nlet drawCanvas; // Declare drawCanvas as a global variable\n\nfunction preload() {\n guidelineImage = loadImage(\"@asset('faceMeshUVMap_Snap')\");\n}\n\nfunction setup() {\n let imgAspectRatio = guidelineImage.width / guidelineImage.height;\n let canvasAspectRatio = width / height;\n\n let imgWidth, imgHeight;\n\n if (canvasAspectRatio > imgAspectRatio) {\n imgWidth = windowWidth;\n imgHeight = imgWidth / imgAspectRatio;\n } else {\n imgHeight = windowHeight;\n imgWidth = imgHeight * imgAspectRatio;\n }\n\n // Create two separate canvases\n let canvas = createCanvas(imgWidth - 4, imgHeight - 4);\n canvas.parent('canvas-container');\n drawCanvas = createGraphics(imgWidth - 4, imgHeight - 4); // Create a graphics buffer for drawings\n\n imgX = 50; // Initial x position of the uploaded image\n imgY = 50; // Initial y position of the uploaded image\n\n document.getElementById('clear-button').addEventListener('click', () => {\n drawCanvas.clear(); // Clears the drawing canvas\n uploadedImage = null; // Reset uploaded image\n });\n\n document.getElementById('save-button').addEventListener('click', () => {\n // Create a temporary canvas to combine the images\n let tempCanvas = createGraphics(width, height);\n\n // Draw the uploaded image if it exists\n if (uploadedImage) {\n tempCanvas.image(uploadedImage, imgX, imgY, imgWidth, imgHeight);\n }\n\n // Draw the current drawings on the tempCanvas\n tempCanvas.image(drawCanvas, 0, 0); // Get current drawing from the drawCanvas and draw it\n\n // Save the combined canvas as a PNG file\n tempCanvas.save('myCombinedImage', 'png');\n });\n\n document.getElementById('color-picker').addEventListener('input', (event) => {\n drawColor = event.target.value;\n });\n\n document.getElementById('thickness-slider').addEventListener('input', (event) => {\n penThickness = event.target.value; // Update the pen thickness based on the slider value\n });\n\n document.getElementById('image-upload').addEventListener('change', handleImageUpload); // Handle image upload\n}\n\nfunction draw() {\n clear();\n // Draw the uploaded image if it exists\n if (uploadedImage) {\n image(uploadedImage, imgX, imgY, imgWidth, imgHeight); // Draw the uploaded image\n }\n\n // Draw the contents of the drawCanvas onto the main canvas\n image(drawCanvas, 0, 0);\n}\n\nfunction handleImageUpload(event) {\n let file = event.target.files[0];\n if (file) {\n let reader = new FileReader();\n reader.onload = function (e) {\n uploadedImage = loadImage(e.target.result, () => {\n imgWidth = uploadedImage.width;\n imgHeight = uploadedImage.height;\n });\n };\n reader.readAsDataURL(file);\n }\n}\n\nfunction mousePressed() {\n if (uploadedImage && mouseX > imgX && mouseX < imgX + imgWidth && mouseY > imgY && mouseY < imgY + imgHeight) {\n isDragging = true; // Start dragging the image\n offsetX = mouseX - imgX; // Calculate offset\n offsetY = mouseY - imgY;\n } else {\n drawCanvas.beginShape(); // Start drawing on the drawCanvas if not dragging the image\n }\n}\n\nfunction mouseDragged() {\n if (isDragging) {\n imgX = mouseX - offsetX; // Update image position\n imgY = mouseY - offsetY;\n } else {\n drawCanvas.stroke(drawColor);\n drawCanvas.strokeWeight(penThickness); // Use the updated pen thickness\n drawCanvas.line(pmouseX, pmouseY, mouseX, mouseY); // Draw on the drawCanvas\n }\n}\n\nfunction mouseReleased() {\n isDragging = false; // Stop dragging\n}","style.css":"/* style.css */\nbody {\n margin: 0;\n background-color: #FFFFFF;\n /* White background */\n}\n\n#canvas-container {\n border: 2px solid #000000;\n /* Black border */\n padding: 10px;\n /* Optional spacing around the canvas */\n position: relative;\n z-index: 1;\n}\n\ncanvas {\n background-color: transparent;\n}","index.html":"\n\n\n\n\n \n \n Guideline-Free Drawing Tool\n \n \n\n\n\n

\n \n

Tools

\n \n \n \n \n Pen Thickness:\n \n \n \n

\n\n\n"},"chat_history":[{"deleted":0,"code_id":234297,"input_tokens":null,"id":135355,"project_id":7413,"sender":"client_script","message":"","created_at":"2025-04-10T18:13:05.575991Z","output_tokens":null},{"deleted":0,"code_id":234297,"input_tokens":null,"id":135708,"project_id":7413,"sender":"client_script","message":"Let's get started!\n Errors:\n","created_at":"2025-04-10T19:01:56.660411Z","output_tokens":null},{"deleted":0,"code_id":234297,"input_tokens":3973,"id":135709,"project_id":7413,"sender":"ai","message":"Great! It looks like you've already built a drawing tool that allows users to draw on a canvas, change colors and pen thickness, and upload images. Could you tell me more about what you'd like to add or improve in your project? Any specific features or changes you have in mind?","created_at":"2025-04-10T19:01:56.666447Z","output_tokens":69},{"deleted":0,"code_id":234297,"input_tokens":null,"id":135713,"project_id":7413,"sender":"human","message":"make the pen thickness more, i need bigger","created_at":"2025-04-10T19:02:06.571665Z","output_tokens":null},{"deleted":0,"code_id":234297,"input_tokens":3977,"id":135714,"project_id":7413,"sender":"ai","message":"We can increase the maximum value for the pen thickness slider to allow for larger pen sizes. Let's update the slider's maximum value.\n\nI'll guide you through the changes needed:\n\n1. **Update the HTML file** to increase the maximum value of the pen thickness slider.\n\n```html\n\n\n\n\n\n \n \n Guideline-Free Drawing Tool\n \n \n\n\n\n

\n \n

Tools

\n \n \n \n \n Pen Thickness:\n \n \n \n

\n\n\n\n```\n\n- **Explanation:**\n - Changed the `max` attribute of the `` to `50` to allow for a thicker pen.\n\nNow, you should be able to select a larger pen thickness using the updated slider. Would you like to make any other changes?","created_at":"2025-04-10T19:02:06.577325Z","output_tokens":473},{"deleted":0,"code_id":234626,"input_tokens":null,"id":135747,"project_id":7413,"sender":"client_script","message":"","created_at":"2025-04-10T19:09:37.780409Z","output_tokens":null},{"deleted":0,"code_id":234626,"input_tokens":null,"id":135769,"project_id":7413,"sender":"client_script","message":"","created_at":"2025-04-10T19:15:07.668218Z","output_tokens":null}],"assets":[{"cloudinary_id":"uyylu2yzsdpqei4smcas","project_id":7413,"created_at":"2025-04-10T18:11:59.044100Z","deleted":false,"name":"faceMeshUVMap_Snap","resource_type":"image","id":70543}],"messages_sent":1,"comments":[],"steps":[]}