From 22d536429f0909195ce5f703406326818442acf9 Mon Sep 17 00:00:00 2001 From: Wren Hawthorne Date: Thu, 25 Jul 2024 21:52:29 -0700 Subject: [PATCH] Update README.md --- README.md | 28 +++++++++++++++++++++++++--- 1 file changed, 25 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index 3341710..e602124 100644 --- a/README.md +++ b/README.md @@ -2,15 +2,37 @@ OctoLooper is a music composition tool designed to be fun and accessible for young children. It was inspired by research on Creativity Support Tools (CST) and their ability to lower thresholds for creative projects. It began as a semester-long project for my [Educational Technology course](https://omscs6460.gatech.edu/) at Georgia Tech as part of the [OMSCS program](https://omscs.gatech.edu/), but I hope to continue to iterate and improve on this initial version. -## Accessing OctoLooper -✨[LIVE DEMO](https://wrenhawth.github.io/octo-looper/)✨ +## Screenshots +image +image +image + +## Live Demo + +OctoLooper can be accessed through a ✨[Live Demo](https://wrenhawth.github.io/octo-looper/)✨ hosted on GitHub Pages + +## Features + +OctoLooper separates the creative process for creating a short musical loop into a number of simplified steps: + +### Steps + +1. **Name**: Users can select a randomly generated simple name or manually input a name for the song they're creating +2. **Drums**: The tempo can be adjusted and the backing rhythm can be selected from a number of preset patterns +3. **Chords**: Chords in the loop's [chord progression](https://en.wikipedia.org/wiki/Chord_progression) can be toggled from a set of [basic triad chords](https://en.wikipedia.org/wiki/Triad_(music)). Options for rhythmic patterns and arpeggios are also available. +4. **Sing**: The melodic step of the process is currently simply an encouragement for the user to try singing along with the musical loop. A space is available to type lyrics +5. **Share**: Optionally, the song created can be shared through a URL, which when accessed by another user will load the same musical parameters. ## Architecture * This version of OctoLooper is built as a [React](https://react.dev/) application with [Typescript](https://www.typescriptlang.org/), supported with [Vite](https://vitejs.dev/) build tooling. -* [Tone.js](https://tonejs.github.io/) is used for Web Audio sound generation and the timing and synchronization of web audio events. The app is built using a combination of [sampled](https://github.com/Tonejs/Tone.js?tab=readme-ov-file#tonesampler) and [synthesized](https://github.com/Tonejs/Tone.js?tab=readme-ov-file#instruments) sounds. Sample sounds were sourced from the freely available [Ultimate Boom Bap Drum Kit](https://soundpacks.com/free-sound-packs/ultimate-boom-bap-drum-kit/) and [Sample Pi](https://github.com/alex-esc/sample-pi) sample packs. +* [Tone.js](https://tonejs.github.io/) is used for Web Audio sound generation and the timing and synchronization of web audio events. The app is built using a combination of [sampled](https://github.com/Tonejs/Tone.js?tab=readme-ov-file#tonesampler) and [synthesized](https://github.com/Tonejs/Tone.js?tab=readme-ov-file#instruments) sounds. * [Pixi.js](https://pixijs.com/) (specifically [Pixi-React](https://pixijs.io/pixi-react/)) is used to build some of the more complicated animations and interactive elements on a [Canvas](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API) element. +## Credits and Thanks +* Sample sounds were sourced from the freely available [Ultimate Boom Bap Drum Kit](https://soundpacks.com/free-sound-packs/ultimate-boom-bap-drum-kit/) and [Sample Pi](https://github.com/alex-esc/sample-pi) sample packs. +* Background Image by freepik + # React + TypeScript + Vite This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.