The popular Spacebar is granted a powerful Shift

The Spacebar is probably the most underrated key in any computer keyboard. It is big and is pressed more times than any other key. But it has only one function: producing spaces. Recently I’ve swapped the Spacebar behavior so it works also as Shift. It now has double functions. A normal press still produces spaces, but by holding it and pressing another key it acts as Shift.

To get this behavior to work you’ll need to install Karabiner or Karabiner Elements (if you are on Sierra) and use the Complex Modifications panel. Karabiner Elements is a very powerful tool that allows you to change the behavior of your keyboard. Try it out.

Circles? Straight lines? or …

See the Pen Mathematical Circles by Dave (@sixhat) on CodePen.

I’ve been playing with some optical illusions, mainly in p5.js and recently came across this one on twitter, so I decided to re-implement it in codepen. It is just a bunch of circles moving around in Circular motion? is it? Or is it not? Well, Linear, Circular… who cares. The illusion is all that matters.

Are you finding duplicates to save disk space?

If you are like me, you end up having a mess of a file system with duplicate files everywhere.

The I’ll copy this here because I’m working on it, and there for backup, and there because I might need it for another project mentality makes to many useless duplicates.

As an example, my Dropbox folder had approximately 5000 duplicate files occupying 2GB. This means 1GB of wasted space. Ouch!

Enter dupd. A fast CLI (command line) tool to find duplicate files. It is a time saver and also a space saver. My usual workflow to find duplicates is something like this:

dupd scan; dupd report | tail -20

and as dupd sorts the offending files by the wasted size I usually run this a couple of times in the folder I want to check and proceed to delete/symlink what I don’t want.

dupd also has two modes for working with SSDs and with traditional HDDs. Check the documentation to see those advanced topics.

and now in the spotlight: the simplified Mobile First

There you have it! The world is going mobile, and everybody reads everything on their smartphones. I’ve been trying to hack this lame show of a website for so long that many times I’ve been tempted to just scrape it and start all over.

But no. I’m stubborn. And persist where others quit. And finally, instead of going bottom-up, I decided to convert top-down some things for the 2017/18 year. Probably still in need of a long list of patches but…

The things that I worried most in this revamp where:

  • mobile first – It had to look good on mobile. The previous version just didn’t cut it. Now it is acceptable and I’ll iterate it over time.
  • mobile first. Again. Think simple. Think simple. Think. And then build on that simplicity. Still a lot of crap around here but I’ll hunt it down during this year.
  • Removed some of the JS crap that was running around. Keep things easy and fast.
  • moved some stuff to CSS3 grid layouts. Grid layouts are a time saver and a declutter. HTML becomes free of all those .wrapper and .content divs that were there just for … well, to lower the text to html ratio.
  • mobile first? did I repeat myself? Well, one more thing. Moving to SVGs also. Lighter, vector, beautifully rendered! What else?

Per Bak and Kim Sneppen Model

The Per Bak and Kim Sneppen evolution model is one of the most simple and at the same time more elegant ways to show self-organised criticality.

The above demo is part of a vaster set of animations illustrating complex systems that I’m in the process of coding in javascript and P5. I had coded a Bak-Sneppen model a long time ago in Java, but this is nicer.

If you would like to see a particular example coded, or want to contribute, head on to github and either fork the dave.complexity or make your suggestions in the issues.

Tonight was the night for something ‘baked’ at apple.

I stopped following apple releases during a very high dose of caffeine. FEELS LIKE LAST CENTURY. But tonight I turned up my computer and went on listening to the news. It went like this:

  • naming things is worse than the pad days around Cupertino. Basically, it might be dumb names down to freezing temperature so dumb people get it.
  • The iMac Pro effectively killed the Mac Pro. It will be a great machine for anyone on a 10-year computer replacement cycle. The problem is that Apple’s build quality is not that good anymore.
  • Apple File System. Finally, something to replace the old HFS. I imagine the first instalment to be bug-free, but who knows. It is a File System, so have your backups ready. But I like this announcement.
  • Apple updated the laptop line to newer Intel processors. The new 13″ MacBook Pro without the touch-bar is the sweet spot right now, although I’m still a couple of years of my next replacement cycle. But if I was in the market for a laptop, I’d probably take a closer look at its specs.
  • iOS, boomboxes, etcetera… meh. I really don’t care about mobile in the Apple world.
  • Augmented Reality. This is a fad, and Apple is chasing it. Augmented reality has a very specific, and somewhat limited, application. The industry has been trying to replace the TV as the entertainment screen for years with many different technologies, but the reality is that since colour TV nothing manage to displace TV anymore. Augmented reality is just another gimmick. People will love it for 2017 and then it will fade back to specialised applications.
  • This year the X percent thing was ‘faster’. In the past, it was to be ‘X percent thinner’. I like FASTER better. It brings us back to what computing is all about. Performance, power, MIPS… Let’s hope that they don’t take another 10 years to update the computer line-up.
  • Can’t confirm this but it seems that the audience was almost totally men. WTF is going on with developers?

