home
about
usage
settings
Usage
Installation
Add 2 scripts to your page:
<script src="js/libs/jsband-min.js"></script>
<script src="js/halftone3d-min.js"></script>
Now Halftone3D is ready for use!
Create halftone image
Create an empty DIV and give it an ID (e.g. "DIV_ID").
Create a Halftone3D instance, indicating the DIV ID and settings:
var halftone3d = new Halftone3D("DIV_ID",{
//settings
});
Done!
You can even create multiple halftones on your page.
Each setting has a default value and can be ignored. But to achieve a 3D feel, you need to specify at least source image and depth map. Depth map is an image where pixel luminosity determines the depth (distance between pixel and observer).
Here is a complete list of settings.
Replace halftone image
Let's say your DIV already contains halftone image.
Create a new Halftone3D instance for the same DIV:
halftone3d = new Halftone3D("DIV_ID",{
//new settings
});
A new instance will replace the old one.
API
Methods
halftone3d.clear();   Clears canvas.
halftone3d.update();   Updates halftone image. It will be useful if you want to clear canvas for a while.
halftone3d.destroy();   Removes everything related to Halftone3D instance.
halftone3d.resize();   Sets correct scale and position according to your DIV size. In most cases, you will not need this method. It should be used only when you change DIV size by JavaScript.
Properties
Complete list of Halftone3D settings is located here. Each of them can be changed on the fly using JavaScript.
Below is the list of Halftone3D instance properties.
halftone3d.sourceImage — path to source image
halftone3d.depthMap — path to the image that represents depth map
halftone3d.rasterType — halftone pattern name
halftone3d.rasterAngle — number defining the raster line rotation
halftone3d.dotSize — raster dot size
halftone3d.lineSmoothing — line smoothing of "line" and "cell" patterns
halftone3d.canvasColor — canvas color
halftone3d.dotColor — raster dot color
halftone3d.dotColorRandomization — number defining dot color randomization
halftone3d.dotColorRRandomization — number defining randomization of dot color R-component
halftone3d.dotColorGRandomization — number defining randomization of dot color G-component
halftone3d.dotColorBRandomization — number defining randomization of dot color B-component
halftone3d.canvasWidth — output image width
halftone3d.canvasHeight — output image height
halftone3d.scaleMode — defines how halftone image scale depends on DIV size
halftone3d.brightness — source image brightness
halftone3d.contrast — source image contrast
halftone3d.invert — defines whether to invert the source image
halftone3d.invertDepthMap — defines whether to invert the depth map
halftone3d.depthDetalization — the number of parallax layers
halftone3d.parallaxLag — defines smoothness of response to mouse movement
halftone3d.parallaxHorizontalIntensity — horizontal intensity of parallax effect
halftone3d.parallaxVerticalIntensity — vertical intensity of parallax effect
halftone3d.parallaxFocus — number defining a depth at which picture is always fixed
halftone3d.showRenderingProgress — defines whether to display halftone image during rendering
halftone3d.usePreloader — defines whether to display preloader animation
halftone3d.preloaderColor — preloader color
halftone3d.preloaderSize — preloader size