Alors, avons-nous un gagnant pour Code Challenge # 1?

Il y a une semaine, nous avons lancé Quick Code Challenge # 1 et il est temps d'annoncer le gagnant! Ce défi est assez difficile. Bien qu'il n'y ait pas beaucoup d'entrées, la qualité des œuvres gagnantes est incontestable.

Tout d'abord, passons en revue certaines des différentes approches du défi.

ma tentative

En tant que fabricant de règles stimulantes, je vais d'abord essayer.

( bien sûr, je ne peux pas me remettre un prix ... au moins je ne pense pas que je peux ... non ?! )

J'ai essayé les solutions CSS et SVG - mes forces - et j'ai décidé de ne pas utiliser de scripts. Puisqu'il n'y a pas de vraies fonctions aléatoires dans CSS et SVG, l'astuce consiste à rendre les boucles d'animation régulières plus aléatoires qu'elles ne le sont réellement. Ceci est ma solution.

Voir Pure CSS "Apparence organique" Animation ECG par Alex (@alexmwalker) sur Codepen

Vous pouvez afficher le code comme vous le souhaitez, mais la principale préoccupation est:

• L'animation en ligne EKG n'utilise qu'un seul SVG externe et deux boucles d'animation distinctes.
• Une animation CSS (voyage) boucle le gradient vert de gauche à droite. Le masque superposé façonne la ligne ECG.
• J'ai créé 6 "battements cardiaques" ECG "uniques sur le graphique SVG et je les ai définis sous forme de clés de sprites. J'ai basculé ces images clés pour le rendre aléatoire (j'ai ajouté un petit nombre en bas pour rendre la commutation de l'image clé plus évidente).
• La deuxième animation traite chaque "rythme cardiaque" comme un sprite séparé et passe à un nouveau sprite à chaque fois qu'il passe - mais cela est chronométré pour se produire uniquement dans la partie sombre de la boucle, lorsqu'elle n'est pas visible.
• Bien sûr, puisque chaque "unité de battement de cœur" utilise exactement la même animation CSS, nous nous attendons généralement à ce qu'ils affichent tous les mêmes images clés. L'astuce pour les rendre différentes est d'utiliser animation-delay pour compenser leur heure de début. Si nous utilisons un retard négatif (par exemple animation-delay: -9s), nous pouvons passer à n'importe quel point intermédiaire dans la boucle d'animation immédiatement. Il s'agit d'une astuce de performances très utile.
• Toutes les animations sont contrôlées par une seule variable SASS en haut de la fenêtre CSS - $animation-time: 5s;. La modification de ce numéro modifiera le grand numéro de lecture et la vitesse ECG.
• Il fonctionne pour Chrome et n'a aucun test approfondi, mais devrait fonctionner n'importe où.

La méthode CSS pure a certaines limites, mais je suis assez satisfait de l'effet global. J'ai besoin de JS pour améliorer les éléments que je n'aime pas.

troisième place: Paulob

Nous sommes très chanceux d'avoir Paul en tant que contributeur à long terme, mentor et consultant des utilisateurs de SitePoint depuis plus de dix ans (peut-être près de vingt ans?). Dans ce cas, il a sacrifié ses précieuses vacances au soleil pour créer une merveilleuse solution SVG.

Voir la machine «Ping» de Paul O’Brien (@paulobrien) sur Codepen

Paul a dit:

C'est juste un SVG pour les graphiques et un gradient linéaire animé pour fournir l'effet de mouvement. Si j'ai le temps, je vais le dessiner correctement et le rendre réactif, pas seulement répéter le même SVG à chaque fois pour le rendre un peu aléatoire.

Maintenant, vous devez retourner à la piscine :)

Paul, nous vous rendons hommage!

