Additionally, we were somewhat inexperienced with React, and it had caused us a lot of trouble at the beginning. Dealing with the ill-documented Potrace library was especially painful, since it was extremely picky about its inputs and had next to no example scripts online. The main challenge we ran into was the integration between the desmos interface and the replit web app. In addition, we utilized Canva to produce sleek and aesthetic UI/UX design. The algorithm for determining the edges and shapes in each drawing is called the Sobel edge detector (implemented in-house) and we utilized the potrace library to convert the bitmapped image into a smooth, scalable graphic image. We also used replit to create and host our web app. Our Desmos Art Generator web app was built on the collaborative IDE and used the web-based frameworks HTML, CSS, React.js, and JavaScript, Node.js, and Express. Recently, after furthering our knowledge with web app languages and the functionalities of desmos and processing.js, we decided to create a desmos art generator for the hackathon. TLDR: You can upload an image and our website turns it into a Desmos graph How we built it Overall, Desmos Art Generator provides a convenient and affordable way for users to express their creativity and artistry. The how to page also covers how our generator works with a diagram and explanation. The about page has information about our mission and future plans for Desmos Art Generator. They can also make minor changes to the image in desmos if necessary. In addition, the output includes the exact equations of the curves and lines so users can replicate the image themselves using and save it. After learning the locations of the edges, the algorithm then finds the curve equations that replicate it, before it outputs to the user a desmos graph version of the image - that is, the image in the form of hundreds of desmos equations put together. The algorithm highlights the edges within the drawing/image, so it could be traced by a tracing library called Potrace. The image is then processed and passed through a computer vision algorithm called sobel edge detection, which used convolutions and a Gaussian filter. When a user opens Desmos Art Generator, they will see its information and how-to-guide of our generator and are prompted to upload a picture of any image or drawing. With the power of computer vision, math, and a pinch of artistic talent, with our generator, anyone can create their own art on a Desmos canvas! What it doesĭesmos Art Generator is a web app that ensures that all users can always have a platform to express their creativity by visualizing their drawings. Since expressing creativity for both students and adults alike is important for bonding together, education, and for expressing experiences, stories, and emotions, we decided to create from scratch a desmos art generator for the hackathon. In our math classes, we have explored using Desmos graphs to create drawings such as snowmen and utilized processing.js to code scenery and houses. Here is a video to help you with circles: youtube.Many of us in our hackathon team are both technology, STEM, and art enthusiasts ourselves every time we see novel and astounding interdisciplinary tech/stem+art creations, such as Google’s Quick Draw, it always blows us away to see how creative and mesmerizing they are. You can use the sliders to help you figure out the equation, but you may not leave the sliders in for your equations when you turn in your work. Spicy - Uses at least 100 equations, uses less than 30% linear equations, and use shadingįor all equations students must use actual numbers. Medium - Uses at least 70 equations with no more than 60% linear equations, and use shading Mild-Uses at least 25 equations 75% or more linear equations Please consult with Chris if you want to deviate from these guidelines Here are the guidelines for what Mild, Medium, and Spicy are. Looks like the object that you are trying to represent Uses at least one line, one parabola, one circle, and one exponential (Challenge Option: Sine wave) This document will serve as a reference for you as you create your artģ- Spend 2 hours of class time to paste a picture and write your first 15 equationsĤ- Work with a partner and critique each other using this structured Desmos Critiqueĥ- Work and ask questions when you are stuckĦ- Analyze your work so that you meet these requirements: How is writing equations similar to computer programming?ġ- Examine examples and develop Attributes of High Quality WorkĢ- Dive in and Play through a Desmos Inquiry Activity How do we manipulate functions to do what we want?
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |