Inspiration:
We have always been fans of Battlefield and Call of duty and one of the nice features that comes with it is the ability to design your own emblem. We wanted to develop the entire process from scratch and just see how challenging it is.
What it does
Displays a canvas where you can select shapes to put inside the canvas, and let your creativity run wild will full degree of freedom with an option to differentiate colors, degree of rotation, opacity, X and Y position and more. Once you finish your design you simply click on the generate button and it will display the canvas custom SVG link for you to copy and use for future use.
How we built it
This program was built majority in ReactJS, using frameworks such as Bootstrap for various UI components, but majority of the core programming went into developing the canvas and setting the components to work interchangeably
Challenges we ran into
A lot of math. We also had problems setting up the layering system.
Accomplishments that we're proud of
Just getting the basic functionally done within 24 hours with just 2 teammates. A lot of work went into developing the actual components; and if we had another 24 hours we would've had the entire UI be complete.
What we learned
A lot has been learnt in the past 24 hours, researching into events with react, and getting into concepts of transforming matrices and inverting them. Optimizations and understanding what makes a nice UI. Working with rendering objects, SVG pictures, onClick onMouse, and many more on events. In general our skills in React has been enhanced.
What's next for Emblem Maker
We plan to continue this project going and update the UI and polish the key components. We eventually want to add a layering system that will allow the user to interchange the priority of layers appearing on the canvas.
Log in or sign up for Devpost to join the conversation.