Shades of Grey

In CSS, when I need a shade of grey, I often use hex rgb like #cccccc, #eeeeee etc. (or in short form, #ccc, #eee) I posed myself a question today: If by using repeated hex notation, do we evenly divide the grey space from #000000 to #ffffff? What I found was very interesting.

Let us invert the problem and try to divide the grey space (0 to 255 each rgb component) into 15 equal intervals.

Each of the component will then be equal to 255/15. First surprise – turns out that 255 is divisible by 15, and equals to 17.

255 = 15 x 17 (recall (n+1)(n-1) = n^2 – 1)

So, each shade of grey = 17*i, where 0<=i<=15
In base 16,

(17*i)16 = (16i + i)16 = (ii)16

So we would have two repeating digits in base 16: 00, 11, 22, 33 .. ee, ff

For every 17 point step in decimal, we do a 11 step in hex. Very cool! So it does turn out that by writing shades of grey with repeated hex values indeed partition the grey space equally!

Another easy observation is that when we subtract two subsequent repeated digits in base 16, we end up with 1116.

See the Pen HlJie by Raj Madhuram (@rmadhuram) on CodePen.

No Comments Posted in Uncategorized
2014

Just realized I did not post any blog entries this whole year, so let me rush!

I was casually looking for properties of the number 2014 this morning, and stumbled on to this neat property:

http://oeis.org/A083074 – n^3 – n^2 – n – 1.

When I looked up for n, a pleasant surprise! It was 13. Hence,

2014 = 13^3 – 13^2 – 13 – 1.

My friend Suneet noted that it can also be written as:

2014 = 13^3 – 13^2 – 13^1 – 13^0

Pretty neat! With some more factorization, we get

2014 = 13(13(13-1)-1)-1

Wish you all a very happy new year 2014!

No Comments Posted in Uncategorized
Simple CSS only Stage Progress Indicator

I wanted to create a progress indicator that would show completed stages in a shade of green. Initially I was thinking of using Raphaeljs, but this task seemed solvable only by using CSS. So here is a simple jsfiddle I came up with showing how it can be done:

No Comments Posted in Uncategorized
First Steps with Raspberry Pi

I received a Raspberry Pi as a gift (Thanks T.H!) last Friday and couldn’t wait to tinker with it. In case you are wondering,  Raspberry Pi is a credit card size computer that is going to revolutionize education & computing. Step 1 was a trip to Fry’s to pick up an SD card that would work with Rpi and a USB mouse/keyboard. There is a list of compatible cards here. I got a 16GB Class 10 Samsung SDHC card which ended up working well.

I created a Raspbian “wheezy” image, which is a modified Debian image recommended for starters. I wrote the image on the SD card, hooked up my TV with a HDMI cable, connected a Ethernet cable from my router (thankfully there was one open port, and I had a cable lying around), hooked up the keyboard & mouse and powered it up. Bingo! It was exciting to see the linux bootup sequence on the TV and get to the login prompt. I could log in, but after some keyboard difficulty. And then I ran ‘startx’ to bring up the UI. The kids and I were delighted to see the big raspberry image and the UI coming up, but alas, we could not move the mouse pointer and it would not respond to keyboard. It just got stuck! Looking for solutions, I tried many things, but finally figured out it was due to the most common issue with raspberry pi, the power supply! I managed to find a USB charger rated at 0.85 Amps, plugged it in, and voila! everything began to work!

My kids were excited to see the Scratch program that came preloaded. It worked fine, although much slower compared to its PC counterpart. We fired up the web browser. It was really slow, but web pages loaded fine although no Flash. I wanted to see how far I can push this tiny computer. So I ssh into it and quickly setup a LAMP stack. It was exciting to have it serve web pages! Then I installed WordPress on it, and within minutes, had a full fledged blogging system up and running! You can see it in action here: http://geekraj.no-ip.org/. I’ll explain the details of how to setup WordPress in my next post.

Happy Christmas!

No Comments Posted in technology
Tagged
Christmas Tunes and Light Show with Arduino

I programmed 5 Christmas tunes in Arduino, and also made a synchronized light show with some special effects! It plays the following tunes in sequence after each key press:

  • Jingle Bells
  • The First Noel
  • O Holy Night
  • We Three Kings
  • What Child is This

