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.
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.
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
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.
Just add the files to your page and Yoshi is ready for use:
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:
// SETTINGS GO HERE
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 )