So, Do We Have a Winner for Code Challenge #1?

A week ago we launched Quick Code Challenge #1 and it's time to announce the winner! This challenge is quite difficult. Although there are not many entries, the quality of the winning works is unquestionable.

First, let's review some of the different approaches in the challenge.

My attempt

As the maker of challenging rules, I will give it a try first.

(Of course, I can't give myself an award...at least I don't think I can... right?!)

I tried both CSS and SVG solutions - my strengths - and decided not to use any scripts. Since there are no real random functions in CSS and SVG, the trick is to make the regular animation loops look more random than they actually are. This is my solution.

View Pure CSS "Organic Appearance" ECG animation by Alex (@alexmwalker) on CodePen

You can view the code as you like, but the main concern is:

• EKG line animation uses only one external SVG and two separate animation loops.
• A CSS animation (travel) loops the green gradient from left to right. The superimposed mask shapes the ECG line.
• I created 6 unique "ECG heartbeats" on the SVG graph and set them as sprites keyframes. I toggled these keyframes to make it look random (I added a small number at the bottom to make the keyframe switching more obvious).
• The second animation treats each "heartbeat" as a separate sprite and switches to a new sprite every time it passes - but this is timed to happen only in the dark part of the loop, when it Not visible.
• Of course, since each "heartbeat unit" uses the exact same CSS animation, we usually expect them to all show the same keyframes. The trick to make them look different is to use animation-delay to offset their start time. If we use a negative delay (e.g. animation-delay: -9s), we can jump to any intermediate point in the animation loop immediately. This is a very useful performance trick.
• All animations are controlled by a single Sass variable at the top of the CSS window—$animation-time: 5s;. Changing this number will change the large reading number and ECG speed.
• It works for Chrome and has no extensive testing, but should work anywhere.

The pure CSS method has some limitations, but I am quite satisfied with the overall effect. I need JS to improve elements that I don't like.

Third place: PaulOB

We are very lucky to have Paul as a long-term contributor, mentor and consultant to SitePoint users for over ten years (maybe close to twenty years?). In this case, he sacrificed his precious holiday time in the sun to create a wonderful SVG solution.

View Paul O’Brien (@paulobrien)’s “Ping” machine on CodePen

Paul said:

It's just an SVG for the graphics and an animated linear gradient to provide the motion effect. If I have time, I'll draw it correctly and make it responsive, not just repeating the same svg every time to make it look a little random.

Now you have to go back to the pool :)

Paul, we pay tribute to you!

(In addition, we will find ways to send you SitePoint T-shirts, coasters or other SitePoint peripheral products.)

Trial first prize: nickwatton

Although there are not many entries in this first code challenge, there is absolutely no problem with the quality of the top two works. In fact, we thought both of the best works deserved the reward, so we decided to give them a $200 Amazon gift card bonus each.

Nickwatton's work is exactly what I think.

View Nick Watton (@2Mogs) on CodePen

As Nick explains, his solution:

Use particle systems because I like them! Also, you can get a very cheap track effect by filling the drawing context with almost transparent black, which creates a faded track for my "ping" lines.

RAF makes the entire animation run smoothly, and the heartbeat animation is controlled by recursive setTimeout(). I use setTimeout() to drive a non-frame-by-frame effect, which also means I can trigger it at slightly random intervals for an organic feel. The heartbeat() method controls and slightly randomizes the heartbeat rate, which is visible on the heart and pulse lines.

Nick's JS and Canvas methods provide flexibility that other methods are hard to match. I can't imagine how to mimic those particle effects using an SVG-based approach.

Slightly randomized animation speed is also relatively easy. This is hard to forge without JS, but it does add to the credibility of this animation.

Trial first prize: davidomarmach

David submitted his work by deadline-we are glad he did. I must admit that it made me smile.

View the "Ping" machine by David Omar Flores Chávez (@davidomarf) on CodePen

First, David began to seriously study how real ECG machines produce outputs and incorporated this knowledge into his animation. He also increased fluctuating blood pressure, temperature, oxygen saturation readings, and even hemoglobin counts. This thing feels very real.

But David also added two killer X-factor elements.

1. Audio: The classic machine "beep...beep...beep..." adds a lot of drama when the heart rate increases.
2. Interactiveness: In addition to some automatic "passive randomness", David also allows users to control their heart rate through the cursor position. Moving to the far left will put your patient to sleep – moving to the right will let your patient inject adrenaline into the heart.

The limited control of ECG speed makes this unit likely to be truly useful in movie/TV scenes.

Like Nick's solution, the ECG unit is written on the canvas in JavaScript, but David uses the P5.js library. I haven't used P5 before, but with modules for drawing, animation and audio it seems like a great foundation for building a project like this.

All in all, this is a very impressive contribution.

Thanks and congratulations to David, Nick and Paul. We will contact you soon.

Next Challenge: Code Challenge #2: CSS Battle

For our next challenge, we will work with friends at CSSbattles.dev to sponsor the fourth round of battle. Over the course of three weeks, there will be 3 cash rewards and 20 SitePoint premium memberships to compete. Details will be announced in my next post.

Code Challenge 1 FAQ (FAQ)

What is the purpose of Code Challenge 1?

Code Challenge 1 is designed to test and improve your coding skills. This is a competitive platform where coders from around the world participate and use their coding knowledge to solve a given problem. The main goal of this challenge is to encourage learning, sharing and improving coding skills in a competitive environment.

What programming languages ​​can I use in Code Challenge 1?

You can use any programming language in Code Challenge 1. The challenge is not about the language you use, but about the logic and efficiency of the code. Whether you are good at Python, Java, C, or any other language, you are welcome to participate.

How to determine the winner of Code Challenge 1?

The winner of Code Challenge 1 is determined based on the efficiency and accuracy of their code. The code will be tested against multiple test cases, and the code that passes all test cases in a minimum time will be declared as winners.

Can beginners participate in Code Challenge 1?

Of course! Code Challenge 1 is open to coders of all skill levels. Even if you are a beginner, you are encouraged to participate. This is a great opportunity to learn, improve and challenge yourself.

What if I have difficulties solving problems in Code Challenge 1?

If you have difficulties in solving problems, don't worry. You can always ask the community for help. There are many experienced coders ready to help and guide you.

How to prepare for Code Challenge 1?

The best way to prepare for Code Challenge 1 is to practice coding regularly. You can solve problems from various online platforms, read coding books, and participate in other coding challenges. The more you practice, the better you will do.

If I don't know how to code, can I participate in Code Challenge 1?

While knowing how to code is a prerequisite for participating in Code Challenge 1, it is never too late to learn. There are a lot of online resources for you to learn coding from scratch. Once you have the basics, you can start participating in the coding challenge.

What are the benefits of participating in Code Challenge 1?

There are many benefits to participating in Code Challenge 1. It can help you improve your coding skills, provide you with a competitive platform for testing skills, and provide you with learning opportunities. It can also help you connect with the coding community from around the world.

How often does the Code Challenge 1 be held?

The frequency of code challenge 1 may vary. It can be a weekly, monthly or even annual event. It's best to check out the official website or subscribe to their newsletter for the latest updates.

Is there any reward for winning Code Challenge 1?

The rewards for winning Code Challenge 1 may vary. Some challenges offer cash rewards, while others offer recognition, certificates, or opportunities to participate in actual projects. Details of rewards are usually mentioned in the challenge description.

The above is the detailed content of So, Do We Have a Winner for Code Challenge #1?. For more information, please follow other related articles on the PHP Chinese website!