Archive for October, 2010

index to subscript, subscript to index

Thursday, October 28th, 2010

Many dimensional grids always give me a headache when trying to convert indices to subscripts.

Subscripts to indices is more or less straightforward. If you’re dealing with a 3D array with lengths: nx,ny,nz corresponding to subscripts: i,j,k, then converting a subscript to an index is as simple as:

index = i + nx*(j+ny*k)

The other way around is a little trickier, but has a simple derivation if you forget it. Start with the formula above:

i + nx*(j+ny*k) = index

Now notice that nx*(j+ny*k) is of course divisible by nx so moding both sides by nx gives you:

i = index % nx

Now you know index and i, so move those to the right hand side and begin again.

nx*(j+ny*k) = index - i

Divide through by nx:

j+ny*k = (index - i)/nx

Now you can apply the same idea to j and ny. So moding both sides by ny gives you:

j = (index - i)/nx % ny

Finally you know everything but k so the last equation is:

ny*k = (index - i)/nx - j

Divide through by ny:

k = ((index - i)/nx-j)/ny

In summary to convert index to i,j,k of a 3d array of size nx by ny by nz:

i = index % nx
j = (index - i)/nx % ny
k = ((index - i)/nx-j)/ny

The pattern here is pretty clear. And so it should be easy to generalize to whatever dimension array you are using 2D, 4D, N-dimensional.

Note:This assumes you are using Column major ordering as in matlab (ind2sub, sub2ind). If you’re using Row order just do every step in Spanish.

Short survey of email obfuscation techniques

Tuesday, October 26th, 2010

Although, spam detection is better each day, many people (and in the computer science computer it seems like most or all) people are paranoid about displaying their email addresses in plain text on the web.

The HTML standard has gone out of its way to make displaying email addresses easy to both the programmer and the user.

<a href="">

Displays as
which allows the user to click on the address and the browser will open the user’s default mail client.

But paranoia has driven many to obfuscate their addresses against would be spammers by first removing the “mailto” link and then manipulating the text in some way:

joeschmo [AT] cs [DOT] abc [DOT] edu
email obfuscation image technique

The last one is my favorite (courtesy Yotam Gingold, who told my strudel is how Israelis refer to the @ sign).

I remember a student asking one of my professors who used one of these techniques, “Isn’t it pretty easy for a spam bot to parse these common replacements?” And he replied, not without wisdom, “A person would obfuscates their email address is probably also a person who doesn’t respond to spam, so why would the spammers bother.”

This certainly holds some reason, but then the burden is placed on the user who wants to email you. Typically we’ve put our email addresses on the web because we want other people to email us. So it should be as easy as possible to do so: as the language provides.

Recently a friend and I experimented with a few different techniques for achieving user-end ease of use, but also satiating our paranoia about spam attacks. Admittedly posting these techniques could be seen as escalating the cold war with spammers. But they’re certainly not unknown and probably not worth spammers while (see the logic above).

Just in time replacement with javascript

<a href="" onmouseover="this.href=this.href.replace('ocs','o@cs');return true;" >

Displays as

The email address is still display in plain text in the source so we’re not done yet, but the href mailto link is only correct after the user has moused over the link. Thus, when the user clicks on the link the correct email address shows up in the mail client. Doing this onmouseover is expecially nice so that correct email address shows up in the browser’s status bar and that the user gets the correct email address if he right-clicks and chooses “Copy email address” or the like.

The one place where this fails is if the user is navigating via keyboard (alt-tabbing) through the forms and links. Then focusing on the email link and “clicking” it with space-bar will not present the user with the correct link. You can fix this by adding the same functionality to the onfocus action.

<a href="" onfocus="this.href=this.href.replace('ocs','o@cs');return true;" onmouseover="this.href=this.href.replace('ocs','o@cs');return true;">

Displays as

Note: You should be careful that the replacement you use only works the first time so that if the link is hovered over or focused more than once the correct email address remains.

Address completion via CSS

My friend, Tino Weinkauf, thought of a very clever way to be able to display his proper email address in a browser and be sure that spammers would not see it. The idea hinges on the assumption that spam bots won’t waste time evaluating CSS code because usually CSS doesn’t change the content of the page.

In your HTML head tag:

<style type="text/css">
.eobf:after {content:"o\0040cs";}

then in your link:

<a href="" 
onfocus="this.href=this.href.replace('ocs','o@cs');return true;" onmouseover="this.href=this.href.replace('ocs','o@cs');return true;" 
<span class="eobf">joeschm</span>

Displays as

The only thing I don’t like about this technique is that (at least on Safari) selecting the displayed address and copying it doesn’t seem to grab the part placed by the css. So if the user is copying the text, he’ll have to replace the characters on his own anyway.

