The Ridiculous Raspberry Pi Winamp Remote – Part II

May 14 2013

Send to Kindle

Recap

As stated in my previous post, the plan was to hit a button that’s connected to my Raspberry Pi, which will trigger Winamp running on my pc laptop to play/pause. This without the Pi being physically connected to the pc – all via wifi and my local home network.

The hardware setup

Raspberry Pi with USB wifi, a small breadboard, 100k ohm resistor, a pushbutton and some hookup wire.

GPIO pin 25 goes to one side of the switch, 3.3 volts to the other. You hit the switch, pin 25 gets juice and goes HIGH. The 100k ohm resistor is also hooked to pin 25 on one side and ground on the other, connecting 25 to ground when the switch is not connected, ensuring it is in a LOW state. For those of you in the know, this is a basic pull down resistor. If you’re not familiar with the concept, as I was not last week, this is a good explanation: http://www.resistorguide.com/pull-up-resistor_pull-down-resistor/

The Python

The Raspberry Pi is running a simple program written in Python:

import urllib
import RPi.GPIO as GPIO
import time

BTN = 25
GPIO.setmode(GPIO.BCM)
GPIO.setup(BTN, GPIO.IN)


while True:
        val = GPIO.input(BTN)
        if val == GPIO.HIGH:
                urllib.urlopen("http://192.168.1.14:9000")
                time.sleep(1)

This just sets up pin 25 as an input and starts an endless loop which reads the value of pin 25. If it’s high, it pings a url and sleeps for a second. The sleep is so you don’t get multiple calls at once. There are more robust ways of handling this, but this was quick and dirty and works as long as I’m the only user and I know not to hold the button down too long.

So what is this url?

The Node

On my laptop where Winamp is playing, I started a simple node server. When a client connects to the server, it calls a function called playPause. This executes an external program called MediaControllerConsole.exe via child_process.

function playPause() {
	var path = "MediaControllerConsole.exe";

	var exec = require('child_process').exec;
	var child = exec(path, function( error, stdout, stderr) 
	{
	   if ( error != null ) {
	        console.log("err: " + stderr);
	        // error handling & exit
	   }
	});
}

var net = require("net");
var server = net.createServer();
server.on("connection", function(client) {
	playPause();
	client.end();
});

server.listen(9000);

So what is MediaControllerConsole.exe?

The C#

I had the connection from the Pi to my laptop. Now I needed Node to control Winamp. There may be some way to do this more directly, but I found that I could write a really simple C# console application that called SendKeys.Send() to trigger key presses on the machine. I looked in Winamp’s options and saw that CTRL-ALT-HOME is a global keyboard shortcut to Winamp’s pause function. It turns out that this actually acts as a play/pause toggle, which is even more perfect for my use case. Here’s the C# app I wrote:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace MediaControllerConsole
{
    class Program
    {
        static void Main(string[] args)
        {
            System.Windows.Forms.SendKeys.SendWait("^%{HOME}");
        }
    }
}

Since this was a console app and not a Windows Forms app, I had to add system.windows.forms.dll as a reference to the Visual Studio project and call SendWait instead of Send (which has more hooks into the forms stuff). The string “^%{HOME}” means that while holding the CTRL key (^) and the ALT key (%), press the HOME key.

Final recap

Pressing the button connected to the Pi sends pin 25 to HIGH which triggers Python to call across the wifi network to the Node server which starts a child process running the C# program which sends keystrokes into the system which Winamp is listening for, causing it to play or pause. All so I don’t have to reach over and press two keys.

Ridiculous! But it works!

Send to Kindle

3 responses so far

The Ridiculous Raspberry Pi Winamp Remote – Part I

May 14 2013

Send to Kindle

Back story

I wanted a media center. I priced out cases, power supplies, hard drives, cheap motherboards, etc. and figured I could build one for a couple hundred bucks or so. Then I heard about people using Raspberry Pi’s as media centers. Did a bit of research and got me a Pi and set up OpenElec on it. Plugged in an old 500 GB USB drive. I had a media center for about a quarter of what I was going to pay.

Thing is, getting the Pi set up was so much fun, I decided to buy another one just to play with. A week later I bought an Arduino Uno. I even pulled my barely touched Beagle Board out of cold storage and plugged it in. I’ve been having a blast the last couple of weeks playing with all these new toys. Bought a bunch of electronic parts, breadboard, hookup wire, gathered up some other junk I had stashed here and there.

