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

Cela fait une semaine que nous avons lancé notre rapide Code Challenge # 1 ce qui signifie qu’il est temps d’annoncer un gagnant! C'était délicat. Bien que le nombre d'entrées ne soit pas élevé, la qualité de nos gagnants est incontestable.

Mais commençons par quelques approches différentes du défi que nous avons fourni.

Mon tour d'abord!

J'ai établi les règles de ce défi, je pensais qu'il était juste que je relève le défi le premier.

(* Et non, je ne peux pas m'attribuer le prix… eh bien, je suis à peu près sûr Je ne peux pas… non?!? )

J'ai joué avec les solutions CSS et SVG – deux de mes combinaisons les plus solides – et j'ai décidé de ne pas utiliser de script. Comme il n’existe pas de véritable fonction aléatoire disponible en CSS ou en SVG, l’astuce consistait toujours à faire apparaître des boucles d’animation régulières plus aléatoires qu’elles ne le sont en réalité. Voici ma solution.

Voir le stylo
Un CSS «à l'aspect organique» pur CSS de Alex ( @alexmwalker )
sur CodePen . [19659011] N'hésitez pas à parcourir le code, mais les principaux points d'intérêt sont les suivants:

• L'animation de la ligne ECG n'utilise qu'un SVG externe et deux boucles d'animation distinctes.
• Une animation CSS (déplacement) boucle le dégradé vert de de gauche à droite. Un masque superposé dessine la ligne ECG.
• J'ai créé 6 battements de cœur EKG uniques sur le graphique SVG et les ai configurés en tant qu’images-clés d’image-objet. Je change ces images clés pour leur donner un aspect aléatoire (j'ai ajouté de minuscules nombres en bas pour rendre le changement d'image clé plus évident).
• La deuxième animation traite chaque "pulsation" comme un sprite distinct et passe à une nouvelle image. une sur chaque passe – mais cela est programmé pour ne se dérouler que dans la partie sombre de la boucle quand elle ne peut pas être vue.
• Bien sûr, comme chaque "unité de pulsation" utilise exactement la même animation CSS, nous aurions normalement attendez-vous à ce qu'ils affichent tous les mêmes images clés. Le truc pour les rendre tous différents est de décaler leurs heures de départ en utilisant animation-delay . Et si nous utilisons des retards négatifs (par exemple animation-delay: -9s ), nous pouvons passer immédiatement à n’importe quel point médian d’une boucle d’animation. C'est une astuce très utile en termes de performances.
• Toutes les animations sont contrôlées par une seule variable Sass en haut de la fenêtre CSS – $ animation-time: 5s; . Changer ce numéro modifiera le grand nombre affiché et la vitesse ECG.
• Il est conçu pour Chome et n'est pas largement testé, mais devrait fonctionner n'importe où.

Il existe certaines limitations à une approche purement CSS, mais je suis assez satisfait de l'effet global. J'aurais besoin de JS pour améliorer les éléments que je n'aime pas.

Troisième prix: PaulOB

Nous sommes très chanceux de compter depuis plus de dix ans comme contributeur, mentor et conseiller de longue date pour les utilisateurs de SitePoint. (peut-être deux proches?). Dans ce cas, il a sacrifié une précieuse période de vacances au soleil pour produire une solution SVG savoureuse.

Voir le stylo Une machine qui va au ping de Paul O'Brien ( @paulobrien ) sur CodePen .

Paul a dit:

Il s’agit simplement d’un fichier SVG pour le graphique et d’un dégradé linéaire animé fournissant l’effet de mouvement. Si j'avais le temps, je le dessinerais correctement et le rendrais réactif et non pas simplement répéter le même svg à chaque fois pour que ça ait l'air un peu aléatoire.

Il faut retourner à la piscine maintenant:)

Paul, nous vous saluer, monsieur!

(Nous allons aussi déterminer quel t-shirt SitePoint, quel porte-bidon ou quel assortiment SitePoint nous servirons.)

Premier prix égal: nickwatton

Bien qu'il n'y en ait pas une énorme quantité d'entrées pour ce premier défi de code, il n'y avait certainement aucun manque de qualité avec les deux premières entrées. En fait, nous pensions que les deux meilleures contributions valaient tellement la peine que nous avons décidé de leur attribuer les deux prix des cartes-cadeaux Amazon d'une valeur de 200 $.

L'entrée de Nickwatton était exactement le genre de chose que j'avais en tête.

Voir le stylo

Machine qui va Ping! de Nick Watton ( @ 2Mogs ) sur CodePen .

Comme l'explique Nick, sa solution:

utilise une particule systèmes, parce que je les aime. Equal Premier prix: davidomarfch

David a soumis son inscription juste avant l'heure limite – et nous sommes ravis de l'avoir faite. Je dois admettre que celui-ci me faisait sourire jusqu'aux oreilles.

Voir le stylo
Une machine qui tourne au ping de David Omar Flores Chávez ( @davidomarf )
sur CodePen .

Tout d'abord, David a commencé par effectuer des recherches sérieuses sur la manière dont un véritable appareil ECG produisait sa sortie et intégrait cette connaissance dans son animation. Il a également ajouté la tension artérielle en baisse et en mouvement, la température, la lecture de la saturation en oxygène et même la numération de l'hémoglobine. pense que est légitime.

Mais David ajouta également deux éléments du facteur X tueurs.

1. Audio : La machine classique 'boop… boop… boop…' ajoute tellement de drames quand la fréquence cardiaque augmente.
2. Interactivité : À côté d'un «caractère aléatoire passif» automatique, David permet à l'utilisateur de contrôler la fréquence cardiaque via la position du curseur. Déplacez-vous à l'extrême gauche pour endormir votre patient – déplacez-vous à droite pour lui donner un coup d'adrénaline au cœur

Ce contrôle précis de la vitesse ECG rend cette unité potentiellement réellement utile dans un scénario de film / télévision .

Comme pour la solution de Nick, l'unité ECG est écrite sur du canevas avec JavaScript, mais David utilise la bibliothèque P5.js . Je n'avais jamais utilisé P5 auparavant, mais avec des modules de dessin, d'animation et d'audio, cela semble être une excellente base pour baser un projet comme celui-ci.

All up, une contribution extrêmement impressionnante.

Merci beaucoup. Félicitations à David, Nick et Paul. Nous serons en contact sous peu.

Code Challenge # 2: La bataille de CSS

Pour notre prochain défi, nous collaborons avec nos amis de CSSbattles.dev pour sponsoriser la bataille n ° 4 . Il y a 3 prix en espèces et 20 abonnements SitePoint Premium à concourir sur une période de trois semaines. Les détails à venir dans mon prochain article.

Alex fait des choses cruelles et inhabituelles à CSS depuis 2001. Il est le principal concepteur et développeur de Sitepoint et du concepteur et de l'expérience utilisateur unique de SitePoint. éditeur avec plus de 150+ newsletter écrite. Aujourd'hui, Alex participe à la planification, au développement, à la production et à la commercialisation d'une vaste gamme de produits et de références imprimés et en ligne. Et a conçu plus de 40+ des couvertures de livres de SitePoint.