Chip-8 emulator in JavaScript

A few months ago I read a fascinating article on emulation. Ever since then, I knew that I wanted to learn more about this subject and I set out to build my own emulator. I started with the Chip-8 interpreted language in Java, and then ported it to JavaScript. If you have programming experience, this is a simple and fun project that will take you just a couple of days of reading/learning/coding. I will make a more in-depth post about the basics of emulation when I have the time, but for now I'll just leave the finished project here (try INVADERS):

If you have any ideas for improvement, the code is available on github (Java & JavaScript). Feel free to make a pull request with changes!

How to play music with Floppy Disk Drives

I recently stumbled upon  a few videos of floppy drive music on Youtube and just knew that I had to try to do something like that. Fortunately, SammyIAm had a wonderful tutorial and even open-sourced his code entirely! This post is a written guide of how to turn those old paperweights into a musical instrument. You will need:

  • A Power Supply Unit
  • An Arduino
  • A Floppy Disk Drive
  • Cat 5 cables/electrical wires
  • A computer

Power Supply

In order to power the drives, I recommend that you salvage/borrow a power supply unit (PSU) from an old computer. You can use a single PSU to power many drives, if you wish. If you take it out from the computer, you need to short the green cable and any black cable from the main ATX connector in order to power it on. If you don't have many drives, you can use the 5v connector on your Arduino. ATX boot

Arduino & Floppy Disk Drives

So, you want to make those floppy drives sing? The first step is finding a few that work. One is fine, but most MIDI music files have multiple channels and you'll probably want at least 3 or 4 drives, eventually. The component of the drive that is going to be used to produce musical notes is the stepper motor. This is the thing that moves the drive's head back and forth. By changing the speed at which it rotates, we can produce different notes. The faster it spins, the higher the pitch.

In order to connect the drive to an Arduino, SammyIAm recommends using a stripped out Cat 5 (typical ethernet cable), and they were a good solution for us. You can also use simple breadboard wires if you have some lying around, but any kind of electrical wire should suffice.

Here's the pinout for the drives:

Floppy drive pinout

A little explanation is in order. First, you need to find if the drive is in mode A or B. The most simple way is to turn the drive on and shorting pin 12 with any ground pin (the ones on the bottom row). If the light on the front of the drive lights up, then it's in mode B (which it should, by default). However, if it does not light up, try shorting pin 14 with any ground pin. Make sure that the light is turned on, which means that the drive is in mode A. It does not matter what mode it is on, as long as you short the correct pair of pins and, consequently, make the light stay on.

Next you need to connect pins 18 and 20 to the Arduino. This step is exactly the same independently of which mode (A or B) the drive is on. Take 18 and 20 and connect them directly to outputs 2 and 3. These two outputs will be used for Channel 1 of the MIDI sequence. If you want to use more drives for the other channels, you should follow the same procedure but connecting to pin 4 & 5, 6 & 7, etc.

The last thing you should do is connect any ground pin on the drive (the ones on the bottom row) to the Arduino's ground pin. Some floppy drives have every ground pin, but others only have a few. You just need to connect one of them.

Software

All necessary software is available on Sammy's gihub page . There are two parts: the Arduino project and the Java project.

Arduino project

Download the official Arduino SDK and the TimerOne library. The library should go into the libraries folder in your Arduino SDK installation folder. Open the Moppy.pde file with the SDK and upload it to the Arduino. You're done!

Java project

Download the Netbeans IDE  and open the project. You should get Netbeans, even if you prefer Eclipse, because it comes bundled with a few necessary GUI libraries. You also need the RXTX library to communicate with the Arduino (Win/Linux, Mac). If you can't seem to launch the Java project, it is probably because of the RXTX library version. Try to search around for different versions of this library to see if that solves the issue. You should definitely check out SammyIAm's video tutorial on this subject. We decided to mess around with the code and ended up implementing a method to play music using a MIDI keyboard. This little project was a joint venture with Carlos Lima, Luís Nabais, and João Pires. The code can be found here and you can check out the results here: I also hacked together a new version at Codebits VI where you can play a real guitar with the floppies! The audio is in portuguese, but there's a live demo at around 0:50:  

Windows Phone App Code Camp 2011

Windows Phone App Code Camp

Para grande surpresa minha, recebi no final de Novembro um convite da Microsoft para um evento que ia decorrer no Palmela Village Golf Resort, o Windows Phone App Code Camp. A premissa era um fim-de-semana em condições de luxo para desenvolvermos uma aplicação para Windows Phone 7 e, como não sou de recusar desafios, decidi candidatar-me. Para além de nunca ter desenvolvido aplicações para Windows Phone 7 ou em Silverlight, a minha experiência com C# era muito limitada, mas era a situação ideal para aprender a trabalhar com estas tecnologias.