Pi, duino, beagle, semi-organized tronics junk

Back back story

When I was 11 or 12 years old, one of my class mates brought in this Radio Shack 75-in-1 Electronics kit and did a little presentation on how to hook up various circuits. I was amazed. I begged and pleaded my mom to get me one for Christmas. I actually remember the exact thought I had at the time – that with that kit, I would never, ever be bored again. I got my kit, and while the never, ever part was questionable, I certainly spent many, many, many hours playing with electronics over the next few years. I outgrew the kit and bought all sorts of other build-it-yourself stuff. I learned how to solder. I could tell you the difference between pnp and npn transistors and precisely how they worked on a molecular level.

75in1

Where I grew up was a vocational school, Blue Hills Regional, that offered an electronics program. It was perfect timing. I signed up to go there for high school. Then disaster struck, in the form of my own bad judgment. My stepfather was an electrician. In some misguided attempt to win favor with him, I switched from the electronics program to the electrical program and wound up becoming an electrician myself. I learned soon after graduation how much I hated being an electrician, stopped doing it, and it wasn’t until about 15 years later that I discovered Flash and programming and a similar joy to what I had found doing electronics.

Back to the present

So getting involved with the Raspberry Pi and Arduino and Beagle Board, I found myself playing with LEDs and resistors for the first time in decades. It’s been great rediscovering all this stuff I used to know back when I was just a kid. So I’ve become a master at making LEDs blink, but I wanted to do something that could be considered practical on some small level.

The problem

Great projects are often the result of solving some problem. My problem is controlling the media on my pc. These days I’m doing work on my Mac, but usually have some podcast or music playing on Winamp on my pc laptop. If I want to pause or restart, I either have to move the mouse over there (I’m using Synergy) and click on the play button. Or reach over and hit the function key and the media play/pause key. It’s a horrible problem, I know. Not sure how I’ve managed to go on this long. I try to be strong.

But my thought was to have a single button sitting on the desk. I push the button, the media toggles. A bizarre plan started to form. Have a button hooked to the Pi send a message across the network to toggle the music state. I have achieved this. And I’m sitting in the living room clicking this button relentlessly, starting and stopping the music playing in my home office. My wife has just retreated upstairs, pretending not to be annoyed.

The solution

Crap, this post is already too damn long. Stay tuned for Part II in which our hero details how he accomplished this nearly impossible feat in the most convoluted way possible, using only Python, Node.js and C#.

Click for Part II of this amazing saga.

Send to Kindle

One response so far

Joining the Magic Kingdom

Apr 02 2013

Send to Kindle

I purposely held off until today to break this news as I didn’t think anyone would believe it if I posted it on April 1.

After 5 1/2 years with Infrared5, I am moving on to new endeavors. Specifically, I’ve signed on with Playdom, which is part of Disney Interactive. The position is a principal engineer / senior architect type of role. I’m still getting my head around the structure, but basically Playdom oversees a dozenish semi-independent game studios. I’ll be in the core technology unit, architecting, coordinating, building libraries, etc. I’m excited to get started next week. The offices are in Palo Alto, but I’ll continue to live in the Boston area, work remotely from home, and fly out west every once in a while.

I leave Infrared5 on good terms. Everyone there is great. Several were good friends before they were coworkers, and I’m sure those friendships will continue. There are actually a lot of exciting changes going on there and I wish everyone there all the best. But professionally, although it was a very tough decision to leave, it was time to move on and try something new. As I wrapped up my last project yesterday, I made that my last day and am enjoying the rest of the week as a mini-vacation before starting up the new gig next Monday.

As for how I wound up at Playdom, it all started back in 2004 when I met this guy named Jago McLeod at Flash Forward in San Francisco. A year or so later he contacted me about working for this company called Flash Composer out in Santa Cruz, which I wound up doing. Although management of the company was not the best and it went under a couple of years later, I really enjoyed working with Jago. He’s brilliant, funny, very organized, and just all around a great guy. We’ve stayed in touch off and on since then, and recently we bumped into each other on line. He told me he had become the VP of Engineering at Playdom and once again offered me a job on the other side of the country. And once again, I accepted.

So there you have it. I’m sure there will be more to talk about in a few weeks once I’ve settled in.

Send to Kindle

15 responses so far

Send to Kindle

Mar 20 2013

Send to Kindle

