Code Monkey home page Code Monkey logo

smoke.js's Introduction

Demo

Installation

Basic

Copy the smoke.js file into your project and use it with a script tag:

<script src="smoke.js"></script>

That defines a SmokeMachine global that you can use to make smoke (see examples below).

yarn or npm

You can also use yarn or npm:

yarn add @bijection/smoke
npm add @bijection/smoke

Then you can import or require smoke.js like this:

import SmokeMachine from '@bijection/smoke'
var SmokeMachine = require('@bijection/smoke')

Usage

Short Example

var ctx = canvas.getContext('2d')

var party = SmokeMachine(ctx)
party.addSmoke(500,500)
party.start()

Copy-Pastable Example

<canvas id="canvas"></canvas>
<script src="smoke.js"></script>
<script>
	var canvas = document.getElementById('canvas')
	var ctx = canvas.getContext('2d')
	canvas.width = 1000
	canvas.height = 1000

	var party = SmokeMachine(ctx, [54, 16.8, 18.2])

	party.start() // start animating

	party.addSmoke(500,500,10) // wow we made smoke

	setTimeout(function(){

		party.stop() // stop animating

		party.addSmoke(600,500,100)
		party.addSmoke(500,600,20)

		for(var i=0;i<10;i++){
			party.step(10) // pretend 10 ms pass and rerender
		}

		setTimeout(function(){
			party.start()
		},1000)

	},1000)
</script>

API

SmokeMachine(context, [r,g,b])

Returns a smoke machine that makes smoke.

  • context β€” the context of the canvas we wanna draw smoke on
  • [r,g,b] β€” (optional) the color we want the smoke to be
var party = SmokeMachine(context, [1,5,253])

party.start()

Start Animating!!

party.stop()

Stop animating :(

party.addSmoke(x,y,numberofparticles)

  • x,y β€” the coords at which the smoke should be created in the canvas
  • numberofparticles β€” more makes more smoke

party.step(milliseconds)

redraws the smoke as if milliseconds milliseconds have passed

smoke.js's People

Contributors

0xflotus avatar bijection avatar sturob avatar therealshark avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar

smoke.js's Issues

Suggestion: add dynamic force like wind

Hi
Great Library.

I would like to suggest one feature if you return to this in the future.

And that is option to add some kind of dynamic force like wind from one side to another.

Missing Declaration Type

Hi,
I'm trying to import smoke.js in an angular project.
I used yarn to install, and when I do the import :
import SmokeMachine from '@bijection/smoke'
I get this error :
Could not find a declaration file for module '@bijection/smoke'
Any idea of how this error could be fixed?
Thanks for reading me.

Question: smoke originating at bottom of full document height?

Hi, I love this smoke effect, thank you for making it available on github!!!

Is it possible to place an emitter on the bottom of the page, if the page height is greater than the viewport height (i.e., 'below the fold')? Could you post an example of how this could be done? I've tried a few things, but my nascent javascript skills have been unsuccessful.

Thanks again!

Safari?

This seems to work in Chrome but not safari, however no errors are raised, the script fails silently πŸ˜•

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    πŸ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. πŸ“ŠπŸ“ˆπŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❀️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.