Wallspan is an endless grid in canvas to browse a bunch of images. Work in progress.
Wallspan creates a canvas showing an endless grid of pictures randomly picked up from an HTMLcollection of image objects. The grid has a lot of customizable settings (see options).
Wallspan is a plain static site : no build step, no npm install, no runtime dependency. It's ES modules loaded straight by the browser, so it just needs to be served over HTTP (ES modules aren't allowed over file://) — e.g. npx serve . or python3 -m http.server.
Wallspan requires a canvas id, a wrapper and an htmlcollection (or array) of image objects as a library of images.
Create the wrapper
<div id='viewport'></div>Build the library
for (let i = 0; i <= 32; i++) {
const img = document.createElement('img');
img.src = 'images' + i + '.jpg';
img.setAttribute('class', 'library');
document.body.appendChild(img);
}
const library = document.getElementsByClassName('library');Build the wall
<script type="module">
import { Wall } from './src/wall.js';
const wall = new Wall('canvas', 'viewport', library);
wall.init();
</script>You can tweak Wallspan in many ways playing with a various number of settings which are all optional:
- Width of each tile
- Integer
- By default: 300px
- Height of each tile
- Integer
- By default: 400px
- Enable the rendering of the images in black & white
- Boolean
- By default: false
- Custom the easing when when a new tile fades in
- 'easeOutCubic', 'easeOutQuart','easeInOutSine', 'easeCustom' or 'easeOutCubic'
- By default: 'easeOutCubic'
- Determinate what controllers make the wall move
- 'mouse', 'keyboard' or 'gamepad'
- By default: mouse
- Increment in the wall translation (up/down, left/right)
- Integer
- By default: 10
- Enable scale property
- Boolean
- By default: true
- Scale factor at the creation of the wall.
- Integer
- By default: 1
- Minimum scaling factor : for example a minScale = 0.25 means that the wall won't zoom out anymore if the tiles are already as small as a quarter of their original size. Set the minScale too low and you'll decrease significantly your performance.
- Integer
- By default: 0.25
- Maximum scaling factor : for example a maxScale = 1.75 means that the wall won't zoom in anymore if the tiles are already as big as 175% of their original size. Set the maxScale too high and you'll lose image resolution.
- Integer
- By default: 1.75
- Scale sensitivity
- Integer
- By default: 1
- Describes how the images are spread. 'random' means totally randomly as a same image can be shown multiple times in a row. 'shuffle' means that the library is shuffled then all the pictures are laid out and again and again... Note that the image are laid out from left to right and up to down.
- 'random' or 'shuffle'
- By default: 'random'
- Number of rows and columns of tiles to be laid out. a numberTile = 100 means a 100 * 100 grid.
- Integer
- By default: 100
startX: 0, // TBD starY: 0, // TBD
To be done
This script has been developped for the project flyposter.ca. Wallspan is licensed under the MIT Licence.
- Flyposter: http://www.flyposter.ca
- Others?
v0.7
- Renamed from canvas-grid-master to Wallspan
- Removed jQuery, Hammer.js and gamepad.js : replaced with native Pointer Events,
the Gamepad API and plain DOM APIs
- Rewritten as ES6 classes / modules (import/export), no runtime dependency
- Various bug fixes (scale centering, dead code, duplicate easing, perf in the
image draw loop, ...)
v0.6
- New Features added
* Cleaner code
* New method to control rendering
* Documentation
v0.5
- New Features added
* Easing
* Custom Events
* Gamepad support
* GrayScale Mode (slow down the whole thing though)
- Fixed
* Scale fom the center of the screen
| Xavier Orssaud |