Just a quick note that I added the “Send to Kindle” plugin to the site here. At the bottom of each post you should see a Send to Kindle button that will prompt you to log in to your Amazon account and send that post to  any registered Kindle. I know it’s something I do a lot with posts I’m reading on other sites via the Chrome extension. So it’s nice that Amazon has created this.

Just pointed out to me that the button might be better on the top of the post. I originally put it at the bottom, because that’s where the other “share” type buttons go. But it’s a good point because you see those buttons when you are done reading, but you might want to see this one before you read. So I put it in both places! Looks silly on a short post like this, but fine on a larger one.

Send to Kindle

Comments are off for this post

Building a MAME Arcade

Mar 08 2013

Send to Kindle

Background

I grew up in the 70′s and 80′s. The golden age of arcade games. My best friend and I would hit up the various arcades in the surrounding town, and at 25 cents a game, I’d easily spend $10 for a couple hours of entertainment. My favorite game of all time, hands-down, is Tempest. In the arcades of the South Shore of Boston, I was the second best player. I could walk in to any arcade and get my initials on the high score board. Most often, after a few games I could get to the number one spot. Unless my nemesis had been there before me. Who this other person was, I have no idea. He (possibly she, but given the demographics of the time, most likely he) wasn’t amazingly better than me, but better enough to nudge me out of the top spot. I could usually get a number two spot though.

I was the guy people would stand behind and stare at in amazement. Granted, the only time I got such attention at that age was while playing video games, and only that particular one. I was pretty good at plenty of others, but Tempest was my forte.

Later years: Enter MAME

Well, time marched on, I grew up, arcades were replaced by home computers and XBoxes, etc. But I always remembered those old time games. Of course, I’ve installed MAME a dozen times and sought out various ROMs and had a good old time with them, but the holy grail of reliving Tempest was always out of reach. The problem was that Tempest requires a spinner. You spin the spinner to move around the screen and shoot the stuff that’s coming out of the tubes at you. There are plenty of workable Tempest ROMs for MAME, and Flash versions, and various copies. But moving around with the keyboard or mouse was an utterly lame experience compared to the real thing. A few years ago I went as far as getting a Griffin Powermate, thinking that’d work. No such luck. First of all, I was unable to even get it to talk to MAME successfully, and what I heard from those who had, was that it didn’t work all that well anyway.

Let’s just DO this

I most recently installed MAME while working on my Infiltration game, in order to get some Gravitar inspiration (another favorite). Of course, I gave Tempest another shot and had another bout of frustration. But this time I took it one step further and started to look into real game controls. Starting with these sites:

http://buildahomearcade.com/

http://wiki.arcadecontrols.com/wiki/Main_Page

I came up with a list of vendors that sold game controls and various plans on how to put them together. I got a shopping list together from Ultimarc and bought some wood and started cutting and drilling. My plan was to first create an arcade control panel that I could just plug into any computer running MAME. Some people go all out with two- or even four-player control panels. I decided to start with a single player. I ordered a bunch of buttons, a joystick, a control interface, and the ultimate – a real arcade spinner.

The work

 

While I waited for the controls to arrive, I started preparing the wood. I bought a 2′x4′ sheet of half-inch wood at the local Home Depot. I cut a 1′ strip off the end to give me the 1′x2′ top of the control panel.

WP_20130302_002

 

Ye olde workshop. (Yes, I keep a bottle of wine in my workshop. Don’t you?)

WP_20130302_003

 

Control top.

Then I cut a piece of cardboard to the same size and experimented with some layouts, coming up with one I liked.

WP_20130302_004

 

The plan was to have the joystick and spinner in the center, and three buttons on each side. Some games are all button based, like Gravitar or Asteroids – a pair of buttons turn you left and right and other buttons shoot, thrust, shield, etc. These are usually laid out with buttons on opposite sides of the panel. Other games are joystick / button based, and of course Tempest is spinner / button based. Generally, the joystick or spinner is to the right and controlled with the right hand and the shooting / jumping / action buttons are hit with the left hand. Thus, the main buttons are the ones on the left here. Then, on the top are the coin button and start game button (one player start).

That was about as far as I got before the controls arrived.

The controls are here!!!

The controls arrived on Wednesday of last week. Pretty quick considering I ordered on Satureday and they originated in London. I actually did not realize that when I placed the order with Ultimarc. But I’m VERY happy with what they provided, as well as the prompt service and quick shipping. Here’s everything:

