josephazar

Code

352 outputs

Creator

add bookmark

Shader Holiday

add bookmark

Shader Holiday

add bookmark

Shaders

add bookmark

Shader

add bookmark

Quick Hack from the book of shaders

add bookmark

quick Setup
Vacances donc pas évident de trouver du WIFI.
Cette semaine sera pa fofolle au niveau JS, car repos bien mérité et surtout je profite de la famille, et de temps en couple.

add bookmark

SHADER

add bookmark

Atelier Shaders avec Antipattern

add bookmark

Début d'une série pour la carte du couple

add bookmark

Gsap

add bookmark

test de Wpack.io pour tester une nouvelle "expérience développeur" dans le dev de theme wp sur mesure

add bookmark

Projet couple

Wheel Event

add bookmark

SHADER 1%

add bookmark

Pour notre projet de carte du couple

add bookmark

Shader
1%

add bookmark

Shader
1%

add bookmark

JS simple pour le projet de l'Office du Tourisme de Lyon, pas de temps aujourd'hui pour du creative coding.

add bookmark

Map gen with voronoi from redblobgame

add bookmark

WeekEnd Famille, j'ai juste le temps d'import du SimplexNoise et une lib pour tester le Voronoi,
L'idée est d'apprendre à générer des cartes, des terrains

add bookmark

Shader

add bookmark

Shader

add bookmark

NO time today, and Tired tonight, not so much stuff

add bookmark

Shader Smoothen

add bookmark

Shader 1% J4apprends j'apprends

add bookmark

Shader

add bookmark

Shader dans Pixi,
Je ne comprends pas grand chose, mais un peu plus qu'hier !

add bookmark

Zigomatik

add bookmark

test du nouveau gsap scrollTrigger !

add bookmark

Blur, layers test

add bookmark

Juste le temps de monter une config pour tester le nouveau ScrollTrigger de la lib GSAP avec SplitText

add bookmark

Perlin Noise Shader

add bookmark

Shaders étude grâce au code de Jaume Sanchez Elias
@thespite

add bookmark
add bookmark

Torus

add bookmark

Not so much today, really …
Tonight with ma chérie.

add bookmark

three-bmfont-text tuto from @marioecg

add bookmark
add bookmark

Chaos, no energy. No creativity tonight.

add bookmark
add bookmark

ThreeJs + Gsap

add bookmark

No results …

add bookmark

Three Js effect

add bookmark

Peu de temps aujourd'hui,

add bookmark

ThreeJs

add bookmark

Wip sur l'animation

add bookmark

Etude sur la typo dans ThreeJs avec la lib de Mat DesLaurier

add bookmark

Test de texture transparence dans ThreeJS

add bookmark

Premier pas vers les Shader avec Three.js

add bookmark

✔Transitions avec affichage du contenu
⬜ régler l'animation des "roues"
⬜ ajuster les titres

add bookmark

GSAP optimisation.
Peu de temps aujourd'hui on a bien bossé sur notre projet de couple avec Emilie

add bookmark

Animation avec GSAP + Particules.

add bookmark

WIP, c'est pas encore ça, mais on avance.
Demain essai avec une image + fx

add bookmark

Particules ok

add bookmark

Particules, peu de temps aujourd'hui

add bookmark

Pas le résultat attendu mais on s'y rapproche, il faudrait un effet de crépitement, là ca fait trop bulle.

add bookmark

Etude de particules avec ShaderMaterial de threeJs
Depuis le code de Ian McEwan, Ashima Arts et de EdanKwan

add bookmark

Ajout du style du bouton appel à l'action et début d'infobulle texte, qui reste à styliser.

add bookmark

Correction de bug sur l'alignement des textes, et bouton appel à l'action

add bookmark

✔ Ajout du listener Resize, et réarrangement des textes en fonction.
⬜ Je dois vérifier le sprite Mask et sa texture pour la fois où le texte passe à la ligne

add bookmark

✔ Nouveau sprite pour la gomme avec effet de mouvement, vitesse

add bookmark

Ajout d'un mouse Trail classique

add bookmark

5 minutes, Gsap animate,
Fin du stage demain je reprends

add bookmark

