SitePoint UI Code Challenge #1 – Heartbeats

[alexwalker]

Do you ever find that the UI screens that we see in blockbuster movies, television, and games are so much more fun than the UIs we might build at work? Here’s your chance to code something fun and maybe even win a $100 Amazon Gift Card.

Starting from today, we’ve got 4 quick fortnightly UI coding challenges to test your skills and problem-solving abilities. You get the chance to show off your skills while maybe learning a trick or two from others. There is no single ‘correct’ way to tackle these challenges.

At the end of the week (next Wednesday) we’ll publish a post on the best solutions submitted and pick our all-around favorite for the prize. That winner will receive:

• The glory of being adjudged our favorite solution
• A $100 Amazon gift card

We’ll also give away 2 Premium memberships to runners-up.

Let’s get the first challenge started!

Challenge #1: Create a ECG/EKG* Heart Rate UI Animation

Clockwise from top left: Luke Cage (S01E10), Cabin in the Woods (2012), Oblivion (2013), & Casino Royale (2006).

We’ve all seen this common movie, television, and games trope – the ‘real-time heart rate monitor/electrocardiograph’. Sometimes it’s a plot point in a contemporary medical drama (i.e. Grey’s Anatomy, ER, etc). More often we see it as cutting-edge technology for elite super-spies (e.g. James Bond or Mission Impossible) or the far-future bio-monitoring of sci-fi space-marines (e.g Aliens or Oblivion). Design teams spend thousands of hours crafting these FUIs (Future/Fantasy/Fictional User Interfaces) to look as authentic and believable as possible. Now it’s your turn.

The Task

Your task – should you choose to accept it – is to create an animated ECG/ECG display panel. You can use whatever technologies you like – as long as you can present your solution as a CodePen . That includes but isn’t limited to:

• HTML/CSS
• Canvas
• SVG
• WebGL
• D3
• Any other web technology

Generally, these UI screens are shown in ‘dark mode’ and dominated by at least one (but often more) left-to-right-looping graph lines tracing out a heart rate. Feel free to expand the UI to include other cool elements, but the squiggly, beating graph line/s is the core element we’re interested in.

In the CodePen below, I’ve dropped in a temporary animated GIF as a rough visual guide, but please take your inspiration from whatever movies, TV shows, or games you like.

Fork this Codepen to Start

Things to keep in mind…

1. Humans are NOT perfect clockwork machines – ideally there should be some organic or random-looking variation in the ECG/EKG line/s.
2. Usually the line starts sharp but fades to black before being overwritten.
3. No GIF animation, video or After Effects – we’re looking for a code solution.
4. Solutions should be a fork of the CodePen above (so we can keep track of solutions). Feel free to add/change/remove whatever you like from the fork.

How do I enter?

Easy. Just post a link to your CodePen.io fork in the comments below with a short explanation of what you did and why. If you’ve got more than one idea, you can enter more than once. For simplicity, don’t enter more than one variation on the same idea.

How will you pick the winner?

We’ll be picking the winner based on three criteria:

1. Code elegance and effectiveness: Fewer files is better. Fewer characters is better. Simplicity and code readability is rated highly.
2. Look and feel: The more ‘movie authentic’ your UI looks the better
3. Cleverness/inventiveness: This is pure X-factor stuff we haven’t thought of. Scriptability, audio, 3D, whatever…

There’s no pure mathematical formula for picking the winner, so it will come down to what Kishen, Joel and I agree on.

When will you judge it?

The Challenge opens for entries on Wednesday 5th June at 9:00 am PST and closes a week later ( Wednesday 12th June 9:00 am PST ).

Best of luck. We’re looking forward to what you can come up with.

(* ECG/EKG: Electrocardiography)

[mrlagmer]

Ok this is all I got it is a live track of my heartbeat: https://codepen.io/mrlagmer/pen/eaavJV

Uses react and takes a prop of BPM to set the starting heart rate. It will then randomly go up down or stay the same each second. It should also be real speed in that if you put in BPM of 120 it should beat 120 times a min.

Let me know how good/bad you think it is.

[alexwalker]

Nice one. That slight randomness is the sort of thing I’m building my EKG readout on.

[alexwalker]

Okay, we’ve got about a day left for competition entries but no contenders yet.

I’ve built a Pure CSS solution that I’m going to post here as inspiration. I’m going to refine it a little more, but I thought I’d get something live first.

See the Pen Pure CSS 'organic-looking' EKG Animation by Alex (@alexmwalker) on CodePen.

Notes:

