mirror of
https://github.com/eliasstepanik/strudel-docker.git
synced 2026-01-10 21:28:31 +00:00
finish project start page + link it in main readme
This commit is contained in:
Felix Roos
parent
52a311aae6
commit
df03e9a379
18
README.md
18
README.md
@ -15,25 +15,13 @@ An experiment in making a [Tidal](https://github.com/tidalcycles/tidal/) using w
|
||||
After cloning the project, you can run the REPL locally:
|
||||
|
||||
```bash
|
||||
pnpm run setup
|
||||
pnpm run repl
|
||||
pnpm i
|
||||
pnpm dev
|
||||
```
|
||||
|
||||
## Using Strudel In Your Project
|
||||
|
||||
There are multiple npm packages you can use to use strudel, or only parts of it, in your project:
|
||||
|
||||
- [`core`](./packages/core/): tidal pattern engine
|
||||
- [`mini`](./packages/mini): mini notation parser + core binding
|
||||
- [`transpiler`](./packages/transpiler): user code transpiler
|
||||
- [`webaudio`](./packages/webaudio): webaudio output
|
||||
- [`osc`](./packages/osc): bindings to communicate via OSC
|
||||
- [`midi`](./packages/midi): webmidi bindings
|
||||
- [`serial`](./packages/serial): webserial bindings
|
||||
- [`tonal`](./packages/tonal): tonal functions
|
||||
- ... [and there are more](./packages/)
|
||||
|
||||
Click on the package names to find out more about each one.
|
||||
Read more about how to use Strudel in your Project [here](https://strudel.cc/technical-manual/project-start).
|
||||
|
||||
## Contributing
|
||||
|
||||
|
||||
@ -7,20 +7,17 @@ This package provides an easy to use bundle of multiple strudel packages for the
|
||||
Save this code as a `.html` file and double click it:
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<script src="https://unpkg.com/@strudel/web@1.0.3"></script>
|
||||
<button id="play">play</button>
|
||||
<button id="stop">stop</button>
|
||||
<script type="module">
|
||||
import { initStrudel } from 'https://cdn.skypack.dev/@strudel/web@0.8.2';
|
||||
|
||||
<script>
|
||||
initStrudel();
|
||||
document.getElementById('play').addEventListener('click', () => note('<c a f e>(3,8)').play());
|
||||
document.getElementById('play').addEventListener('click', () => note('<c a f e>(3,8)').jux(rev).play());
|
||||
document.getElementById('stop').addEventListener('click', () => hush());
|
||||
</script>
|
||||
```
|
||||
|
||||
With the help of [skypack](https://www.skypack.dev/), you don't need a bundler nor a server.
|
||||
|
||||
As soon as you call `initStrudel()`, all strudel functions are made available.
|
||||
In this case, we are using the `note` function to create a pattern.
|
||||
To actually play the pattern, you have to append `.play()` to the end.
|
||||
@ -79,4 +76,4 @@ There will probably be an escapte hatch for that in the future.
|
||||
|
||||
## More Examples
|
||||
|
||||
Check out the examples folder for more examples, both using plain html and vite!
|
||||
Check out the examples folder for more examples, both using plain html and vite!
|
||||
|
||||
@ -103,9 +103,9 @@ export const SIDEBAR: Sidebar = {
|
||||
],
|
||||
Development: [
|
||||
{ text: 'Strudel in your Project', link: 'technical-manual/project-start' },
|
||||
{ text: 'Packages', link: 'technical-manual/packages' },
|
||||
{ text: 'REPL', link: 'technical-manual/repl' },
|
||||
{ text: 'Sounds', link: 'technical-manual/sounds' },
|
||||
{ text: 'Packages', link: 'technical-manual/packages' },
|
||||
{ text: 'Docs', link: 'technical-manual/docs' },
|
||||
{ text: 'Testing', link: 'technical-manual/testing' },
|
||||
// { text: 'Internals', link: 'technical-manual/internals' },
|
||||
|
||||
@ -26,6 +26,8 @@ These packages give you a batteries-included point of getting started, and most
|
||||
- [repl](https://github.com/tidalcycles/strudel/tree/main/packages/repl): The Strudel REPL as a web component.
|
||||
- [web](https://github.com/tidalcycles/strudel/tree/main/packages/web): Strudel library for the browser, without UI.
|
||||
|
||||
To find out more about these two, read [Using Strudel in Your Project](/technical-manual/project-start)
|
||||
|
||||
### Essential Packages
|
||||
|
||||
These package are the most essential. You might want to use all of those if you're using strudel in your project:
|
||||
|
||||
@ -38,7 +38,7 @@ To make sure your code is not lost, you can also use the long url:
|
||||
|
||||
That long URL can just be copy pasted from the URL bar when you're on the strudel website. It always reflects the latest evaluation of your code.
|
||||
|
||||
### Inside an iframe via `@strudel/embed`
|
||||
### @strudel/embed
|
||||
|
||||
To simplify the process of emebdding via an iframe, you can use the package `@strudel/embed`:
|
||||
|
||||
@ -73,11 +73,11 @@ n("<0 1 2 3 4>*8").scale('G4 minor')
|
||||
.lpf(perlin.range(200,20000).slow(4))`}>
|
||||
</strudel-repl>
|
||||
|
||||
For alternative ways to load this package, see [@strudel/embed README](https://github.com/tidalcycles/strudel/tree/main/packages/embed#strudelembed).
|
||||
For alternative ways to load this package, see the [@strudel/embed README](https://github.com/tidalcycles/strudel/tree/main/packages/embed#strudelembed).
|
||||
|
||||
### Without an iframe via `@strudel/repl`
|
||||
### @strudel/repl
|
||||
|
||||
Loading strudel directly in your site looks similar to the iframe variant:
|
||||
Loading strudel directly in your site, without an iframe, looks similar to the iframe variant:
|
||||
|
||||
```html
|
||||
<script src="https://unpkg.com/@strudel/repl@latest"></script>
|
||||
@ -120,3 +120,32 @@ The upside of using the repl without an iframe is that you can pin the strudel v
|
||||
```
|
||||
|
||||
This will guarantee your pattern wont break due to changes to the strudel project in the future.
|
||||
|
||||
For more info on this package, see the [@strudel/repl README](https://github.com/tidalcycles/strudel/tree/main/packages/repl#strudelrepl).
|
||||
|
||||
## With your own UI
|
||||
|
||||
The above approach assumes you want to use the builtin [codemirror](https://codemirror.net/) editor.
|
||||
If you'd rather use your own UI, you can use the `@strudel/web` package:
|
||||
|
||||
```html
|
||||
<!doctype html>
|
||||
<script src="https://unpkg.com/@strudel/web@1.0.3"></script>
|
||||
<button id="play">play</button>
|
||||
<button id="stop">stop</button>
|
||||
<script>
|
||||
initStrudel();
|
||||
document.getElementById('play').addEventListener('click', () => note('<c a f e>(3,8)').jux(rev).play());
|
||||
document.getElementById('stop').addEventListener('click', () => hush());
|
||||
</script>
|
||||
```
|
||||
|
||||
For more info on this package, see the [@strudel/web README](https://github.com/tidalcycles/strudel/tree/main/packages/web#strudelweb).
|
||||
|
||||
## Via npm
|
||||
|
||||
[All the packages and many more are available on npm under the @strudel namespace](https://www.npmjs.com/search?q=%40strudel).
|
||||
There are actually many more packages you can use to have fine grained control over what you use and what not.
|
||||
To use these packages, you have to use a bundler that supports es modules, like [vite](https://vitejs.dev/).
|
||||
|
||||
To find out more about the purpose of each package, see [Packages](/technical-manual/packages)
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user