Goal: get the stars in the eyes to “twinkle.” I’m not sure if this will work better for the stars to change size, rotate, or both.
small goal #1: change the size of a star.
very small goal #1a: define star points using center & a single length
things discovered while getting to very small goal #1a
When creating the stars for eyes, I had used the ratios from this post in Mozilla’s tutorial on SVG given here:
<polygon points="50 160 55 180 70 180 60 190 65 205 50 195 35 205 40 190 30 180 45 180"
stroke="green" fill="transparent" stroke-width="5"/>As an aside, great documentation – I recommend it.
Based on those ratios, I created a little algorithm in R for changing the size and starting point for the star. x1 and y1 are the SVG coordinates for the top point of the star, and move1 and move2 are the legs of the little triangle in the pointy part of the star. At the time, I didn’t realize that this wasn’t a “perfect” star or that my pseudo-algorithm required the given 4/1 ratio of long leg to short leg.
x1 <- 117
y1 <- 70
move1 <- 5/5
move2 <- 20/5
z <- c(x1,y1,
x1 + move1,y1 + move2,
x1 + move2, y1 + move2,
x1 + move1 * 2, y1 + move2 + 2 * move1,
x1 + move1 * 3, y1 + move2 + 5 * move1,
x1, y1+ move2 + 3 * move1,
x1 – move1 *3, y1+move2 + 5*move1,
x1 – move1 *2, y1 + move2 + 2 * move1,
x1 – move2, y1 + move2,
x1 – move1, y1 + move2
)
round(z, 0)
However, today I wanted to generalize this algorithm more clearly. I sort-of thought that stars were fully defined by their center and a scaling value. However, when I worked through the math, I realized the “perfect” star has a leg ratio of tan(72 degrees) or ~3.1 rather than the ratio of 4 I had been using. By “perfect” I mean that the line connecting the outer points contains the inner points.
Guess lots of stars have skinnier or squat-er triangles for points (red dashed stars below in my imperfect drawing). And, my algorithm no longer worked with different ratios.
4 to 1 leg ratio on left, 3 to 1 ratio on right with the original algorithm makes star with some fat & some skinny legs.
So… time for an algorithm that works for perfect stars. Or, better yet one that works for arbitrary star ratio.
Granted, defining out star ratios isn’t perfectly aligned with learning SVG/javascript as fast as possible. But, from Mike Bostock’s talk at eyeo this June and this example, it seems that some pretty serious math underpins a lot of D3. So, it seems like a worthwhile exploration to think about shapes in terms of the math behind them since that’s how these shapes (and their movement) is being defined. Plus, it’s sort of fun 🙂
learning dynamic data viz 