Drawing To Code (16th January 2023)

GitHub

This was my project for the C++ for Creative Pratice module.
I wanted to take what we did with our painting programs and take it to the next level where you can convert the drawing into code.

The reason for this idea is mainly due to how drawing shapes is implemented in p5.js and OpenFrameworks. You have to create the shape using its function while you input values for X and Y positions, height and width, colour, etc.
This can be very annoying as you have to guess where it would land and how it would look on the canvas before you run it, which almost never ends up how you like it to. You have to constantly go back to changing the values, running the code again, until it is just right.

Using this program eliminates this issue by allowing you to draw anything you would like to implement instantly into your project.
You have a variety of features to choose from such as:

  • Line Tool;
  • Rectangle Tool;
  • Ellipse Tool;
  • Triangle Tool;
  • Polygon Tool;
  • Add fill to your shape;
  • Change width of outline;
  • Changing the colour of your shape in RGBA with the colour wheel or slides;
  • ...and to convert the drawing into OpenFrameworks or p5.js.

There are variety of issues with this project that I have faced and that are currently present that I did not have time to fix.

  • I had an idea to implement layers where you could access each shape you have drawn in order. However, I did not find the time to implement this, so the user has to be definite about what they draw as they cannot go back.

  • The current output of the code is inefficient as it creates too many pushes and pops for each shape. I tried to minimise this by checking the properties of the previous shape and the current shape drawn - if they match, the shape function will be implemented within the same push and pop. This would have helped to minimise lines of code. I could not implement this at the end due to saving the values of the RGBA caused one of the values to randomly decrease or increase by a little bit. I have no idea why this issue occured, and gave up on it because I already spent too much time on it.

  • Current issue is that it will draw a point, even though the user has clicked on each of the buttons to change tools or change the colours.

Next time, I would like to write a better class that stores the tool's parameters, and another that controls all of them. This would allow for an easier implementation of new tools next time.
Currently drawing the shapes right now is weird as you cannot align them together. I would like to add a "snap to grid" function to ease drawing for everyone.