I miss ya, MS Paint
After recently buying a MacBook, I discovered quite quickly that iOS does not come with its own paint application. MS Paint comes included in every version of Microsoft Windows, it is a simple application, that allowed its users to express a creative outlet. Take master MS Paint artist Pat Hines, creator of the “Camp Redblood” comic series for example.
What is Paper.js?
But what is a vector? And what is … ? And other terms.
A vector is, as defined by the Merriam-Webster dictionary:
“a quantity that has magnitude and direction and that is commonly represented by a directed line segment whose length represents the magnitude and whose orientation in space represents the direction;”
A vector can be found by subtracting the difference (displacement) between two points.
A point describes a specific location in a 2d field.
A segment is a point with two handles that define the location and direction of curves. Represents the curve between two points.
A path is a sequence of segments connected by curves.
An super basic Paint app
After following the docs for Paper.js and properly installing, my index.html file looked like this:
some of my index.js file:
And after some Paper.js magic …
Everything is displayed through an aptly named canvas tag html item. You can also create shapes like squares and circles, use things like fill color or shadow but this was enough for me, for now. I was close to getting the shapes to animate by changing colors and rotating through the onFrame function but I wasn’t quite there yet. There are still many bugs that need to be fixed like the clear button and the colors only change the last line drawn. I will be updating this app and taking it even further soon but thats it for now!