Tweening a vector path in SVG

I started looking at ways to tween a path, tried to do it with straight svg so I could spend a little time with the format.

I got it working. Sort of. Click to see the result:

svgtween

What I learned:

It IS possible to tween a path with svg(like a shape tween in flash), but it’s severely limited.

First of all, if you’re going to animate properties, SVG is great. x/y position, rotation, etc. very straightforward and there are plenty of good examples online. Many of the popular SVG libraries such as RaphaelJS utilize this and can be very powerful. Likewise animation of these objects ALONG a path is also very easy and straightforward.

To animate or tween an actual path is different. You must first get all the points into the xml structure that SVG uses(you can save in illustrator/many other programs), and put them in a ‘from’ or ‘to’ attribute in an < animation > tag. Here’s a sample ‘from’ attribute:

from=”M12.309,198.552c0-56.941,17.208-101.701,51.626-134.277c34.417-32.573,81.855-48.863,142.316-48.863 c60.124,0,107.397,16.247,141.814,48.737c34.418,32.494,51.626,77.294,51.626,134.403c0,56.944-17.169,101.618-51.5,134.026 c-34.334,32.408-81.647,48.612-141.94,48.612c-60.461,0-107.899-16.243-142.316-48.737 C29.517,299.963,12.309,255.328,12.309,198.552z”

This is a version of the SMIL specification for animation. The string is full of line commands specific to this language. note the ‘M’ at the beginning, followed by two values 12.309 and 198.552 – this is the ‘MoveTo’ command with an x and y value. Next there’s a ‘c’ which is a ‘Curve’ command; bezier and cubic curves are supported. At the end there’s a ‘z’ which serves as a closing indicator; the z command must always be the final character in the string. More info on all these commands used on the < path > element can be found here.

The big bummer is this:

Currently you have to use the same number of vertices in both path-elements, and they have to be of the same type and appear in the same order in the other path-description. You should also orient both polygons in the same direction (left-right and right-left would produce unwanted results).

So as you can see in my example it IS possible, but you need to plan it out so that you create shape A’s path and shape B’s path in the exact same way with identical curve types, points, etc.

Here’s the workflow I found:

(FYI in the above example I have two svgs on the page that are both set as masks of an image; the one on the right is the one that animates)

  1. I created one shape in illustrator, the more complex shape.
  2. I duplicated the complex shape and moved the points to create a second shape, careful not to add vertices or change from bezier to linear curve type etc – ONLY MOVE THE POINTS (just use the direct selection tool and move singular points to be safe)
  3. fyi to confirm point count you can select the path, then go path>simplify and it will show you current point count on that path…
  4. I save that svg file, then copy/paste those paths into another svg with the animation information.
  5. NOTE: the paths are placed within an element in the svg file that corresponds to the layer name that it’s on in illustrator. If you keep both shapes on different layers in illustrator and name them clearly it will help keep your svg files organized.
  6. NOTE #2: If you create your shape and it’s very simple, ie only straight lines, it will likely get saved as a _polygon instead of a _path which animate in a completely different way than paths, so I recommend adding a bezier handle to at least a single point(and the identical corresponding point in the second shape).

 Other Libraries:

I’ve seen other libraries that possibly solve this, but I haven’t spent any time exploring them.

This one looks interesting: http://jonobr1.github.io/two.js/, but it says it’s ‘renderer-agnostic’ which leads me to believe that they’re just using canvas in those instances. Still, that’s potentially a solid option.

 

 

water surface in javascript and canvas

waves

 

We were talking about physics libraries and water and performance at work, I decided to mess around with that.

I have a single target point that oscillates with increasing velocity, then it dampens back down.

The points to the right of the target point all tie into their previous partner’s position at a consistent percentage, making the gelatinous or bendy effect; it looks like a wand waving or something.

The points to the left of the target point all tie into their next partner’s position, then have a decay added in, resulting in what looks like decaying waves.

The algorithm is kind of hacked together but this is straightforward math, I often use it in after effects expressions etc – I’m sure this could be optimized quite a bit.

Logging Measurable Life Events

(These are a few posts from my tumblr about the timeline project – moving them over here so they’re all in the same place. Some of these are WIP that never P’ed.)

 

When recording measurable experiences in our life, we can categorize events in at least one of three ways:

  1. Events in Time
    The day you graduated. The day your mom died. The day you got married.
    These are points in time that are what we consider events or happenings.
  2. Events that Span Time
    The time you spent living in Hawaii. The week you spent in jail. The job you worked at for three years.
    These are events that series of events that are measured not as a moment but more as a period or era within our lives.
  3. Parameters that Change Over Time
    Your weight. Your age. Your net worth. The number of children you have. Quantitative measurements that are often intertwined with or supplement the two previous event types.
    Additionally this type of measurement can be qualitative, i.e. general happiness, relative quality of life, etc but measuring this way often ends up being subjective and difficult to objectively measure.
    This type is not an event type, but rather is supplemental in tying the previous two types together.

The process of recording events clinically in this way at first seems unrelated to the emotional stories often told in diaries, but if you were to strip down someone’s biography or journal you could very clearly gather all of the above. Furthermore, without these measurements in a journal the emotional stories would lose their context and become meaningless.

 