Pas l'énergie ce soir defaire du js, j'ai eu une très belle journée, très apprenante au stage Feu sacré. Je suis en stage pour deux jours.

add bookmark

Ajout d'un effet Mouse Trail.

add bookmark

✔ Réarrangement automatique des textes
✔ Centrage ok
⬜ Plus de marge et responsive

add bookmark

✔ Blur effect
✔ Center Text
✔ small animation

add bookmark

Juste une optimisation de code en créant l'objet ErasedContent.

add bookmark

J'ai terminé le fonctionnement du slider en mode multiple mots.
Demain je regarderai le mode responsive

add bookmark

Le slide avec plusieurs mots ou phrases à effacer fonctionne.

add bookmark

wip Eraser Slider

add bookmark

Implémentation du 2ieme mode : dans une phrase seuls certains mots peuvent être gommé et seront remplacés par d'autres en s'effacant.

add bookmark

Progression du Slider

add bookmark

Avancée sur la décomposition en class du slider.

add bookmark

Mise en place d'un slider pour la gestion des différends texte et mode de gommes.

add bookmark

relecture du code pour le calcul des pixel noirs. 5 minutes aujourd'hui. WeekEnd en Famille.

add bookmark

Peu de temps aujourd'hui, Je commence à mettre en place le slider pouvoir plusieurs textes et différentes options.

add bookmark

Yes objectif atteint. Dés que je gomme au moins 65% du texte alors je lance une action.
Pour ça je calcul le pourcentage de pixel noir avec une densité au moins de 25%.
Pour économiser de la mémoire je fais un check tous les 30pixels et uniquement au moment du 'onmouseup'.

add bookmark

Calcule de la zone que j'efface en cours.

add bookmark

Effet de Gomme

add bookmark

Je dois créer une gomme, bon là c'est inversé,c'est comme ça hein !

add bookmark

PixiJS dans React. Rien à montrer là, juste la préparation d'un nouveau composant à base de canvas et de déformation de texte.
L'idée est de faire un effet gomme sur du texte, avec un effet de déformation et de disparition.

add bookmark

Memory, exos sur REACT - tuto par Christophe Porteneuve.

add bookmark

Je continue ma progression en React et étude sur les hooks avec useState, le passage des props. L'organisation d'une app avec l'exercice ici de faire un jeu de PENDU.
Christophe Porteneuve, explique vraiment très bien.

add bookmark

utilisation du hook custom : useEventListener qui va gérer facilement les KeyEventListener.
https://github.com/donavon/use-event-listener

Je veux créer un mini contrôleur pour déplacer l'objet 3D, la poule ici en l’occurrence.

add bookmark

Hooks React avec Dan Abramov ;)

add bookmark

Lire la doc de useState et useEffect + useRef

add bookmark

Yes, c'est ok j'ai trouvé comment lire l'animation avec React Three Fiber. Et c'est super fluide.

add bookmark

Je n'arrive pas à comprendre pourquoi mon animation ne se lance pas. Il affiche la dernière frame de l'animation.
Je vais devoir recréer une scène simple sous blender, 1 ou 2 animations et débusquer ce qui cloche.

add bookmark

Je n'arrive pas à lancer l'animation du model !

add bookmark

React Three Fiber avec Particules

add bookmark

Compréhension et lecture de la doc WebPack + Mise en place d'une structure projet propre + threeJs

add bookmark

J'étais jusqu'à ce jour un vieux qui place tous ses script JS dans l'HTML à l'ancienne, depuis ma formation Web App Moderne, ca m'a réconcilié avec les bundler et les imports de module, je suis en pleine doc de WebPack. Je suis un dinosaure en fait à m'y mettre seulement en 2020.
j'utilisais déjà un bundle mais sous forme d'application windows : c'est 'prepros' il est vachement bien, mais du coup c'est lui qui faisait le beans à ma place. Je trouve utile de se mettre à webPack et de bien comprendre la logique derrière en pratiquant étape par étape et lisant la doc.

add bookmark

React Three Fiber Shadow

add bookmark

React-three-fiber avec react-spring, méga logique. Merci Paul Henschel

add bookmark

Progres sur Three.js avec les cours de Matt DesLauriers Buffer Geometry

add bookmark

Progression Three.Js:
bufferGeometry + light + Vertex Shader + material