WP_20130306_001

 

Doesn’t seem like a whole lot for $200 something. But I have zero regrets.

What you see here are:

A. 7 gold leaf buttons. Actually I ordered 6, they threw in an extra green one.

B. A J-Stik joystick with red ball top.

WP_20130306_003

 

C. A SpinTrak spinner. With a silver/red spin top and extra heavy flyweight. The weight gives it momentum. This thing will spin for a minute or more.

WP_20130306_004

 

D. A MiniPac interface. With full wiring harness.

WP_20130306_002

 

This lets you hook up a joystick, all your buttons, a spinner, as well as a trackball. You then hook it up to your computer via a mini USB cable and you’re good to go. It basically converts all the buttons and joystick movements into key presses, and spinner and trackball input into mouse signals. It’s set up out of the box to work with standard MAME inputs, but it’s also programmable so you could make any control send whatever signal you want. Here’s how you wire it up:

minipac_wiring

 

Took me two or three tries to figure it all out, but once you get the logic, it’s fairly simple. I could rewire the whole thing in five minutes at this point. The wiring harness is well worth it too – you just look up the color and hook it to whatever control it’s supposed to go to.

Alpha Test

My control panel wasn’t ready yet – no holes drilled or anything, but you know I had to see this thing in action. So I put my laptop down on the living room floor and started hooking up wires. Again, there were a few false starts, but I eventually got it at least partway functional.

WP_20130306_006

 

Dang, that’s a mess o’ wires!

I grabbed one of the cardboard boxes that the stuff came in and cut a couple of 1 1/8″ holes in it. Stuck the #1 button in one and the spinner in the other. And fired up… Tempest! I wish I could describe how awesome that was and how excited I was, but you’d probably get really uncomfortable and click off to some other site. Anyway, playing Tempest with a real spinner, even if only mounted in a cardboard box was nerd nirvana. Several hundred times better than trying to make it work with a keyboard or mouse.

WP_20130306_007

 

Here’s my daughter Kris getting her first taste of Tempest. She likes.

WP_20130306_008

 

High tech.

WP_20130306_009

 

Now you’ve seen my slippers. Feel like you know me better?

As for the joystick, I got that wired backwards AND upside down the first time. After switching all the wires I realized I just could have flipped the thing 180 degrees. I didn’t mount that in anything, just held it steady while Kris got her first experience with Space Invaders.

WP_20130306_011

 

That’s the look of pure retro joy. Take THAT, Wii!

Making sawdust

Thursday night’s project was to mount this thing in the real control panel. Based on my cardboard plan, I marked out where I wanted all the holes to be.

WP_20130307_001

 

Then drilled some starter holes.

WP_20130307_002

 

Then used a 1 1/8″ spade bit to cut out the final holes.

WP_20130307_005

 

Conveniently, the buttons and the spinner both fit in the same size hole, and that works well for the joystick as well.

Started mounting the components.

WP_20130307_006

 

And wiring things up in back.

WP_20130307_007

WP_20130307_008

WP_20130307_009

 

Here’s the frame for the sides.

WP_20130307_004

 

Right now, the top sites loosely on top of the frame, but I glued some blocks to it so it doesn’t slide around.

WP_20130308_001

 

Then put the bottom onto the frame and drilled a hole for the USB cable.

WP_20130308_006

 

A bit of cable management.

WP_20130308_002

WP_20130308_003

 

And we are good to go!

WP_20130308_004

WP_20130308_005

 

Yeah, there’s one button missing, but few games actually use all 6 anyway. Originally I ordered 6 buttons thinking of just the 6 player buttons. I can still control MAME, enter coins and start using the keyboard. But when the extra button came, I decided to skip button six for now and implement the coin and player one start buttons on the top. I’m ordering some more buttons anyway – I’ll probably add a pause, reset and select at least.

The cabinet itself is completely unfinished at this point. But we’re having a blast with it. It’s amazing seeing my wife get into it as much as she is. She grew up in the same time and who knew she knows various Space Invaders strategies. She even mentioned some by name. Daaaaamn! The woman is geekier than she lets on. And it’s really awesome to see Kris discovering and enjoying the games that I grew up with. Anyway, I’ll eventually get around to sanding it down a bit and will probably just stain and shellac it. I’m already looking into project number two, which will be a standalone mini table top arcade cabinet, something like one of these. And if that goes well, I might even attempt a full size two-player model.