timeline

Our Multiple Online Personalities

(These are a few posts from my tumblr about the timeline project – moving them over here so they’re all in the same place. Some of these are WIP that never P’ed.)

 

Most all of us are not always the same person:
I walk around comfortably in my underwear at home, but I would never do that at work; I do it at the doctor’s office but it’s not comfortable then.
I say bad swears with my college buddies and I talk differently when I’m helping the Boy Scout troop each week.
I am quieter and more serious around my grandmother than I am when I’m with a buddy at a concert.

Our current online presence does not allow us to be different people. We get one list of Google search results. We get one status update. We get one list of photos. There’s an unmeasured correlation between the number of fb friends a person has and the subdued tone of their status updates.

People speculate that potential employers will find unflattering photos, but will not be judgmental because they have their own embarrassing pics; while this is true to an extent, there will always be a need to present yourself differently to other people.

Just this week Google Plus launched, with one of it’s biggest strengths being a solution for this; we’ll see how it pans out.

The ability to define yourself differently to different people from one medium is definitely lacking currently online, and will definitely be a necessary part of the future of our online selves.

Analyzing a Friendship: Part 2 – Using Cold, Clinical Data to Deepen our Relationships

(These are a few posts from my tumblr about the timeline project – moving them over here so they’re all in the same place. Some of these are WIP that never P’ed.)

As noted in a previous post, the basis of a relationship is shared experiences.
That said, the more information you have about a person the more you’re able to connect with, relate to and more deeply understand them.

You’re out with a new friend. They say “Let’s go get sushi, I know a great place”. This guy might be an award-winning sushi hobbyist. He might be an impressively-experienced foodie. He might be a lifelong fisherman. He might have spent most of his life in Japan. He might be married to a Japanese woman. He might not even like fish but ‘totally loves’ california rolls.

Chances are you’ll discover many of these things about this guy over dinner. That’s what we do over dinners; we talk. Talking is great, but not the most important type of sharing experiences.

We often end up telling the same stories to new friends; there’s that one funny story about you and that girl and the boat, people always love that one.
You always end up trying not to brag about that award you won but it was the catalyst to your current situation; it always gets the same reaction, followed up by the same ignorant question followed by the same witty response that you give.
There’s always the awkward conversation about your messy divorce and you dread having to stumble through the details every time you meet someone new.

Think about the quality of the conversation; how it differs from a conversation with a sibling, with your wife, with your best friend since 5th grade.
These conversations with people you’re close to are less of a “sharing-time” show and tell, they’re often much deeper. Experiences are still shared, but they tend to be much more meaningful, much more intimate.
They know your story. You know theirs.
These are newer, richer conversations and experiences.

What would happen if you could share your story with people you meet without having to actually share your story? They read your online profile, read your history, get to know you from what is an essentially tailored journal.

 

Context Gives Meaning (or the ‘Fat Chick’ Analogy)

(These are a few posts from my tumblr about the timeline project – moving them over here so they’re all in the same place. Some of these are WIP that never P’ed.)

The more we know about someone, the more we are able to understand them.

‘Fat Chick’ Analogy
Imagine I show you a picture of a girl; she is 39 years old. She’s about 5’3”.
She weighs 420 lbs.
She is sitting on a couch at what appears to be a frat house, appearing extremely inebriated.
Her shirt is way too tight and she’s falling out of it. She has a huge smile on her face and her eyes are almost closed.

Based on this one photo you’re going to make some assumptions.
Think about these assumptions; you’re probably basing them on yourexperiences with frat houses, 450-lb people, big smiles, being drunk, etc.
Humans tend to react to things based on what they can relate to.
That’s normal.

Normal, but not fair to that girl.
She is different from you. Her experiences are different and you’re attempting to understand her situation based on 1/125th of a second frozen in time in a photograph.

There is no context to this photo, and without context there is no meaning, and without meaning there is no understanding.

Now imagine I show you a second “before” photo of this girl, taken 6 months previous.
Same girl, but in this photo she weighs 700 lbs.(To drive the point I also show you a pic of her in high school, where she weighed 550 lbs.)

Your reaction to her now is probably different than it first was; you understand why she’s smiling in the first photo. That shirt she’s wearing makes a lot more sense.

Suppose the “before” picture from 6 months ago that I’d shown you was not the 700-lb frame but rather a family photo; in it is this same woman, appearing to be no more than 100-lbs, posing with her stiff and stern-looking husband and their 4 children, the oldest appearing to be no more than 5 years old. Now the drastic change denotes a rapid downfall into what looks like a really sad place.

The more information about this person you get, the more you gain context, which helps you understand her.

Analyzing a Friendship: Part 1

(These are a few posts from my tumblr about the timeline project – moving them over here so they’re all in the same place. Some of these are WIP that never P’ed.)

You have a limited number of relationships/friends in your life.

