Putting guitar pedals in a web page

Only half of playing guitar – according to a few musician friends of mine – is moving your fingers up and down a fretboard and banging out some chords. The other half is the artistry of mastering your tone, usually through amp settings and stomp boxes.

Effects pedals – little boxes of electronics that go between the guitar and amp – are able to amplify and distort a guitar’s output, add reverb and delay, and even filter the tone via a wha or envelope pedal. These pedals can be simulated in software, but we can’t believe that they can now be emulated completely in JavaScript.

Pedalboard.js is a project put together by [dashersw], and aims to put a slew of pedals ‘in the cloud’ and turn editing and effects board as easy as building a web page.

The project is built around Webkit’s W3C audio API, allowing this virtual pedal board to work in Chrome, Safari, and other Webkit-enabled browsers. Pedals are programmed as nodes, each configurable to have and input, output, or analyzer that is able to modify the gain, wave shape, or filter of anything received by the line in on your computer.

Thee is a small demo of Pedalboard.js available here with a pre-recorded guitar track feeding into a few stomp boxes. It’s a pretty cool idea if you’d like to play around with a few guitar effect, but we can’t wait to see this bit of JavaScript implemented by effects pedal manufacturers allowing us to try before we buy.

A JavaScript interpreter for ARM ‘micros

When programming a microcontroller to do your bidding, you only have two choices. You could write your code in a proper language such as C and cross-compile your source into a piece of firmware easily understood by a micro. Alternatively, your could load an interpreter on your microcontroller and write code via a serial connection. Interpreters are a really fast and easy method to dig in to the hardware but unfortunately most microcontroller interpreters available are based on BASIC or Forth.

[Gordon] figured it’s not 1980 anymore, and interpreters for these relatively low-level languages aren’t a good fit with the microcontrollers of today. To solve this problem, he created Espruino, a JavaScript interpreter for the new batch of ARM development boards that have been cropping up.

Espruino is designed for the STM32VL Discovery board, although [Gordon] plans on porting his interpreter to the Arduino Due when he can get his hands on one. Installation is as easy as uploading any other piece of firmware, and even though [Gordon]’s STM32VL doesn’t have a USB port for a serial terminal, it’s a snap to connect a USB to TTL converter and get this interpreter working.

Espruino isn’t open source yet, only because [Gordon] would like to clean up his code and write a bit of documentation. He’d also like to make Espruino profitable so he can work on it full-time, so if anyone has an idea on how [Gordon] can do that, leave a note in the comments.

Rendering OpenSCAD in the browser

If you haven’t heard of it, OpenSCAD is a really wonderful tool for 3D modeling.  While it doesn’t have the traditional graphical interface of AutoCAD – it’s basically a programming language for 3D models – OpenSCAD is able to create very complex parts with only a few lines of code.

That’s all well and good, but what if you wanted to edit OpenSCAD parts in your browser? Enter OpenJsCAD, an OpenSCAD interpreter written entirely in Javascript and able to be embedded in a web page.

OpenSCAD allows for two types of modeling – constructive solid geometry, or taking 3D primitives and stretching, scaling, and intersecting them to create a 3D shape, or extrusion from a 2D outline. Quite a few RepRap parts were designed in OpenSCAD, and the lightweight interface and open source nature means it’s perfect for designing stuff to print on your Makerbot.

Tip ‘o the hat to [Gordon] for sending this one in, and we really have to commend him for writing his own online scriptable CAD exporter before finding out about OpenJsCAD. He may be a little late to the online OpenSCAD party, but we have to agree with him that an online 3D solid editor would be an awesome feature for Thingiverse to roll out.

Writing Javascript without using any letters or numbers

Did you know it’s possible to write Javascript code without using any letters or numbers at all? Well, it’s not just Javascript, but that’s the language used in this demonstration. [Patricio Palladino] shows how code can be written using just eight characters, and all of them are punctuation marks.

Typecasting is the name of the game here. By starting out with an empty array formed by a pair of square brackets, [Patricio] can generate the number zero by casting the array with the plus sign. From there he can use an exclamation point (a boolean cast) and addition to generate any number. The image above is an example of the digits 0-9. This would get very tedious for larger numbers but there’s another shortcut. Cast the digits to strings, concatenate them, then cast back to a number and you’re in business.

The technique is fascinating, and basically unreadable. As a proof of concept he wrote a parser that will convert any Javascript into this hieroglyphy. Check out his Github repository to give it a try.

[via Reddit]

Steganography in xkcd comics without the img alt tag

Inspired by a recent Hackaday post [austin] decided to try his hand at steganography. Steganography, or ‘concealed writing’ has come a long way from ancient Greek slaves/couriers shaving their head, tattooing a message on their scalp, and regrowing their hair. We recently saw a music file masquerading as a picture of a kitten, but that method of hiding data required running a Ruby script. [austin] thought steganography would be a great way to hone his JavaScript skills, so he made an image encoder and decoder purely in JS and HTML.

Like the previous incarnation, [austin]’s work takes a regular .PNG image file and hides stuff in the pixel data. A few of the lower bits for each pixel are modified (three bits from the red and blue, two bits from the green – a good choice, the human eye is very sensitive to green) and a file is embedded inside the .PNG image.

For an example, [austin] embedded some stuff inside the xkcd comic underneath this post’s title. Even though the image is mostly white, we can’t see anything wrong with the colors. If you’d like to decode the message, [austin] put his encoder and decoder up on github. Feel free to take a shot at it.

Wicked use of HTML5 to display sensor data

This project shows you one possible way to use HTML5 to fully integrate sensor data from a microcontroller into our technological lives. Now, when we saw this tip come through our inbox we thought it would be an interesting example to learn from but we weren’t ready for how truly cool the setup is. Take a look at the video after the break and you’ll see that scanning the QR code on the project box will immediately start a 10ms resolution live stream of the accelerometer data. Furthermore, the browser page that the phone loads allows you to send what you’re currently viewing to the main frame of a browser running on a different computer with the touch of a button. In this way you can build a dashboard of streaming sensor data. Talk about the future of home automation. Imagine a QR code on your thermostat that allows you gain access to your home’s heating, air conditioning, humidifier, and water heater performance and controls just by snapping a pic? The sky’s the limit on this one so let us know what you’d use it for by leaving a comment.

In this case an mbed microcontroller is handling the data acquisition and pushing that to a server via a WiFly module using the WebSockets library. This data is pushed in the form of a JSON packet which is distributed by the server as a data stream. Clients can access it via a browser through a page that makes use of JavaScript.

Continue reading “Wicked use of HTML5 to display sensor data”

Hackaday links: March 6, 2011

Omnidirectional personal transport

[Dan] sent us a link to this Honda U3-X personal transport device. It’s kind of like a Segway that can move in any direction but our head already hurts from the thought of going over backward on one of these.

How light bulb filaments were developed

Now that incandescent light bulbs are about to be outlawed here in the US, we thought you might enjoy learning how the filaments were developed. This another video by [Bill Hammack], the engineer guy, and we’re big fans of his work.

Wooden stove reflow

Who needs a PID controlled skillet when you can reflow on this wooden stove? Well maybe not reflow, this is more of a salvage operation.

Javascript control

We’ve seen more than enough Arduino controlled outlets. But if you’re interested in using Javascript to control the Arduino this post may be just what you’re looking for.

Sledgehammer keyboard

[Taylor Hokanson] built a qwerty keyboard that you hit with a sledgehammer. Enough said. [Thanks Larry]