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:14:15.679906Z","updated_at":"2025-04-10T18:14:15.679910Z","user_id":197,"status":"PRIVATE","parent_id":7396,"id":7416,"user":{"photo":null,"email":"sander.gabler@alpha.school","recess_id":"4d1ded88-93b9-41aa-912e-d167faa5a119","created_at":"2024-08-22T18:32:26.210321Z","reset_token":null,"stripe_customer_id":null,"seats":null,"username":"sanderkirbypro","id":197,"password_hash":"$2b$12$mE25Y42EzcsC/wqEvVuU9O8z.gKNkxnw.QPAlLuvUVLxD1esLlnvG","updated_at":"2024-08-22T18:32:26.210326Z","reset_token_expiry":null,"subscription_status":null},"code":{"script.js":"let isErasing = false;\n\nlet drawing = false;\n\nlet guidelineImage;\n\nlet drawColor = '#000000';\n\nlet penThickness = 4;\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 let canvas = createCanvas(imgWidth - 4, imgHeight - 4);\n canvas.parent('canvas-container');\n\n document.getElementById('draw-button').addEventListener('click', () => {\n // Optional: Reset any other states if needed\n });\n\n document.getElementById('clear-button').addEventListener('click', () => {\n clear(); // Clears the entire canvas\n });\n\n document.getElementById('save-button').addEventListener('click', () => {\n saveCanvas('myDrawing', 'png'); // Saves the canvas as a PNG file\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\nfunction draw() {\n if (mouseIsPressed) {\n stroke(drawColor);\n strokeWeight(penThickness); // Use the updated pen thickness\n line(pmouseX, pmouseY, mouseX, mouseY);\n }\n}\n\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"},"chat_history":[],"assets":[{"project_id":7416,"creator":null,"cloudinary_id":"uyylu2yzsdpqei4smcas","deleted":false,"id":70549,"created_at":"2025-04-10T18:14:15.685414Z","name":"faceMeshUVMap_Snap","resource_type":"image","tags":null}],"messages_sent":0,"comments":[],"steps":[]}