add bookmark

Je commence les exos de Matt DesLauriers sur WebGl + Shaders avec Three.js.

add bookmark

Basic ThreeJS

add bookmark

Peu de temps aujourd'hui pour du JS, alors j'ai juste révisé 5 min : Find, Reduce, et filter. ES6 je ne pratiquai que trop peu, il n'est jamais trop tard ;)

add bookmark

J'ai revu rapidement les TDD (Test Driven Development) et JEST

add bookmark

Je me lance à la découverte de THREE.JS.
Je suis les liens recommandés par le site de la librairie comme ici : https://threejsfundamentals.org/threejs/lessons/threejs-primitives.html
Cette semaine je vais partager mon temps entre la mise en pratique de ma formation sur REACT et sur du creative Coding avec du WebGl 3D.

add bookmark

4ieme et dernière journée de formation
Nous sommes entré plus en profondeurs sur l'utilisation de Redux. Comment on dispatch vers les actions Creator des reducers.
J'ai beaucoup de ressources en main. Il est temps de s'entrainer avec REACT en premier lieu et intégrer les tests avec JEST et la gestion des états avec REDUX dans un second temps.

add bookmark

3ieme journée de formation "Web App Moderne" mon cerveau chauffe, beaucoup de nouveaux concepts à apprendre.
States dans React, Redux pour checker les states et les test avec JEST… pfiouu besoin de digestion.

add bookmark

2ieme journée de formation "Web App Moderne"
On a commencé à coder des composants REACT.
WebPack avec le React Hot Loader, super pratique pour pouvoir loader uniquement les composants souhaités sur la page sans recharger la page entière.
Tester le principe de Storybook pour obtenir le rendu des composants séparément.
Le formateur nous a montré les principes des Test pour préparer la prochaine session.

add bookmark

Un des exercices de la formation Web App Modernes que je suis en ce moment avec le formation de Delicious Indights.
Ici on peut voir du Template String, que je n'avais encore jamais utilisé.
Les fonctions Fléchées!
et array.filter() array.map()

add bookmark

Configuration du GIT en préparation de ma semaine de formation JS Web APP Moderne,
Avec React, Reduce, PWA. 4 jours de formation dés demain, avec la boite Delicious Insights

add bookmark

✔ Le calage des samples se fait en seconde désormais. J'avais par erreur calé le lancement des samples via les FPS ce qui me donnait de sacrées différences entre les navigateurs et la puissance des GPU.

add bookmark

Problème de FrameRate avec le poseNet sur Firefox…
Je dois modifier la gestion du temps du lancement des samples, qui sont calibré par rapport aux frames, me suis planté c'est pas bon
A tester sur Chrome pour le moment
https://homme-cameleon.netlify.com/

add bookmark
add bookmark

The demo is online !!!
You can test it with Chrome or Firefox :
https://le-son-cameleon.netlify.com/

I have to fix some bugs tomorrow. And have to finish a video clip to explain my process.

add bookmark

Gestion des scènes, HOME, InGame, Loading…

add bookmark

Tomorrow I'll release the demo link and github source code.

add bookmark

/**
* No Code Today,
* Actualy it's my Birthday, I'm 40 Yo
* We started a new Song with family.
*/

add bookmark

/**
* Time with family, Schools and every public places are closed in France now due to the Coronavirus
* My head is not ready to do JS tonight.
* Will spent this evening with my girl friend and plan the next weeks to play, to teach to create arts with our children.
* See you Soon !
*/

add bookmark

Je pense remettre la fonction de coupe des objets dans l'expérience. je teste des trucs. mais si ca ajoute trop de complexité, je supprimerai cette fonctionnalité, et trouverai une autre expérience où la placer.

add bookmark

J'ai créé une liste mailchimp et je l'ai ajouté en footer de mon site https://www.par-azar.com

add bookmark

Calibrage de la timeline.

add bookmark

Finalisation de l'application. Ajout d'un Loader et d'une class SceneManager

add bookmark
add bookmark