update: no one seems to read this anyway… so typo corrected.

Practical Webgl 3D Picking in P5js: Exploit a Color Buffer

P5js has a webgl mode that allows the creation of 3D worlds. But it lacks any kind of 3D picking. So lets implement a Colour buffer 3D picking for P5js for our sketches.

move mouse over the cat cubes to pick one. The code bellow is available at gist: Webgl 3D Picking in P5js with Colour Buffer

In a 3D webgl environment when you want to click on a drawn object you have to do what is called 3D Picking. There are basically two approaches to do this:

First –– the mathematical one –– is to take the camera location, and location of the mouse on the screen and ray trace back to the world in order to see where those rays will intercept with the objects.

Second –– the quick and dirty, but not so quick, 3D color picking –– is to create an hidden canvas (in the example above the right canvas) equal to the webgl canvas of the world and duplicate the world there. WHAT? Yes, the only difference of this world is that each object was assigned with a unique color. Then, the mouse coordinates on the first canvas (left) are mapped to the second hidden canvas (right) and we retrieve the color of the pixel under those coordinates. From that unique colour we can know which object it corresponds to in the real world (left).

Implementing 3D Color picking in P5.js

  1. You need to change preserveDrawingBuffer: false to preserveDrawingBuffer: true in your p5.js file manually. Right now there is no other way to set this property. This might impact the performance of your application as basically you are keeping the buffer of the canvas after the renderer has drawn it instead of discarding it. The reason you need to preserve the DrawingBuffer is that you want to go to the Webgl canvas and fetch an image of it for color matching.
  2. Everything as to be duplicated, every rotation, every translation… the only things different are the fills in the second color buffer canvas. The second color buffer is constructed with a createGraphics function. It will store the 3D shapes in a canvas similar to the world canvas.
  3. use resetMatrix in both canvas. Otherwise you’ll get discrepancies and won’t be able to match the objects with the colors.
  4. In the example above as I have few objects (less than 256) I choose to match objects by the red channel of the color instead of the full color. Your case may vary. See the comments in the code.

Extra tips for selecting 3D objects in P5js

  1. The size of the buffer canvas can be smaller than the original world. You only need to adjust the mouse position by the same amount. If your animation is running slow, try this first as the readPixels function is copying a lot of pixels information all the time. Maybe you can even avoid instantiating the pixels variable every time and reuse the old one.
  2. The code in the example is not optimised at all. The applying of textures could be optimised by branching carefully the code and drawing the cubes in different orders. The tip for your code it to be always careful on the order of object creation. You might be able to get some benefits.

fátima, o futebol e o fado, por esta ordem.

O 3 Fs do Salazar tiverem ontem a 13 de Maio — que provavelmente vai passar a ser feriado nacional, com comemorações compulsivas e lavagem cerebral das criancinhas nas escolas portuguesas — como dizia, tiveram ontem um dia em cheio. E se o papa era Franciscano, e o Benfica não pertence ao ministério e a música do Salvador Sobral era mais a virar para o jazz, a verdade é que dia 13 de Maio de 2017 foi um dia em cheio para as barrigas dos Portugueses e seus políticos. Mas vamos por partes:

  • Logo de manhã fomos inundados por uma euforia popularucha em torno da comitiva papal que transformou a manhã da TV num circo. Quem estivesse menos atento poderia pensar que John Lennon tinha ressuscitado e que os Beatles andavam à solta por Portugal. Para além de todo o negócio que se viu e realizou em torno da fé dos portugueses, viu-se um papa virado vedeta de show biz, sempre pronto a dar mais um beijo e a tirar mais uma selfie que o próprio rei das selfies. Marcelo deve estar roído de inveja.
  • Continuamos pela tarde com a vitória do Benfica no campeonato e subsequente festividades. Podia comentar muita coisa, mas deixei de ver futebol há uns quantos anos por achar que se está a comprar um bilhete para uma farsa corrupta — Não todos certamente, mas não contem comigo para suportar o teatro. Desde que o Placard oficializou as apostas, não há melhor indicador da farsa que o nível de apostas em certos jogos. Vale a pena insistir? O Benfica é o merecedor vencedor do pentatetra. Adiante que se faz tarde.
  • E por fim, a Eurovisão. Salvador Sobral ganha, dá um banho de música no meio daquela mediocridade. E completa o ciclo de milagres de dia 13 de Maio. Honestamente, não era a minha preferência. Gostei mais da Lena de Água durante a selecção Portuguesa. Mas cá também foi difícil apreciar as músicas porque a mistura do som estava muito mal feita na maioria das músicas. Agora resta saber se para o ano com a Eurovisão cá, quem vai ser o Arquitecto que vai ganhar uns patacos com mais um projecto megalómano para construir um anfiteatro para o espectáculo.

Enfim, agora resta esperar pelas condecorações do Marcelo, pelos milagres das criancinhas e acima de tudo por boa Música. Sempre. Take FIVE.