Tuesday, November 6, 2012

Some basic mental warmups

Am back in Munich for another week. Switzerland was exceptionally lovely and fun. More words and photos on that later.

Have finally started spending some quality time with my laptop, trying to kick my brain back into shape. Decided some simple math/graphics projects would be a good warmup. I know that I'll need to tumble into the interview circuit at some point soon and I know I *can* be good at it... but it (at least the white-boarding part) is definitely a skill that I need to retrain up.

On a whim I was interested in animating vines unfurling/growing. Some basic Googling failed to provide me any existing algorithms so I had to figure out what I want. Turns out the Logarithmic spiral [x = aebtcos(t), y = aebtsin(t)] is what I wanted (as opposed to the Archimedean spiral) and so I waded into battle against Javascript, logarithms, and trigonometry. As I put it to Adam last night, it felt like I was doing one pound dumbbell curls with my brain. It was hard (despite being simple) but I felt good when things finally fell into place.

Used jsfiddle when working, which was pleasing. Here's the link in case this iframe doesn't work...

If you go to the Result tab you'll see the demo curl I made. Am still struggling to wrap my brain around what all of the parameters do/mean but this widget makes it a little easier. Next step: cleaning up the code and diving into b-splines (which, I will confess, I have already found helpful code/algorithms for here, for the vines)

Interesting (to me?) to look back at the little things I stumbled over:

  • Omg- trig! Bane of my high school math experience! The problem I ran into here was that I wanted to rotate the spiral so that I could hold it's "tail" in a fixed position. (left alone it just spirals around the origin). That meant I spent *at least* half an hour trying to solve for θ (x′, x, and y being known) : x′ = xcos(θ)-ysin(θ) I was pulling my hair out trying to figure out how to isolate that fucking θ... the key to success was realizing I was solving for when x′ was 0 and that sine over cosine is a tangent. Sounds simple, but that took some time...

  • I swear, every time I look at the canvas element and then look away, I forget everything. Another (smaller) stumble I had was keeping everything on the canvas... turns out that when you've got logarithmic stuff, things just fly off the page with astounding speed. Took longer then I'd like to admit to figure out what value I need to scale to and then to remember/realize the scale method call had to happen before the path. (turns out putting the scale right before the .stroke() doesn't get you much). Also had to remember to scale line width. If you check out the equation for the spiral you'll see that the value a is supposed to scale it... which I realized later, but found that the animation was smoother when I let the canvas scale it rather then squishing the equation myself.

  • Pinning x=0 to one location was pretty neat, but wasn't actually the look I wanted (the spiral sat atop the point rather the to the right of it as I hoped) so I had to add in a "tail". The fact that I STILL can't figure out how to just solve the equation for a value when x is, like, -50 or something shames me but... whatever. I just manually added a fixed number of "steps" and computed that end point. Lame, but some times programming is about finding a solution and moving on rather then dwelling on the optimal solution mid-project.

  • As I move out of jsfiddle and try to make this code usable, I'm finding Javascript Function Invocation Patterns to be a fun/helpful read. I feel like I know most of it, but it has helpful points/gotchas.

In other news :

  • I am now 29.

  • I saw Skyfall last night. It was pretty sweet. Highly recommended if you're an action/Bond fan. Best Craig!Bond by far, plus evil!Javier Bardem. That man is golden, no matter how bad of hair-cut you put on him! Vague internet rumors of Idris Elba as a potential future Bond make me happy and maintains my interest in the franchise. I loved Noamie Harris in this film as well, she plays kick-ass so well (see: 28 Days Later)

  • I rode a cow this last Sunday.

  • I wish I didn't like Taylor Swift but damnit, I do.

  • The US Presidential elections. Need I say more? Adam and I will be up, watching late tonight, as the polls close in the US. We both voted before we left. GO VOTE. I WILL THINK LESS OF YOU IF I EVER FIND OUT YOU DON'T VOTE (of course I'm pro-Obama, but having things/people I don't like pass/win is much easier to swallow if there's high voter turnout. Then that *really* means "the people" want such a (stupid/silly/evil) thing... but when (stupid/silly/evil) things pass/win with low voter turnout it's just... really fucking depressing)

1 comment:

  1. Another interesting take on JS function invocation: http://yehudakatz.com/2011/08/11/understanding-javascript-function-invocation-and-this/

    ReplyDelete