Send to Kindle

6 responses so far

“Infiltration” live in Windows Store

Feb 25 2013

Send to Kindle

My latest game, Infiltration, for Windows 8 is live in the Windows Store.

Get it here!

screenshot_02242013_131048

This is a game that I’ve wanted to make for a long time. One of my favorite old time arcade games was Gravitar. I’ve played it a bunch in the last year or so on MAME. It’s such a difficult game, but very addicting for me anyway. Infiltration is a homage to that game. It has a lot of the same basic game play – you fly a ship into an area, avoid getting shot or running out of fuel while achieving an objective. In Gravitar the only real objective is to destroy all the guns. In Infiltration there is a target or multiple targets you need to capture. When all targets are captured, the exit appears and you use it to complete the level. Destroying all the guns and collecting all the fuel is optional, but worth bonus points.

The game has 30 levels in the full version, which sells for $1.49 US. There’s also a trial version which gives you a sampling of several levels. In keeping with the spirit of Gravitar, some of these levels are very hard. The full version also supports loading of custom levels which can be created with the free Infiltration Level Editor, another app which has been submitted to the Windows Store just today and which should hopefully be available soon.

I wrote Infiltration (and the level editor) in HTML and JavaScript, with a mix of canvas and DOM elements. The Visual Studio JavaScript profiler was crucial in optimizing the game to run smoothly at 60 fps with quite a bit of collision detection and animation going on. It was a blast to use, digging into bottlenecks, fixing them up and seeing a marked improvement.

I originally wrote the level editor just for myself to facilitate creating of the official levels for the game. But I had so much fun making it and spent so much time polishing it that it wound up being a full featured app that I had no reservations about releasing.

screenshot_02252013_182513

As for the submission process of the game itself, this was the smoothest and fastest process I’ve ever encountered for an app submission process. I wrapped things up Sunday night and submitted it to the store. Monday morning when I woke up, there was a rejection notice. This had to do with submissions to foreign stores, namely Korea, Brazil, Taiwan, and South Africa. These countries currently require actual certification of game ratings. I’ll be looking into getting such certification for this and future games, but I wasn’t going to hold things up so I had to take those off the list for now. Anyway, I unchecked those countries, resubmitted, and a few hours later the app was approved and live in the store! I don’t know what the iOS App Store process is like now, but back when I was doing apps there such a situation would have meant a week and a half setback. This time I had submission, rejection, fix, resubmission, and approval – all within 18 hours! I’m hoping the level editor goes as quickly.

My previous app and game were free. This is my first attempt at the try/buy scenario. I’m not expecting to get rich, but looking forward to seeing what can be done in this environment. I’ll report how it goes.

Send to Kindle

Comments are off for this post

Microsoft Surface Pro

Feb 10 2013

Send to Kindle

Background

A few years back I was invited to Microsoft for a day with a small group of other bloggers to be briefed on what MS had going on and to speak with Bill Gates himself for a full hour. One of the things they showed us was the early prototype of the Microsoft Surface. At the time, it was basically a touch screen table. And it was amazing. This was before anyone had seen an iPhone or an iPad, so seeing and touching a real time interactive multitouch device left us all in awe. They also said that the future of the Surface probably included a more portable device – something you could carry from room to room, and maybe hang on the wall to watch movies,s play games, etc.

Well, time went by, people started creating other touch screen devices, the iPad came out and blew everyone away and the Surface became a rumored, yeti-like creature.

Then, some time last year, this video was released:

This video definitely captured my attention. And as more and more info on the Surface came out, I kept getting more interested. My weapon of choice has been a Lenovo T520 laptop. I love it to death, but it’s rather large. I’ve been eyeing various ultra-book type devices for a while now, but nothing out there really did it for me. And that upcoming Surface was still in the back of my mind.

Last fall, the Surface RT was released. This, unfortunately, did not interest me at all. RT only runs RT apps. It wouldn’t work for what I wanted it for. I wanted something I could use to do actual work, a full featured pc. So I’ve been holding out to see what the Surface Pro looked like.

So last week I ventured into the Microsoft Store at the Prudential Center Mall in Boston and checked out the prerelease demo models. I liked it. You couldn’t buy them or preorder them, but they would let you reserve one. I didn’t really expect they’d sell out early on release day (Saturday, February 9), but I figured it couldn’t hurt to put in a reservation.

