We've updated our JavaScript exercises to use a new version of our JavaScript library. What's different?
Software Developer at CodeHS
All the objects you’re familiar with (Circle, Rectangle, WebImage) are now implemented using classes, which were introduced to JavaScript in 2015.
This means you’re able to use object-oriented programming concepts like inheritance to create your own classes.
Elements now have a layer property, controlled with the .layer attribute. Elements with a higher layer will draw on top of elements with a lower layer. The default layer is 1.
This gives you fine-tuned control over how elements should appear, and also lets you change layering while your program runs!
map functionThe map function is my pick for the most useful feature of the new library. You may know map from Processing or p5.js. map(value, start1, stop1, start2, end2) maps a value from a range defined by [start1, stop1] to the range [start2, stop2].
Here’s an example where we map a sine curve’s y value from [-1, 1] to [0, getHeight()]. With just one line of code we make this program possible!
You can now control the opacity of an element by changing its .opacity property or calling setOpacity. Opacity is a number from 0 to 1, and an opacity of 0 means an element is fully transparent.
Groups are collections of elements that can be operated on as a single unit. All elements can be moved as one, have their opacity changed as one, or rotate as one.
Here’s two examples of this:
Every element can be switched into “debug mode” by setting .debug = true. In debug mode, an element will draw its bounding box and its position in red.
This is useful for understanding how elements draw relative to their position (marked with a red dot). For example, Rectangles are positioned with their top left corner at their position, but Circles are positioned with their center as their position.
Anchors are designed to simplify something that’s complicated in HTML5 graphics, which is how elements draw relative to their position. Debug mode shows you where the anchor is with a red dot, but you can also customize the anchor!
Calling setAnchor({vertical: 0-1, horizontal: 0-1}) lets you customize where in the shape its position should be.
Circles, since their anchor is in the center of the shape, have a default anchor of {vertical: 0.5, horizontal: 0.5}. Rectangles, since the anchor draws at the top left of the shape, have anchor {vertical: 0, horizontal: 0}. Text, which has always been a bit of a pain to position, has anchor {vertical: 1, horizontal: 0}.
If you’d like Text to be centered, you can set its anchor to be {vertical: 0.5, horiztonal: 0.5}.
We’ve introduced a Vector class for making common physics and math problems easy. Vector can be used to make 2 or 3 dimensional vectors, and has common operations like normalization, adding, subtracting, dot and cross product.
Here’s a game that uses Vectors for the velocity and position of the player (the tiny dot) and the enemies (the Rectangles). Vectors simplify this kind of game by making it easy to add velocity to position, add acceleration to velocity, and flip velocity when something should bounce.
We’ve reworked the internals of the library to make animations smoother, especially on low-powered devices like Chromebooks. Timers now use requestAnimationFrame internally, which provides smoother, less resource-intensive animations.
All mouse methods now support touch devices by default, meaning your program will work on a tablet or phone just as well as on a computer.
Elements you add to the screen can now be navigated with the tab key, so users who use a screen reader can select elements. An element with focus will highlight blue, and hitting the space bar will trigger a click at that location.
Elements will describe themselves using their describe() function, which you can override in a subclass.
After running the program, hit Tab until you focus the pink circle, then hit space to click.
The Randomizer module now includes the noise function, which will return either 1- or 2-dimensional Perlin noise based on how you call it.
We have generated documentation and examples hosted at codehs.github.io/chs-js-lib. You can see more of the new features there.
If you’d like to browse the source code, make an issue, or contribute, visit the GitHub repository at github.com/codehs/chs-js-lib.
Some devices, like iPhones, iPads, and Macbooks have Retina displays, or other ways to use more than 1 physical pixel to draw a single screen pixel. In these cases, the graphics library will upscale its data to provide higher resolution.
There are a number of fixes we made to the JavaScript library during the rewrite, including:
containsPointloaded function will be immediately invoked if the WebImage has already loadedArray.prototype. Array.prototype.remove is introduced when evaluating code in CodeHS.
