Find the _.size of Arrays and Objects with lodash, and vanilla js

Getting the length of an array is a trivial matter in javaScript, but then there is getting the length of Objects in general that is a little not so trivial some times. In lodash there is the _.size method that is a collection method that will work with both arrays, and objects to return the element length of an array, or the number of enumerable properties of a plain old object of any sort. However doing so is really not all that hard with just plain old javaScirpt by itself also. So in this post I will be quickly covering the _.size method, but will also be going over vanilla js solutions for doing this as well.

Read More

The Point Class in phaser ce

So for the past few months I have been expanding, and updating my content on Phaser ce the javaScript powered game framework, and have discovered that I do not have a post on the Point Class in general. Having a solid grasp on this class is important because it’s use comes up a lot throughout the framework with anything and everything that has to do with a single point in a 2d coordinate system. So in this post I will be going over some simple examples, as well as more advanced examples of the Point class in phaser ce, and link off into other relevant posts on this Class and it’s many important and useful methods.

Read More

Adding Ambient Light, as well as other options in threejs

When making a three.js project, and working with materials that respond to light such as the standard material it might be desirable to add some ambient light to a scene. Ambient Light differs from other light sources in that it will evenly illuminate materials evenly from all directions, actually direction is not really even taken into account with this kind of light source. By adding an ambient light it will just simply light up all surfaces of all mesh objects that are skinned with a material that will respond to light when it is added to the scene object.

This kind of light source is very different from spot lights or point lights that radiant out light from a certain point in space and only illuminate surfaces that strike the surfaces that they come in contact with. However it is often a good idea to combine ambient light with one of these kinds of lights in order to see a kind of depth. I also like to tone down the intensity of an ambient light so that it does not end up making all the surfaces fully intense canceling out the effects of any additional direction light sources I might have added.

So then in this post I will just be going over a few quick examples of using ambient light in a three.js project. In the process of doing so I will also be covering a few other loosely related topics when it comes to light in general, such as the kinds of materials that can be used that will be effected by light.

Read More

Exporting a threejs animation to webm using Whammy

When I am playing around with threejs I often like to use it to make simple looping animations, and it would be nice to have at least one or two ways to export these projects to a reliable, well supported video file format like the webm file format making it easy to share as a stand alone video file.

Now there may be a great number of ways to go about doing this sort of thing actually on stack overflow I saw an example the makes use of some built in browser features as a way to go about capturing video from a canvas element on the fly. However what I have in mind is something where I can create a video on a frame by frame basis rather than recording for an amount of time which is not what I am after here.

To help with this I have come across a project called whammy that seems to work okay for the sake of making a webm file on a frame by frame basis, or at least it did until code breaking changes where made in chrome. Also last time I checked the project is very much dead as no new commits where made sense 2018. I am not sure what to do with this post when it comes to additional future edits at this point. However every now and then I do come around to this topic and will likely expand on this when I find other ways to export other than what I have worked out here that no longer works on late versions of chrome.

Read More