Well, the day before release, New England had a massive blizzard, which shut down the area. In fact, a state of emergency was declared, the subway system was shut down and a travel ban on public roads was enacted. So it didn’t look like I’d be picking up my Surface on Saturday.

By late Saturday morning, the on-line store had sold out of Surface Pro 128 GB models, and there were reports of stores with long “Apple-like” lines selling out of the devices as well. I honestly didn’t expect that. So in the afternoon, when it became nice and sunny out and I had the car all dug out, I actually considered going in. I called the store to ensure they were open. I found out later that Microsoft had put all the employees up at a local hotel so they could get into the store in the morning for launch day. They were open, but informed me before I even asked that they had no more Surface Pros left. I said I had a reservation card and after a few minutes on hold, they said if I could make it in, they’d take care of me.

I made it in and got a 128 GB Surface Pro with a touch cover. All went smoothly. The best thing that happened in the store though, was overhearing this conversation between a woman who walked into the store and an employee:

Woman: “Do you have any iPhones in stock?”
MS Guy: “… um, no, this is the Microsoft Store. If you want an iPhone, you need to go to the Apple Store.”
Woman: “Oh… hmm… OK. … So you don’t have ANY???”

First Impressions

Thanks for putting up with all that, when what you really want to know is how the device itself is.

Short story: I like it a lot. Not sure if I love it yet or not. Much like Windows 8 itself, it’s so different than anything else that I think it’s going to take a while to figure out how it fits into my technological life.

The Surface is kind of like a tablet, but a bit heavy to walk around with and use one-handed like an iPad. It also doesn’t have the extended battery life that your usual tablet does. Average reports of around 5 hours.

But that extra weight brings you a lot. This is a very full featured computer with a core i5 processor running full Windows 8. I can install any program on here that I can install on a regular laptop or desktop Windows pc. And it runs those programs well.

The type cover is great. It snaps in solidly with a very strong magnet and is extremely usable. The screen is beautiful. It’s a bit small. I’m not sure how well I can use the screen itself for an everyday work pc. But it will connect to an external display.

The keyboard also has a track pad which, while not the best track pad I’ve ever used, is far from the worst. I actually find myself using it fairly often. When in desktop apps, the UI elements can be fairly small and hard to hit with a fat finger, so the track pad comes in handy.

The surface also come with a pen. This uses licensed Wacom technology, so the experience of using the pen as a drawing tool is outstanding. To be honest, the pen feels a bit cheap and plasticy compared to the beautifully solid build quality of the device itself. But it works, and is another option I sometimes use for hitting small ui elements in desktop apps.

Overall, the experience of using the device is very good. It’s small enough that when you are typing, your fingers are close enough to the screen that it’s quite natural to use the touch screen as needed.

There was a big media frenzy in the last couple of weeks about the available storage on the Surface devices being “less than advertised”. A real bunch of FUD, in my opinion. Yes, the OS and essential programs are going to take up space. Windows 8 is a full operating system, not a mobile OS, so it’s rather large. But this post really made my day, showing that a 128 GB Surface has just barely less usable storage than a 128 GB Mac Book Air. In fact, if you move the recovery partition off, it has more.

surfacemacbookzdnetcompare

Anyway, like I said, still getting used to this device and feeling out where it fits and what I’m going to use it for. I’ll report more as that becomes more clear.

Send to Kindle

2 responses so far

Winding Rules in HTML’s Canvas

Feb 01 2013

Send to Kindle

This is another one that a lot of people should already know, but I’m still betting that a few will find useful. Winding refers to the direction a path is drawn in – clockwise or counterclockwise. In many cases, this makes no difference at all, but there are cases where this is very important and can become a very useful tool.

Just realized that most of the examples I’m showing here could have been done just using a fat stroke instead of fills. My fault for poor examples. I was just trying to show simple shapes. This is still a very valid technique and useful for more complex shapes, such as the last example.

The most common use for this is drawing a shape with a hole in it. Let’s say we wanted to draw a black triangle with an empty hole in the center. We can simply draw a black triangle with a smaller white triangle on top of it.

  context.beginPath();
  context.moveTo(300, 100);
  context.lineTo(500, 400);
  context.lineTo(100, 400);
  context.lineTo(300, 100);
  context.fill();
  
  context.fillStyle = "white";
  context.beginPath();
  context.moveTo(300, 150);
  context.lineTo(450, 370);
  context.lineTo(150, 370);
  context.lineTo(300, 150);
  context.fill();

