

The Arbitrary Logo - based2
http://blog.arbitrary.io/the-arbitrary-logo/

======
alipang
This page uses close to 100% of one of my CPU cores. (Ubuntu/Chrome), not sure
if it's because of the logo.

~~~
pavlov
Looks like the page is spending an inordinate amount of time converting pixel
data into a data URL. That's probably the favicon update then?

To find out, I took a process sample with OS X Activity Monitor. The main
thread is spending most of its time in a requestAnimationFrame() callback, and
about 77% of the work done there is inside toDataURL() calls.

Here's the relevant bits of the sample:

    
    
        +                   !   : |     +   773 WebCore::DisplayRefreshMonitor::displayDidRefresh()  (in WebCore) + 347  [0x10e41ac6b]
    
        +                   !   : |     +   ! 772 WebCore::ScriptedAnimationController::serviceScriptedAnimations(double)  (in WebCore) + 407  [0x10e4309c7]
    
        +                   !   : |     +   ! : 771 WebCore::JSRequestAnimationFrameCallback::handleEvent(double)  (in WebCore) + 240  [0x10e430dd0]
    
        +                   !   : |     +   ! : | 770 WebCore::JSCallbackData::invokeCallback(JSC::JSValue, JSC::MarkedArgumentBuffer&, bool*)  (in WebCore) + 598  [0x10e431146]
    
        +                   !   : |     +   ! : | + 770 JSC::call(JSC::ExecState*, JSC::JSValue, JSC::CallType, JSC::CallData const&, JSC::JSValue, JSC::ArgList const&, JSC::JSValue*)  (in JavaScriptCore) + 63  [0x10dcefbaf]
    
        +                   !   : |     +   ! : | +   770 JSC::Interpreter::executeCall(JSC::ExecState*, JSC::JSObject*, JSC::CallType, JSC::CallData const&, JSC::JSValue, JSC::ArgList const&)  (in JavaScriptCore) + 462  [0x10db1a0ce]
    
        +                   !   : |     +   ! : | +     770 JSC::JITCode::execute(JSC::VM*, JSC::ProtoCallFrame*)  (in JavaScriptCore) + 35  [0x10de565f3]
    
        +                   !   : |     +   ! : | +       770 callToJavaScript  (in JavaScriptCore) + 311  [0x10ded24a1]
    
        +                   !   : |     +   ! : | +         601 ???  (in <unknown binary>)  [0x4ab59b07e64d]
    
        +                   !   : |     +   ! : | +         ! 597 ???  (in <unknown binary>)  [0x4ab59b170afb]
    
        +                   !   : |     +   ! : | +         ! : 597 ???  (in <unknown binary>)  [0x4ab59b001034]
    
        +                   !   : |     +   ! : | +         ! :   597 WebCore::JSHTMLCanvasElement::toDataURL(JSC::ExecState*)  (in WebCore) + 180  [0x10e45a854]
    

An easy fix would be to throttle the favicon update down to a lower frame rate
-- it doesn't need to be updated on every requestAnimationFrame() call.

~~~
TD-Linux
The animated Favicon doesn't seem to work on Firefox at all.

Also, CPU usage is also high with firefox, and according to the profile, over
half of it is spent in GC.

~~~
hobarrera
Fun fact: If you open the logo on firefox, it'll show the shirked logo as a
favicon:
[http://blog.arbitrary.io/content/images/2014/Mar/arbitrary_l...](http://blog.arbitrary.io/content/images/2014/Mar/arbitrary_logo.gif)

It's a shame that gif favicons never made it back in the day. :(

------
aberatiu
Really nice result, but there's one thing about it that really bugs me.
[http://imgur.com/KYQDTYD](http://imgur.com/KYQDTYD) (Chrome on a Windows
machine, if that's of any help).

~~~
daxterspeed
I believe this is caused by .clip() being "wonky" in Chrome. I think the
better alternative to .clip() is:

    
    
      context.closePath();
      context.fill();
      context.globalCompositeOperation = "source-atop";
    

In action:
[http://codepen.io/anon/pen/mJOOxv](http://codepen.io/anon/pen/mJOOxv)

[1] [http://www.w3.org/TR/2015/WD-2dcontext-20150514/#dom-
context...](http://www.w3.org/TR/2015/WD-2dcontext-20150514/#dom-
context-2d-globalcompositeoperation) [2]
[https://developer.mozilla.org/samples/canvas-
tutorial/6_1_ca...](https://developer.mozilla.org/samples/canvas-
tutorial/6_1_canvas_composite.html)

------
iza
It's neat I guess but the edges are aliased.

------
_random_
I was expecting one of those trendy HTML5 logo generators...

------
paultannenbaum
Pretty cool effect, though as others have stated it looks very resource
intensive. Reminds me of an old project from Hakim El Hattab
[http://hakim.se/projects/meru](http://hakim.se/projects/meru)

~~~
bshimmin
So much of that guy's work is just great. I love the DOM Christmas tree
especially (even if it's not the cleverest or prettiest thing of his):
[http://hakim.se/experiments/css/domtree/](http://hakim.se/experiments/css/domtree/)

------
jessaustin
The logo is meh, but the grammatical error in the _first_ sentence of TFA is
obnoxious.

------
bababoosh
Kudos to throw so much developing time on an ugly logo.

------
s0rce
Looks like the stargate icon

------
Lancey
But why? Why would you dynamically render your logo like this? Is the extra
overhead really necessary?

------
amelius
It looks like a capital lambda.

~~~
qznc
For the record Capital Lamda in Unicode: Λ

Unicode uses the spelling "lamda" in character names, instead of "lambda", but
I could not find the reason for that.

~~~
netmare
"Lamda" is the modern pronunciation, while "lambda" is the ancient one,
apparently. However, for the letters Μ and Ν they use the ancient Mu/Nu,
instead of the modern Mi/Ni, so I fail to see the logic.

~~~
tgb
Do you pronounce mu as mee? Nu as nee? I've always heard them as mew and new
in the US.

And what is the difference between lamda and lambda for pronunciation? I'd say
them the same.

~~~
netmare
I also call them 'mew' and 'new' in English, but their modern names are 'mee'
and 'nee'. I'm not sure what the ancient Greek pronunciation is, but I think
that's where the 'ew' sound comes from.

The same goes for lambda. I use that in math & programming, but the letter Λ
is actually called [lamða] in modern Greek ('ð' is the sound of 'th' in
'the'). That's apparently how 'lamda' is supposed to sound.

------
venantius
The resource / CPU requirements of this are not something to be proud of. If
your logo means the rest of your site is going to take a serious performance
hit, then your priorities are way off.

------
coin
-1 for disabling zoom on mobile devices

