Course Recap, and introduction to Paper.js

So far, we've covered a lot in class:

Web development tools:

• Text editing with Sublime Text
• Setting up a local web server
• Viewing and developing a webpage
• The chrome development console

HTML, CSS, JS:

• HTML: Structure of a webpage, HTML tags syntax, Bringing CSS and Javascript into our page, Canvas
• CSS: positioning, colors, borders, grids, pseudoselectors (:nth-child), typography, keyframes
• JS: Syntax, Variables, functions, user input, the DOM

Everything so far has been based on out-of-the-box functionality that comes built-in to browsers. However we will now begin working with third-party code that will dramatically expand what we can do.

When we use code written by others meant to help us do what we want to do, we call their code a library. There are countless libraries out there that are free to use, that can help us accomplish all kinds of things.

One such library is PaperJS, created by Jürg Lehni & Jonathan Puckey. The goal of this library is to allow javascript programmers to create high-quality and interactive vector graphics. The vector graphics generated by PaperJS programs can be exported out of the browser and into programs like Illustrator or Indesign.

We learned about the HTML canvas, which is the built-in drawing environment included in all web browsers. PaperJS happens to use the Canvas to render its graphics, but under the hood, represents elements in a much more sophisticated way so we can manipulate them. PaperJS handles a lot of the complicated work involved in drawing with code, so we don't have to do it all ourselves.

Another note on PaperJS- it has very thorough and approachable docs. Every facet of the library is explained really well, and examples of how to use each piece of it are easy to find on their site. Please consider reading the docs to be an ongoing requirement when working with the library in this course- because reading docs is a constant requirement when programming.

I hope you enjoy it!