Note: Michael Overton has an amusing way of preventing spam from reaching his inbox. HIs method certainly seems to be the most extreme burden on himself and the user, it hard to imagine that he’s not missing many non-spam emails.

In the end I’m skipping the CSS trick and sticking to javascript and simple character replacement:

<a  href="" 
  onmouseover="this.href=this.href.replace('ncs','n@cs');return true;"
  onfocus="this.href=this.href.replace('ncs','n@cs');return true;"
  jacobson<span style="font-size:1.25em">&#x263A;</span>

Which displays as:

Admittedly the user has to replace the ☺ with an at sign, but it’s a pleasant, easily-noticed substitution.

Note: Another site on the issue has an in-browser spam parser you can use to check out your obfuscation technique.

Update:A friend pointed out that rather than waiting for the user to hover over the link you could just have the switch occur when the div is loaded. The logic being that most spam bots that don’t evaluate onmouseover probably don’t evaluate onload either. The only problem I see is that the <a> object doesn’t allow the onload event, so you’d have to give your email link an id and do it on your html’s or body’s onload event.

“Mixed Finite Elements for Variational Surface Modeling” project page

Monday, October 25th, 2010

point boundary conditions used to make bumps in flat domain

I’ve finally put a project page for the paper we presented this summer at SGP: “Mixed Finite Elements for Variational Surface Modeling” by Alec Jacobson, Elif Tosun, Olga Sorkine and Denis Zorin. So far I have the paper, slides from SGP, slides from my recent Disney Tech Talk at ETH and some videos and images. Hopefully some I will post some of the working MATLAB code base.

Bash script to change files permissions to match those of existing file

Monday, October 25th, 2010

Found this handy bash one-liner to print the “ls -l” results refixed by the files’ octal permissions (as in 644, 707, etc.):

ls -l | awk '{k=0;for(i=0;i<=8;i++)k+=((substr($1,i+2,1)~/[rwx]/)*2^(8-i));if(k)printf("%0o ",k);print}'

I added a few things so that I code write a program that found the premissions of a given file and applied them to another file. Essentially changing a file's permissions to match the permissions of another existing file. I save this in

# To set permissions of file_two to match permissions of file_one, issue:
# match-copy file_one file_two
octal_permissions=`ls -l $1 |\
  awk '{k=0;for(i=0;i<=8;i++)k+=((substr($1,i+2,1)~/[rwx]/)*2^(8-i));if(k)printf("%0o",k);}'`
chmod $octal_permissions $2

Depending on the permissions of file two you may or may not need to use 'sudo'.


Subtly open Activity Monitor for suspicious CPU hogs

Wednesday, October 13th, 2010

As a first attempt at a subtle HCI program, I’ve written a bash script for Mac that when installed as a cronjob will monitor the running applications and subtly open up the Activity if a process has been hogging the CPU for an extended amount of time.

Here’s the bash code I save in


# make sure record file exists
touch $record_file

# get process with over 70% cpu usage
top_process=`top -l 2 -n 1 -o cpu | \
  grep "^ *[0-9]\+" | \
  grep -o "[A-z0-9]\+ \+[7-9][0-9.]\+%" | \
  sed -e "s/ *[0-9\.]*%//g"`

if [ -n "$top_process" ]; then 
  old_top_process=`cat $record_file | \
    grep -o "top_process=.*" | \
    sed -e "s/top_process=//g"`
  if [ "$top_process" = "$old_top_process" ]; then
    count=`cat $record_file | \
      grep -o "count=.*" | \
      sed -e "s/count=//g"`
    count=`expr "$count" + 1`
    if [ "$count" -ge "$MAX_COUNT" ]; then
      activity_monitor_running=`top -l 1 | grep Activity`
      if [ -z "$activity_monitor_running" ]; then
        open "/Applications/Utilities/Activity"
  echo -e "top_process=$top_process\ncount=$count" > $record_file
  # no top process clear record
  echo "" > $record_file

Then I issue:

crontab -e

and add the following to run this script every five minutes:

*/5 * * * * bash [path to]/

It’s not the prettiest way to do it, but a quick proof of concept.

MATLAB marquee zoom

Wednesday, October 13th, 2010

A colleague and I were trying to figure out if matlab has a marquee zoom (zoom box) tool for its plots. Where you could draw a rectangle and zoom to fit that box into view. Lo and behold it was right in front of our noses. Just drag out a rectangle with the zoom in tool:
Matlab marquee zoom animation

Subtle HCI

Wednesday, October 13th, 2010

