Yoshi • Particle Effects System •

Yoshi provides a complete solution for creating many different types of particle effect graphics. From rain and snow effects to molecular and orbital animations - you're in charge of customizing all of Yoshi's canvas driven particles. Yoshi is confined within a single container and is easily added or layered to any page.

Select a preset and customize it further with the options below.

dust

rain

snow

molecules

slipstream

starburst

curves

spinner

bubbles

triangles

colors

blood

Particle Settings

Customize nearly everything about Yoshi particles. Many settings also allow you to use 0 to have Yoshi select a random value. Some settings are dependent upon other settings. For example, particle width / height are used only when you have selected "line" for particle shape - which is useful for creating rain.

number of particles ( 0=random )
minimum distance between particles
particle radius ( 0=random )
maximum particle radius
particle colors ( 6-digit hex - comma septd )
animate particle colors ( true/false )

particle shape ( "circle", "line" or "triangle" )
particle width ( line particles )
maximum particle width ( lines and triangles )
particle height ( lines and triangles )
maximum particle height ( lines and triangles )

General Settings

Control how fast particles accelerate as they approach each other, particle velocity, how velocity values are calculated inside the animation loop and much more. The background can be 'transparent', a hex color or a special 'blend' mode which eventually paints out the entire canvas.

bg color ( "transparent", "blend", 6-digit hex )
x axis speed ( r=random )
maximum x axis speed
y axis speed ( r=random )
maximum y axis speed

x axis velocity
y axis velocity
x axis calculation type ( 0, 1, 2, 3 )
y axis calculation type ( 0, 1, 2, 3 )
x axis acceleration ( 0=random )
y axis acceleration ( 0=random )

Line Settings

Particles are attracted to each and can optionally have lines drawn between them. Lines will fade into view once the minimum particle distance is reached - and have many customization options. The line type setting allows you to control if the line is curved. You can choose 'line', 'quad' (quadratic curve), 'bezier' (bezier curve) or 'random'. The control point settings are the plotted anchors used to adjust curved lines.

draw lines between particles
color of lines
width of lines
type of line ( "line", "quad", "bezier", "random" )

control point A>X ( 0=random, true=pt coords )
control point A>Y ( 0=random, true=pt coords )
control point B>X ( 0=random, true=pt coords )
control point B>Y ( 0=random, true=pt coords )

Installation

Just add the files to your page and Yoshi is ready for use:

<link rel="stylesheet" href="css/jquery-yoshi.css" type="text/css" />
<script src="js/jquery-2.1.3.min.js">
<script src="js/jquery-yoshi.js">

Usage

Create an empty DIV anywhere on your page. Style and layer it however you like (Yoshi is responsive). Call Yoshi on your element when the page loads:

$(document).ready(function(){
$('.myElement').Yoshi({
	// SETTINGS GO HERE
});
});

Settings

Use Yoshi settings to customize your Particle Effects to your liking.

num_particles number of particles
min_distance minimum distance between particles before orbit
particle_size size of particles ( 0=random )
max_size maximum size of particles
particle_color comma separated list of particle colors ( HEX )
switch_color animate through list of particle colors when looping ( true/false )
particle_shape shape of particles ( 'line' or 'circle' )
particle_width width of particles ( when using line mode )
max_particle_width maximum width of particles ( when using line mode )
particle_height height of particles ( when using line mode )
max_particle_height maximum height of particles ( when using line mode )
canvas_color background color ( 6-digit hex, 'transparent' or 'blend' )
speed_x speed factor along X axis
max_speed_xmaximum speed factor along X axis
speed_y speed factor along Y axis
max_speed_ymaximum speed factor along Y axis
velocity_x velocity factor along X axis
velocity_y velocity factor along Y axis
x_type controls how velocity X is calculated ( 0=*, 1=+, 2=-, 3=/ )
y_type controls how velocity Y is calculated ( 0=*, 1=+, 2=-, 3=/ )
acceleration_x acceleration factor along X axis
acceleration_y acceleration factor along Y axis
draw_line if Yoshi should draw lines between particles ( true or false )
line_color comman separated list of line colors ( 6-digit hex color )
line_width width of lines
line_type type of lines ( 'line', 'bezier', 'quad', 'random' )
control_point_a_x control point A>X when using curved lines ( 0=random, true=current position )
control_point_a_y control point A>Y when using curved lines ( 0=random, true=current position )
control_point_b_x control point B>X when using curved lines ( 0=random, true=current position )
control_point_b_y control point B>Y when using curved lines ( 0=random, true=current position )