Guideline-Free Drawing Tool

{"name":"Face Mesh Designer (Upload Images)","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/li0fof9d3qg9mwkxmftc","view_count":4,"fork_count":1,"expires_at":null,"created_at":"2025-04-10T19:11:33.163037Z","updated_at":"2025-04-10T19:11:33.163038Z","user_id":70,"status":"PUBLIC","parent_id":7396,"id":7432,"user":{"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","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":100},"code":{"script.js":"let uploadedImage;\n\nlet uploadedImageX = 0;\n\nlet uploadedImageY = 0;\n\nlet dragging = false;\n\nlet uploadedImageWidth = 0;\n\nlet uploadedImageHeight = 0;\n\nlet isErasing = false;\n\nlet drawing = false;\n\nlet guidelineImage;\n\nlet drawColor = '#000000';\n\nlet penThickness = 4;\n\nlet images = [];\n\nlet selectedImageIndex = -1;\n\nlet resizeThreshold = 15;\n\n// The \"resize corner\" hit area size\nlet scalingFactor = 0.1;\n\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('clear-button').addEventListener('click', () => {\n images = []; // Clear all uploaded images\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('upload-image').addEventListener('change', handleImageUpload);\n}\n\nfunction draw() {\n clear();\n images.forEach((imageObj) => {\n // Draw each image\n image(imageObj.image, imageObj.x, imageObj.y, imageObj.width, imageObj.height);\n\n // Draw the resize corner for the selected image\n if (selectedImageIndex !== -1) {\n const selectedImg = images[selectedImageIndex];\n fill(255, 0, 0);\n noStroke();\n ellipse(selectedImg.x + selectedImg.width, selectedImg.y + selectedImg.height, resizeThreshold * 2, resizeThreshold * 2);\n }\n });\n}\n\nfunction mousePressed() {\n // Check if the mouse is over any image\n selectedImageIndex = -1; // Reset selected index\n images.forEach((imageObj, index) => {\n if (mouseX > imageObj.x && mouseX < imageObj.x + imageObj.width &&\n mouseY > imageObj.y && mouseY < imageObj.y + imageObj.height) {\n selectedImageIndex = index; // Set the selected image index\n }\n // Check if the mouse is over the resize corner\n if (mouseX > imageObj.x + imageObj.width - resizeThreshold && mouseX < imageObj.x + imageObj.width + resizeThreshold &&\n mouseY > imageObj.y + imageObj.height - resizeThreshold && mouseY < imageObj.y + imageObj.height + resizeThreshold) {\n dragging = 'resize'; // Start resizing\n }\n });\n}\n\nfunction mouseDragged() {\n if (selectedImageIndex !== -1) {\n const selectedImg = images[selectedImageIndex];\n\n // If resizing, change width and height based on mouse drag\n if (dragging === 'resize') {\n // Calculate the scaling factor based on mouse position change\n const scaleX = (mouseX - selectedImg.x) / selectedImg.width;\n const scaleY = (mouseY - selectedImg.y) / selectedImg.height;\n\n // Use a smaller scaling factor to reduce sensitivity\n const scale = Math.min(scaleX, scaleY) * scalingFactor; // Apply the scaling factor to slow it down\n\n selectedImg.width = selectedImg.image.width * scale;\n selectedImg.height = selectedImg.image.height * scale;\n } else {\n // Otherwise, move the image\n selectedImg.x = mouseX - selectedImg.width / 2;\n selectedImg.y = mouseY - selectedImg.height / 2;\n }\n }\n}\n\nfunction mouseReleased() {\n dragging = false; // Stop dragging or resizing when mouse is released\n selectedImageIndex = -1; // Reset the selected index\n}\n\nfunction handleImageUpload(event) {\n const reader = new FileReader();\n reader.onload = function (e) {\n loadImage(e.target.result, (img) => {\n // Set default width to 20% of canvas width\n const defaultWidth = width * 0.2; // 20% of canvas width\n const defaultHeight = (img.height / img.width) * defaultWidth; // Adjust height to maintain aspect ratio\n\n images.push({\n image: img,\n x: random(0, width - defaultWidth),\n y: random(0, height - defaultHeight),\n width: defaultWidth, // Set default width\n height: defaultHeight // Set height based on aspect ratio\n });\n\n selectedImageIndex = images.length - 1; // Set the newly uploaded image as selected\n });\n };\n reader.readAsDataURL(event.target.files[0]);\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\n\n"},"chat_history":[{"deleted":0,"code_id":234641,"input_tokens":null,"id":135741,"project_id":7432,"sender":"human","message":"make clear canvas work","created_at":"2025-04-10T19:09:08.218813Z","output_tokens":null},{"deleted":0,"code_id":234641,"input_tokens":3914,"id":135742,"project_id":7432,"sender":"ai","message":"It seems like you want the \"Clear Canvas\" button to work properly in your drawing tool project. Let's take a closer look at the code to ensure that the functionality is implemented correctly.\n\nCould you please describe what exactly happens when you click the \"Clear Canvas\" button? Does it not clear the drawings as expected, or is there any error message that appears?","created_at":"2025-04-10T19:09:08.281321Z","output_tokens":92},{"deleted":0,"code_id":234641,"input_tokens":null,"id":135743,"project_id":7432,"sender":"human","message":"remove all uploaded images","created_at":"2025-04-10T19:09:18.047066Z","output_tokens":null},{"deleted":0,"code_id":234641,"input_tokens":3914,"id":135744,"project_id":7432,"sender":"ai","message":"To remove all uploaded images from the canvas when you click the \"Clear Canvas\" button, you need to clear the `images` array and then call the `clear()` function. Let's modify the event listener for the \"Clear Canvas\" button to achieve this.\n\nHere's how you can do it:\n\n```javascript\n// script.js\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('clear-button').addEventListener('click', () => {\n images = []; // Clear all uploaded images\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('upload-image').addEventListener('change', handleImageUpload);\n}\n```\n\n### How it works:\n- The `images` array, which stores all uploaded images, is cleared by setting it to an empty array `[]`.\n- The `clear()` function is called to clear the canvas visually, ensuring no images are displayed.\n\nTry updating your code with these changes, and the \"Clear Canvas\" button should now remove all uploaded images. If you face any issues, feel free to ask for more help!","created_at":"2025-04-10T19:09:18.112008Z","output_tokens":404},{"deleted":0,"code_id":234648,"input_tokens":null,"id":135749,"project_id":7432,"sender":"server_script","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```","created_at":"2025-04-10T19:11:26.780871Z","output_tokens":null}],"assets":[{"cloudinary_id":"li0fof9d3qg9mwkxmftc","project_id":7432,"created_at":"2025-04-10T19:11:26.239967Z","deleted":false,"name":"coverimg","resource_type":"image","id":70687},{"cloudinary_id":"uyylu2yzsdpqei4smcas","project_id":7432,"created_at":"2025-04-10T18:40:08.063835Z","deleted":false,"name":"faceMeshUVMap_Snap","resource_type":"image","id":70623}],"messages_sent":13,"comments":[],"steps":[]}