There are many exciting new research directions in the field of Human Computer Interaction (HCI) that are aiming to actively enhance the user’s experience. This often culminates in nifty interfaces both on screen and as input devices. There are radical proposals rethinking computer concepts as standard as keyboard + mouse or menu bars and windows. Many of these new ideas are about making changes to the experience that are inherently drastic or obvious.

I’ve been thinking lately about more subtle changes to the computer experience. What if your PC could recognize that you are angry, sad or happy? How should it change its behavior or presentation? Could you PC even suggest what you should be doing with your computer?

An example I keep thinking about is the computer in a standard elevator. The user pushes the up or down button and waits for the elevator to arrive.

elevator happy animation

An easy way for the elevator’s computer to recognize that it has a hurried or stressed-out user is to watch if he hits the button over and over until the elevator arrives.

elevator mad animation

How could the elevator use this information to better enhance the users’ experiences? Could the overall user experience be improved?

The change in such a case should probably be subtle. People entering a new building probably do not want to learn how to use an entirely different elevator system. Instead the elevator could change its behavior slightly depending on the current users and input.

AntTweakBar GLUT example app using Xcode

Monday, October 11th, 2010

Here is a short tutorial to create a simple GLUT xcode project using the prototyping UI library AntTweakBar. I expect that you have compiled AntTweakBar as a static libary.

Create an xcode project

Open Xcode. File > New Project. Then choose Other > Empty Project. (The dialog looks different for different versions of Xcode, so just find “Empty Project” some place).
anttweak bar glut example tutorial

Call your project: AntTweakBarGLUTStarter
anttweak bar glut example tutorial

Add a target executable

Right-click on Targets then select Add > New Target… (or go to Project > New Target…)
anttweak bar glut example tutorial

Choose Cocoa > Application as the template of your new target (Don’t worry we’re not really making a cocoa app, it’s still going to be in pure GLUT. This just helps make the bundle).
anttweak bar glut example tutorial

Call your target: AntTweakBarGLUTStarter
anttweak bar glut example tutorial

Under the Build settings of your new target (Right-click on the AntTweakBarGLUTStarter target and select Get Info, then choose the Build tab), you need to remove the GCC_PREFIX_HEADER entry.
anttweak bar glut example tutorial

anttweak bar glut example tutorial

Link to libraries

Right-click on your target and select Add > Existing Frameworks.
anttweak bar glut example tutorial

This will open up your target’s general info tab. At the bottom left click the “+” sign to add linked libraries. Select GLUT.framework and OpenGL.framework.
anttweak bar glut example tutorial

Click the “+” sign again and then “Add Other…”. Add your libAntTweakBar.a file. I always copy my external dependencies into a folder called [my xcode project]/external. So mine is located at AntTweakBarGLUTStarter/external/AntTweakBar/lib/libAntTweakBar.a
anttweak bar glut example tutorial

This will prompt you with some options. Just choose “add”.
anttweak bar glut example tutorial

Add AntTweakBar header

I’m not sure if there is a more pleasant way to do this. I add the AntTweakBar.h file directly to my xcode project. Right-click on AntTweakBarGLUTStarter > Add > Existing Files… .
anttweak bar glut example tutorial

Then add AntTweakBar.h (mine is located at AntTweakBarGLUTStarter/external/AntTweakBar/include/AntTweakBar.h).
anttweak bar glut example tutorial

Again, just click “add” at the prompt.
anttweak bar glut example tutorial

Create a main program

Right-click on AntTweakBarGLUTStarter > Add > New File.
anttweak bar glut example tutorial

Choose C++ file.
anttweak bar glut example tutorial

Call it main.cpp
anttweak bar glut example tutorial

Now you are ready to put whatever you want in your program. I copied the contents from the AntTweakBar GLUT example (TwSimpleGLUT.c) into main.cpp. This works almost as is. Just add at the very top you:

#ifdef __APPLE__
#define _MACOSX

Build and go

anttweak bar glut example tutorial

Adding an icon

You’ll see in the above screen shot that I have a beautiful dock icon for my app. This is very easy in the current setup.

Make some icon using Photoshop/Gimp whatever you like. I just save the image as a .png file and use to convert it to a .icns file.

Once you have the .icns file add it to your project. I made a new folder AntTweakBarGLUTStarter/data and put my icon there: AntTweakBarGLUTStarter/data/AntTweakBarGLUTStarter.icns. So Right-click on AntTweakBarGLUTStarter > Add > Existing File.
anttweak bar glut example tutorial

Choose your icon file.
anttweak bar glut example tutorial

Again, just click “add” at the prompt.
anttweak bar glut example tutorial

To set this file as your icon Right-click on your target and select Get Info…
anttweak bar glut example tutorial