Candidatei-me ao Code Camp com o Carlos Lima e o David Jardim. Os nossos projectos eram uma app para gestão de despesas/finanças pessoais (Carlos) e um jogo para testar a memória e o tempo de reacção do jogador (eu e o David). Felizmente, fomos todos aceites para o evento, juntamente com mais 57 participantes num total de 32 projectos.

Windows Phone Code Camp no Palmela Village Golf Resort

No dia 16 de Dezembro, dirigimo-nos para o Resort prontos para criar uma aplicação mobile com tecnologias Microsoft. Fomos recebidos por uma pequena equipa developers, que nos deram algumas informações de como iria decorrer o evento. Para além de algumas sessões técnicas, iriam estar experts on-site para nos darem todo o apoio que precisássemos. Estava também planeada uma entrega de prémios no final para as 5 melhores apps.

As condições que tínhamos eram fantásticas: existia uma sala comum para desenvolvimento, denominada "App Factory", com mesas para todas as equipas, uma divisão onde estavam os experts que podíamos abordar a qualquer altura, e até uma "cloud" de snacks redundantes que eram repostos automaticamente! A única falha foi a ligação à internet, que era bastante fraca, mas tenho noção que os organizadores fizeram tudo o que podiam para melhorar este aspecto.

Relativamente aos alojamentos, havia um apartamento T1 para cada equipa com belíssimas condições. O cenário envolvente era relaxante, visto que estávamos em pleno Golf Resort do Palmela Village. Estarmos rodeados pela Natureza nas pequenas caminhadas que fazíamos entre a área de refeições e a App Factory eram uma boa maneira de limpar a cabeça dos bugs e dos algoritmos, de forma a voltarmos à carga mais tarde com mais energia. Por falar em refeições, estas foram das melhores que já tive o prazer de degustar. Desconfio que era o  Chef Gordon Ramsay na cozinha!

A primeira sessão foi uma introdução ao desenvolvimento de WP7 com Silverlight, pelo Nuno Silva. Foi uma excelente maneira de saber o que nos esperava, principalmente para quem não conhecia nada, como eu. Desde a criação de layouts por XAML, até à manipulação dos mesmos com C#, ficámos com todas as bases necessárias de Silverlight para começarmos a trabalhar. Acabei por não assistir a mais nenhuma sessão visto que não estavam directamente relacionadas com o que precisávamos para desenvolver o jogo, para além de haver uma grande limitação de tempo.

Coding at Windows Phone Code CampÀ medida que as horas iam passando e estávamos mais perto da deadline para o final do evento, começámos a perceber que seria muito difícil concluirmos o jogo. Ainda faltavam algumas funcionalidades básicas para que ficasse jogável, mas continuámos a insistir. Os vencedores iriam ser escolhidos por votos dos restantes concorrentes no Facebook entre as 15h e 17h. Apenas conseguimos submeter o jogo para votação às 16h30, e tivemos que pensar rapidamente numa maneira de o divulgar. Carregámos o jogo para um dos dispositivos WP7 que tínhamos à nossa disposição e começámos a mostrar o jogo a quem nos aparecia à frente. O feedback que obtivemos foi muito positivo, e acabámos por ficar em 2º lugar na competição, o que nos valeu um par de telemóveis LG Quantum! Um dos pontos fortes do nosso jogo era o aspecto gráfico, que tinha sido desenhado pela Ana Jesus. Um grande obrigado a ela, porque o look and feel da aplicação fez toda a diferença. Aqui fica um pequeno vídeo do jogo:

Um grande obrigado também à organização, que esteve muitíssimo bem neste evento: Nuno Silva, Pedro Lamas, Miguel Vicente e André Malico. Só conseguimos terminar a nossa aplicação devido à vossa incansável ajuda durante os 3 dias! Espero que continuem com estas iniciativas, pois mostra um lado da Microsoft que não estamos habituados a ver no nosso dia-a-dia e dá-nos a oportunidade de experimentar tecnologias muito interessantes. Fiquei muito bem impressionado pelo Silverlight e pela experiência de desenvolvimento para o WP7 em geral.

Até um próximo evento!

UPDATE: Ficámos em primeiro lugar na competição final, que englobava apps desenvolvidas dentro e fora do WP App Code Camp! O prémio foi um par de Nokias Lumia 800.

Grupo no WP Code Camp

Alterar a imagem que aparece ao clickar no botão Like do Facebook

Botão Like do FacebookQuando se instala um botão de like do Facebook num site e um utilizador clicka nele, aparece um item no mural desse utilizador. Normalmente aparece o título da página, algum do texto do artigo, e uma imagem. Se não fizermos nenhuma alteração, a  imagem é escolhida aleatoriamente das que estão presentes na página. Para escolhermos qual a imagem a aparecer, é necessário adicionar uma meta-tag ao cabeçalho das nossas páginas. A tag é a seguinte:

