particle-shift v1.0.2

Particle Shift

Particle shift is a library for creating animations with simple particle systems. Can be used to transition between any scene drawn onto a 2d canvas context, whether it be text, images, svgs, or just drawn shapes.

Demo

Visit demo site

Install

Webpack Require

Particle Shift can be included as a module through npm or yarn

npm install @ihansson/particle-shift

import { Scene, Screen, Body } from 'particle-shift'
Sceen.create({
	...
})

CDN

Alternatively the library can be included separately and accessed via the ParticleShift global.

<script src="https://cdn.jsdelivr.net/gh/ihansson/particle-shift@1.0.2/dist/particle-shift.min.js"></script>
<script>
ParticleShift.Sceen.create({
	...
})
</script>

Basic Example

<script src="https://cdn.jsdelivr.net/gh/ihansson/particle-shift@1.0.2/dist/particle-shift.min.js"></script>
<canvas id="canvas" width=500 height=300></canvas>
<script>
const scene = ParticleShift.Scene.create({
	selector: '#canvas',
	particle_size: 2,
	step_width: 6,
	draw_width: 500,
	draw_height: 300
})

const screen1 = ParticleShift.Screen.create(scene, {
	render: function(scene, ctx){
		ctx.font = '170px Georgia'
		ctx.fillStyle = 'black';
		ctx.fillText('Hello', 25, 200)
	}
})

const screen2 = ParticleShift.Screen.create(scene, {
	render: function(scene, ctx){
		ctx.fillText('There', 25, 200)
	}
})

scene.play_screen(screen1);

window.setTimeout(function(){
	scene.play_screen(screen2)
},2000)
</script>

Options

Scene

The scene in particle shift represents the canvas for the particle system and is used to controlled what is drawn and when. The most important properties of the scene are the particle_size and step_width which will control the level of detail of the particle system.

Responsive

The scene had a separate draw_width and draw_height from the actual width and heigh to allow for the canvas itself to be responsive. You should always sepcify a draw_width and draw_height and if you then want this to be responsive you can make the canvas responsive using css (100% width), or you can specify a different height and width in css to scale up to.

Pre Render

The pre_render_frames_count property can be set to create a sheet of all rendered frames if you have a scene which is too demanding to be rendered in real time. There is currently no option to directly output a gif or video so these would then need to be converted to your required format via another tool.

Example

const scene = ParticleShift.Scene.create({
	selector: '#canvas',
	particle_size: 2,
	step_width: 6,
	draw_width: 500,
	draw_height: 300
})

Settings

Scene Object

Screen

A particle shift screen represents a single drawn image on a canvas which can be used for the particles to transition from and to. Anything can be drawn to the screen through the standard canvas 2d context api.

Example

const screen1 = ParticleShift.Screen.create(scene, {
	render: function(scene, ctx){
		ctx.font = '170px Georgia'
		ctx.fillStyle = 'black';
		ctx.fillText('Hello', 25, 200)
	}
})

Settings

Screen Object

| property | type | default | notes | | debug | method | n/a | Used on an instantiated screen object to output the rendered scene |

Body

Particle shift bodies are used to add basic attractors or deflectors to the particle system. Bodies are circles with a force which will be applied as a portion of the distance to the center of the body. The most common use case is to bind the update function to mouse position x/y to create mouse interaction.

Example

const example_body = ParticleShift.Body.create({
	x: 0,
	y: 0,
	radius: 50,
	force: -0.75,
	update: function(scene, ctx){},
	draw: function(scene, ctx){}
})

Settings

License

MIT

Author

Ian Hansson