If the background is also white, this looks just fine.

wind_01

But what if we first draw something in the background, like this red bar?

  context.fillStyle = "red";
  context.fillRect(10, 200, 580, 100);
  context.fillStyle = "black";
  
  context.beginPath();
  context.moveTo(300, 100);
  context.lineTo(500, 400);
  context.lineTo(100, 400);
  context.lineTo(300, 100);
  context.fill();
  
  context.fillStyle = "white";
  context.beginPath();
  context.moveTo(300, 150);
  context.lineTo(450, 370);
  context.lineTo(150, 370);
  context.lineTo(300, 150);
  context.fill();

wind_02

The illusion is shattered. I once tried to change the second fill style from “white” to fully transparent with “rgba(255, 255, 255, 0)” thinking that it would overlay the black with transparency, but no, that does not work. Even if it did, it would also wipe out the red underneath it, so forget that.

The trick is to draw the second triangle within the same beginPath() / fill() section, and draw it in the opposite winding direction. Like so:

  context.fillStyle = "red";
  context.fillRect(10, 200, 580, 100);
  context.fillStyle = "black";
  
  context.beginPath();
  
  // first triangle (clockwise)
  context.moveTo(300, 100);
  context.lineTo(500, 400);
  context.lineTo(100, 400);
  context.lineTo(300, 100);

  // second, smaller triangle (counterclockwise)
  context.moveTo(300, 150);
  context.lineTo(150, 370);
  context.lineTo(450, 370);
  context.lineTo(300, 150);

  context.fill();

Notice that in the second triangle I swapped the first two lineTo statements, so it draws the triangle from the top, to bottom left, bottom right, back to top. This is counterclockwise, while the first triangle is drawn in the opposite direction. Because of this, the second triangle cuts out or subtracts from the first. This gives you the following:

wind_03

This works well for drawing lines with shapes. What about rectangles? Well, it won’t work with fillRect, as fillRect does it’s own internal beginPath() and fill() as part of its operations, so each call to it will draw completely separately, as in the first example. So you have to use the rect method. By default, all rects are drawn with the same winding, but there is a way to reverse the winding – just reverse either the width or height. An example will help:

  context.fillStyle = "red";
  context.fillRect(10, 100, 580, 100);
  context.fillStyle = "black";

  context.beginPath();
  context.rect(50, 50, 200, 200);
  context.rect(75, 225, 150, -150);
  context.fill();

Normally, you’d draw the second rect at an x, y of 75, 75, with a width and height of 150. But this would have the same winding as the first. Reversing either the width or height to become a negative value reverses the winding. Reversing both will send it back to the original. Note that you have to change the position on the axis you reversed the size on. So a position of 75, 75 becomes 75, 225, with a size of 150, -150. This gives you the following:

wind_04

Of course, you might be able to use clearRect, but that would wipe out any background as well.

How about arcs? If you’ve used these, you’ve seen that last boolean parameter and probably just ignore it or use whatever value you’ve gotten used to. I always use false. But if you want to punch a circle from another circle, to make a ring, for example, just draw them with opposite values for that last param:

  context.fillStyle = "red";
  context.fillRect(10, 100, 580, 100);
  context.fillStyle = "black";

  context.beginPath();
  context.arc(150, 150, 100, 0, Math.PI * 2, true);
  context.arc(150, 150, 70, 0, Math.PI * 2, false);
  context.fill();

wind_05

And of course you can mix and match these different shapes, though it might take some trial and error to get the different windings going in the right directions. Here’s a triangle with a punched out circle:

  context.fillStyle = "red";
  context.fillRect(10, 200, 580, 100);
  context.fillStyle = "black";
  
  context.beginPath();
  
  context.moveTo(300, 100);
  context.lineTo(500, 400);
  context.lineTo(100, 400);
  context.lineTo(300, 100);

  context.arc(300, 300, 70, 0, Math.PI * 2, true);

  context.fill(); 

wind_06

Well, that’s the basics on winding. Once you get it down, it can be a pretty powerful way of composing complex shapes.

Send to Kindle

One response so far

Scaling in HTML’s Canvas

Jan 31 2013

Send to Kindle

I’m probably not dropping any huge knowledge bombs here on many of you, but there are a few neat things about scaling when drawing to an HTML5 Canvas that I didn’t realize until a few months ago. So there are probably one or two of you who might find the info handy too.