Then choose the Properties tab. Under “Icon file:” type the name of your icon file.
anttweak bar glut example tutorial


The source and .xcodeproj file in a zipped directory
The application binary (10.5 32-bits)

Source: The above is largely based off of:

Command Tab or Dock stops working on Mac OS x

Wednesday, October 6th, 2010

I was completely useless the other day when Command Tab (or Apple Tab) stopped working. Also my dock wouldn’t show up. I was able to regain these features by opening and issuing:

killall Dock

Apparently Dock also controls the Command Tab feature.

Compiling, installing and using AntTweakBar on Mac OS X, as a static library

Monday, October 4th, 2010

I recently posted about compiling and installing the very cool prototyping UI library, AntTweakBar, on Mac OS X.

That post describes how to compile as a dynamic library, which is great for development of many different projects on the same machine. But when I want to show my app to others the last thing I want is for them to have to compile all of the dependencies as global dynamic libraries. Instead I’d rather package up my binary with statically linked dependency libraries.

So after a bit of a struggle over my lack of experience with gcc and even contacting AntTweakBar’s developer, I’ve found at least one way to compile AntTweakBar as a static library on Mac OS X, universal for 32-bit or 64-bit apps.

Dowload the source from the AntTweakBar site.

Go to the source directory:

cd AntTweakBar/src

Make some changes to the Makefile.osx. Edit the lines to look like this

SO_EXT          = .a

#---- Release
CXXCFG          = -O3 -arch i386 -arch x86_64


        #@echo "===== Link $@ ====="
        #$(LINK) $(LFLAGS) -dynamiclib -Wl,-undefined -Wl,dynamic_lookup  -o $(OUT_DIR)/lib$(TARGET)$(SO_EXT) $(OBJS) $(LIBS)
        @echo "===== Archive $@ ====="
        $(AR) $(OUT_DIR)/lib$(TARGET)$(SO_EXT) $(OBJS)

Depending on your OS version you may have to adjust this line, too:

BASE            = /Developer/SDKs/MacOSX10.6.sdk/System/Library/Frameworks

Copy Makefile.osx over the exisiting Makefile:

cp Makefile.osx Makefile

Then build with


You may see some suspicious looking output like:

ranlib: archive library: ../lib/libAntTweakBar.a will be fat and ar(1) will not be able to operate on it
ranlib: for architecture: i386 file: ../lib/libAntTweakBar.a(TwPrecomp.o) has no symbols
ranlib: for architecture: x86_64 file: ../lib/libAntTweakBar.a(TwPrecomp.o) has no symbols

But I haven't run into any problems with this yet...

Now go over to the examples:

cd ../examples

You can compile the GLUT example with:

gcc -O3 -arch i386 -arch x86_64 -Wall -fno-strict-aliasing -D_MACOSX TwSimpleGLUT.c -framework OpenGL -framework GLUT -framework AppKit -L../lib -lAntTweakBar -lstdc++ -o TwSimpleGLUT -I ../include

You'll notice a couple more links in this compile command than when using the dynamic library. The most important to notice is the -lstdc++ which is a little weird but definitely needed (you could switch gcc to g++, instead, too). There were other link options in the original Makefile.osx that don't seem necessary for this example, but maybe for others... I'm not sure.

Update: A couple people have been getting the following error on the final ar line of the makefile:

===== Archive AntTweakBar =====
ar cqs ../lib/libAntTweakBar.a TwColors.o TwFonts.o TwOpenGL.o TwBar.o TwMgr.o TwPrecomp.o LoadOGL.o TwEventGLFW.o TwEventGLUT.o TwEventSDL.o
ar: ../lib/libAntTweakBar.a: Inappropriate file type or format
make: *** [AntTweakBar] Error 1

Here's how I fixed this with in at least one case. Delete the incomplete libAntTweakBar.a file:

rm ../lib/libAntTweakBar.a 

Then issue:

ar r ../lib/libAntTweakBar.a TwColors.o TwFonts.o TwOpenGL.o TwBar.o TwMgr.o TwPrecomp.o LoadOGL.o TwEventGLFW.o TwEventGLUT.o TwEventSDL.o

You may see a warning like:

ar r ../lib/libAntTweakBar.a TwColors.o TwFonts.o TwOpenGL.o TwBar.o TwMgr.o TwPrecomp.o LoadOGL.o TwEventGLFW.o TwEventGLUT.o TwEventSDL.o
ar: creating archive ../lib/libAntTweakBar.a
/usr/bin/ranlib: file: ../lib/libAntTweakBar.a(TwPrecomp.o) has no symbols

This is OK, I've been told by the AntTweakBar developer that this file is ignored anyway if you're not on windows.

Then you should be able to compile and run the example above.