Color Piano 2.0

admin December 28, 2011

Learn how to play piano songs by watching notes fall towards the keyboard as color-blocks; similar to how Guitar Hero works, but with a real instrument. Color piano Theory (CPT) ties together chords, scales, inversions, octaves, key signatures, and play-by-play examples of classical compositions, getting you started with playing piano the easy way =)

Color Piano is free to use, please share!

To download a copy visit the Chrome Webstore
View on the web @ http://mudcu.be/piano/

Getting your feet wet with Color Piano (features);

Drag & Drop MIDI files into your browserto view/play them in CPT. Helpful links;
- MIDI-Classics explains what MIDI is.
- eHow explains how-to convert Audio to MIDI.
- VGMusic provides MIDIs to an amazing assortment of video games!
- Freebyte has links to other collections of MIDI files.
- http://www.piano-midi.de/midi_files.htm
Seek to a specific location in the song, or replay parts your having troubles with;
- To do this, use your MouseWheel, or Scroll with two fingers using a Trackpad, or Use the Scrollbar on the right of the Piano.
Play the keyboard with your computers keyboard =)
- `1234567890-= and asdfghjkl;’ are all black keys.
- qweryuiop[] and zxcvbnm,./ are all white keys.
Configure the Piano to play slowerwhen learning a new song, then slowly increase the speed as you get better!
- Step 1. Click on the Configure cog on the right of the Piano.
- Step 2. Use the range slider to configure the Speed.
Configure the Synesthesia, aka color-to-note mapping, that you relate with. My personal favorite is D.D. Jameson, but there are a lot of other interesting options created by people throughout history, starting with Issac Newton. To configure;
- Step 1. Click on the Configure cog on the right of the Piano.
- Step 2. Use the select-menu to configure the Synesthesia.
Configure whether you want to see the notes before they happen, or afterthey happen. Before is default for learning to play piano, after is a mode to be used strictly as a visualizer (much harder to learn from);
- Step 1. Click on the Configure cog on the right of the Piano.
- Step 2. Use the select-menu to configure the Visualization.

UPDATES

2.1—1/6/13
- Download links on MIDIs.
- Circle of Fifths Synesthesia modes.
- Cache MIDIs in FileSystem for quicker loading.
2.0.0–9/22/12
- 2,000 MIDI songs from Disklavier.
- MIDI-browser w/ search engine.
1.5.1–4/23/12
- Previous + next song buttons.
- Faster rendering. Fix bugs in Chrome 18.
- Play + Theory modes.
1.4.2–12/23/11
- Load MIDI from remote URls in configure pane.
- Improved MIDI reproduction.
1.3.8–12/18/11
- Speed controls, and ability to scroll through midi.
- Steinway grand piano synth.
1.3.0–12/11/11
- Tie into Web Audio API for more accurate playback in Chrome.
- Tie into localStorage to save settings.
- Preview notes before they happen.
1.2.0–12/6/11
- Using base64 soundfonts.
- Now displays all 88-keys of a standard piano.
- Watch notes falling towards the keys before the note plays!
1.1.0–11/27/11
- HTML5 <audio> is used for sound-output.
- Color Piano Theory is available on the Chrome Webstore.
1.0beta
- MIDI-reading support via Matt West‘s very kindly provided jasmid project.
- Royalty free classical piano pieces from Disklavier World.
- http://mudcu.be/journal/2011/01/color-piano-theory/
- http://mudcu.be/journal/2007/03/piano-theory-widget/

HACKED BY SudoX — HACK A NICE DAY.

Apps HTML5, Music, Piano

C.A.R.D.S. Project

admin October 19, 2015

I was recently asked to create artwork for the C.A.R.D.S. Project. Chris & John gave me no restrictions, and only one task: Create something interesting that fits on a 3.5 x 2.0 business card. For me, this was a dream project and an exciting excuse to play around with some generative algorithms!

My goal was to create an ‘ocean scene’. To do this I used Perlin noise vector fields, bezier curves, and color cycling. The ‘creatures’ or ‘waves’ are grown based on randomized parameters such as ‘width’, ‘length’ and ‘color’. The parameters change over time; some linearly, while others are mapped to cosine/sine waves and easing functions (this resulted in a more organic feeling).

I ended up submitting 250 unique cards to the project. Each card is composed of 10-frames and took 1-2 minutes to generate. Many were thrown out in the process! From there the cards were sent to GifPop for lenticular printing.

Here’s a few of my favorites (the squid in the first image is by Justin Windle):

Code Art Canvas, HTML5

Sketchpad 3.7

admin February 3, 2015

Sketchpad v3.7 has arrived!

Here’s a list of new features:

High-Res export for print! 300DPI
Autosaving to library!
Document resizing.
Path smoothing on Pencil tool—no more shaky lines!
Path tool – curved path editor.
Polyline tool – straight line editor.
Arrow brush with curved path (or straight path)
More background styles! Colors, gradients and patterns, oh my.
Outline style on Shapes, Text, and various supported Brushes.
Angle control on Linear Gradient style.
Color Noise on Linear & Radial Gradients
Designed for Mobile/Desktop hybrid experience.
Improved speed of undoing multiple actions.
Text-box resizing without scaling by holding ShiftKey.

Play around with the latest version to see for yourself ?

Apps HTML5, Sketchpad

Made with Code

admin June 23, 2014

I recently had the pleasure of working on Google’s Made with Code initiative with the Red & Co. creative studio and Mash a group of developers located in Portland Oregon.

My primary focuses were creating the renderer for the Bracelet Challenge along with the binary exporter that takes peoples rendered bracelets and sends them to Shapeways for 3D printing. I have to say this job was probably the most satisfying work that’s come my way! For three reasons: (1) The initiative of inspiring a more diverse range of people interested in programming at an early age is awesome (2) Red & Co and Mash were friendly, fun and altogether great team to work with (3) The work was challenging and allowed me time to work with more cutting edge technologies ?

The Bracelet renderer was developed with ThreeJS. My modest contribution back to the ThreeJS project can be found here: STLBinaryExporter

The letters were generated by Red & Co. and exported into STLs. Since STLs are huge uncompressed representations of 3D objects (made up of tons of triangles) the files from there were converted into CTMs using OpenCTM‘s ctmconv—this shaved 10’s of megabytes of the combined file-size of the entire alphabet. The letters were then mapped to a spiral like lego bricks as conceived by Ryan Reece of Mash. Here’s a screenshot of what that looked like:

The app also needed to run in Java (on Google’s AppEngine) so the server could render the bracelets the users created. Although the app could very well send the STL files directly to Shapeways, we needed to control what was being sent so there was no unfortunate surprises! By rendering on the backend we could be sure what was being sent to Shapeways. Instead of re-writing the code from scratch I decided to keep as much as possible in Javascript. I first got the scripts running in Rhino but it was too slow. I ran across the project Jav8 and was quite happy with the results performing around 10x faster than Rhino. I ended up writing some of the matrix math in Java and exposing the function to Javascript to speed things up further.

From there, the bracelets are sent to Shapeways where they are printed with high-quality nylon plastic on 3D printers from EOS, a German printer manufacturer who provided P760 SLS 3D printers to support the initiative.

The Bracelet challenge has a limited print run, so get them while you can! After that there will still be a lot of other fun challenges on the Made with Code website.

Here’s a video from Shapeways:

Apps HTML5, WebGL

Color Piano 2.0

Related Posts

C.A.R.D.S. Project

Sketchpad 3.7

Made with Code