{"id":268,"date":"2016-02-16T23:42:30","date_gmt":"2016-02-17T05:42:30","guid":{"rendered":"http:\/\/timothypoon.com\/blog\/?p=268"},"modified":"2016-02-19T09:01:12","modified_gmt":"2016-02-19T15:01:12","slug":"html5-canvas-particles-revisisted-with-physics","status":"publish","type":"post","link":"https:\/\/timothypoon.com\/blog\/2016\/02\/16\/html5-canvas-particles-revisisted-with-physics\/","title":{"rendered":"HTML5 Canvas Particles Revisisted \u2014 With Physics!"},"content":{"rendered":"

While I wrote a few years ago about HTML5 canvas particle effects<\/a>, I’ve gotten a lot of questions about the effect I have on my new personal site<\/a>. No, not the crazy swirling thing on the left\u2014we’ll go over that another time\u2014but the fun little bouncy ball thing. Go ahead and check it out. I’ll wait.<\/p>\n

Pretty cool, right? It’s written entirely without any framework or library like jQuery or D3.js or Three.js. While they’re pretty handy for compatibility, data visualization, and comprehensive 3D graphics rendering (respectively), I didn’t have much of a need for something so straightforward. Plus, it makes it easier to understand the mechanics of it all when I write about it.<\/p>\n

Which is right now. (Duh doy.)<\/p>\n

The Setup<\/h2>\n

HTML-wise, this isn’t terribly complex. In fact, all we need is a canvas to draw on. Like, literally.<\/p>\n

1
2
3
4
5
6
7
8
9
10
<\/div><\/td>
<!DOCTYPE html><\/span>
\n<html<\/span><\/a> lang<\/span>=<\/span>"en-us"<\/span>><\/span>
\n    <head<\/span><\/a>><\/span>
\n        <meta<\/span><\/a> http-equiv<\/span>=<\/span>"X-UA-Compatible"<\/span> content<\/span>=<\/span>"IE=edge"<\/span>><\/span>
\n        <title<\/span><\/a>><\/span>Weeeee!<\/<\/span>title<\/span><\/a>><\/span>
\n    <\/<\/span>head<\/span><\/a>><\/span>
\n    <body<\/span><\/a>><\/span>
\n        <canvas id<\/span>=<\/span>"bubbles"<\/span>><\/<\/span>canvas><\/span>
\n    <\/<\/span>body<\/span><\/a>><\/span>
\n<\/<\/span>html<\/span><\/a>><\/span><\/div><\/td><\/tr><\/tbody><\/table><\/div>\n

For styles, we can keep it simple, too. All we want is to make sure the canvas<\/span><\/code> is where we want it.<\/p>\n

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<\/div><\/td>
html,<\/span> body,<\/span> #bubbles<\/span> {<\/span>
\n    border<\/span>:<\/span> 0<\/span>;<\/span>
\n    margin<\/span>:<\/span> 0<\/span>;<\/span>
\n    padding<\/span>:<\/span> 0<\/span>;<\/span>
\n    width<\/span>:<\/span> 100%<\/span>;<\/span>
\n    height<\/span>:<\/span> 100%<\/span>;<\/span>
\n}<\/span>
\n
\nbody {<\/span>
\n    background<\/span>:<\/span> linear-gradient(<\/span>to bottom<\/span>,<\/span> rgba<\/span>(<\/span>91<\/span>,<\/span>91<\/span>,<\/span>91<\/span>,<\/span>1<\/span>)<\/span> 0%<\/span>,<\/span> rgba<\/span>(<\/span>58<\/span>,<\/span>58<\/span>,<\/span>58<\/span>,<\/span>1<\/span>)<\/span> 100%<\/span>)<\/span>;<\/span>
\n}<\/span>
\n
\n\/* Only if you want the hover effect *\/<\/span>
\n#bubbles<\/span> {<\/span>
\n    opacity<\/span>:<\/span> 0<\/span>;<\/span>
\n    transition<\/span>:<\/span> opacity 0.8s<\/span> ease-in-out;<\/span>
\n}<\/span>
\n#bubbles<\/span>:<\/span>hover<\/span> {<\/span>
\n    opacity<\/span>:<\/span> 1<\/span>;<\/span>
\n}<\/span><\/div><\/td><\/tr><\/tbody><\/table><\/div>\n

The JavaScript<\/h2>\n

While not terribly complex, let’s break it down into bite-sized chunks.<\/p>\n

1
2
3
4
5
6
7
8
<\/div><\/td>
var<\/span> canvas =<\/span> document.querySelector<\/span>(<\/span>'#bubbles'<\/span>)<\/span>,<\/span>
\n    context =<\/span> canvas.getContext<\/span>(<\/span>'2d'<\/span>)<\/span>,<\/span>
\n    particles =<\/span> [<\/span>]<\/span>,<\/span>
\n    last_draw =<\/span> undefined<\/span>,<\/span>
\n
\n    MAX_PARTICLES =<\/span> 100<\/span>,<\/span>
\n    CANVAS_WIDTH =<\/span> 0<\/span>,<\/span>
\n    CANVAS_HEIGHT =<\/span> 0<\/span>;<\/span><\/div><\/td><\/tr><\/tbody><\/table><\/div>\n

All this does is instantiate and set the necessary variables. canvas<\/span><\/code> is the DOM node, context<\/span><\/code> is the drawing context, particles<\/span><\/code> is where we’ll track all the particles we create, and last_draw<\/span><\/code> will be used for requestAnimationFrame()<\/span><\/code> calculations.<\/p>\n

The rest of the variables are constants for drawing. They should mostly speak for themselves.<\/p>\n

1
2
3
4
5
6
7
8
<\/div><\/td>
function<\/span> setDimensions(<\/span>e)<\/span> {<\/span>
\n    CANVAS_WIDTH =<\/span> canvas.clientWidth<\/span>;<\/span>
\n    CANVAS_HEIGHT =<\/span> canvas.clientHeight<\/span>;<\/span>
\n    canvas.width<\/span> =<\/span> CANVAS_WIDTH;<\/span>
\n    canvas.height<\/span> =<\/span> CANVAS_HEIGHT;<\/span>
\n}<\/span>
\nsetDimensions(<\/span>)<\/span>;<\/span>
\nwindow.addEventListener<\/span>(<\/span>'resize'<\/span>,<\/span> setDimensions)<\/span>;<\/span><\/div><\/td><\/tr><\/tbody><\/table><\/div>\n

This is how we make sure the canvas stays the right size. The CSS styles will make sure the canvas stays full, but you need to set the HTML attributes to make sure the drawing functions properly. It’ll run every resize<\/span><\/code> event.<\/p>\n

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
<\/div><\/td>
function<\/span> Particle(<\/span>)<\/span> {<\/span>
\n    var<\/span> self =<\/span> this<\/span>,<\/span>
\n        pos_x =<\/span> 0<\/span>,<\/span>
\n        pos_y =<\/span> 0<\/span>,<\/span>
\n        vel_x =<\/span> 0<\/span>,<\/span>
\n        vel_y =<\/span> 0<\/span>,<\/span>
\n        acc_x =<\/span> 0<\/span>,<\/span>
\n        acc_y =<\/span> 1.5<\/span>,<\/span>
\n        color =<\/span> 0<\/span>,<\/span>
\n        radius =<\/span> 0<\/span>;<\/span>
\n
\n    this<\/span>.reset<\/span> =<\/span> function<\/span>(<\/span>)<\/span>{<\/span>
\n        \/\/ Centralize position<\/span>
\n        self.setPosX<\/span>(<\/span>CANVAS_WIDTH \/<\/span> 2<\/span>)<\/span>;<\/span>
\n        self.setPosY<\/span>(<\/span>CANVAS_HEIGHT \/<\/span> 2<\/span>)<\/span>;<\/span>
\n
\n        \/\/ Randomize velocities<\/span>
\n        self.setVelX<\/span>(<\/span>Math<\/span>.random<\/span>(<\/span>)<\/span> *<\/span> 40<\/span> -<\/span> 20<\/span>)<\/span>;<\/span>
\n        self.setVelY<\/span>(<\/span>Math<\/span>.random<\/span>(<\/span>)<\/span> *<\/span> -<\/span>30<\/span>)<\/span>;<\/span>
\n
\n        \/\/ Also randomize the radius<\/span>
\n        self.setRadius<\/span>(<\/span>Math<\/span>.random<\/span>(<\/span>)<\/span> *<\/span> 15<\/span>)<\/span>;<\/span>
\n
\n        \/\/ And finally the color<\/span>
\n        self.setColor<\/span>(<\/span>Math<\/span>.random<\/span>(<\/span>)<\/span> *<\/span> 360<\/span>)<\/span>;<\/span>
\n    }<\/span>;<\/span>
\n
\n    this<\/span>.setColor<\/span> =<\/span> function<\/span>(<\/span>c)<\/span>{<\/span>
\n        if<\/span> (<\/span>typeof<\/span>(<\/span>c)<\/span> ===<\/span> 'number'<\/span>)<\/span> {<\/span>
\n            color =<\/span> c;<\/span>
\n        }<\/span>
\n    }<\/span>;<\/span>
\n    this<\/span>.getColor<\/span> =<\/span> function<\/span>(<\/span>)<\/span>{<\/span>
\n        return<\/span> color;<\/span>
\n    }<\/span>;<\/span>
\n
\n    this<\/span>.setRadius<\/span> =<\/span> function<\/span>(<\/span>r)<\/span>{<\/span>
\n        if<\/span> (<\/span>typeof<\/span>(<\/span>r)<\/span> ===<\/span> 'number'<\/span>)<\/span> {<\/span>
\n            radius =<\/span> r;<\/span>
\n        }<\/span>
\n    }<\/span>;<\/span>
\n    this<\/span>.getRadius<\/span> =<\/span> function<\/span>(<\/span>)<\/span>{<\/span>
\n        return<\/span> radius;<\/span>
\n    }<\/span>;<\/span>
\n
\n    this<\/span>.setPosX<\/span> =<\/span> function<\/span>(<\/span>x)<\/span>{<\/span>
\n        if<\/span> (<\/span>typeof<\/span>(<\/span>x)<\/span> ===<\/span> 'number'<\/span>)<\/span> {<\/span>
\n            pos_x =<\/span> x;<\/span>
\n        }<\/span>
\n    }<\/span>;<\/span>
\n    this<\/span>.setPosY<\/span> =<\/span> function<\/span>(<\/span>y)<\/span>{<\/span>
\n        if<\/span> (<\/span>typeof<\/span>(<\/span>y)<\/span> ===<\/span> 'number'<\/span>)<\/span> {<\/span>
\n            pos_y =<\/span> y;<\/span>
\n        }<\/span>
\n    }<\/span>;<\/span>
\n
\n    this<\/span>.getPosX<\/span> =<\/span> function<\/span>(<\/span>)<\/span>{<\/span>
\n        return<\/span> pos_x;<\/span>
\n    }<\/span>;<\/span>
\n    this<\/span>.getPosY<\/span> =<\/span> function<\/span>(<\/span>)<\/span>{<\/span>
\n        return<\/span> pos_y;<\/span>
\n    }<\/span>;<\/span>
\n
\n    this<\/span>.setVelX<\/span> =<\/span> function<\/span>(<\/span>x)<\/span>{<\/span>
\n        if<\/span> (<\/span>typeof<\/span>(<\/span>x)<\/span> ===<\/span> 'number'<\/span>)<\/span> {<\/span>
\n            vel_x =<\/span> x;<\/span>
\n        }<\/span>
\n    }<\/span>;<\/span>
\n    this<\/span>.setVelY<\/span> =<\/span> function<\/span>(<\/span>y)<\/span>{<\/span>
\n        if<\/span> (<\/span>typeof<\/span>(<\/span>y)<\/span> ===<\/span> 'number'<\/span>)<\/span> {<\/span>
\n            vel_y =<\/span> y;<\/span>
\n        }<\/span>
\n    }<\/span>;<\/span>
\n
\n    this<\/span>.getVelX<\/span> =<\/span> function<\/span>(<\/span>)<\/span>{<\/span>
\n        return<\/span> vel_x;<\/span>
\n    }<\/span>;<\/span>
\n    this<\/span>.getVelY<\/span> =<\/span> function<\/span>(<\/span>)<\/span>{<\/span>
\n        return<\/span> vel_y;<\/span>
\n    }<\/span>;<\/span>
\n
\n    this<\/span>.setAccX<\/span> =<\/span> function<\/span>(<\/span>x)<\/span>{<\/span>
\n        if<\/span> (<\/span>typeof<\/span>(<\/span>x)<\/span> ===<\/span> 'number'<\/span>)<\/span> {<\/span>
\n            acc_x =<\/span> x;<\/span>
\n        }<\/span>
\n    }<\/span>;<\/span>
\n    this<\/span>.setAccY<\/span> =<\/span> function<\/span>(<\/span>y)<\/span>{<\/span>
\n        if<\/span> (<\/span>typeof<\/span>(<\/span>y)<\/span> ===<\/span> 'number'<\/span>)<\/span> {<\/span>
\n            acc_y =<\/span> y;<\/span>
\n        }<\/span>
\n    }<\/span>;<\/span>
\n
\n    this<\/span>.getAccX<\/span> =<\/span> function<\/span>(<\/span>)<\/span>{<\/span>
\n        return<\/span> acc_x;<\/span>
\n    }<\/span>;<\/span>
\n    this<\/span>.getAccY<\/span> =<\/span> function<\/span>(<\/span>)<\/span>{<\/span>
\n        return<\/span> acc_y;<\/span>
\n    }<\/span>;<\/span>
\n
\n    this<\/span>.step<\/span> =<\/span> function<\/span>(<\/span>tdiff)<\/span>{<\/span>
\n        \/\/ Move position<\/span>
\n        self.setPosX<\/span>(<\/span>self.getPosX<\/span>(<\/span>)<\/span> +<\/span> (<\/span>self.getVelX<\/span>(<\/span>)<\/span> *<\/span> tdiff)<\/span>)<\/span>;<\/span>
\n        self.setPosY<\/span>(<\/span>self.getPosY<\/span>(<\/span>)<\/span> +<\/span> (<\/span>self.getVelY<\/span>(<\/span>)<\/span> *<\/span> tdiff)<\/span>)<\/span>;<\/span>
\n
\n        \/\/ Alter velocities<\/span>
\n        self.setVelX<\/span>(<\/span>self.getVelX<\/span>(<\/span>)<\/span> +<\/span> (<\/span>self.getAccX<\/span>(<\/span>)<\/span> *<\/span> tdiff)<\/span>)<\/span>;<\/span>
\n        self.setVelY<\/span>(<\/span>self.getVelY<\/span>(<\/span>)<\/span> +<\/span> (<\/span>self.getAccY<\/span>(<\/span>)<\/span> *<\/span> tdiff)<\/span>)<\/span>;<\/span>
\n
\n        \/\/ Detect boundaries<\/span>
\n        if<\/span> (<\/span>self.getPosX<\/span>(<\/span>)<\/span> -<\/span> self.getRadius<\/span>(<\/span>)<\/span> <=<\/span> 0<\/span> ||<\/span> self.getPosX<\/span>(<\/span>)<\/span> +<\/span> self.getRadius<\/span>(<\/span>)<\/span> >=<\/span> CANVAS_WIDTH)<\/span> {<\/span>
\n            self.setVelX<\/span>(<\/span>self.getVelX<\/span>(<\/span>)<\/span> *<\/span> -<\/span>1.0<\/span>)<\/span>;<\/span>
\n        }<\/span>
\n        if<\/span> (<\/span>self.getPosY<\/span>(<\/span>)<\/span> -<\/span> self.getRadius<\/span>(<\/span>)<\/span> >=<\/span> CANVAS_HEIGHT)<\/span> {<\/span>
\n            self.reset<\/span>(<\/span>)<\/span>;<\/span>
\n        }<\/span>
\n    }<\/span>;<\/span>
\n
\n    this<\/span>.reset<\/span>(<\/span>)<\/span>;<\/span>
\n}<\/span><\/div><\/td><\/tr><\/tbody><\/table><\/div>\n

Here is the workhorse object. It’s the Particle<\/span><\/code> object that contains all of the movement functions.<\/p>\n

It all kicks off from the reset()<\/span><\/code> function. It centers the particle within the canvas and then randomizes the initial velocity, radius, and color. Color is pretty cool because you are just randomizing against an hsl()<\/span><\/code> value and picking a hue somewhere on the spectrum with some bubble gum-style saturation and lightness.<\/p>\n

The physics of it all is super simple. If you remember your high school kinematics<\/a>, then you’ll get this. <\/p>\n

It’s all handled in the step()<\/span><\/code> function. Acceleration, velocity, and position are broken into their component X and Y vectors. The acceleration will always stay the same, though you can tweak it to make the particles fall faster or slower. Velocity is impacted by the acceleration, resulting in the position coordinates.<\/p>\n

newPosition =<\/span> oldPosition +<\/span> (<\/span>oldVelocity *<\/span> timeDelta)<\/span>;<\/span>
\nnewVelocity =<\/span> oldVelocity +<\/span> (<\/span>acceleration *<\/span> timeDelta)<\/span>;<\/span><\/div><\/div>\n

You’ll also notice inside step()<\/span><\/code> that if a particle’s edge also hits the edge of the canvas, it’ll bounce back. You can add a dampening effect by changing self.setVelX<\/span>(<\/span>self.getVelX<\/span>(<\/span>)<\/span> *<\/span> -<\/span>1.0<\/span>)<\/span>;<\/span><\/span><\/code> to some other value less than 1.0<\/span><\/code>, which is more realistic but less fun.<\/p>\n

And then if the particle clears the bottom of the canvas, it’ll reset to the center with a new radius, color, and velocity.<\/p>\n

Now for particle instantiation, which is also pretty simple.<\/p>\n

1
2
3
<\/div><\/td>
for<\/span> (<\/span>var<\/span> i =<\/span> 0<\/span>;<\/span> i <<\/span> MAX_PARTICLES;<\/span> i++<\/span>)<\/span> {<\/span>
\n    particles.push<\/span>(<\/span>new<\/span> Particle(<\/span>)<\/span>)<\/span>;<\/span>
\n}<\/span><\/div><\/td><\/tr><\/tbody><\/table><\/div>\n

And finally, we just write another step function that is called by requestAnimationFrame()<\/span><\/code>. If you haven’t used it before, it’s a nice way to tell the browser to throw to an animation callback when it’s appropriate to do so. Paul Irish still has the gold standard<\/a> on explaining why you should be using it.<\/p>\n

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<\/div><\/td>
function<\/span> step(<\/span>timestamp)<\/span> {<\/span>
\n    if<\/span> (<\/span>last_draw ===<\/span> undefined<\/span>)<\/span> {<\/span>
\n        last_draw =<\/span> timestamp;<\/span>
\n    }<\/span>
\n
\n    \/\/ Clear the canvas<\/span>
\n    context.clearRect<\/span>(<\/span>0<\/span>,<\/span> 0<\/span>,<\/span> CANVAS_WIDTH,<\/span> CANVAS_HEIGHT)<\/span>;<\/span>
\n
\n    \/\/ Draw the particles<\/span>
\n    for<\/span> (<\/span>var<\/span> i =<\/span> 0<\/span>;<\/span> i <<\/span> MAX_PARTICLES;<\/span> i++<\/span>)<\/span> {<\/span>
\n        context.beginPath<\/span>(<\/span>)<\/span>;<\/span>
\n        context.fillStyle<\/span> =<\/span> 'hsl('<\/span> +<\/span> particles[<\/span>i]<\/span>.getColor<\/span>(<\/span>)<\/span> +<\/span> ', 80%, 70%)'<\/span>;<\/span>
\n        context.arc<\/span>(<\/span>particles[<\/span>i]<\/span>.getPosX<\/span>(<\/span>)<\/span>,<\/span> particles[<\/span>i]<\/span>.getPosY<\/span>(<\/span>)<\/span>,<\/span> particles[<\/span>i]<\/span>.getRadius<\/span>(<\/span>)<\/span>,<\/span> Math<\/span>.PI<\/span>*<\/span>2<\/span>,<\/span> false<\/span>)<\/span>;<\/span>
\n        context.fill<\/span>(<\/span>)<\/span>;<\/span>
\n
\n        \/\/ Force particle movement calculations<\/span>
\n        particles[<\/span>i]<\/span>.step<\/span>(<\/span>(<\/span>timestamp -<\/span> last_draw)<\/span> \/<\/span> 50<\/span>)<\/span>;<\/span>
\n    }<\/span>
\n
\n    last_draw =<\/span> timestamp;<\/span>
\n    window.requestAnimationFrame<\/span>(<\/span>step)<\/span>;<\/span>
\n}<\/span>
\nwindow.requestAnimationFrame<\/span>(<\/span>step)<\/span>;<\/span><\/div><\/td><\/tr><\/tbody><\/table><\/div>\n

The gist of it is you clear the canvas and then iterate through the list of particle objects to draw them and step()<\/span><\/code> them. In this case, I’ve taken the time delta and scaled it down so it animates at a reasonable rate.<\/p>\n

If you’re not familiar with canvas drawing, these steps are rather uncomplicated. You start be defining a new path, its fill style (our random HSL color), drawing a circle via the arc()<\/span><\/code> context method<\/a>, ad then filling it. Easy!<\/p>\n

Party Time!<\/h2>\n

And that’s it! You can check out a live demo<\/a> if you don’t believe me.<\/p>\n

If you have any questions, shout at me in the comments. I’ll gladly answer anything you’ve got. It’s pretty simple stuff, but even simple things are hard the first time you do it. Having someone light the way makes it a lot more digestible.<\/p>\n

Bye, Internet friends!<\/p>\n","protected":false},"excerpt":{"rendered":"

While I wrote a few years ago about HTML5 canvas particle effects, I’ve gotten a lot of questions about the effect I have on my new personal site. No, not the crazy swirling thing on the left\u2014we’ll go over that another time\u2014but the fun little bouncy ball thing. Go ahead and check it out. I’ll wait. Pretty cool, right? It’s written entirely without any framework or library like jQuery or D3.js or Three.js. While they’re pretty handy for compatibility, data visualization, and comprehensive 3D graphics rendering (respectively), I didn’t have…read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":270,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[1],"tags":[15,16,22,18,19],"class_list":["post-268","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-code","tag-html","tag-html5","tag-html5-canvas","tag-javascript","tag-particle-animation","et-bg-layout-dark","et-white-bg"],"jetpack_featured_media_url":"https:\/\/timothypoon.com\/blog\/wp-content\/uploads\/2016\/02\/html5-canvas-particles-revisisted.png","jetpack_shortlink":"https:\/\/wp.me\/p462yg-4k","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/timothypoon.com\/blog\/wp-json\/wp\/v2\/posts\/268","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/timothypoon.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/timothypoon.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/timothypoon.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/timothypoon.com\/blog\/wp-json\/wp\/v2\/comments?post=268"}],"version-history":[{"count":2,"href":"https:\/\/timothypoon.com\/blog\/wp-json\/wp\/v2\/posts\/268\/revisions"}],"predecessor-version":[{"id":271,"href":"https:\/\/timothypoon.com\/blog\/wp-json\/wp\/v2\/posts\/268\/revisions\/271"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/timothypoon.com\/blog\/wp-json\/wp\/v2\/media\/270"}],"wp:attachment":[{"href":"https:\/\/timothypoon.com\/blog\/wp-json\/wp\/v2\/media?parent=268"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/timothypoon.com\/blog\/wp-json\/wp\/v2\/categories?post=268"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/timothypoon.com\/blog\/wp-json\/wp\/v2\/tags?post=268"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}