A html・css・svg version of the Roland TR-909 (no sound)

Last update: Dec 7, 2022

Overview

VECTOR-909

Roland TR-909 drum-machine with only hand-made html, svg & css. 100% vector graphics. No textures. No sound engine ... just yet!

Credits

Logo SVGs (Roland, TR-909 & Rhythm Composer) by Isaac Cotec

Disclaimer

The use of any trade name or trademark is for identification and educational purposes only and does not imply any association with the trademark holder of their product brand.

Open | Wiki

Build

Make sure to have sass installed and run in the console:

sass sass/main.sass:bin/main.css --watch

Make sure to have typescript installed and run in the console:

tsc -p ./typescript/tsconfig.json --watch

Comments

Support Load/Save 909's Memory

We just need a menu for it to encode/decode the format and a way to store it either on the user's hard-drive or in the cloud. The actual serialisation is already in place.
enhancement

opened by andremichelle 4
fix tr-909 logo in darkreader

Hi, this is very minor probably, feel free to cancel the PR, but when viewing the project and Dark reader extension is on, the SVG logo spills and crops like shown here:

However with this minor change it appears correctly (never mind the colors are because of dark reader trying to fix them):

Still, it's very minor and only a problem if you use Dark reader, but no reason to appear broken IMO for those people who use the extension (like me :p)

Anyways, nice work! Is there a plan to make this functional in the future? Would be fun to play around! Cheers :)

opened by stagas 1
Fix Tap Quantisation

While tapping steps into the machine when in tap-mode, the incoming events are not properly quantised. The current method behaves more like a floor then a round function on the timing and it relies on the step-display logic. A second method must be implemented for tap-recording.
bug

opened by andremichelle 0
A secure database for storing json

I am currently using https://jsonbin.io and have my credentials in the source-code, which is a terrible idea. I am not a backend guy, so any help is appreciated.
help wanted

opened by andremichelle 2
Visual guidance when pressing keys

It would be nice to highlight (outline) the keys (main & function), after pressing a certain key to visualize what keys have any meaning (e.g. last-step in step-mode should highlight all main-keys).
enhancement

opened by andremichelle 0

Owner

André Michelle

GitHub https://andremichelle.github.io/vector-909/

🍎Transform an SVG icon into multiple themes, and generate React icons，Vue icons，svg icons

IconPark English | 简体中文 Introduction IconPark gives access to more than 2000 high-quality icons, and introduces an interface for customizing your icon

6.8k Jan 5, 2023

A Javascript library to export svg charts from the DOM and download them as an SVG file, PDF, or raster image (JPEG, PNG) format. Can be done all in client-side.

svg-exportJS An easy-to-use client-side Javascript library to export SVG graphics from web pages and download them as an SVG file, PDF, or raster imag

23 Oct 5, 2022

Make friends through music. Discover great sound tracks on Solana and play them with your buddies :dancer:.

Acoustic Licious COVID-19 has significantly impacted the mental health of children and adults alike. Globally, the population suffering from lonelines

4 Oct 28, 2022

A Geiger counter for Google emitting a sound for each request that goes to Google.

Google Teller This is a (Firefox) add-on (WebExtension) that emits a sound every time you connect to a service hosted by Google. It is inspired by @be

35 Nov 5, 2022

The Remix version of the fakebooks app demonstrated on https://remix.run. Check out the CRA version: https://github.com/kentcdodds/fakebooks-cra

Remix Fakebooks App This is a (very) simple implementation of the fakebooks mock app demonstrated on remix.run. There is no database, but there is an

61 Dec 22, 2022

Wallpaper Engine but online-version. (HTML, CSS, JS with jQuery, PHP)

Project Preview - Web Wallpaper Engine About Wallpaper Engine but online-version. View animated wallpapers directly in your browser. Case: Create web-

11 Dec 30, 2022

A curated collection of all country flags in SVG — plus the CSS for easier integration

flag-icons A curated collection of all country flags in SVG — plus the CSS for easier integration. See the demo. Install You can either download the w

9.1k Jan 4, 2023

The iconic SVG, font, and CSS toolkit

Version 6 Font Awesome is the Internet's icon library and toolkit, used by millions of designers, developers, and content creators. Documentation Lear

70.7k Jan 3, 2023

Simple webpack plugin that generates VERSION and commitInfo insert index.html during build

Html commit version plugin Simple webpack plugin that generates CommitInfo and VERSION insert index.html during build. English | 简体中文 Usage Given a we

13 Mar 8, 2022

A Hackable Markdown Note Application for Programmers. Version control, AI completion, mind map, documents encryption, code snippet running, integrated terminal, chart embedding, HTML applets, plug-in, and macro replacement.

Yank Note A hackable markdown note application for programmers Download | Try it Online >>> Not ecommended English | 中文说明 [toc]{level: [2]} Highlights

4.3k Dec 31, 2022

This is the improved version of Simon game using JavaScript and Html.

simon-game simonoo.mp4 What is this Game This is the improved version of Simon game using JavaScript and Html. you have 10 levels to complete until yo

15 Oct 23, 2022

Query for CSS brower support data, combined from caniuse and MDN, including version support started and global support percentages.

css-browser-support Query for CSS browser support data, combined from caniuse and MDN, including version support started and global support percentage

65 Nov 2, 2022

A responsive and open source portfolio for software developers (Next.js & Tailwind CSS version).

Software Developer Portfolio ?? A responsive and open source portfolio for software developers (Next.js & Tailwind CSS version). Website Screenshot In

10 Nov 28, 2022

Renders and SVG schema of SARS-CoV-2 clade as defined by Neststrain

ncov-clade-schema https://ncov-clades-schema.vercel.app/ Visualizes current tree of SARS-CoV-2 clades. Allows to generate an SVG image of this tree. C

5 Nov 3, 2022

An easy way to animate SVG elements.

Walkway I loved the animations for the polygon ps4 review a few months back and decided to create a small library to re-create them (simple demo). It

4.4k Jan 2, 2023

JavaScript library to make drawing animation on SVG

vivus.js Demo available on http://maxwellito.github.io/vivus Play with it on Vivus Instant Vivus is a lightweight JavaScript class (with no dependenci

14.5k Jan 3, 2023

Fallback for SVG images by automatically creating PNG versions on-the-fly

SVGMagic - Cross browser SVG This repository is no longer actively mainted. It has proven to be very usefull back in 2013, but these days SVGs are sup

596 Jul 27, 2022

Landscape Generator is An open Source web application that generates landscape drawings randomly, then gives you the ability to edit it and export it as SVG or PNG.

Landscape Generator ## About Landscape Generator is An open Source web application that generates landscape drawings randomly, then gives you the abil

9 Apr 15, 2022

Convert your SVG file directly to Flutter paths and prevent all the messing with bezier curves.

svg-to-flutter-path-converter Convert your SVG file directly to Flutter paths and prevent all the messing with bezier curves. Flutter Clutter The tool

30 Jan 2, 2023