Gestion des layers (peu de temps aujourd'hui)

add bookmark

Un peu de réorganisation du code aujourd'hui. J'ai bossé sur la timeline des boucles sonores.
Semaine prochaine je devrai sortir une démo avec la vidéo de présentation.
Bonne soirée.

add bookmark

Peu de temps aujourd'hui, il tombe une forme et elle lance une boucle sonore.
Je passe la soirée avec ma chérie, on avancera plus tard. Équilibre de vie :D très important

add bookmark

AUDIO ON : I've build a multi track. I created loops this morning. They can be launched by touching the color shapes.
Not at all practical at the moment, but I will find better tomorrow ;)

add bookmark

Source Audio > FFT Analyzer
Ajout d'une boucle de drum, Je pense qu'il va pouvoir lancer des boucles en touchant les objets. Tone.JS

add bookmark

Tests et améliorations du code. Détection de certains bugs.
J'ai testé avec les enfants ce soir ils étaient à fond !
Je vais ajouter de la réactivité à la musique.

add bookmark

Peu de temps ces deux derniers jours.
Ajout d'un effet lorsqu'il change de motifs.

add bookmark

Ajout de motifs "Truchet" en clippingMask

add bookmark

Ajout d'interpolation de mouvemement pour plus de fluidité de mouvement, avec LERP().
Le personnage prend le style des formes qu'il touche.

add bookmark

Simplification du personnage, et contrôle de la couleur. L'idée est qu'il puisse devenir caméléon en touchant certains objets.
PaperJS permet d'isoler les formes par calques. Ici j'ai isolé les partie du corps pour mieux les gérer.

add bookmark

J'ai ajouté la partie du cou.

add bookmark

Cloué au lit aujourd'hui. Quelques optimisations. Repos.

add bookmark

✔ Ajout du torse et des jambes
Remarquez que malgré l'obscurité de la pièce la détection de mouvement fonctionne vachement bien. Je rappel que j'utilise le modèle PoseNEt pré-entrainé disponible avec la librairie ml5.js

add bookmark

La main droite coupe les objets, et la main droite les attrape.

add bookmark

Réalité parallèle

add bookmark

Yes interaction sans la souris,L'idée est là reste à corriger les coupes trop nombreuses :)

add bookmark

Laisser toujours une nuit de repos quand ça bug, et au réveil tout coule!
Ajout d'un petit easing, et mes objets Blob se split bien comme il faut.

add bookmark

Bug bugs bug ! more to understand. Demain est un autre jour :)

add bookmark

Projeté orthogonal ce soir.
Rappel de trigonométrie, et découvrir que la librairie paper.js à une superbe méthode magique : getNearestPoint(point) qui fait le job de la projeté orthogonal comme il faut. Super.

add bookmark

Split the shape.

add bookmark

Intersections entre le trait et le cercle. Le but étant de couper le cercle.

add bookmark

Je n'ai pas pu poster mes avancées ces deux derniers jours. C'est la première fois en 208 jours… l'important est de garder le focus. Il est toujours présent.

add bookmark

PathData. Peu de temps aujourd'hui. Journée à Paris et visite du musée d'Orsay pour l'inspiration c'est toujours bon.
++

add bookmark

Head scale && réorganisation du code.

add bookmark

J'ai intégré mes essais d'hier dans l'application principale, ca fonctionne bien, des idées de mises en scènes commence a germer.
La tête pour le moment ne scale pas, je m'en occupe demain, et réfléchis à comment lui faire son torse.
Je me demande comment faire des mains, étant donné que la détection de mouvement ne donne pas ses infos. je vais devoir faire simple.

add bookmark

J'ai étudié comment avait fait Cyril Diagne pour créer les articulations et les parties du corps de son projet magnifique "les métamorphoses de MrKalia" et il a trouvé une super solution utilisant les tangentes des deux cercles opposés. Ça marche super. Meci Cyril ;)

add bookmark

Le personnage commence à cligner des yeux. La silhouette se dessine. La morphologie doit suivre les points de la pose. Les angles ne sont pas encore bien calculés. Petit à petit.

add bookmark

J'ai pu avancer sur le sketch de la tête et l'ai importé dans le système PoseNet.
Pour la tête j'utilise soit des formes de base (cercle), soit des PathData qui correspondent aux datas SVG des formes importés depuis Illustrator, avec PaperJS je fais directement un copier/coller de la forme Illustrator vers l'éditeur texte (Visual Studio) et je peux créer un nouveau 'Path' que je peux manipuler comme je veux.

