Wednesday, July 29, 2015

skulls!

I finally got print copies made of my comic on coping with mortality So You're Going to Die:




After the PDF drafts came back, I realized the blank sheets for the inside covers were kind of bland, so I made up a processing program to make a nice skull-themed pattern for some faux endpapers:


The thing scales completely, just by changing the initial width and height. (Plus my artist complimented my choice of colors)

Here's the code- a little hackish in terms of the loops etc but like someone said "the nice thing about making static computer graphics is, if it looks right, it's right":

color tan =#d1b48c; 
color pale = color(255, 255, 180);

int beat = 6;

float sz;
void setup() {
  strokeCap(SQUARE);
  size(500, 500);
  sz = width / 30;
}

void draw() {
  background(tan);
  stroke(pale);
  fill(pale);
  strokeWeight(width/100 * .4);

  for (int i = -beat*4; i < beat*4; i++) {
    line(i * (width / beat), -height, i * (width / beat) +( width*3), height*2);   
    line(i * (width / beat), -height, i * (width / beat) -( width*3), height*2);
  }


  noStroke();
  for (int x = 0; x < 10; x++) {
    for (int y = 0; y < 10; y++) {
      drawSkull(width/beat * x, width/beat * y);
      drawSkull(width/beat *( x+.5), width/beat *( y+.5));
    }
  }
}
void drawSkull(float x, float y) {
  noStroke();
  pushMatrix();
  translate(x, y - sz*.2);
  ellipse(0, 0, sz, sz);
  fill(pale);
  drawEye(-1);
  drawEye(1);
  drawNose();
  drawJaw();
  popMatrix();
}

void drawEye(float mul) {
  pushMatrix();
  fill(tan);
  translate(mul * sz * .2, -sz*.1);
  ellipse(0, 0, sz*.25, sz*.4);
  popMatrix();
}

void drawNose() {
  pushMatrix();
  fill(tan);
  translate(0, sz*.1);
  drawNostril(-1);
  drawNostril(1);
  popMatrix();
}

void drawNostril(float mul) {
  pushMatrix(); 
  translate(mul * sz*.125, sz*0);
  rotate(1.2*mul);
  ellipse(0, sz*.1, sz*.25, sz*.125);
  popMatrix();
}

void drawJaw() {
  fill(pale, 255);
  float xs = .9;//map(mouseX,0,width,0,2);
  float ys = .3;//map(mouseY,0,height,0,2);
  translate(0, sz*ys);
  float z = xs * sz*.9;
  rect(-z/2, 0, z, sz*.3); 
  stroke(tan);
  strokeWeight(sz*.08);
  drawJawLine(0);
  drawJawLine(-sz*.225);
  drawJawLine(sz*.225);
}
void drawJawLine(float x) {
  line(x, 0, x, sz*.3);
}


Thursday, July 23, 2015

exponentially

"The two things you need to know about exponential growth: it lets you get to large numbers very quickly. And it always runs into physical barriers."
--Maciej Cegłowski in Web Design: The First 100 Years which points out we've reached some stability in what our devices can do, and that echoes how the airline industry plateaued. We COULD build supersonic passenger jets and moonbases, but we don't. Similarly, in college in the 90s if I didn't get a new computer every year or two I was qualitatively behind in what my machine could do. Nowadays, I would barely notice issues with a laptop that was 5 years old. (And my hopes for a "techno rapture of the nerds" Singularity is diminished every time I have an interaction that reminds me of how there's just no there there with Siri...)

 Not that there's not still a lot of room for change: self-driving vehicles are going to be super-disruptive.

Also: I really like seeing transcriptions of this kind of presentation, where I can skim/read at my own pace but still enjoy photos that half the time just provide general feel and a sense of being rooted. Electronic text often lacks that; I think that's one of the reasons comprehension and retention lags with electronic readers. But to me it feels like "arbitrary" images returns some sense of the physicality that would be otherwise lost.

Tuesday, July 21, 2015

bookmarklet: standup timer redux!

A while back I made a web-based two minute timer (which I found useful for managing time during scrum standups) It was ok, but frustrating when I was sharing my screen, because I'd prefer to run the JIRA board maximized, and that webpage wasn't very space efficient.

I decided to make a bookmarklet that would inject a super minimalist timer into whatever page I was looking at: a tiny button in the topcorner, a red bar when time has expired (after two minutes) .

It's a little tricky to add a bookmarklet; I find it easier to bookmark any page, and then edit it, copy and pasting to replace the URL with this code:

javascript:
(function(){
    var targetTimeInSeconds = 120;
    var startTime;
    var timer;
    var timer_restart = function(){
        elemDiv.style.backgroundColor = 'transparent';
        elemDiv.style.width = 'auto';
        startTime = Date.now();
        if(timer) clearInterval(timer);
        timer = setInterval(update_timer_display,100);
    };
    var update_timer_display = function(){
        var time = Math.floor((Date.now() - startTime)/1000);
        elemInput.setAttribute('value', secondsToMSS(time));
        if(time >= targetTimeInSeconds){
            elemDiv.style.backgroundColor = 'red';
            elemDiv.style.width = '100%';
        }
    };
    var secondsToMSS = function(time){
      var min = Math.floor(time/60);
      var sec = time % 60;
      var sec = sec.toString();
      while(sec.length < 2) sec = "0"+sec;
      return min+":"+sec;
    };
   
    var elemDiv = document.createElement( 'div' ) ;
    var elemInput = document.createElement("input");
    elemInput.setAttribute('type', 'button');
    elemInput.setAttribute('value', 'timer');
    elemInput.addEventListener("click", timer_restart);
    elemDiv.appendChild(elemInput);
    elemDiv.style.position="fixed";
    elemDiv.style.left='0';
    elemDiv.style.top='0';
    elemDiv.style.zIndex='20';
    document.body.appendChild( elemDiv ) ;
})();

There's a lot of little things that went into making this: make it a self-executing function made a lot of sense, so it wouldn't interfere with anything on the page. And it's a good exercise in DOM manipulation without jQuery.

It's meant to be easily customized, if you didn't like the color or CSS or if 120 seconds isn't your ideal time...

Friday, July 17, 2015

chrome developer quickie: find that script

I'm dealing with one of those framework labyrinths with tons and tons of .js files.  I was having trouble locating a specific .js file I wanted... after closing every script file open under "Sources" in chrome's developer tools, I got prompted that cmd-P would do a file name search. Good to know.

Wednesday, July 15, 2015

headline of the moment

Headline of the Moment: Computer Programming To Be Officially Renamed “Googling Stackoverflow”

It makes me wonder how Stackoverflow succeeded where, say, http://experts-exchange.com/ failed (maybe because it was one dash away from looking like "expert sexchange").

Also, I'll bet you few people specifically google for Stackoverflow, it just tends to be near the top of Google results, and generally reliable.

ah, sweet javascript...

The problem of Javascript, from Cube Drone:




Friday, July 10, 2015

to sleep, perchance to sort

A kind of fun Quora, What is the dumbest code ever made that has become famous? introduced me to sleep sort:

procedure printNumber(n)
sleep n seconds
print n
end

for arg in args
run printNumber(arg) in background
end
wait for all processes to finish

So if you have a list of n integers, it will launch n threads, and each individual thread will finish after whatever the number of seconds it is. When all the threads are done, you will have finished printing your sorted list!

This is obviously a terrible idea, but I kind of love how it moves the usual "work" of sorting to a side-effect byproduct.