skice
v2.1.0
Published
A helper tool for local sketching using HTML canvas
Downloads
7
Readme
skice
A command-line tool for creative coding using HTML canvas. It helps to create and work with locally
hosted projects for small experiments or large artworks. skice
is heavily inspired by a similar but
much more feature-rich tool called cvanvas-sketch.
Unlike "canvas-sketch" it doesn't provide an abstraction layer and the code you write is directly
sent to the browser as is.
Installation
npm install -g skice
Usage
skice <command> [<path>] [options...]
Commands
help, --help, -h
Outputs the help text either for skice
or the specified command.
skice help
skice help run
version
Outputs the version number.
skice version
new
Creates a new sketch project.
skice new /path/to/sketch_project --context webgl
skice new /path/to/sketch_project --context 2d
run
Runs the project using a local server.
cd /path/to/sketch_project
skice run
skice run --port 8000
skice run --no-browser
upgrade
Upgrades the project from an older version.
skice upgrade /path/to/sketch_project --from 1.4.1 --context webgl
Configuration
Every project has a skice.config.json file in its root that you can use to change the configuration.
portNumber
Specifies the port number that is used by the local server. It can be overwritten with the
command-line option --port
.
watch
skice will automatically reload the browser when files in the project directory change.
It's watching recursively all the files by default, but since it's using Node's file watcher API,
it has some caveats that might prevent this
functionality from working properly on your system. One way to mitigate certain issues is to add a
list of files that need to be watched using watch
configuration option.
{
"skiceVersion": "2.1.0",
"portNumber": 3000,
"watch": [
"index.html",
"js/skice.js"
]
}
The file paths must be relative to the root directory.
Canvas settings
skice
projects have access to CanvasSettings
class which provides some useful functionality
like automatic resizing and image export.
CanvasSettings#width
The width of the canvas element. It will change automatically when the browser window gets smaller than this value.
CanvasSettings#height
The height of the canvas element. It will change automatically when the browser window gets smaller than this value.
CanvasSettings#exportAs
The export format. The default is image
.
Possible values:
- image (exports as a PNG file)
- video/* (* can be any video format supported by the browser, e.g., video/webm)
CanvasSettings#duration
The duration of the video file if a video format is used for the exportAs
setting. It must be in
milliseconds. The default value is 5000
.
CanvasSettings#enableExport()
Enables exporting canvas in the specified format using a keyboard shortcut Ctrl+S
.
const canvasSettings = new CanvasSettings()
canvasSettings.enableExport(canvas, renderer, scene, camera)
network
module
This module provides convenience function for working with network requests.
Available functions:
- importPlainText(url: string): Promise - loads a plain text file. It can be useful for importing GLSL files.
Upgrading from 1.4.1 to 2.x
If you have a sketch file created by skice
1.4.1 or an older file that has been updated to work with
1.4.1, it can be easily updated to work with 2.x using upgrade
command.
Upgrading from 1.3.2 to 1.4.1
Some of the functionality has been moved from the HTML template to the sketch file in preparation for
version 2.0.0. Refer to the updated Canvas 2D and WebGL
sketch templates to see what code needs to be changed, but the most important part is to add CanvasSettings
import and instantiation as well as a reference to the canvas element to your existing sketches like this.
import CanvasSettings from 'canvas_settings'
const canvas = document.getElementById('sketch_canvas')
const canvasSettings = new CanvasSettings()
Alternatively you can keep the old naming convention.
import CanvasSettings from 'canvas_settings'
const canvas = document.getElementById('sketch_canvas')
const CANVAS_SETTINGS = new CanvasSettings()