add bookmark

Je test techniquement comment je peux animer et dessiner mon personnage. Prototypes rapides dans le Sketch en ligne de Paper.js.
Très pratique pour tester rapidement. C'est comme si on animait du vecto dans Adobe Illustrator .

add bookmark

Peu de temps aujourd'hui j'ai ajouté une section du cou, et surtout restructuré le code, donc invisible au rendu.

add bookmark

J'ai migré vers la librairie PAPERJS qui est idéale pour bosser avec du vectoriel.
Ici je ne redessine pas le Canvas à chaque frame, c'est PaperJS qui s'en charge il n'y a que les coordonnées des points à actualiser. On se rapproche du fonctionnement d'Illustrator, et il y a moyen de créer des scènes avec de la hiérarchie comme les calques Illustrator. Ca me fait aussi penser à la hiérarchie de FLASH.

add bookmark

First day of my new experiment. Pose detection with PoseNEt PreTrained Model by Ml5.js. Very easy to implement. So cool to work with that tech.

add bookmark

Ready to publish online.
👌🎸
Tomorrow: I'm going to make a short video to explain my process and introduce the game.

add bookmark

Added Colors palette

add bookmark

✔ Added UI options
✔ Tried a new Fx "Paint Brush" like

add bookmark

Family time today, and very tired tonight.
Short animation on the record button.

add bookmark

✔ Fixed a Chrome issue
✔ Added an option in Game to display the notes lines (frequency height)
✔ Added HTTPS access.
Unfortunately on android Pitch Detection proccess seem to slow down chrome… Don't know if ml5.js users get the same issues…

add bookmark

Last adjustments before release tomorrow on my Website.
Need an SSL certificate for the Pitch Detection.
Having the app available online allows me to see a lot of hidden details.
I need to put a dead line (end of January) so as not to fall into the trap of perfection which prevents launching the web app.

add bookmark

✔ Simplification générale du fonctionnement.
Modification du texte de présentation.
J'ai privilégié le mode "Enregistrement" et conversion du signal Audio vers un sample de Piano, plutôt que le jeu précédent qui n'était pas clair.
L'idée est de sortir l'application vendredi et que se soit le plus simple possible.

add bookmark

✔ added Fx trail

add bookmark

FX + Affichage du volume d'entrée.

add bookmark

✔🎸 Timer 4 - 3 - 2 -1 - Go!
Ajout d'un décompte, avant d'enregistrer ou de jouer.
4 temps.

add bookmark

✔ J'enregistre les notes de la guitare et la machine les joues avec le sample de Piano !!
La détection du pitch fonctionne beaucoup mieux avec un instrument Accordé, plutôt qu'avec la voix. La détection des notes se fait beaucoup plus facilement.

C'est déjà super cool de voir que je peux envoyer un signal audio de guitare à la machine et qu'elle me le ressorte en mode Piano.

add bookmark

✔ j'ai ajouté un sampler de Piano sur Tone.js

J'enregistre le signal Audio de ma voix et ensuite la machine reproduit la mélodie avec du Piano.

add bookmark

Le signal Audio de ma voix est converti en MIDI, dommage la capture du son est bien pourri, j'essaierai demain une meilleure configuration de la capture. C'est loin d'être précis, mais en tout cas j'arrive à enregistrer le pitch de ma voix ou tout autre instrument et de l'enregistrer sur une Timeline. Je joue ensuite les notes avec Tone.js. pour le moment un son de synth de base.

add bookmark

Progress in Audio to midi conversion.
Comme le dit InternetVin, j'ai de plus en plus cette sensation de créer un PUZZLE en développent cette Web App. il y a tellement de façon de faire, et d'imbriquer des idées, des algos.

add bookmark

Audio to midi in progress.
I sing into the mic and the machine convert it in MIDI notes.

add bookmark

✔ Record Mode…
Signal audio To Midi Work In Progress

add bookmark

Ajout du nom des notes lorsque l'on est synchro avec. Reflexion sur la structurer du code.
Modifs du fichier JSON de la mélodie

add bookmark

Toujours sur la gestion des pages et de la navigation.
OBS ne veut plus capturer de vidéo… donc juste screenShot aujourd'hui

