Guideline-Free Drawing Tool

{"name":"Face Mesh Designer (Draw)","description":"Create designs for face filters using this guide! We are using Snap Inc's UV Fave Mesh as a guideline, which turns the 3d face shape into a 2d image we can use to create our filter designs. Create, save your image, then bring it into a fork of https://jippity.pro/projects/7070 to use it!","photo":"https://res.cloudinary.com/dzv7hjwfn/image/upload/imxtu7pqje6yx9lpjawy","view_count":27,"fork_count":11,"expires_at":null,"created_at":"2025-04-13T22:59:56.523598Z","updated_at":"2025-04-13T22:59:56.523599Z","user_id":70,"status":"PRIVATE","parent_id":null,"id":7396,"user":{"photo":null,"email":"kristen@jippity.pro","recess_id":"0c22a63e-e8fa-453f-a493-d113532a13c2","created_at":"2024-03-23T19:20:56.974481Z","reset_token":"GD2dODEjNUbAH88Yx-1HMTa4uc_OUtvTa0c5D-VKUhw","stripe_customer_id":"cus_RPbovGjLueUufv","seats":200,"username":"kris10","id":70,"password_hash":"$2b$12$abwA8Crfrc22ANEFpZErHeQDLvhr9RJOD0lMNLh7PJGrAn7M//qEC","updated_at":"2024-03-23T19:20:56.974485Z","reset_token_expiry":"2025-01-14T23:32:05.455609","subscription_status":"active"},"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":[{"message":"

Add your new assets to the code

\n\n```javascript\nfunction preload() {\n guidelineImage = loadImage(\"@asset('faceMeshUVMap_Snap')\");\n\tcoverimg = loadImage(\"@asset('coverimg')\");\n}\n```","project_id":7396,"created_at":"2025-04-10T18:52:35.355582Z","output_tokens":null,"sender":"server_script","code_id":234310,"deleted":0,"input_tokens":null,"id":135655}],"assets":[{"project_id":7396,"creator":null,"cloudinary_id":"imxtu7pqje6yx9lpjawy","deleted":false,"id":70653,"created_at":"2025-04-10T18:52:34.505357Z","name":"coverimg","resource_type":"image","tags":null},{"project_id":7396,"creator":null,"cloudinary_id":"uyylu2yzsdpqei4smcas","deleted":false,"id":70403,"created_at":"2025-04-10T15:50:29.626566Z","name":"faceMeshUVMap_Snap","resource_type":"image","tags":null}],"messages_sent":41,"comments":[],"steps":[]}