Se instalarem um plugin no WordPress para que apareça o botão de like em cada artigo, pode ser necessário inserir algum código se o plugin não tratar disso automaticamente. O código seguinte deve ser colocado no ficheiro header.php do template do WordPress e procura no conteúdo do artigo por uma imagem. Caso não haja nenhuma, é utilizada uma imagem por defeito.

Podem alterar o nome da imagem "facebook_default.png" para a que quiserem. O Facebook aconselha utilizar uma imagem quadrada com uma largura maior que 50px.

Passatempo API Sapo Mapas

Logotipo Weekend Planner

No início do ano soube da existência de um passatempo promovido pela equipa do Sapo Mapas vocacionado para estudantes universitários que consistia em criar um site que utilizasse a API deles. Normalmente costumo ter bastantes dificuldades em encontrar uma ideia interessante para este tipo de concursos (confesso que a criatividade não é o meu forte), mas desta vez a coisa encarrilou. A ideia partiu de um problema com o qual já me deparei algumas vezes: dou por mim com um fim-de-semana para passear com a namorada, mas é sempre uma carga de trabalhos escolhermos o destino e os locais a visitar.

Comecei a pensar em como é que isto poderia ser resolvido por uma aplicação ou um site e cheguei a um conjunto de funcionalidades básicas que seriam interessantes. Primeiro, seria necessário escolher uma zona do país que gostássemos de visitar, e depois era importante saber o que é podemos visitar nessa região. Expliquei a ideia à equipa e começámos a iterar sobre ela. Acabámos por adicionar mais funcionalidades, como a possibilidade de criação de um roteiro que calculasse a melhor rota entre os vários pontos de interesse a visitar. Assim surgiu o Weekend Planner.

 

Esboço inicial do Weekend PlannerEsboço inicial do Weekend Planner

Esboços iniciais do Weekend Planner

 

Fechámos o planeamento com 3 etapas importantes para a interface do utilizador: 1) Escolher a zona de Portugal, 2) Escolher os pontos de interesse (Restaurantes, Hotéis, Cultura e Turismo), e 3) Ordenar os pontos de interesse e criar o roteiro. Também identificámos alguns pontos chave nos quais queríamos apostar: para além de um design limpo, simples e baseado no look and feel dos restantes serviços Sapo, era importante ter um interface dinâmico. O objectivo era não existirem refreshes nas páginas, por isso escolhemos basear tudo em Javascript em vez de optar por PHP, por exemplo. Isto revelou-se um desafio bastante grande porque nenhum de nós tinha experiência em Javascript.

Usámos o planeamento Weekend Planner na cadeira de Gestão de Projectos do Mestrado e fomos avançando na implementação no pouco tempo livre que nos sobrava e chegámos à data da deadline com um conjunto interessante de funcionalidades implementadas. Apesar disto, ficaram algumas coisas por fazer, que, na minha opinião, trariam bastante valor ao projecto. Seria importante poder adicionar o mesmo ponto de interesse ao roteiro mais do que uma vez, porque no caso de um hotel ou restaurante, será um ponto pelo qual passaremos várias vezes ao longo de um fim-de-semana. Também era muito importante ter um mecanismo de interacção com redes sociais para partilhar roteiros e até criar um ranking para os melhores roteiros em determinados pontos do país, para além de existir uma forma de exportar facilmente o roteiro para ser possível imprimir. Um ponto com o qual fiquei bastante satisfeitos foi o mapa em SVG/Raphaël.js que está na página inicial do projecto. Começámos com uma versão em Flash, mas rapidamente mudámos para esta solução, que é muito melhor.

 

Weekend Planner

 

Submetemos o site para aprovação do júri do passatempo com convicção que tínhamos feito um bom trabalho. Foi necessário aguardar até Novembro para sabermos os resultados: o nosso projecto ficou em 1º lugar, com direito a um portátil Sony Vaio e um estágio remunerado no Sapo para cada um dos elementos. Fiquei mesmo muito orgulhoso, tanto da nossa ideia como da nossa implementação. A implementação ainda tem algumas arestas que precisam de ser limadas, para não falar no esventramento completo da biblioteca de Javascript usada na página do Sapo Mapas (temos desculpa, estávamos a aprender :)), mas acho o projecto bastante interessante e com potencial para estimular o turismo dentro de Portugal.

Se quiserem dar uma vista de olhos na implementação, está disponível no seguinte link: http://maps.miguelduarte.pt

Para além de agradecer à equipa (Carlos Lima e Patrícia Mateus) pelo empenho, queria agradecer ao Sapo pela oportunidade e ao nosso "consultor" de Javascript e UX, o Luís Nabais 🙂