add bookmark

creating a Page view module in my app.
Home menu and inGame page

add bookmark
add bookmark
add bookmark

avancé sur l'UI + Guitare audio signal test

add bookmark

✔ les BPM peuvent être modifiés via un slider

add bookmark

Short in time today.

Simplify UI and added BPM.

add bookmark

animation sur les notes qui tombent. Optimisation du code, et test avec l'orgue.

add bookmark

Added global timeline

add bookmark

✔ Added controler

add bookmark

Added Easing on points

add bookmark

added Game Class and points

add bookmark

Optimisation and title song

add bookmark

let's try to play and hit the notes.
Very sick today, next week I'll have way more time to progress. This Week End on our way back to Britagny; Actualy at Marseille. South of France.

add bookmark

song loaded via JSON

add bookmark

Optimisation, not visible in graphic

add bookmark
add bookmark

La ligne vibre (Quadratic Curve ) au passage de la bonne fréquence

add bookmark

Je chante et lorsque la fréquence correspond à une note, la ligne correspondant à la note se met en focus, on peut s'accorder facilement à une vraie note. Cela devrait fonctionner avec la voix et aussi n'importe quel instrument

add bookmark

Short in Time, holidays, with children. optimizing the code.

add bookmark

Peu de temps aujourd'hui 8 heures de routes à travers la FRANCE…

add bookmark

Pitch Detection with mic as INPUT, with ML5.JS

add bookmark

Papa Maman Recognition …

add bookmark

Sound Classification the basics in Machine Learning

add bookmark

I trained the neural network with inputs mouse position and frequencies and use regression and prediction between frequencies

add bookmark

Mise en couleur des prédictions du neurone network

add bookmark

saveData neurol Network. Je ne comprends pas tout pour l'instant, ca viendra petit à petit. Je suis toujours les cours de Dan Shiffman !

add bookmark
add bookmark

Machine Learning - learn about Neurone Network

add bookmark

Machine Learning

add bookmark

Machine Learning KNN My background is not appropriate… to much detail into

add bookmark

Extractor and Regression in Machine Learning

add bookmark

Je suis la série de machine learning pour les beginner de Dan Shiffman

add bookmark
add bookmark

Sinusoide + spectograph

add bookmark
add bookmark
add bookmark

FFT Range, Bass, medium and high frequencies

add bookmark

Audio Viz Suite

add bookmark

Audio Viz - Peu de temps ce soir.

add bookmark

Nouvel objectif, jouer avec l'audio et le web ! une nouvelle série, on va bien s'amuser !

add bookmark

Force wind on a particle system

add bookmark

Simplex Noise me permet de créer un GIF/LOOP parfait. Etude sur le noise avec les conseils de Etienne Jacob

add bookmark

Loop sur le PerlinNoise

add bookmark

Addition de 3 sinusoides différents nous donne un effet de noise très facile à mettre en place. Super.

add bookmark

Ce soir au Grow Festiva !! à Paris

add bookmark

Toujours la série 'The nature of code" de Dan Shiffman. Ici le Pendulum

add bookmark

J'étudie plus en profondeur les synusoidal, periode temporaire, amplitude fréquence etc.
.

add bookmark

Simple Motion

add bookmark

Angles and Angular Motion

add bookmark

Force and Friction - Series from Dan Shiffman 'The nature of Code'

add bookmark

Start to follow Dan Shiffman series. He's a funny and a great teacher. on P5.js lib

add bookmark

Coordonnées Polaires - Spiral

add bookmark

ajout de courbe, et de couleur, mais tres gourmand en ressource les couleurs appliqué au canvas de cette manière… j'ai repris du code d'autres ressources et je dois le comprendre mieux. pour l'adapater.

add bookmark

Jared Tarbell - 'Substrate' Apprentissage de son algorythme

add bookmark

J'ai changé le code rapidement pour voir la progression des lignes avec un timer. Je trouve plus fun de voir comment le programme évolue avec un timer.

add bookmark

Re-Disciver Jared Tarbell, he's very inspiring.

add bookmark

Splines Wall

add bookmark

Objectif : comprendre la simplification de "Douglas-Peucker"