Let’s say we’re drawing a circle in a canvas. We do this:

  context.beginPath();
  context.arc(100, 100, 50, 0, Math.PI * 2, false);
  context.stroke();

And we get this:

scale_01

(I’m assuming in all of these examples that you have an HTML document with a canvas element, and you’ve grabbed a reference to its 2d context, stored in a variable named “context”. You laugh, but someone’s bound to paste the above code into a text editor somewhere and complain to me that it doesn’t work.)

You probably also know that you can scale the circle like so:

  context.save();
  context.scale(2, 2);
  context.beginPath();
  context.arc(100, 100, 50, 0, Math.PI * 2, false);
  context.stroke();
  context.restore();

This scales everything by a factor of 2, so we get a circle that’s twice as large:

scale_02

But what might not be immediately obvious is the fact that the size of the shape, and the size of the stroke can be scaled separately. In this case because we set the scale before doing anything and restored the transformation matrix after all was done, everything was doubled, the size, the position, the stroke’s width.

But let’s try moving the restore line up before the stroke:

  context.save();
  context.scale(2, 2);
  context.beginPath();
  context.arc(100, 100, 50, 0, Math.PI * 2, false);
  context.restore();
  context.stroke();

This set up gives us a double sized circle, but because we cancelled the transform before applying the stroke, it stays one pixel thick, the default:

scale_03

We can even do the opposite and draw the circle the normal size, then scale up, stroke it, and restore:

  context.beginPath();
  context.arc(100, 100, 50, 0, Math.PI * 2, false);
  context.save();
  context.scale(4, 4);
  context.stroke();
  context.restore();

scale_04

So how is this useful? At least one great way: drawing ellipses. There is no native way to draw an ellipse in canvas. You can of course use some trig and draw a bunch of line segments, but that can be problematic. How many segments to draw? Too few for a large ellipse and it looks choppy. As the size goes down, you need less segments, and drawing too many is a waste of resources. Another complex and inexact solution involves using bezier curves. The easiest way is to just draw a circle scaled differently on one axis than the other. Of course, if you’re using a stroke on the arc, you can wind up with something weird like this:

  context.save();
  context.scale(10, 2);
  context.beginPath();
  context.arc(20, 20, 10, 0, Math.PI * 2, false);
  context.stroke();
  context.restore();

scale_05

See how the stroke was also scaled more on the x axis than on the y, making it look more like an Oakley logo than anything else. To fix it, just do what we did in the second example, moving the restore to before the stroke:

  context.save();
  context.scale(10, 2);
  context.beginPath();
  context.arc(20, 20, 10, 0, Math.PI * 2, false);
  context.restore();
  context.stroke();

scale_06

With this, we can even make a neat little ellipse function like so:

  function ellipse(x, y, w, h) {
    context.save();
    context.translate(x + w / 2, y + h / 2);
    context.scale(w / 2, h / 2);
    context.beginPath();
    context.arc(0, 0, 1, 0, Math.PI * 2, false);
    context.restore();
    context.stroke();
  }
  
  ellipse(100, 100, 200, 80);

I’ll leave you to work through that on your own. Here’s what calling it gives you:

scale_07

Finally, you can go really funky on it, scaling the shape one way and the stroke the other way, like so:

  context.save();
  context.scale(1, 2);
  context.beginPath();
  context.arc(100, 100, 60, 0, Math.PI * 2, false);
  context.restore();
  
  context.save();
  context.scale(20, 1);
  context.stroke();
  context.restore();

With a bit of experimentation, you can wind up with something that’s a half decent fake perspective:

scale_08

Anyway, old news to some of you, new news to others (I hope). More stuff to play with.

Send to Kindle

Comments are off for this post

Circle Layering

Jan 28 2013

Send to Kindle

If you were wondering where my last post was heading…

growth

growth2

growth3

growth4

Oops, gotta turn off the “capture cursor” on that screenshot program. :)

Anyway, this was an idea I first explored several years ago on my art from code site, but has been in the back of my mind as something I wanted to play with more. (see: http://www.artfromcode.com/?s=cells) In the end I ditched the whole idea of perfection I was going for in the last post, as the fact of the outer circles having some space at the end gives it a more organic feel. In fact, you can see that I even exaggerated the space in some of the examples. Well, just a quick follow up. Carry on.

Send to Kindle

4 responses so far

« Newer posts Older posts »