Giter VIP home page Giter VIP logo

kimi's Introduction

kimi

experimental

Define states with values and kimi will drive between the states

Usage

NPM

Example

var kimi = require( './..' );
var driver = kimi( {

  onUpdate: onUpdate,
  onState: onState
});

// define some places for the driver
// 
// Parameters:
// first param is the name of the place/state
// second param is the value of that state/place
driver.state( 'alpha', [ 0, 100, 0 ] );
driver.state( 'idle', [ 300, 200, 0.5 ] );
driver.state( 'rollOver', [ 100, 200, 1 ] );
driver.state( 'omega', [ 0, 300, 0 ] );

// define a map for the driver to drive along
// fromTo defines the direction you can drive from states and how to drive
// 
// Parameters:
// first param is the start location
// second param is the end location
// third param is the distance in seconds between locations
// fourth param will be a function which will be used to interpolate values
driver.fromTo( 'alpha', 'idle', 3, interpolate );
driver.fromTo( 'idle', 'rollOver', 0.5, interpolate );
driver.fromTo( 'rollOver', 'idle', 5, interpolate );
driver.fromTo( 'idle', 'omega', 0.5, interpolate );

// set the initial state for the driver
driver.init( 'alpha' );

// calling the go function will change from the current state to the next
// you can call it at any point to change where you're going
// the driver always respects the map
driver.go( 'rollOver', function( value, time ) {

  console.log( '---- finished alpha -> rollOver', value );
});

// the following will show how `set` works
window.addEventListener('mousedown', function() {
  
  // this will cause kimi to just jump to this state and kill all animations
  driver.set('idle');
});


// value comes from the interpolate function and time is the current time (in seconds)
// here you might do such things as update the look
function onUpdate( value, state ) {

  console.log( 'time', time );
  console.log( 'x', value[ 0 ] );
  console.log( 'y', value[ 1 ] );
  console.log( 'z', value[ 2 ] );
}

// onState will be called when we arrive at a different place
function onState( value, state ) {

  console.log( state, value );
}

// animator function should return the value at the specific percentage
function interpolate( percentage, start, end ) {

  var rVal = [];

  start.forEach( function( startValue, i ) {

    var endValue = end[ i ];

    rVal[ i ] = ( endValue - startValue ) * percentage + startValue;
  });

  return rVal;
}

License

MIT, see LICENSE.md for details.

kimi's People

Contributors

greenkeeperio-bot avatar hughsk avatar mikkoh avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar

kimi's Issues

Error Handling Implementation

To improve the usability of this module, and its higher-level module, f1, I would like to add some error handling to kimi. This would include errors that pertain to invalid states or transitions, specifically resolving the cryptic "could not find length of currentpath" error, resulting in hopefully something more informative being printed to the console.

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.