add bookmark
add bookmark
add bookmark

noise like no time

add bookmark
add bookmark

En déplacement cette semaine sur Lyon, pour formation et Coaching. Peu de temps, tout de même assez pour suivre un tuto tres simple sur canvas : https://generativeartistry.com

add bookmark

Animation sur cosinus et time

add bookmark
add bookmark

Croubes cubiques, short time today

add bookmark

Quadratic Curves Leaf

add bookmark

Exercices sur les Quadratiques courbes, Voir la ressources de Nicolas Barradeau sur youpi.io

add bookmark

Shaping

add bookmark

Working on EASE

add bookmark

Studying Map, thanks to the great ressources from Bicolas Barradeau at youpi.io

add bookmark

100 Xp

add bookmark

Only few minutes today, enough to study Interpolation

add bookmark

Short Time today, Représenter une variable selon le temps.
Je suis les ressources de ce site :; http://youpi.io/

add bookmark

Update my webSite - La Sublimathèque JS Side for sections selection . update online soon.

add bookmark

Matrice Transform and skew basics canvas

add bookmark

Cropping Image

add bookmark

Studies on Canvas, translate, Matrix etc.

add bookmark

I 've received a LeapMotion today, so I tried a script with three.js with hand (the basic script they provide to start)

add bookmark

Back to school, trigonometry

add bookmark

back to basics creative coding, to learn good practice from a great artist Nicolas Barradeau

add bookmark

Generate multiple medusas.
Tomorrow I'm going to go back to basic Creative coding on CANVAS without any Libraries to learn deeply few basics that I don't master/manage.

add bookmark

worked on collision, (no collision script in pixiJS library).
It's really hard to be realistic … I'm not ready to generate realistic mouvement / actions. need to breath and relax my brain… my code become spaghetti very quicly. step by step and don't loose faith/hope

add bookmark

Medusa Target + Life

add bookmark

Added parllax on Mouse Move and animation on movement

add bookmark

✔ Intro
✔ Movement optimisation + velocity

add bookmark

✔ Added parallax effect onto background and medusa
✔ key pressed enable UP, LEFT, RIGHT

add bookmark

Added Medusa animate . Tomorro turtules gonna play/ eat it

add bookmark

hard to see on the video but I added colour circles with blur effect.
✔ used blur effect
✔ Graphics from pixi

add bookmark

✔ Switch Animation sequence ( push movement )
✔ Go to target direction

add bookmark

✔ animate in DragonBones
✔ import dragonBones JSON and Spritse into PIXI.js
✔ Added Filters :
✔ godrayFilter
✔ displacementFilter

add bookmark

This is DragonBones, Use it to generate JSON data with animation, Bones and Bitmap > I'm going to export it in my PIXIJs App. I should control it via JS, totally new for me. Let's see

add bookmark

Enable Touchscreen

add bookmark

Added physics on seeds - Pissenlit

add bookmark

Optimisation, clean code, not so much time today

add bookmark

Added Air direction control - next : add physics

add bookmark
add bookmark

Dig into PIXI.ParticleContainer, not clear for now but i need to create an Air effect when somebody breath on a flower. See the Air Flow. I know that I need particles. but right know, i'm far away …

add bookmark

Play with PIXI.SimpleRope function. Mesh animate sprite. Useful for future

add bookmark

Text in Pixi, and no kids tonight.

add bookmark

Transpose to PIXI JS library - WebGl let's see

add bookmark

Added Constraints, Tomorrow I'm going to move on Pixi.Js Library, since i 'll use more and more bitmap … take advantage of 2d WebGl render

add bookmark

fixing bugs

add bookmark

so much bugs don't know why, it's part of the process

add bookmark

Adjust and fixed bugs, + playing with Oscillator

add bookmark

Playing around Fruity plants

add bookmark

Headache today, so only 5 minutes, playing around gravity

add bookmark

playing with MAtter JS,

add bookmark

Fixed some bugs, and defined basics notes.

add bookmark

Added wall constraints

add bookmark

Dancing Plants, press a Key and shake it

add bookmark

Boogy, bug gy Style. So sick but I persisted… not good but it's live

add bookmark

testing audio visualization. Tomorrow this plant should dance …

add bookmark