Merry Christmas!

Here is the source code if you are interested:  https://github.com/rmadhuram/ArduinoChristmasTunes

Schematic:

Parts List

I used these components from the OSEPP ARD-101 “Arduino Basics” kit I picked up at Frys.

  • Arduino Uno R3
  • R1: 10 K ohms
  • R2 – R6: 330 ohms
  • LED1, LED5: white, LED2, LED4: green, LED3: red
  • J1: Piezzo Buzzer
  • S1: Switch

How it Works

Continue Reading »

3 Comments Posted in Uncategorized
JavaScript libraries market share wordle

Here is a wordle I created based on the stats found in w3techs site:

Note: The sizes are indicative of the relative popularity and are not to scale.

No Comments Posted in Uncategorized
NXT Virtual Piano – Fail!

Well, this was my plan – to create an extremely simple virtual piano with Lego Mindstorms, just by using the ultrasonic sensor in the manner below:

To play the correct frequency for the detected key, I first tried a ladder if-then-else within the Mindstorms visual programming environment, and it absolutely tanked! For every if-then-else path, it was doubling the height and before I reached 5 such paths, the exponential growth of vertical screen height made it pathetically slow and unbelievably difficult to scroll. So I ditched it, flashed LeJos on the brick and wrote a teeny meeny Java code which worked brilliantly! or so I thought…

It was playing tunes alright, but they were not the correct ones! After a couple of rounds of troubleshooting, I quickly realized it was not any programming error, but one that I totally ignored – the resolution of the sensor!! It turns out that the precision of the sensor is +/- 3 cms, and I had the bars at 2 cm widths.

So the moral of the story is – before trying out things with sensors, make sure to read the specifications thoroughly!

1 Comment Posted in mindstorms, technology, Uncategorized
PlotterBot!

I wanted to create a robot that can draw something on a paper. Searching for some inspirations, I found on YouTube, a variety of very amazing and cool implementations. Yet, they all drew on a horizontal plane, and were mechanically complex. I wanted something that I could mount on my son’s easel, and draw like a painter. Being a complete mechanical noob and only 2 days of robotics experience behind me, I set out to design a very light contraption that would draw something interesting. During my research, I was heavily influenced by this non-lego robot. First I played with a few technic pieces to model the arms and then hooked it up to couple of servo motors. The result is what I call a PlotterBot!.

As you can see, it is very simple. Two motors drive a pantograph mechanism. A pen is taped to the tip of the pantograph.

Following are some of the patterns it drew:

Here is the PlotterBot in action!

No Comments Posted in Uncategorized
Happy NXT Holidays!

Last weekend we walked into Fry’s to find an awesome deal for Lego Mindstorms NXT 2.0. Mindstorms is a robotics system for kids 10+ years, and it comes with 3 servo motors and 4 sensors (1 ultrasonic sensor, 1 color sensor and 2 touch sensors), and a wide variety of Lego technic pieces. I had always wanted to buy one for my son Kevin (and for me too, he he), so couldn’t pass up this deal!

Getting back home, Kevin and I immediately got to work, and he was able to build the shooter bot quite easily with little help from me on the programming side. Shooterbot is one of the examples that come with the NXT software.

Next couple of days, I was pretty much occupied with it and built a robot that would paint geometric patterns! Expect more details, pictures and videos in my next post!!

No Comments Posted in Uncategorized
node.js based CORS proxy

Recently I found that a WebGL program I wrote earlier was not working anymore due to CORS restriction. To get around this, I wrote up an extremely simple proxy using node.js and hosted it on the amazing nodester service.

You can access the service like this:

http://corsproxy.nodester.com/?src=<image url>

It just fetches the data from remote url and streams it back, after adding the following two headers:


Access-Control-Allow-Origin: *
Access-Control-Allow-Headers: X-Requested-With

You can see the source code here:

https://github.com/rmadhuram/corsproxy/blob/master/server.js

I tested it on Aurora (Firefox 9.0a2) and it works fine with a modified Three.js sample.
Note: Please use the nodester link for demonstration purposes only. Don’t use it in production!

No Comments Posted in Uncategorized
Tagged