• The EKG unit only uses one external SVG and two separate animation loops.
• There are 6 different ‘EKG heartbeats’ provided by the SVG graphic. I’m switching their positions to make them look randomized (I’ve added tiny numbers at the bottom to make the order switching more obvious).
• One CSS animation loops the green gradient from left to right. An overlaying mask creates the EKG line.
• A second animation treats each ‘heartbeat’ as a sprite and switches them – but only in the dark section of the loop when it can’t be seen.
• Even though each heartbeat uses exactly the same CSS animation, we can make them all appear different by offsetting their timings with negative animation-delays.
• All animation is controlled by a single Sass variable at the top of the CSS window - $animation-time: 5s;. Changing that number will alter the big readout number and the EKG speed.
• It’s built for Chome but should work anywhere.

[nickwatton]

Hey, nice challenge, thank you!

So here is my attempt…

Uses particle systems, because I like them Also, you can get a very cheap trail effect with canvas by filling the drawing context with a nearly transparent black, which makes the fading trail for my ‘ping’ line.

RAF keeps the whole animation running smoothly, with the heartbeat animations controlled with a recursive setTimeout(). I am using the setTimeout() to drive effects that are not per-frame, and it also means I can fire this at slightly random intervals, for an organic feel.
The heartBeat() method controls and lightly randomizes the pulse rate, seen in the heart and pulse line.

[PaulOB]

Hi Alex,

Only just seen this today otherwise I would have had a proper go but I’m away on holiday and don’t have the time or a decent computer to work on.

However I couldn’t resist just making a basic start so knocked this up in about 30 mins which is why its very rough around all the edges.

It’s just an svg for the graph and an animated linear gradient to provide the motion effect. If I had time I would draw it properly and make it responsive and not just repeat the same svg each time to make it look a little bit random.

Must get back to the swimming pool now

[alexwalker]

Awesome work, Nick. This is exactly the sort of thing I was looking for - not only a cool solution but an approach that I would have struggled to write and can learn from. Which is the really the reason for running these challenges.

Randomizing the shaping of your EKG line looks great but I think it’s the subtle speed shifts that really sells it. Varying the overall speed of the animation over time is something I wanted to do with mine but it’s tricky sticking to a 100% CSS solution (though I’m not ruling it out yet - it’s still percolating in my mind ).

Safe to say you’re in a strong position.

[alexwalker]

Ha! Nice work, Paul. Your sacrifice of sun and swim is much appreciated.

I played around with both SVG and CSS approaches before going with the CSS for this one. There’s that ‘SVG dash-offset’ trick that draws lines that seems like the obvious solution. But trying to get the line to trail off to nothing stumped me – and a solid-ending tail on the line looked wrong.

How were you thinking of randomizing the SVG line? JS or more of a pattern shuffle like mine?

[PaulOB]

@alexwalker

How were you thinking of randomizing the SVG line?

I was just thinking of making the svg much much longer so you didn’t notice the repeat so obviously and then animating it back and forth:)

[davidomarfch]

Hi! I’m glad I tried this, I didn’t know how much I wanted to.

Ok, this is what I got to: https://codepen.io/davidomarf/full/ydyzaa

To see the heart rate accelerate or decelerate, move the mouse across the screen. It will change accordingly to the X coordinates of your mouse. Unfortunately, I capped the bpm at 200. Otherwise, it mis-behaves.

Edit: Forgot to say that, even if you leave the mouse at a fixed position, the bpm will still oscillate.

If not activated by default, click on the page to allow sound to reproduce.

---

As soon as I tried to replicate the lines that a real ECG can generate, I got hooked.

The generation of values was designed after looking at this image in Wikipedia and this video on YouTube: watch?v=LEaRyzudjw4. (sorry, as new user, I can’t post more than 2 links in a post)

I replicated
a) the PR interval with the positive part of the sin function, and the rest set to 0,
b) the QRS complex by generating 3 different magnitudes, one around -10, one around 80, and one around -20, and then interpolating, and
c) the ST + T segments like I did with the PR interval, but translating the function by half a rotation

The rest of the values oscillate around what is expected to be “normal” in a healthy person. They don’t change accordingly to the bpm, which had been ideal: if you spend time with your heart beating at 0 bpm, you won’t have the vital signs of a healthy person, of course.

I left the text-shadow, and video interlace effect that alexwalker posted in his CSS example. If needed, comment the lines 6-17 of the CSS.

The project is done using p5js. I included the core library, and p5.sound to produce the soundwave. The main part of it is done in JavaScript. HTML and CSS were used just to achieve the general layout.

There are some things I don’t feel very comfortable, like some hard coded values I used and never modified, but I’m very happy with what I got to.

[alexwalker]

You just got your entry in before cut-off time, but I’m glad you did, David. This is a really cool take on the idea. The competition just got serious!

The research you put in really shows, the interactivity is cool and the element of sound is a killer touch!

It’s late here (9pm) so I’ll have to touch base with the other two judges first thing tomorrow, but this is great. Nice work.