diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 61e3a8b2..fe371233 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -482,8 +482,8 @@ importers: specifier: ^4.22.0 version: 4.22.0 '@astro-community/astro-embed-youtube': - specifier: ^0.4.3 - version: 0.4.3(astro@4.0.8) + specifier: ^0.4.4 + version: 0.4.4(astro@4.0.8) '@astrojs/mdx': specifier: ^2.0.3 version: 2.0.3(astro@4.0.8) @@ -806,8 +806,8 @@ packages: leven: 3.1.0 dev: true - /@astro-community/astro-embed-youtube@0.4.3(astro@4.0.8): - resolution: {integrity: sha512-zXtPmR9yxrTo6cuLhH8v+r62bsXbsLJgsU2FiZalPr4bXJxAUQEIlG46S/qK0AEXi9uNShKqy4+zBaJ98xTVEg==} + /@astro-community/astro-embed-youtube@0.4.4(astro@4.0.8): + resolution: {integrity: sha512-fYlycLrJFNnibZ9VHPSJO766kO2IgqYQU4mBd4iaDMaicL0gGX9cVZ80QdnpzGrI6w0XOJOY7prx86eWEVBy8w==} peerDependencies: astro: ^2.0.0 || ^3.0.0-beta || ^4.0.0-beta dependencies: diff --git a/website/.astro/types.d.ts b/website/.astro/types.d.ts index 268e956b..4ea3cd80 100644 --- a/website/.astro/types.d.ts +++ b/website/.astro/types.d.ts @@ -262,6 +262,13 @@ declare module 'astro:content' { collection: "blog"; data: InferEntrySchema<"blog"> } & { render(): Render[".mdx"] }; +"year-2.mdx": { + id: "year-2.mdx"; + slug: "year-2"; + body: string; + collection: "blog"; + data: InferEntrySchema<"blog"> +} & { render(): Render[".mdx"] }; }; }; diff --git a/website/package.json b/website/package.json index a84527cf..af100889 100644 --- a/website/package.json +++ b/website/package.json @@ -13,7 +13,7 @@ }, "dependencies": { "@algolia/client-search": "^4.22.0", - "@astro-community/astro-embed-youtube": "^0.4.3", + "@astro-community/astro-embed-youtube": "^0.4.4", "@astrojs/mdx": "^2.0.3", "@astrojs/react": "^3.0.9", "@astrojs/rss": "^4.0.2", diff --git a/website/public/img/autocomplete.png b/website/public/img/autocomplete.png new file mode 100644 index 00000000..140b21e8 Binary files /dev/null and b/website/public/img/autocomplete.png differ diff --git a/website/public/img/strudel-alien-live-coding.png b/website/public/img/strudel-alien-live-coding.png new file mode 100644 index 00000000..b9af35b6 Binary files /dev/null and b/website/public/img/strudel-alien-live-coding.png differ diff --git a/website/public/img/strudel-live-coding-mars-college.jpg b/website/public/img/strudel-live-coding-mars-college.jpg new file mode 100644 index 00000000..2612e78d Binary files /dev/null and b/website/public/img/strudel-live-coding-mars-college.jpg differ diff --git a/website/public/img/strudel-monkeys.png b/website/public/img/strudel-monkeys.png new file mode 100644 index 00000000..aec04bb9 Binary files /dev/null and b/website/public/img/strudel-monkeys.png differ diff --git a/website/public/img/strudel-scope.png b/website/public/img/strudel-scope.png new file mode 100644 index 00000000..0dd20eec Binary files /dev/null and b/website/public/img/strudel-scope.png differ diff --git a/website/public/img/strudel-themes.png b/website/public/img/strudel-themes.png new file mode 100644 index 00000000..0cd511a7 Binary files /dev/null and b/website/public/img/strudel-themes.png differ diff --git a/website/public/img/workshop-space.png b/website/public/img/workshop-space.png new file mode 100644 index 00000000..571afbe4 Binary files /dev/null and b/website/public/img/workshop-space.png differ diff --git a/website/src/components/Youtube.jsx b/website/src/components/Youtube.jsx new file mode 100644 index 00000000..20c132c9 --- /dev/null +++ b/website/src/components/Youtube.jsx @@ -0,0 +1,6 @@ +import LiteYouTubeEmbed from 'react-lite-youtube-embed'; +import 'react-lite-youtube-embed/dist/LiteYouTubeEmbed.css'; + +export function Youtube(props) { + return ; +} diff --git a/website/src/content/blog/year-2.mdx b/website/src/content/blog/year-2.mdx new file mode 100644 index 00000000..5d710293 --- /dev/null +++ b/website/src/content/blog/year-2.mdx @@ -0,0 +1,161 @@ +--- +title: '2 Years of Strudel' +description: '' +date: '2024-01-22' +tags: ['meta'] +author: froos +--- + +import { YouTube } from '@astro-community/astro-embed-youtube'; +import LiteYouTubeEmbed from 'react-lite-youtube-embed'; +import 'react-lite-youtube-embed/dist/LiteYouTubeEmbed.css'; + +Strudel is now 2 years old! This was the first commit to the strudel repo: + +```log +commit 38b5a0d5cdf28685b2b5e18d460772b70246207b +Author: Alex McLean +Date: Sat Jan 22 20:24:36 2022 +0000 + +Initial commit +``` + +I have already written these 2 posts about the first year of strudel: + +- [Introducing Strudel](https://loophole-letters.vercel.app/strudel) +- [1 Year of Strudel](https://loophole-letters.vercel.app/strudel1year) + +To continue that tradition, let me recap what happened around Strudel in 2023, at least what I have noticed: + +## ICLC 2023 + +I presented strudel at the [International Conference on Live Coding (ICLC)](https://iclc.toplap.org/2023/), which took place in April in Utrecht. +Here is the (pretty technical) video of my presentation: + +import { Youtube } from '@src/components/Youtube'; + + + +For the conference, I wrote a paper with Alex McLean, called [Strudel: Live Coding Patterns on the Web](https://zenodo.org/records/7842142). +For me personally, this was my first major contact with the live coding scene and it was a very memorable experience! + +## Workshops and Courses + +A lot of workshops have been using strudel in the last year, from many parts of the world: +[Iceland](http://www.raflost.is/live-coding-for-beginners/), [UK](https://gutlevel.co.uk/whatson/patternclub8), +[Japan](https://yoppa.org/kanazawa23), [France](https://www.stereolux.org/agenda/workshop-de-decouverte-de-la-musique-algorithmique-avec-strudel-avec-camille-amet) and the [US](https://www.nycresistor.com/2023/09/25/making-music-with-code-9-30-2023/) (probably more I've missed). +I've also given workshops in [Switzerland](https://basel.codes/2023/index.html) and [Germany](https://www.cityofmediaarts.de/de/events/strudel-live-coding-workshop/), where we even had real strudel, thanks to [TOPLAP Karlsruhe](https://toplap-ka.de/)! + +![strudel workshop space](/img/workshop-space.png) + +Additionally, there is now a [Creative Coding](https://www.chalmers.se/en/collaborate-with-us/activities-for-schools/creative-coding/) course at Chalmers in Sweden, consisting of "a 10-week series of workshops [...] for younger girls to have fun and experiment with code and music". +I was very delighted to see this video of the girls having fun with Strudel: + + + +The course was also encompassed by a study on female empowerement through Creative Coding, read more in [Jasmina Maric's paper "Singing Code"](https://www.academia.edu/106106710/Singing_Code). + +Another bigger installment was the [(Algo|Afro) Futures programme](https://algo-afro-futures.lurk.org/) led by Antonio Roberts, which is "a mentoring programme for early career Black artists who want to explore creative coding and live coding". +For the final concert the recorded this amazing live stream: + + + +I am so happy to see that the project I've co-created has had such an impact already, making live coding workshops more easy and accessible. +In my opinion, the reasons why people seem to choose strudel for teaching are: + +- it does not require an installation, so it even runs on your phone / tablet or a chromebook +- in-code and behind-code visualizations help learners to understand what the system is doing +- the interactive documentation +- the simple javascript syntax, which is very similar to [hydra](https://hydra.ojack.xyz) +- tidal's intuitive mini notation + its deep pattern engine is also interesting for the most advanced users +- strudel might also be a "gateway drug" for tidal, which is probably the most used live coding language + +## Performances + +![strudel performance](/img/strudel-live-coding-mars-college.jpg) + +People are starting to use Strudel for performances, many of which can be watched in the new [Showcase](http://localhost:4321/intro/showcase/)! +The above photo comes from the [Mars College Department of Future Music](https://mars.college/gallery/live_coding/) + +## New Features + +Let's talk about some of the major features that landed since last year. + +### Audio Engine Improved + +The audio engine has gotten a lot of attention! Once integrated into Strudel itself, the engine has been pulled out and named [superdough](https://www.npmjs.com/package/superdough), +the name being based on [SuperDirt](https://github.com/musikinformatik/SuperDirt), which is the audio engine of Tidal. +superdough is now also used by [topos](https://topos.live/), a creation of [Bubo](https://github.com/Bubobubobubobubo/), who helped me implement a bunch of new features. +Lately, [Jade Rowland](https://github.com/daslyfe) has also developed many synthesis features into superdough! Here is a non-exhaustive list of new features: + +- [filter envelopes](https://strudel.cc/learn/effects/#filter-envelope) + [24db filter option](https://strudel.cc/learn/effects/#ftype) +- [pitch envelopes](https://strudel.cc/learn/effects/#pitch-envelope) +- [fm synthesis](https://strudel.cc/learn/synths/#fm-synthesis) +- [wavetable synthesis](https://strudel.cc/recipes/recipes/#wavetable-synthesis) +- [phaser](https://strudel.cc/learn/effects/#phaser) +- [vibrato](https://strudel.cc/learn/synths/#vibrato) +- [noise](https://strudel.cc/learn/synths/#noise) +- [an integration of the zzfx synth](https://strudel.cc/learn/synths/#zzfx) +- [compressor](https://strudel.cc/learn/effects/#compressor) +- multichannel audio / audio device selection + +import { MiniRepl } from '@src/docs/MiniRepl'; + +Here's an example that shows off filter envelopes: + +/8](<3 5>,8)") + .clip(perlin.range(.15,1.5)) + .release(.1) + .s("sawtooth") + .lpf(sine.range(400,800).slow(16)) + .lpq(cosine.range(6,14).slow(3)) + .lpenv(sine.mul(4).slow(4)) + .lpd(.2).lpa(.02) + .ftype('24db') + .rarely(add(note(12))) + .room(.2).shape(.3).postgain(.5) + .superimpose(x=>x.add(note(12)).delay(.5).bpf(1000)) + .gain("[.2 1@3]*2") // fake sidechain + , + stack( + s("bd*2").mask("<0@4 1@16>"), + s("hh*8").gain(saw.mul(saw.fast(2))).clip(sine) + .mask("<0@8 1@16>") + ).bank('RolandTR909') +) +`} +/> + +### Editor Quality of Life Improvements + +You can now change the theme and font of the editor: + +![strudel themes](/img/strudel-themes.png) + +You can now enable autocompletion in the settings: + +![autocomplete](/img/autocomplete.png) + +If you enable tooltips, you will get the same info by hovering the mouse over functions while holding the ctrl key! + +### New Visualizations + +There is now a new `.spiral()` visualization that renders events in a spiral, elevating the cyclical nature of time (+ swirl also means Strudel in german). + +![strudel alien ui](/img/strudel-alien-live-coding.png) + +Ah yes and you see one of the less readable fonts in this screenshot too :) + +The `.scope()` function renders you an oscilloscope: + +![scope](/img/strudel-scope.png) + +The pianoroll also got some more options, including the ability to set labels: + +![scope](/img/strudel-monkeys.png) + +https://kidscodecs.com/strudel-music-language/