Archive Motion Music

Video Delay in Processing: Memo Gives Us OK Go's "WTF" Effect For Xmas

Jaymis Loveday - December 16, 2009
Add comment

UK creative coder Memo has released an early holiday present, a video delay system allowing us to reproduce the effect seen in OK Go’s “WTF” clip (Behind the scenes video on Youtube).

This piece really does contain all of The Good Stuff. Processing, live video, sharing code, the innocent joy of a child in song, and of course the Flying Spaghetti Monster (may we all be touched by his noodly appendage).

It really is super easy to get running, too. You need the Xmas2009 code (couldn’t think of a better project name Memo?), Processing, and the ControlP5 library installed. When that’s in place, the actual Processing code which builds the effect is only 104 lines!

While we’re on the topic of gifts and Processing, if you’re not following @CDMBlogs on Twitter, you may have missed the excitement over the recent Processing Tshirt release. I received my “copy” of The Beauty, and it’s a truly lovely piece of tshirt art. They’re nigh on sold out now,  but maybe if you bug @REAS (website) or @Ben_Fry (website) they’ll do a reprint sooner rather than later.

Tags: , , , , , , , ,

Related posts

effects
effects
code
codeeffects

20 responses to “Video Delay in Processing: Memo Gives Us OK Go's "WTF" Effect For Xmas”

  1. vade says:
    December 22, 2009 at 11:55 pm

    Heres a Quartz Composer version of the effect: http://bit.ly/5v43tM Chroma Key + Feedback. Simple can be fun!

    Reply
  2. goto10 says:
    December 23, 2009 at 3:47 am

    don't know where to look on that link, vade, but here's my qc version with luma key + feedback: http://www.hybridvisuals.nl/downloads/m8-trace-qu…
    (which incidentally uses a bit of code originally written by memo. wonderful when things come full circle ;-))

    btw, good to have cdm back!

    Reply
  3. DVJ sugeye says:
    December 23, 2009 at 4:43 am

    Good to see your blog back on the web.

    Reply
  4. txo says:
    December 23, 2009 at 4:50 am

    oh yeah
    welcome back!
    sooooo good

    Reply
  5. vade says:
    December 23, 2009 at 11:03 am

    Shit, I pasted the wrong link. Har. http://bit.ly/5v43tM that other one is awesome though. Id say more so 🙂

    Anyway nice to have CDMo back.

    Reply
  6. Jaime Munarriz says:
    December 23, 2009 at 12:31 pm

    HI!
    Welcome back!

    Reply
  7. yoo says:
    December 24, 2009 at 3:57 am

    Welcome back …merry Christmas all

    Reply
  8. Memo says:
    December 24, 2009 at 8:34 am

    good to have you back cdmo!

    Reply
  9. Jaymis says:
    December 24, 2009 at 3:40 pm

    Yay! Thanks guys. It's great to be back. That wasn't so much fun.

    Hope everyone has a colourful holiday, we'll catch you on the other side!

    Reply
  10. Holva says:
    December 25, 2009 at 2:38 pm

    Here is a Max/Jitter version I brewed up after noticing all the interest.

    Merry Xmas!
    <code>
    ———-begin_max5_patcher———-
    764.3oc0W9sbhBCEF+Z7oHCW6xjD.ktW084XmNNAHklVHwFhq1sSe227Gvpc
    ETpnc53Ll4b.R9xON4KjWm34mJ1Pq8A+D7afm2qS77roLI7Zh87qHaxJI01a
    yuhVWSJn9ScWSQ2nr4EKo71j7UULdIUYeBbSxkDU1CLdwBIMS4FwYyBfSAXz
    bSSHNHdJ.EG.A207HrbWWm93OBgsc98BthSpn1K8KIiTtyvJVoZGWTSVWJ0K
    KotA02ea+a5pZ1esW3l.nI4aSlX9a5IRCNcsVc+GLdjoBVy34h0.wSEhCxET
    2bAEgMDAcCxzL+FaPxgACd1PACtKvjR3E9S6BPH3XSnhxf5RRZ2HpmRmHbns
    1IDZQTTuHJdzPjV1KJJWXlFqjzuJXAt8dVIEjIBxdPJpHOQeI3wM0faWRjjJ
    PJiSju.PswJQI.FfFJhQXKUCMKI0Mgn9X7rnuKLtKCrrRQMcvLBh10ByRJzr
    CiHTxE1B6hTz8GVNUrrjvoMkdJIgWeuPVowPMUAvfaobRptdTWvQVoz0iJVF
    .NXSOW4VjoByT0g6qbCENpkaZIKYatxKmkTdNU9o1f.232Y2YHItORk7sb6A
    EHU+iJIcrj73rwshLt28NmOT1DdL1z15T9XBJknnn7SBinFSp1+ODKhFnEDi
    qGh6Fu23OWQURA.OTGX2LzsRHt2snvil8q8s7Uxn3YsWgjj94dwiibboeuzu
    RqT683Wx3e7TH14jI+9XqVrRl0NdM9af2mV4zZk9qeTLAem6As287.KOmZuL
    rISEKeoPWP2HgNJqOUEgt.RBowVr48osILbavYpUywpFasNOtUcvckJ7bw5I
    nTyWgNDo1nNmhQ6DclZ8C53vh0brjAUC3zWn6vg3D6Af1OBisPOxcVZazYNS
    9fH6A6nSelzpuDqecTT71nyTsmD1uplA3SPQyupJxLZ3innjAth2VXhlgd2b
    xFLBJENtJM7xoTzwbQCGlTi2pN3VuIaz0vaZnhs0aZd7Np0FsmZ0AuM4e7dQ
    95B
    ———–end_max5_patcher———–
    </code>

    Reply
  11. Holva says:
    December 25, 2009 at 3:09 pm

    Sorry, here's a nicer one. Couldn't delete last post.

    <code>
    ———-begin_max5_patcher———-
    1036.3oc0YtsbapCEF9Z6mBM95DORBwA2YeQ1OGc5jQFKiULHQA4Fmcm9tuQ
    GvkjXHfMlzNIwjEPL+qO8q0RV4mymsXs7HqbA3KfuBlM6mymMybJ8Il4hmsH
    idLNkVZtsEOwUK2lWlbfu3N6kEGx3hTlxbcj6j4TU7NtH4wBVrx99iIKg2A7
    vP8gHnMXID7M2eBei4AHW+z8XX8a9VoPInYLyk92BNMswiUdPU+bwtyZOk5k
    bl8gtXwcU+b5Yne6J4+m4hqVB0m7Wymqe4tdl+wxrLlPUqBE6nI8V7O2eOHN
    kGuGriUv.JIHdmTVx.wxTYgNdO6kghLOxJMlPPr4fuAZnvyCMzpgBM3nQEA6
    4JI7NnbPjSqHBb4ouGJAPAVBrxR.HoSBDLTBPZy1rMURUZuSa+xHZoJODumt
    6BIC1yRDKX78agLvym+nVm1.91EjI5hC4OyEajOO7zIpY53L7jymNqtrh.im
    wNmtGjSKnYto2ejCOniDG4aS7vSifs6vGrAuqA3Qy.mwJKoIr2QIYNSbVbfa
    GGAAFZfBc8G70L47vvC9GIMZwxnmaXmZ.j6SjCc9AAa.imYRensnXTKcOCFs
    tmqohj16fhfiMfRRWVlRW2NgvcQHO6DISWRWAw1Pj+ngnJY+XR5i5z3PA6yB
    VfG1xS0K1XY7tBYFsZwFKe5XI3AaUp0bAs3E.pNVISqJUgGJhQt0vYKY44g5
    hwAj+VXba0uhSqV.2fYDD0rBlsbdPKskitwUvtIltev2vj4oTAyY8TETQ4VY
    QVEFJYJ.F7.SPWW4GqLbzCpJ+nhGCfCdMAV6FAEYcc3traHuQ0tUI4B9wId5
    bASrgUbQ8Gvt5clNCQ9cQpn+JaOn.qq9hUPaYJ4GyF6LR+N6cFNT138Qro9n
    U4iInTxjjzKDFDWQp5WOGKHCrDDWnF0EY+8LlpPBFbWJaFZmI32YKJ7nU90L
    JOQEJ9dUshB55KafGa2RA+tqk9YVJ0bOKR4h2twTlbRe9WisR4gh35mmq9F3
    2o0FVopZ0OJtTz3dz6vTiaZGeyFln4dhjw2jKqbzNMzhutuRRuyD.uOPS56w
    eZkDtGRhLsRB0CI4MsRB1CIgmLI0KEQFl8VuRqpOoMNx1ozy6Tz0xOXOT6af
    7MeLsGRZ0vTjCXgA06S66hPtctLrN3ZcAj9.VuAZCr4gWneCafI5JUq9ya2O
    SKp+pkX2dHbjoGOg3eJZJX6aRodyVhoyKNxrYEuNBa+eiTmW5nIvpOzZENu9
    JqstQzUp09z1FMsEJtARBgrEGHlCN5Qtd54AGesF5WqNXSodslxdM6ZRGnw8
    PQgSphB6whyhF3noY.DEf9swyDLBJENtJ061oTzH2wz+UM9arLfWo0pfeM++
    AsYoOz.
    ———–end_max5_patcher———–</code>

    Reply
  12. Bearmod says:
    December 26, 2009 at 3:56 am

    Wow! This is fantastic! Thanks to everyone posting ports of this effect.

    I had asked about this effect on the vidvox.net forum just days before the OK Go’s “WTF” vid was posted to CDM. This re-opening of the TRACE FX
    topic resulted in the QC effect that goto10 posted above (thanks again).

    Thanks Holva for posting your jitter version of the effect. Below I have posted another method for creating the same effect in Jitter. This seems to be the method by which the 'Trace' effect in Modul8's master control section might be implemented. While I'm a total noob to QC, it seems that Vade and goto10's plugins are similar to Holva's in the use of feedback to create the effect. My method (that I stumbled upon by happy accident years ago!) seems to use a specific object/parameter hook instead of feedback (I don't understand the inner workings of gl so I could be wrong).

    I feel that the none-feedback based version of this effect could be of value to people (especially me!) and I'm wondering if Vade, Memo, goto10, Holva, or anyone else familiar with Jitter and QC (and ideally Modul8 and VDMX as well) could take a look at my jitter patch and give me some feedback about the possibility of implementing the same or similar method in QC.

    Thanks in advance!

    -BM

    ———-begin_max5_patcher———-
    1941.3oc4as0aaaCE94jeEbFCHa.ophhRxR6gsz08xdn.a.cCCnaHfRh1l0R
    hpRzwwsn+2GuHmHmXac0JInsA5J0Qe767QdNjT9Kme1j.1sjhIfeB7AvYm8k
    yO6L0kjW3rxyOaRB91vXbgpXSBYIIjT9jK02iStkqudLMbIXAIm.3LP3Bb5b
    BXIYCHjEyxAu5U+71GIllRBYqRUOmc4EyxIEByh4TV506sDyXo7B5mIxqAgF
    lkWNcUBMMlvUnCtsr4yCzUJYA2cC3+12qLmDxKeBSGYIsflxctdps9UdNwaj
    shu8UtEGYXd3BZ571XopHnJ7oQJJkE7wWglNoR8OEmnp+SdSNEGC90Xb3xIx
    a+0yOWt4xd5De+l+.mur3p4IXZrgnT+a550qMBDNj4IrHwAr4EYL9825FZBg
    IO80ADbtnL5KmroHCGRpdiWHtezzpNMnuY28+0apFH.rbFSAvueQDHlcipMb
    .AfChUGlwx4.9BZAnHiDRmQCAjYyDUTPBgufEIKCF7I9raAyDM1WUP.zTve+
    au6eL.f2jtQzuPbFXMaUbjzryyIXd7F.NSP.gTLmD8curjGPzNMs6i7XqoLm
    1I4g8nJODduXJQpOVfKUDh+3KHaEBAa.qWPCW.dGKZUrG.GFRJJH5xbw6yEc
    JbwVsiPhHtJMGjfK3jbQjhTdNKFTHtonFaXX.tghUOINNaAFbCNdEAvloMFI
    GWPtVEd4BPFNGmHu0Gobi4wF4jzHRtP88VbpFmUJttzX46rfvA+fR0SWpibU
    Bh.A0MOWHyhJifoLxZrP0J1Qhi+QUCDc0KRAz+bENm+YvaYIYrBR9u..6UTO
    sVQ8zwVTap6gRKD8zOl7rNHpq0TMQTiFSQ8eUHkyjBk6eFNRcFfKkpuNhDK7
    3k5UrTKnSrQVhGpP1eWXnZ81nmlDbztHnu5wbP8HAmCaol3qsNE95TxZgwej
    qtryganQDVVLNkHBWwB.WIb1oEhHWIWKALGXAthjpB9AAWgWwYhNKDw7LAWI
    tVZz0au4j8357Otm6.NEcxAH8NanslQOnSw5vNkZsj1L7MYD8CHYkqEUvb5s
    StDLYRq7dvSg2qXU3R7hIcfFgdlUhoB8sT6rOLQBOh5tda8HprUjGrKbiTBm
    sllFwVODDDrNBxp4DDrIDTaUXP2tvRIhnx34j8LJUQj4Vzp0pF1rrp6nayox
    fCNsShs5rTOkZmjQQbHVlkQRGNR12rJy3zcNtNC0SJ1djCj8IQrrbbvPGCpr
    UsiWeCAcXCMjQffnwO+ghXbPYlCynh7.BYFgKxEIIrjrw3i2V.tRObj.ZJNe
    iLGB84bw3JLMrF5lFH2REc+yZ3vVZu9r4wWK4lU4j162fineKCurbDh5wxYZ
    b2esvY31nPqHTYTQ+Z7F0m5wQLU+5qxYD49UoYBC1QJuldrrrT8hWNnSemZX
    b6Cy30ZoGQ3yhYXtT1enCZiCwdLCOOaUbbQXNgjB9d3v0YjsdFrPlpN7mh5d
    f5ZsT+T+VtmB1lylOOlzkbxKGqVY0Ed2XpaOwUqkdDwQSamP0Z5.10PAIFXM
    c.UfHK8zNoaK2iLXp0ROhHCvoya+vm8FwNhEImzBp1rQZ1RBx1r687Vqk1ql
    8x8sqUTu+Hm2ndL6pzFGt.faavaoTndtcWwWqkFFEOxrVZu79pL0zuJSCuKE
    abr8MspbfZtN6fSRDdVPKCXVH2uJP2MtxpLmXbMEg3X0avzv+ndlERMytU8o
    lNdp5+iOp5r8JphzDQ0RhWiiLos0g1CmnixgWqyNX9tv2U7uoWt2ipB+JZD2
    lJQdDWYdYkM6PNzzsji3dOCzLP8h+8BQyTGZe50LS+VPyX+Rpel5P6Sulw6a
    AMio6KIMSMn8oWy3+LTybjI8p5G8vcy.CrMy.iSiVLY+cWInNMmW0YodN87l
    mh78kI1OKqX9J5.1j0oxTw5h1N.zNr9b0Xn9u3bnwbRb4f.w+UJ5glrKSuAV
    i5EUGWeP6bvAOscutZ0Jt+j7gSLzwerq7EhffOQge12D7bbb8zGnAgNwQZbF
    043DVgusr2tsCQINtc587ahrGvdr9TBgmy.C3B9oq3ZwqCpGAaOtc1e2UshG
    cF+kkU+MeNvyvVofyRutPVceB1pyPCz7q0p01PYY02q3C9Mfnvu7565LJXqx
    C2husAg.v6.XDofSSuCee39ORLv8UzEznHRZ04XNgFkwDsTKAwAlTulhI3tu
    tmGXB0.LAcaGl78Mbje33kqOlq9yHu5YP8pZB8TkTcVOqHH2lTQPiK457LDS
    1OCwTiDgiaCCmmePpIceXOpHpIZIIQZMpHB1.DgFUDY0.DYOpHB0.D4LZHxp
    IcdKWgtipsa3BycZpAdMI19z105z1FJCOhzS.ExWO6il8OX4C.xAPaKi5aqm
    iTjERud4t28EezWz52Dz50RzpGbMxTkva4YVdSGmDQPibjCylfI2QESpLzsd
    Fhoma7TSBxhbFWL0jrid.YdxwDpo7DbzvTS53R01rEPR9iVTDTvS+oeYi1dR
    OgpWSgZKxkS9St4dnN0Zff5zlB0VjjGzy9dnZYBGHn51Tn1hr+rfUXUKj4dg
    p3jud9+Cuvxe5
    ———–end_max5_patcher———–

    Reply
  13. Bearmod says:
    December 26, 2009 at 4:03 am

    Ooops! Looks like my code pasted weird. Try this instead:

    <code>
    ———-begin_max5_patcher———-
    1941.3oc4as0aaaCE94jeEbFCHa.ophhRxR6gsz08xdn.a.cCCnaHfRh1l0R
    hpRzwwsn+2GuHmHmXac0JInsA5J0Qe767QdNjT9Kme1j.1sjhIfeB7AvYm8k
    yO6L0kjW3rxyOaRB91vXbgpXSBYIIjT9jK02iStkqudLMbIXAIm.3LP3Bb5b
    BXIYCHjEyxAu5U+71GIllRBYqRUOmc4EyxIEByh4TV506sDyXo7B5mIxqAgF
    lkWNcUBMMlvUnCtsr4yCzUJYA2cC3+12qLmDxKeBSGYIsflxctdps9UdNwaj
    shu8UtEGYXd3BZ571XopHnJ7oQJJkE7wWglNoR8OEmnp+SdSNEGC90Xb3xIx
    a+0yOWt4xd5De+l+.mur3p4IXZrgnT+a550qMBDNj4IrHwAr4EYL9825FZBg
    IO80ADbtnL5KmroHCGRpdiWHtezzpNMnuY28+0apFH.rbFSAvueQDHlcipMb
    .AfChUGlwx4.9BZAnHiDRmQCAjYyDUTPBgufEIKCF7I9raAyDM1WUP.zTve+
    au6eL.f2jtQzuPbFXMaUbjzryyIXd7F.NSP.gTLmD8curjGPzNMs6i7XqoLm
    1I4g8nJODduXJQpOVfKUDh+3KHaEBAa.qWPCW.dGKZUrG.GFRJJH5xbw6yEc
    JbwVsiPhHtJMGjfK3jbQjhTdNKFTHtonFaXX.tghUOINNaAFbCNdEAvloMFI
    GWPtVEd4BPFNGmHu0Gobi4wF4jzHRtP88VbpFmUJttzX46rfvA+fR0SWpibU
    Bh.A0MOWHyhJifoLxZrP0J1Qhi+QUCDc0KRAz+bENm+YvaYIYrBR9u..6UTO
    sVQ8zwVTap6gRKD8zOl7rNHpq0TMQTiFSQ8eUHkyjBk6eFNRcFfKkpuNhDK7
    3k5UrTKnSrQVhGpP1eWXnZ81nmlDbztHnu5wbP8HAmCaol3qsNE95TxZgwej
    qtryganQDVVLNkHBWwB.WIb1oEhHWIWKALGXAthjpB9AAWgWwYhNKDw7LAWI
    tVZz0au4j8357Otm6.NEcxAH8NanslQOnSw5vNkZsj1L7MYD8CHYkqEUvb5s
    StDLYRq7dvSg2qXU3R7hIcfFgdlUhoB8sT6rOLQBOh5tda8HprUjGrKbiTBm
    sllFwVODDDrNBxp4DDrIDTaUXP2tvRIhnx34j8LJUQj4Vzp0pF1rrp6nayox
    fCNsShs5rTOkZmjQQbHVlkQRGNR12rJy3zcNtNC0SJ1djCj8IQrrbbvPGCpr
    UsiWeCAcXCMjQffnwO+ghXbPYlCynh7.BYFgKxEIIrjrw3i2V.tRObj.ZJNe
    iLGB84bw3JLMrF5lFH2REc+yZ3vVZu9r4wWK4lU4j162fineKCurbDh5wxYZ
    b2esvY31nPqHTYTQ+Z7F0m5wQLU+5qxYD49UoYBC1QJuldrrrT8hWNnSemZX
    b6Cy30ZoGQ3yhYXtT1enCZiCwdLCOOaUbbQXNgjB9d3v0YjsdFrPlpN7mh5d
    f5ZsT+T+VtmB1lylOOlzkbxKGqVY0Ed2XpaOwUqkdDwQSamP0Z5.10PAIFXM
    c.UfHK8zNoaK2iLXp0ROhHCvoya+vm8FwNhEImzBp1rQZ1RBx1r687Vqk1ql
    8x8sqUTu+Hm2ndL6pzFGt.faavaoTndtcWwWqkFFEOxrVZu79pL0zuJSCuKE
    abr8MspbfZtN6fSRDdVPKCXVH2uJP2MtxpLmXbMEg3X0avzv+ndlERMytU8o
    lNdp5+iOp5r8JphzDQ0RhWiiLos0g1CmnixgWqyNX9tv2U7uoWt2ipB+JZD2
    lJQdDWYdYkM6PNzzsji3dOCzLP8h+8BQyTGZe50LS+VPyX+Rpel5P6Sulw6a
    AMio6KIMSMn8oWy3+LTybjI8p5G8vcy.CrMy.iSiVLY+cWInNMmW0YodN87l
    mh78kI1OKqX9J5.1j0oxTw5h1N.zNr9b0Xn9u3bnwbRb4f.w+UJ5glrKSuAV
    i5EUGWeP6bvAOscutZ0Jt+j7gSLzwerq7EhffOQge12D7bbb8zGnAgNwQZbF
    043DVgusr2tsCQINtc587ahrGvdr9TBgmy.C3B9oq3ZwqCpGAaOtc1e2UshG
    cF+kkU+MeNvyvVofyRutPVceB1pyPCz7q0p01PYY02q3C9Mfnvu7565LJXqx
    C2husAg.v6.XDofSSuCee39ORLv8UzEznHRZ04XNgFkwDsTKAwAlTulhI3tu
    tmGXB0.LAcaGl78Mbje33kqOlq9yHu5YP8pZB8TkTcVOqHH2lTQPiK457LDS
    1OCwTiDgiaCCmmePpIceXOpHpIZIIQZMpHB1.DgFUDY0.DYOpHB0.D4LZHxp
    IcdKWgtipsa3BycZpAdMI19z105z1FJCOhzS.ExWO6il8OX4C.xAPaKi5aqm
    iTjERud4t28EezWz52Dz50RzpGbMxTkva4YVdSGmDQPibjCylfI2QESpLzsd
    Fhoma7TSBxhbFWL0jrid.YdxwDpo7DbzvTS53R01rEPR9iVTDTvS+oeYi1dR
    OgpWSgZKxkS9St4dnN0Zff5zlB0VjjGzy9dnZYBGHn51Tn1hr+rfUXUKj4dg
    p3jud9+Cuvxe5
    ———–end_max5_patcher———–
    </code>

    Reply
  14. vade says:
    December 27, 2009 at 9:08 pm

    Bearmod. My QC patch basically does this already, just play with the values in it.

    Reply
  15. vade says:
    December 27, 2009 at 9:10 pm

    You can edit the alpha color of the background billboard in the Render In Image section (Render in Image is like a custom slab object, or a render to texture, using to_texture or @capture in Jitter speak). Just make the alpha of the background billboard low, and it will slowly fade.

    Reply
  16. vade says:
    December 27, 2009 at 9:11 pm

    Also I should note that using the erase_color like that will not work for all GL contexts or implementations. You should use a render to texture method. Multisampling or Full Screen Antialiasing options will make the erase color break, and your patches 'trace' functionality will vanish.

    Reply
  17. Alex Beim says:
    December 28, 2009 at 4:44 pm

    We had the similar idea going on at Tangible but with slightly different execution.
    You can download the app here

    http://lite-write.com/

    Cheers

    Alex
    Tangible Interaction

    Reply
  18. Bearmod says:
    December 29, 2009 at 6:22 pm

    Thanks Vade for the information! I wasn't really sure if there was something different with using the erase_color command but I thought it was worth asking as it seems simpler. Well I'm off to play with these patches a bit.

    Thanks again!

    -BM

    Reply
  19. Travis Morgan says:
    December 30, 2009 at 12:16 pm

    The almighty FSM stole this show. 🙂

    Reply
  20. elangejans says:
    March 14, 2013 at 3:03 am

    i have all of the things i need, and i run it but i just get a blank white window. how do i make it work?

    Reply

Leave a Reply to vade Cancel reply

Your email address will not be published. Required fields are marked *