At its core, a relationship is based on two things:

  1. shared experiences
    you can’t be BFF’s without having spent some time together and without having shared some experiences together.
  2. understanding(gives context which equals empathy)
    when you learn about someone you understand their background more, which gives context into their life; you understand who they are and whythey are who they are.
    This is basic factual storytelling; when your friend shares a story with you, you learn about them by their inflections, personality traits etc that come out in the story. But you also learn facts about them within the story; where they grew up, that they can’t swim, etc.

    This is the necessary part of a friendship that Contxt aims to accelerate and improve.

Adding a Third Dimension to Your Online Presence

(These are a few posts from my tumblr about the timeline project – moving them over here so they’re all in the same place. Some of these are WIP that never P’ed. NOTE: this was written before FB Timeline so in that context it makes more sense…)

I love facebook(insert twitter/linkedin etc). I use it daily as a tool to keep connected to the people in my life. I use it to keep up with my siblings as well as more distant relatives; I keep tabs on coworkers past and present; I stay connected to people I’ve met from around the world by viewing their profiles on this social-media platform. Likewise, when I want to share what’s happening in my life I update my profile as an attempt to communicate and keep in touch with these people.

One drawback to the current state of one’s online presence is the lack of dimensionality; my current facebook profile tells you a bit about what i’m doing currently, the concert i’m attending this weekend, etc but doesn’t go much beyond that.

A profile consists of:

  • current photo
  • current age
  • current town
  • current job/school
  • current/recent checkins

etc but it’s really just a sliver of a representation of a person’s life.

The missing element from the online profile is time.
If you want to add dimension or depth to the profile you need to add TIME.

There are some attempts at adding time to the profile, such as:

  • photos grouped by event,
  • basic job history
  • limited school history
  • hometown
  • date of birth
  • add-ons, such as the ‘where i’ve been’ map

but not a ton beyond that.

privacy vs. being private

(These are a few posts from my tumblr about the timeline project – moving them over here so they’re all in the same place. Some of these are WIP that never P’ed)

Privacy examples:

http://www.msnbc.msn.com/id/41082627
Bronk targeted his victims by searching Facebook for women who posted both their e-mail addresses and also personal information such as their favorite foods, their father’s middle names, their high-school mascots and their favorite colors.
Such details are routinely used in “identity challenges” when changes are made to online personal accounts..

so this kid:

  • searched on facebook for accounts with publicly facing email accounts
  • if the emails were from hotmail for example, he would go to hotmail and say ‘i forgot the pw of this account’
  • then he would get a security question. he would search on the facebook profile for the answer.
  • once in, he would change the pw and own the account.
  • he would then go to the ‘sent mail’ folders, find naked pics and proceed to email them to everyone on the contact list.

the kid then got all perverty but this first part is pretty funny.

Popcap games are great; they compare your scores against all of your facebook friends – i play a game, get a score, and then see where it compares among my friends who also have played the game.
An unintended piece of data: it also tallys how often you play; rather, it gives you an award depending on your score…all but the lowest scores earn you a medal so you essentially get one each time you play.

You can get an idea about which friends might have addictive personalities or just too much free time by monitoring their playing habits.

The concern w/ online privacy is valid; ppls gettin’ their cc numbers stolen all over the place.

Big data conferences have historically been 100% for B2B clients, but in the last couple years there have been B2C product offerings. People are increasingly wary of what they’re sharing online, and for good reason.

We need to understand that privacy is possible without necessarily being private. We can live our lives digitally, with privacy, while being more socially transparent. Being private keeps us from being able to share who we really are.

As our online presence grows and further mirrors our IRL lives, privacy will be exponentially imperative; being private is merely a personality trait.

 

Canvas Particles

This is a canvas experiment that turned out pretty:

dust_result

 

I started with a 2-color black/white gif which gets loaded into a canvas and hidden.

Then i just have particles go to a point and then upon arrival choose a different point.

At each iteration i check the current pixel value; if it’s black the dot draws black; otherwise it chooses a color from within a range.

There is some inaccuracy when the colors are drawn; this is by design. I’m taking the previous x and y position and performing the calculations based on that. To remedy this you can just put the color-selection code after the point at which the x and y positions are set…i found this to be too precise, resulting in a boring visual.

Performance

It runs awesome on Safari on iOS and on OSX. On Chrome on iOS it runs great, but on OSX it’s super-chuggy. I have it at ~100 particles so that it runs decent on Chrome; Safari can handle 300-600 particles easily.

I switched out the setInterval with the newer requestAnimationFrame – I noticed a little difference but it wasn’t a ton.

I could definitely optimize this more; in the future I’ll try the following:

  • Put the source image pixel data into an array – the context.getImageData() is really processor intensive. I think putting it all into an array will reduce the load greatly. This would also eliminate the need for multiple canvases.
  • Put the colors into an array – the random color is chosen from a range. It would make sense to just have a lookup table of a few colors and pull from there.  
  • Use a better easing algorithm – this is just using the Xeno’s Paradox calculation…I haven’t optimized any of that but I think that could be done in a less taxing way.
  • It would be cool to have this pull from different images after a time, the result being a gradual transition from image one to image 2.
  • It would also be cool to try 3-color images, 4-color images etc.

Here’s another version:

Screen Shot 2013-05-02 at 4.31.17 PM