Developer42

2013-02-13

Harlem Shake (XKCD Edition)

Filed under: Memes — Tags: , , , , , , , , , — Developer42 @ 23:38

I recently came across two new things. The first, an excellent bit of code by Antonin Hildebrand cmx.io. This code allows people to easily create XKCD style comics through simple markup, and also includes a useful wysiwyg editor to make tweaking the pictures simpler.
The second was a slew of videos in my YouTube feed with the latest meme: The Harlem Shake.
My instant reaction was to create my first meme whilst trying out my new toy: here’s the result (click the image to go to the animated markup version):

XKCD Harlem Shake http://cmx.io/#4949114

Harlem Shake XKCD Edition created with cmx.io

Code included below (also available on GitHub: https://gist.github.com/JohnLBevan/4949114.

Update (2013-02-14 22:12 UTC)
Code updated to include animation of second frame.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="http://cmx.io/v/0.1/cmx.css"/>
<script src="http://cmx.io/v/0.1/cmx.js"></script>
<script type="text/javascript">
<!--
  var frame2 = true;
  var vis = {};
  vis[true] = "block";
  vis[false] = "none";
  window.onload = function(){document.getElementById("scene2y").style.display = vis[false];};
  setTimeout(function(){setInterval(function(){swapFrames()},200);},3000);
  function swapFrames()
  {
    document.getElementById("scene2x").style.display = vis[frame2];
    frame2 = !frame2;
    document.getElementById("scene2y").style.display = vis[frame2];
  }
-->  
</script>
<style>.cmx-user-scene4 .cmx-text-border .cmx-path {stroke: orange}</style>
</head>
<body>
  <div style="max-width:900px; -webkit-transform:rotate(0deg);">

    <scene id="scene1">
      <label t="translate(0,346)">
        <tspan x="0" y="0em">Harlem Shake (XKCD edition)</tspan>
      </label>
      <drawing t="translate(0,31)">
        <line stroke="green">
          <point x="0" y="0"></point>
          <point x="250" y="20"></point>
        </line>
      </drawing>
      <!-- helmet; place behind head to cheat the circle -->
      <drawing t="translate(55,110)">
        <line stroke="black">
          <point x="0" y="0"></point>
          <point x="10" y="2"></point>
          <point x="-4" y="2"></point>
          <point x="12" y="5"></point>
          <point x="-7" y="4"></point>
          <point x="14" y="8"></point>
        </line>
        <line stroke="red">
          <point x="-10" y="5"></point>
          <point x="15" y="11"></point>
          <point x="-10" y="8"></point>
          <point x="14" y="15"></point>
          <point x="-10" y="11"></point>
          <point x="12" y="16"></point>
          <point x="-10" y="14"></point>
          <point x="12" y="19"></point>
          <point x="-10" y="17"></point>
          <point x="12" y="22"></point>
          <point x="-10" y="20"></point>
          <point x="12" y="25"></point>
          <point x="-10" y="23"></point>
          <!--<point x="" y=""></point>-->
        </line>
      </drawing>
      <actor t="translate(26,20) rotate(-15)" pose="-11,9|4,107|-11,99|-11,89|-18,78|-10,57|0,27|-5,2|17,29|15,15|-8,79|5,57|2,82|9,66">
        <bubble t="translate(9,11)" pose="0,0|-20,10|-81,49|14,94|-26,173|-100,127">
          <tspan x="0" y="-3em">Con los teroristas</tspan>
          <tspan x="0" y="0em">Wub wub wub wub wub wub, wub wub</tspan>
          <tspan x="0" y="1em">wub tas, wub wub, wub, wub wub wub</tspan>
          <tspan x="0" y="2em">Wub wub wub wub wub wub, wub wub wub </tspan>
          <tspan x="0" y="3em">tas wub wub, wub, wub tas wub wub tas</tspan>
          <tspan x="0" y="4em">tas wub tas wub tas</tspan>
          <tspan x="0" y="5em">wub tas wub tas tas</tspan>
        </bubble>
      </actor>
      <actor t="translate(140,22)" pose="29,1|7,103|28,69|28,59|28,71|28,51|17,32|17,2|33,26|38,1|19,45|18,64|38,52|36,30"></actor>
      <!-- table -->
      <drawing t="translate(100,10) rotate(3)">
        <line stroke="brown">
          <point x="0" y="0"></point><!-- bottom left leg bottom -->
          <point x="0" y="30"></point><!-- bottom left leg top -->
          <point x="50" y="50"></point><!-- top left leg top -->
          <point x="50" y="20"></point><!-- top left leg bottom -->
          <point x="50" y="50"></point><!-- top left leg top -->
          <point x="140" y="50"></point><!-- top right leg top -->
          <point x="140" y="20"></point><!-- top right leg bottom -->
          <point x="140" y="50"></point><!-- top right leg top -->
          <point x="90" y="30"></point><!-- bottom right leg top -->
          <point x="90" y="0"></point><!-- bottom right leg bottom -->
          <point x="90" y="30"></point><!-- bottom right leg top -->
          <point x="0" y="30"></point><!-- bottom left leg top -->
          <!-- end of wireframe - begin dodgy colouring in time -->
          <point x="55" y="50"></point>
          <point x="5" y="30"></point>
          <point x="60" y="50"></point>
          <point x="10" y="30"></point>
          <point x="65" y="50"></point>
          <point x="15" y="30"></point>
          <point x="70" y="50"></point>
          <point x="20" y="30"></point>
          <point x="75" y="50"></point>
          <point x="25" y="30"></point>
          <point x="80" y="50"></point>
          <point x="30" y="30"></point>
          <point x="85" y="50"></point>
          <point x="35" y="30"></point>
          <point x="90" y="50"></point>
          <point x="40" y="30"></point>
          <point x="95" y="50"></point>
          <point x="45" y="30"></point>
          <point x="100" y="50"></point>
          <point x="50" y="30"></point>
          <point x="105" y="50"></point>
          <point x="55" y="30"></point>
          <point x="110" y="50"></point>
          <point x="60" y="30"></point>
          <point x="115" y="50"></point>
          <point x="65" y="30"></point>
          <point x="120" y="50"></point>
          <point x="70" y="30"></point>
          <point x="125" y="50"></point>
          <point x="75" y="30"></point>
          <point x="130" y="50"></point>
          <point x="80" y="30"></point>
          <point x="135" y="50"></point>
          <point x="85" y="30"></point>
          <point x="140" y="50"></point>
          <point x="90" y="30"></point>
        </line>
      </drawing>
      <actor t="translate(102,-14) rotate(2)" pose="30,1|36,118|28,72|28,62|28,67|28,47|20,35|20,25|39,32|38,22|17,61|29,58|41,59|49,60"></actor>
      <actor t="translate(187,-4)" pose="31,1|6,128|27,82|27,72|28,71|28,51|10,42|12,23|21,49|23,28|15,63|2,61|37,66|39,53"></actor>
    </scene>
    <div id="scene2x">
    <scene id="scene2">
      <label t="translate(0,346)">
        <tspan x="0" y="0em">"And do the Harlem Shake"</tspan>
      </label>
      <drawing t="translate(0,31)">
        <line stroke="green">
          <point x="0" y="0"></point>
          <point x="250" y="20"></point>
        </line>
      </drawing>
      <!-- helmet; place behind head to cheat the circle -->
      <drawing t="translate(68,129) rotate(76)">
        <line stroke="black">
          <point x="0" y="0"></point>
          <point x="10" y="2"></point>
          <point x="-4" y="2"></point>
          <point x="12" y="5"></point>
          <point x="-7" y="4"></point>
          <point x="14" y="8"></point>
        </line>
        <line stroke="red">
          <point x="-10" y="5"></point>
          <point x="15" y="11"></point>
          <point x="-10" y="8"></point>
          <point x="14" y="15"></point>
          <point x="-10" y="11"></point>
          <point x="12" y="16"></point>
          <point x="-10" y="14"></point>
          <point x="12" y="19"></point>
          <point x="-10" y="17"></point>
          <point x="12" y="22"></point>
          <point x="-10" y="20"></point>
          <point x="12" y="25"></point>
          <point x="-10" y="23"></point>
          <!--<point x="" y=""></point>-->
        </line>
      </drawing>
      <actor t="translate(43,18) rotate(-15)" pose="-11,9|-19,119|-13,101|-13,91|-17,64|-6,58|5,29|0,4|21,30|19,16|-15,79|3,59|-3,74|14,68">
        <bubble t="translate(9,11)" pose="0,0|-20,10|-40,33|-8,51|-29,79|-86,157">
          <tspan x="0" y="0em">Wub wub wub wub wub wub, wub wub</tspan>
          <tspan x="0" y="1em">Shake</tspan>
          <tspan x="0" y="2em">Wub wub wub wub wub wub, wub wub wub </tspan>
          <tspan x="0" y="3em">Shake</tspan>
          <tspan x="0" y="4em">Wub Wub tas wub tas wub tas</tspan>
          <tspan x="0" y="5em">Con los teroristas</tspan>
          <tspan x="0" y="6em">Grrrrrrr</tspan>
        </bubble>
      </actor>
      <actor t="translate(137,14)" pose="29,1|23,147|29,96|29,86|34,92|36,67|25,48|25,18|41,42|46,17|4,88|2,111|46,103|53,136"></actor>
      <!-- table -->
      <drawing t="translate(100,10) rotate(3)">
        <line stroke="brown">
          <point x="0" y="0"></point><!-- bottom left leg bottom -->
          <point x="0" y="30"></point><!-- bottom left leg top -->
          <point x="50" y="50"></point><!-- top left leg top -->
          <point x="50" y="20"></point><!-- top left leg bottom -->
          <point x="50" y="50"></point><!-- top left leg top -->
          <point x="140" y="50"></point><!-- top right leg top -->
          <point x="140" y="20"></point><!-- top right leg bottom -->
          <point x="140" y="50"></point><!-- top right leg top -->
          <point x="90" y="30"></point><!-- bottom right leg top -->
          <point x="90" y="0"></point><!-- bottom right leg bottom -->
          <point x="90" y="30"></point><!-- bottom right leg top -->
          <point x="0" y="30"></point><!-- bottom left leg top -->
          <!-- end of wireframe - begin dodgy colouring in time -->
          <point x="55" y="50"></point>
          <point x="5" y="30"></point>
          <point x="60" y="50"></point>
          <point x="10" y="30"></point>
          <point x="65" y="50"></point>
          <point x="15" y="30"></point>
          <point x="70" y="50"></point>
          <point x="20" y="30"></point>
          <point x="75" y="50"></point>
          <point x="25" y="30"></point>
          <point x="80" y="50"></point>
          <point x="30" y="30"></point>
          <point x="85" y="50"></point>
          <point x="35" y="30"></point>
          <point x="90" y="50"></point>
          <point x="40" y="30"></point>
          <point x="95" y="50"></point>
          <point x="45" y="30"></point>
          <point x="100" y="50"></point>
          <point x="50" y="30"></point>
          <point x="105" y="50"></point>
          <point x="55" y="30"></point>
          <point x="110" y="50"></point>
          <point x="60" y="30"></point>
          <point x="115" y="50"></point>
          <point x="65" y="30"></point>
          <point x="120" y="50"></point>
          <point x="70" y="30"></point>
          <point x="125" y="50"></point>
          <point x="75" y="30"></point>
          <point x="130" y="50"></point>
          <point x="80" y="30"></point>
          <point x="135" y="50"></point>
          <point x="85" y="30"></point>
          <point x="140" y="50"></point>
          <point x="90" y="30"></point>
        </line>
      </drawing>
      <actor t="translate(112,26) rotate(2)" pose="30,1|32,156|16,114|16,104|8,92|8,72|19,62|14,33|29,65|26,39|5,103|22,80|29,101|37,94"></actor>
      <actor t="translate(182,33) rotate(5)" pose="31,1|59,117|23,99|23,89|20,73|27,60|7,46|16,22|17,50|24,30|12,73|3,75|33,86|5,85"></actor>
      <!-- helmet; place behind head to cheat the circle -->
      <drawing t="translate(130,124) rotate(-43)" pose="-2,-29">
        <line stroke="pink">
          <point x="0" y="0"></point>
          <point x="10" y="2"></point>
          <point x="-4" y="2"></point>
          <point x="12" y="5"></point>
          <point x="-7" y="4"></point>
          <point x="14" y="8"></point>
          <point x="-10" y="5"></point>
          <point x="15" y="11"></point>
          <point x="-10" y="8"></point>
        </line>
        <line stroke="green">
          <point x="14" y="15"></point>
          <point x="-10" y="11"></point>
          <point x="12" y="16"></point>
          <point x="-10" y="14"></point>
          <point x="12" y="19"></point>
          <point x="-10" y="17"></point>
          <point x="12" y="22"></point>
          <point x="-10" y="20"></point>
          <point x="12" y="25"></point>
          <point x="-10" y="23"></point>
          <!--<point x="" y=""></point>-->
        </line>
      </drawing>

      <actor t="translate(108,10)" pose="0,0|6,97|0,90|0,80|6,73|6,53|-10,33|-8,8|11,33|10,3|-10,70|-14,53|10,70|17,50"></actor>
      <actor t="translate(171,135) rotate(176)" pose="2,7|2,113|2,97|2,87|-9,94|3,71|-16,63|-9,34|15,55|24,48|-19,98|-23,124|27,98|30,130"></actor>
      <actor t="translate(226,18)" pose="0,0|0,89|0,82|0,72|0,70|0,50|-10,30|-10,5|13,30|11,6|-14,65|-12,50|17,66|19,50"></actor>
      <actor t="translate(225,18)" pose="-149,3|-148,96|-148,80|-148,70|-149,67|-149,47|-159,27|-153,-3|-139,27|-144,1|-166,77|-185,108|-132,62|-132,42"></actor>
      <actor t="translate(212,214)" pose="0,0|6,106|0,90|-13,64|10,71|12,55|20,49|35,25|25,75|33,59|-34,101|-42,81|26,86|35,114"></actor>
    </scene>
    </div>
    <div id="scene2y">
    <scene id="scene2b">
      <label t="translate(0,346)">
        <tspan x="0" y="0em">"And do the Harlem Shake"</tspan>
      </label>
      <drawing t="translate(0,31)">
        <line stroke="green">
          <point x="0" y="0"></point>
          <point x="250" y="20"></point>
        </line>
      </drawing>
      <!-- helmet; place behind head to cheat the circle -->
      <drawing t="translate(55,130) rotate(120)">
        <line stroke="black">
          <point x="0" y="0"></point>
          <point x="10" y="2"></point>
          <point x="-4" y="2"></point>
          <point x="12" y="5"></point>
          <point x="-7" y="4"></point>
          <point x="14" y="8"></point>
        </line>
        <line stroke="red">
          <point x="-10" y="5"></point>
          <point x="15" y="11"></point>
          <point x="-10" y="8"></point>
          <point x="14" y="15"></point>
          <point x="-10" y="11"></point>
          <point x="12" y="16"></point>
          <point x="-10" y="14"></point>
          <point x="12" y="19"></point>
          <point x="-10" y="17"></point>
          <point x="12" y="22"></point>
          <point x="-10" y="20"></point>
          <point x="12" y="25"></point>
          <point x="-10" y="23"></point>
          <!--<point x="" y=""></point>-->
        </line>
      </drawing>
      <actor t="translate(43,18) rotate(-15)" pose="-11,9|-40,108|-13,101|-13,91|10,80|-6,58|3,28|-2,3|21,30|19,16|-15,79|3,59|-3,74|14,68">
        <bubble t="translate(9,11)" pose="0,0|-20,10|-40,33|-8,51|-29,79|-60,174">
          <tspan x="0" y="0em">Wub wub wub wub wub wub, wub wub</tspan>
          <tspan x="0" y="1em">Shake</tspan>
          <tspan x="0" y="2em">Wub wub wub wub wub wub, wub wub wub </tspan>
          <tspan x="0" y="3em">Shake</tspan>
          <tspan x="0" y="4em">Wub Wub tas wub tas wub tas</tspan>
          <tspan x="0" y="5em">Con los teroristas</tspan>
          <tspan x="0" y="6em">Grrrrrrr</tspan>
        </bubble>
      </actor>
      <actor t="translate(137,14)" pose="29,1|14,145|29,96|29,86|34,92|36,67|25,48|25,18|41,42|46,17|4,88|-3,111|46,103|48,138"></actor>
      <!-- table -->
      <drawing t="translate(100,10) rotate(3)">
        <line stroke="brown">
          <point x="0" y="0"></point><!-- bottom left leg bottom -->
          <point x="0" y="30"></point><!-- bottom left leg top -->
          <point x="50" y="50"></point><!-- top left leg top -->
          <point x="50" y="20"></point><!-- top left leg bottom -->
          <point x="50" y="50"></point><!-- top left leg top -->
          <point x="140" y="50"></point><!-- top right leg top -->
          <point x="140" y="20"></point><!-- top right leg bottom -->
          <point x="140" y="50"></point><!-- top right leg top -->
          <point x="90" y="30"></point><!-- bottom right leg top -->
          <point x="90" y="0"></point><!-- bottom right leg bottom -->
          <point x="90" y="30"></point><!-- bottom right leg top -->
          <point x="0" y="30"></point><!-- bottom left leg top -->
          <!-- end of wireframe - begin dodgy colouring in time -->
          <point x="55" y="50"></point>
          <point x="5" y="30"></point>
          <point x="60" y="50"></point>
          <point x="10" y="30"></point>
          <point x="65" y="50"></point>
          <point x="15" y="30"></point>
          <point x="70" y="50"></point>
          <point x="20" y="30"></point>
          <point x="75" y="50"></point>
          <point x="25" y="30"></point>
          <point x="80" y="50"></point>
          <point x="30" y="30"></point>
          <point x="85" y="50"></point>
          <point x="35" y="30"></point>
          <point x="90" y="50"></point>
          <point x="40" y="30"></point>
          <point x="95" y="50"></point>
          <point x="45" y="30"></point>
          <point x="100" y="50"></point>
          <point x="50" y="30"></point>
          <point x="105" y="50"></point>
          <point x="55" y="30"></point>
          <point x="110" y="50"></point>
          <point x="60" y="30"></point>
          <point x="115" y="50"></point>
          <point x="65" y="30"></point>
          <point x="120" y="50"></point>
          <point x="70" y="30"></point>
          <point x="125" y="50"></point>
          <point x="75" y="30"></point>
          <point x="130" y="50"></point>
          <point x="80" y="30"></point>
          <point x="135" y="50"></point>
          <point x="85" y="30"></point>
          <point x="140" y="50"></point>
          <point x="90" y="30"></point>
        </line>
      </drawing>
      <actor t="translate(112,26) rotate(2)" pose="30,1|38,137|14,101|14,91|8,92|8,72|15,53|10,24|25,54|22,28|3,90|20,67|27,88|31,67"></actor>
      <actor t="translate(182,33) rotate(5)" pose="31,1|38,138|23,99|23,89|24,73|31,60|11,46|13,20|21,50|25,26|12,73|3,75|33,86|7,73"></actor>
      <!-- helmet; place behind head to cheat the circle -->
      <drawing t="translate(116,127) rotate(10)" pose="-2,-29">
        <line stroke="pink">
          <point x="0" y="0"></point>
          <point x="10" y="2"></point>
          <point x="-4" y="2"></point>
          <point x="12" y="5"></point>
          <point x="-7" y="4"></point>
          <point x="14" y="8"></point>
          <point x="-10" y="5"></point>
          <point x="15" y="11"></point>
          <point x="-10" y="8"></point>
        </line>
        <line stroke="green">
          <point x="14" y="15"></point>
          <point x="-10" y="11"></point>
          <point x="12" y="16"></point>
          <point x="-10" y="14"></point>
          <point x="12" y="19"></point>
          <point x="-10" y="17"></point>
          <point x="12" y="22"></point>
          <point x="-10" y="20"></point>
          <point x="12" y="25"></point>
          <point x="-10" y="23"></point>
          <!--<point x="" y=""></point>-->
        </line>
      </drawing>

      <actor t="translate(108,10)" pose="0,0|6,97|0,90|0,80|0,70|0,50|-10,30|-5,3|10,30|10,0|-10,70|-10,50|10,70|10,50"></actor>
      <actor t="translate(171,135) rotate(176)" pose="6,7|6,113|6,97|6,87|-8,94|4,71|-15,63|-13,36|14,51|19,41|-15,98|-19,124|31,98|34,130"></actor>
      <actor t="translate(226,18)" pose="0,0|0,89|0,82|0,72|0,70|0,50|-10,30|-4,5|13,30|8,6|-13,63|-7,50|15,63|17,47"></actor>
      <actor t="translate(225,18)" pose="-149,3|-149,109|-149,93|-149,83|-149,73|-149,53|-159,33|-159,3|-139,33|-139,3|-167,90|-176,121|-139,73|-139,53"></actor>
      <actor t="translate(212,214)" pose="0,0|0,106|0,90|-13,64|10,71|12,55|20,49|35,25|25,75|33,59|-34,101|-38,135|26,86|35,114"></actor>
    </scene>
    </div>
    
    <scene id="scene3" height="160">
      <label t="translate(-2,188)" pose="0,-10|7,-30">
        <tspan x="0" y="0em">Non Web Addicts</tspan>
      </label>
      <actor t="translate(111,7) rotate(2)" pose="-41,48|-10,105|0,88|0,78|0,68|0,48|-5,23|-10,-2|5,23|10,-2|-11,70|-4,54|17,86|-4,110">
        <bubble t="translate(88,-55)" pose="-12,5|-111,42|-144,29|-129,57|-159,64|-177,75">
          <tspan x="0" y="0em" fill="red">WTF?!</tspan>
        </bubble>
      </actor>
    </scene>
    <scene id="scene4" width="300" height="150" margin-y="3" frame="no">
      <label t="translate(11,133)" pose="-10,14|-9,5">
        <tspan x="0" y="0em">~ comix markup</tspan>
        <tspan x="0" y="1em">~ can be mixed with HTML</tspan>
        <tspan x="0" y="2em">~ WYSIWYG editor</tspan>
        <tspan x="0" y="3em">~ open-source</tspan>
        <tspan x="0" y="4em">~ backed by </tspan><tspan fill="blue">gist.github.com</tspan>
        <tspan x="0" y="5em">~ xkcd harlem shake by </tspan><tspan fill="green">JohnLBevan</tspan>
      </label>
      <actor t="translate(211,44) rotate(-4)" pose="73,-56|77,58|79,38|87,22|81,12|82,1|63,-18|57,-40|89,-14|93,-38|69,23|51,30|71,15|43,19">
      </actor>
    </scene>
  </div>
</body>
</html>
Advertisements

Leave a Comment »

No comments yet.

RSS feed for comments on this post. TrackBack URI

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Create a free website or blog at WordPress.com.

%d bloggers like this: