open-index/open-npm huggingface dataset:
npm package: @hlysine/piano
Description: Web Audio instrument using Salamander Grand Piano samples
Author: Yotam Mann
Latest version: 0.2.1
Deprecated: Please use @logic-pad/piano instead.

![Piano Logo with keyboard and knobs](./tone-piano.png)

# @tonejs/piano

Tone Piano is a Web Audio instrument which uses high-quality multi-sampled piano sounds provided by [Salamander Grand Piano](https://archive.org/details/SalamanderGrandPianoV3) 

It has up to 16 velocity levels across 88 keys (sampled every third note) of a Yamaha C5. 

## Install

Install the npm package:

```
npm install --save @tonejs/piano
```

Tone Piano requires Tone.js as a peer dependency (and webmidi to use MidiInput):

```
npm install --save tone webmidi
```


## Usage

### Import

Using CommonJS:

```js
const Piano = require('@tonejs/piano');
```

Using ES6 modules:

```js
import { Piano } from '@tonejs/piano'
```

### Create and load samples


```javascript
// create the piano and load 5 velocity steps
const piano = new Piano({
	velocities: 5
})

//connect it to the speaker output
piano.toDestination()
```

All of the samples are loaded with the `load()` method which returns a promise

```javascript
piano.load().then(() => {
	console.log('loaded!')
})
```

## API reference

Once the samples are loaded, it exposes 4 methods for playing the notes:


### `.keyDown({ note: string, time?: Time, velocity?: number })`

Press a note down on the piano. Optionally give it a time using Tone.js time notation or seconds relative to the AudioContext clock.

The velocity is a value between 0-1. 

```javascript
//play a 'C4' 1 second from now
piano.keyDown({ note: 'C4', time: '+1' })
```

### `.keyUp({ note: string, time?: Time })`

Release a note at the given time. 

```javascript
//release the pressed 'C4' immediately
piano.keyUp({ note: 'C4' })
```

### `.pedalDown({ time?: Time })`

Press and hold the pedal starting at the given time. While the pedal is down, notes scheduled after the time will be sustained and released once the pedal is lifted.

### `.pedalUp({ time?: Time })`

Release the pedal and also dampen any notes which are currently sustained.
npm package: @hlysine/reactive
Description: Use Vue's reactivity in React, the React way.
Author: Henry Lin
Latest version: 0.7.1

<h1 align="center">reactive</h1>

<div align="center">

[![npm](https://img.shields.io/npm/v/@hlysine/reactive.svg)](https://www.npmjs.com/package/@hlysine/reactive)
[![GitHub](https://img.shields.io/github/license/hlysine/reactive)](https://github.com/hlysine/reactive/blob/main/LICENSE)
[![Coverage Status](https://coveralls.io/repos/github/hlysine/reactive/badge.svg?branch=main)](https://coveralls.io/github/hlysine/reactive?branch=main)
[![Node.js CI](https://github.com/hlysine/reactive/actions/workflows/node-ci.yml/badge.svg?branch=main)](https://github.com/hlysine/reactive/actions/workflows/node-ci.yml)
![TypeScript](https://badgen.net/badge/-/TypeScript?icon=typescript&label&labelColor=blue&color=555555)

</div>

<p align="center">
Use Vue's reactivity in React, the React way.
</p>

## Install

```bash
npm install --save @hlysine/reactive
```

Or with yarn:

```bash
yarn add @hlysine/reactive
```

## Usage

Under construction...

## API Documentation

[Check out the TypeDoc here](https://hlysine.github.io/reactive/)

## License

MIT © [Henry Lin](https://github.com/hlysine)

## Credits

This project is generated from [react-typescript-library template](https://github.com/alioguzhan/react-typescript-library).
npm package: @hmans/controlfreak
Description: Composable Game Input.
Author: Hendrik Mans
Latest version: 0.2.0

[![Tests](https://github.com/hmans/controlfreak/actions/workflows/tests.yml/badge.svg)](https://github.com/hmans/controlfreak/actions/workflows/tests.yml)
[![Version](https://img.shields.io/npm/v/@hmans/controlfreak)](https://www.npmjs.com/package/@hmans/controlfreak)
[![Downloads](https://img.shields.io/npm/dt/@hmans/controlfreak.svg)](https://www.npmjs.com/package/@hmans/controlfreak)
[![Bundle Size](https://img.shields.io/bundlephobia/min/@hmans/controlfreak?label=bundle%20size)](https://bundlephobia.com/result?p=@hmans/controlfreak)

# CONTROL FREAK

## tl;dr

Add it to your project:

```sh
yarn add @hmans/controlfreak
```

Write a module that composes and exports your game controller, eg `controller.ts`:

```ts
import {
  BooleanControl,
  Controller,
  GamepadDevice,
  KeyboardDevice,
  processors,
  TouchDevice,
  VectorControl
} from "@hmans/controlfreak"

export const controller = new Controller()

const keyboard = new KeyboardDevice()
const gamepad = new GamepadDevice()
const touch = new TouchDevice()

controller.addDevice(keyboard)
controller.addDevice(gamepad)
controller.addDevice(touch)

controller
  .addControl("move", VectorControl)
  .addStep(keyboard.compositeVector("KeyW", "KeyS", "KeyA", "KeyD"))
  .addStep(gamepad.axisVector(0, 1))
  .addStep(processors.clampVector(1))

controller
  .addControl("fire", BooleanControl)
  .addStep(keyboard.whenKeyPressed(["Space", "Enter"]))
  .addStep(gamepad.whenButtonPressed(0))

controller
  .addControl("aim", VectorControl)
  .addStep(
    keyboard.compositeVector("ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight")
  )
  .addStep(gamepad.axisVector(2, 3))
  .addStep(processors.normalizeVector)

controller.onDeviceChange.add((d) => console.log("new device:", d))
```

Then use it in your game loop:

```ts
import { controller } from "./controller"

/* Very likely within some sort of loop...: */
controller.update()
console.log(controller.controls.move.value)
```
npm package: @hmans/ingrid
Description: Spatial Hash Grids and not much else.
Author: Hendrik Mans
Latest version: 0.0.3

[![Version](https://img.shields.io/npm/v/@hmans/ingrid)](https://www.npmjs.com/package/@hmans/ingrid)
[![Downloads](https://img.shields.io/npm/dt/@hmans/ingrid.svg)](https://www.npmjs.com/package/@hmans/ingrid)
[![Bundle Size](https://img.shields.io/bundlephobia/min/@hmans/ingrid?label=bundle%20size)](https://bundlephobia.com/result?p=@hmans/ingrid)

# INGRID

### Spatial Hash Grids and not much else.

## TODO

- [ ] Implement `BoundedGrid`, using numerical instead of string hashes
- [ ] Experiment with and implement `CascadeGrid`
- [ ] Allow entities to take up volume (ie. exist in multiple cells)
npm package: @hmans/r3f-animate
Description: Animation helpers for react-three-fiber.
Author: Hendrik Mans
Latest version: 0.0.5

# @hmans/r3f-animate

## Animate

The `<Animate>` component wraps its children in a scene object that can be used to apply an animation to everything inside it. It accepts a per-frame update callback via the `fun` prop that gets passed a reference to the scene object:

```tsx
function Thingy() {
  return (
    <Animate
      fun={(o: Object3D, dt: number) => {
        o.rotation.x += dt * 0.7
        o.rotation.y += dt * 0.5
      }}
    >
      <mesh>
        <icosahedronGeometry />
        <meshStandardMaterial color="#E9C46A" metalness={0.5} roughness={0.5} />
      </mesh>
    </Animate>
  )
}
```

Since the animation callbacks are just normal functions, how about providing higher-order functions for specific animation types?

```tsx
const autoRotate = (x: number, y: number, z: number) => (
  o: Object3D,
  dt: number
) => {
  o.rotation.x += dt * x
  o.rotation.y += dt * y
  o.rotation.z += dt * z
}

function Thingy() {
  return (
    <Animate update={autoRotate(0.7, 0.5, 0)}>
      <mesh>
        <icosahedronGeometry />
        <meshStandardMaterial color="#E9C46A" metalness={0.5} roughness={0.5} />
      </mesh>
    </Animate>
  )
}
```

## Animators

This package also provides a couple of higher-order function factories that you can use together with `<Animate>`.

- `rotate(xs, ys, zs)`
  - Returns an animation function that rotates the object around the x, y, and z axes, with the respective speeds (radians per second) passed in the arguments.
- `float([fx, fy, fz], [ax, ay, az])`
  - Returns an animation function that floats the object around, using the `fx`, `fy` and `fz` frequencies, and `ax`, `ay` and `az` amplitudes.
npm package: @hmans/r3f-create-loader
Description: `createLoader` creates a loader hook for a resource served through HTTP, and will automatically queue it for preloading. This allows you to create bundles of assets that are preloaded in one go, at the time of import, rather than at the time of first use,
Author: Hendrik Mans
Latest version: 0.0.3

# createLoader

`createLoader` creates a loader hook for a resource served through HTTP,
and will automatically queue it for preloading. This allows you to create bundles of assets that are preloaded in one go, at the time of import, rather than at the time of first use, while also simplifying your code by moving the assets' URL strings to a central module.

## Example

In a module in your project (eg. `assets.ts`):

```js
import { createLoader } from "@hmans/r3f-create-loader"
/* ...import loaders... */

export const useAsset = {
  asteroid: createLoader(GLTFLoader, "/models/asteroid.gltf"),
  music: createLoader(AudioLoader, "/sounds/music.mp3"),
  fog: createLoader(TextureLoader, "/textures/fog.png")
}
```

In a component that uses one of these assets:

```js
import { useAsset } from "./assets"

function Asteroid() {
  /* Equivalent to `useTexture("/textures/fog.png")`, but you can't get the URL
  wrong and the preloading is triggered at time of importing `assets.ts`. */
  const fog = useAsset.fog()

  return /* ... */
}
```

## License

```
Copyright (c) 2022 Hendrik Mans

Permission is hereby granted, free of charge, to any person obtaining
a copy of this software and associated documentation files (the
"Software"), to deal in the Software without restriction, including
without limitation the rights to use, copy, modify, merge, publish,
distribute, sublicense, and/or sell copies of the Software, and to
permit persons to whom the Software is furnished to do so, subject to
the following conditions:

The above copyright notice and this permission notice shall be
included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
```
npm package: @hmans/r3f-lifecycle
Description: Lifecycle helpers for react-three-fiber.
Author: Hendrik Mans
Latest version: 0.0.4

# @hmans/r3f-lifecycle

## Summary

This package provides a small collection of convenience hooks and components that allow you to hook callbacks into the various lifecycle stages of @react-three/fiber components.

## Motivation

- To provide both hooks and component versions of the same functionality, to let the user stay in comfy JSX land _just a little longer_.
- To provide these lifecycle utility components and hooks in the language of game engines, even though they are just thin wrappers around `useFrame` and `useEffect`.

### OnAwake and useOnAwake

Use the `useOnAwake` hook to execute a function when the component is first mounted. The `state` parameter passed into the callback function contains a reference to the react-three-fiber state.

```tsx
useOnAwake((state) => {
  // do something when the component appears
})
```

`<OnAwake>` lets you do the same thing from JSX:

```tsx
<OnAwake
  fun={(state) => {
    /* do something when the component appears */
  }}
/>
```

### OnDestroy and useOnDestroy

Analogous to `<OnAwake>` and `useOnAwake`, these will execute the given callback function when the component is unmounted.

### OnUpdate and useOnUpdate

Use `useOnUpdate` to provide a callback that gets called every frame.

```tsx
useOnUpdate((dt) => {
  // do something every frame
})
```

> **Note**
> This hook merely wraps R3F's `useFrame` hook, with a minor change to the order of arguments passed in (deltatime first, R3F state second), and is merely provided for consistency with the other hooks.

`<OnUpdate>` lets you do the same thing from JSX:

```tsx
<OnUpdate
  fun={(dt, state) => {
    /* do something */
  }}
/>
```

### Effect and LayoutEffect

`<Effect>` and `<LayoutEffect>` are simple wrappers around React's `useEffect` and `useLayoutEffect` hooks and allow you to declare a callback that will be executed every time the component is rendered, or when one of the optionally provided dependencies has changed.

```tsx
<Effect
  fun={() => console.log("foo has changed to:", foo)}
  dependencies={[foo]}
/>
```
npm package: @hmans/r3f-shared-resource
Description: A component decorator that makes it easy to create and re-use react-three-fiber resources like materials and geometries.
Author: Hendrik Mans
Latest version: 0.1.0

# @hmans/r3f-shared-resource

Stop creating those materials more often than needed, it's time to recycle! ♻️

## sharedResource

`sharedResource` decorates a react-three-fiber component to make the Three.js object it renders re-usable through a convenient API, while giving you full control over the lifecycle of the resource.

```tsx
import { sharedResource } from "@hmans/r3f-shared-resource"

/* Create a shared resource. Here, it's a material that we want to
reuse in multiple meshes. */
const SharedMaterial = sharedResource(() => (
  <meshPhysicalMaterial color="hotpink" />
))

const Game = () => (
  <group>
    {/* Somewhere in your app, create the actual resource.
    This element will control the lifetime of the actual resource;
    if it gets unmounted, the resource will be destroyed. */}
    <SharedMaterial.Resource />

    <Scene />
  </group>
)

/* Let's have multiple meshes using the same material! */
const Scene = () => (
  <group>
    <mesh position-x={-1.5}>
      <sphereGeometry />
      <SharedMaterial />
    </mesh>

    <mesh position-x={+1.5}>
      <dodecahedronGeometry />
      <SharedMaterial />
    </mesh>
  </group>
)
```

## Additional Notes

### Will this work with geometries, too?

This will work with materials, geometries, and possibly even other types of objects; but materials and geometries are the most common use cases.

### I hate having an extra `<Foo.Resource />` element, why can't this be automated?

Automating the creation of the actual resource is not terribly complicated, but I consider it an anti-pattern that _will_ get you into trouble sooner or later, so I decided against including it in this library. Consider being in complete control over the lifecycle of the shared resource a _feature_, not a caveat.