You should try to drag the plants's head / body. it's a 'Marchantia Polymorpha' :)

add bookmark

Dig into Physics and Constraints with Matter.js …

add bookmark

1. Draw the plants
2. Drag it

add bookmark

You can select à Leaf aspect

add bookmark

Added Physics Engine with Matter.JS First step in physics world

add bookmark

You can play with this WIP here : http://lab.par-azar.com/052/
✔ Optimisation for mobile
✔ Import an SVG file (the leaf)

add bookmark
add bookmark

Now can draw multiple plants

add bookmark

WIP plants and Alphabet

add bookmark

WIP plants

add bookmark

WIP back to plants, trying to build leafs object

add bookmark

Dig into L-System hard to predict things …

add bookmark

Part 3 - Coding Challenge from Daniel Shiffman - adapt for Paper.js

add bookmark

Following challenge course by Danniel Suiffman - transpose to paper.js

add bookmark

first step > My Goal is to learn how to grow something, like a flower, with leafs etc.

add bookmark

Another lesson from paper.js exemples.

add bookmark

Magnetize Rotation

add bookmark

Mouse Magnetize - Point.isClose() in Paper.js is very useful

add bookmark

That's What I wanted yesterday. Back to school, Math is graphic

add bookmark

Generative animation… not simple…

add bookmark

Group Clipped and play with Mask

add bookmark

Not so much time today, added shadow (blur fx) and tween

add bookmark

System solar 'Like' I've been following Dan Shiffman exemple

add bookmark

Added Falling Balls

add bookmark

Rasterize Image and detect pixel color, following tutorial on paper.js website

add bookmark

Add Segments and animate with Sinus fn

add bookmark

Added GUI Controller, to change variables on the Fly

add bookmark

Learning the particles

add bookmark

Added Curve and animate it

add bookmark

on vacation, in the train, thanks to the wifi. Just added new tools to the experiment. Clone items, Move items, and delete items. good progression today

add bookmark

Simplify points of freddom Shape and Drag Items

add bookmark

Learned more about Delta, vector, middlePoint and angle with paper.js

add bookmark

trying to create a vector Tool, not finish. Birthday of a friend, not time to practice today, i'll gonna look into vector tomorrow.

add bookmark

You can now select different tools - buttons

add bookmark

Import SVG and new Shapes, need to optimise and understand performance issue in 2D and memories etc.

add bookmark

Limited time today, text event

add bookmark

Close the shapes automatically, adding smooth and rotation

add bookmark

Learn how to clone shapes and play with it

add bookmark

Learn to generate Polyphonic Sound, with tone.js and KeyBoard event listener

add bookmark

Keyevent with sounds

add bookmark

Added Sound event to the animation. With Tone.js Library

add bookmark

Paper.js Library - Exploring Shapes Animation on Mouse event

add bookmark

No so much time to work on JS today, a short lesson before go to bed. Also Today was a great day, for me.

add bookmark

Paper.js in Javascript… beginer training

add bookmark

play sound as Object touch the grouns, random the rate of the wav. object loop from the top

add bookmark

Event on mouse click and loop animation

add bookmark

Learn about Good pratice with Loop in javascript, gameDesign. and motion ease. Object etc.

add bookmark
add bookmark

Trying to load 1 audio file and extract 4 audio sprites from it, very easy with HOWLER.js.

add bookmark
add bookmark

Bouton Selection with Frequency for attribute HTML. A : 440Hz / B : 493.88 etc.

add bookmark

Fade / Release but cracky sound when recording video.

add bookmark

Want to learn Audio Context in JS (25 min with pomodoro tech today )

add bookmark

This is my first day - Experimentation with canvas

internetvin
🖤🖤🖤
internetvin
This is tight!
internetvin
Good night fella!
internetvin
Nice!
josephazar
Actually it's @marioecg from twitter who...
josephazar
ha, it's a bug, and it's true my brain l...
josephazar
Thank you :) It's really cool to see all...
internetvin
whoa
internetvin
✨🐓
josephazar
héhé thank you Vin !
internetvin
This is neat. It feels like you’re movi...
internetvin
Yeah I think it’s also telling that you ...
josephazar
Je test d'écrire un commentaire. Super.
00:00
josephazar
josephazar Code