(De plus, nous trouverons des moyens de vous envoyer des t-shirts, des sous-verres ou d'autres produits périphériques.)

Trial Premier prix: Nickwatton

Bien qu'il n'y ait pas beaucoup d'entrées dans ce premier défi de code, il n'y a absolument aucun problème avec la qualité des deux meilleurs travaux. En fait, nous avons pensé que les deux meilleures œuvres méritaient la récompense, nous avons donc décidé de leur donner un bonus de carte-cadeau Amazon de 200 $ chacun.

Le travail de Nickwatton est exactement ce que je pense.

Voir Nick Watton (@ 2mogs) sur Codepen

Comme l'explique Nick, sa solution:

Utilisez des systèmes de particules parce que je les aime! En outre, vous pouvez obtenir un effet de piste très bon marché en remplissant le contexte de dessin avec du noir presque transparent, ce qui crée une piste fanée pour mes lignes "ping".

RAF fait que l'animation entière fonctionne en douceur et l'animation de battement de cœur est contrôlée par récursif setTimeout(). J'utilise setTimeout() pour conduire un effet non-trame par trame, ce qui signifie également que je peux le déclencher à des intervalles légèrement aléatoires pour une sensation organique. La méthode Heartbeat () contrôle et randomise légèrement le taux de battements cardiaques, qui est visible sur les lignes de cœur et d'impulsion.

Les méthodes JS et Canvas de Nick offrent une flexibilité que d'autres méthodes sont difficiles à égaler. Je ne peux pas imaginer comment imiter ces effets de particules en utilisant une approche basée sur SVG.

La vitesse d'animation légèrement randomisée est également relativement facile. C'est difficile à forger sans JS, mais cela ajoute à la crédibilité de cette animation.

Premier prix de l'essai: Davidomarmach

David a soumis son travail à la date limite, nous sommes heureux de l'avoir fait. Je dois admettre que cela m'a fait sourire.

Afficher la machine "ping" par David Omar Flores Chávez (@davidomarf) sur Codepen

Tout d'abord, David a commencé à étudier sérieusement comment les vraies machines ECG produisent des sorties et ont incorporé ces connaissances dans son animation. Il a également augmenté la fluctuation de la pression artérielle, de la température, des lectures de saturation en oxygène et même du nombre d'hémoglobine. Cette chose semble très réelle.

Mais David a également ajouté deux éléments de facteur X Killer.

1. Audio: la machine classique "bip ... bip ... bip ..." ajoute beaucoup de drame lorsque la fréquence cardiaque augmente.
2. Interactivité: En plus d'un "aléatoire passif" automatique, David permet également aux utilisateurs de contrôler leur fréquence cardiaque à travers la position du curseur. Se déplacer à l'extrême gauche mettra votre patient à dormir - se déplacer vers la droite permettra à votre patient d'injecter de l'adrénaline dans le cœur.

Le contrôle limité de la vitesse ECG rend cette unité probablement vraiment utile dans les scènes de film / télévision.

Comme la solution de Nick, l'unité ECG est écrite sur la toile en JavaScript, mais David utilise la bibliothèque P5.JS. Je n'ai pas utilisé P5 auparavant, mais avec des modules pour le dessin, l'animation et l'audio, cela semble être une excellente base pour construire un projet comme celui-ci.

Dans l'ensemble, c'est une contribution très impressionnante.

Merci et félicitations à David, Nick et Paul. Nous vous contacterons bientôt.

Next Challenge: Code Challenge # 2: CSS Battle

Pour notre prochain défi, nous travaillerons avec des amis sur cssbattles.dev pour parrainer le quatrième tour de bataille. Au cours de trois semaines, il y aura 3 récompenses en espèces et 20 abonnements en prime SitePoint à rivaliser. Les détails seront annoncés dans mon prochain post.

Code Challenge 1 FAQ (FAQ)

Quel est le but de Code Challenge 1?

Code Challenge 1 est conçu pour tester et améliorer vos compétences de codage. Il s'agit d'une plate-forme compétitive où les codeurs du monde entier participent et utilisent leurs connaissances de codage pour résoudre un problème donné. L'objectif principal de ce défi est d'encourager l'apprentissage, le partage et l'amélioration des compétences de codage dans un environnement compétitif.

Quels langages de programmation puis-je utiliser dans Code Challenge 1?

Vous pouvez utiliser n'importe quel langage de programmation dans Code Challenge 1. Le défi ne concerne pas la langue que vous utilisez, mais sur la logique et l'efficacité du code. Que vous soyez bon en Python, Java, C ou toute autre langue, vous êtes invités à participer.

Comment déterminer le gagnant du Code Challenge 1?

Le gagnant du Code Challenge 1 est déterminé en fonction de l'efficacité et de la précision de leur code. Le code sera testé contre plusieurs cas de test, et le code qui passe tous les cas de test dans un temps minimum sera déclaré gagnant.

Les débutants peuvent-ils participer au Code Challenge 1?

bien sûr! Le Code Challenge 1 est ouvert aux codeurs de tous les niveaux de compétence. Même si vous êtes un débutant, vous êtes encouragé à participer. C'est une excellente occasion de vous apprendre, de vous améliorer et de se mettre au défi.

Et si j'ai des difficultés à résoudre les problèmes dans le défi du code 1?

Si vous avez des difficultés à résoudre des problèmes, ne vous inquiétez pas. Vous pouvez toujours demander de l'aide à la communauté. Il existe de nombreux codeurs expérimentés prêts à vous aider et à vous guider.

Comment se préparer pour le défi du code 1?

La meilleure façon de se préparer au Code Challenge 1 est de pratiquer le codage régulièrement. Vous pouvez résoudre les problèmes de diverses plateformes en ligne, lire des livres de codage et participer à d'autres défis de codage. Plus vous vous entraînez, mieux vous ferez.

Si je ne sais pas comment coder, puis-je participer au Code Challenge 1?

Bien que sachant comment coder soit une condition préalable à la participation au Code Challenge 1, il n'est jamais trop tard pour apprendre. Il y a beaucoup de ressources en ligne à apprendre le codage à partir de zéro. Une fois que vous avez les bases, vous pouvez commencer à participer au défi de codage.

Quels sont les avantages de participer au Code Challenge 1?

Il y a de nombreux avantages à participer au Code Challenge 1. Cela peut vous aider à améliorer vos compétences de codage, à vous offrir une plate-forme compétitive pour tester les compétences et à vous offrir des opportunités d'apprentissage. Il peut également vous aider à vous connecter avec la communauté du codage du monde entier.

À quelle fréquence le défi du code 1 est-il détenu?

La fréquence du défi du code 1 peut varier. Il peut s'agir d'un événement hebdomadaire, mensuel ou même annuel. Il est préférable de consulter le site officiel ou de vous abonner à leur newsletter pour les dernières mises à jour.

y a-t-il une récompense pour gagner le défi du code 1?

Les récompenses pour la victoire du Code Challenge 1 peuvent varier. Certains défis offrent des récompenses en espèces, tandis que d'autres offrent une reconnaissance, des certificats ou des opportunités de participer à des projets réels. Les détails des récompenses sont généralement mentionnés dans la description du défi.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!