This simple hit test exercise combines two previous ones, so I won’t go through the “old” parts of the code. Basically, it adds code to our “Drag square” exercise, mostly from the “Trail” exercise, and also a simple collision test.
For the next two (brief) exercises, we will run two Paper.js tutorials, so I will point to those resources:
Paper.js is “an open source vector graphics scripting framework that runs on top of the HTML5 Canvas. It offers a clean Scene Graph / Document Object Model and a lot of powerful functionality to create and work with vector graphics and bezier curves, all neatly wrapped up in a well designed, consistent and clean programming interface.”
The documentation is well organized, the website is well designed, and the examples and tutorials are very helpful.
The idea of introducing Paper.js in the course is not to teach the whole library per se (far from it, as we only had one morning for Paper.js), but to exemplify how the use of a library can be useful, and save much work. Particularly a well designed and documented one, such as Paper.js.
In this exercise of today, we will explore two topics – placing image files on the canvas, and canvas resizing to fit the browser window size. The objective is to line up a series of “clones” of the same image across the browser window, and make this line stay consistent independent of window size. The result is an alignment of stars, with an outlier rebel star thrown in. This is the whole code: Continue reading
In this exercise, we will explore how to create a drag and drop functionality. The aim is to enable dragging a square around the screen, with the option of leaving a trail or not.
This is the code for the exercise:
In this exercise, we will look into arrays, text display and keyboard input, and mix all of this into one exercise. The aim of the exercise is to juxtapose successive random quotes on the canvas.
This is the resulting code: