Video yükleniyor...

Video Yüklenemedi

Ana Sayfaya Dön

converted a JS physics solver into CSS thanks to sqrt(), exp(), sin(), cos() and property

argyleink's profile picture

Adam Argyle

58,635 subscribers

15,093 görüntüleme • 2 yıl önce •via X (Twitter)

LIVE

Anya Rossi• Live Now

Private livecam show

2 Yorum

Trist 📚 profil fotoğrafı
Trist 📚2 yıl önce

@property This is super cool. I love seeing math concepts converted into code.

Steve Rios profil fotoğrafı
Steve Rios2 yıl önce

@property wow, nice!

Benzer Videolar

"Bokeh" vec2 p=FC.xy/r.y;for(float i,f,g;i++<9.;o+=(cos(p.y+p.x/.6+g+vec4(0,1,2,0))+1.)*smoothstep(-9.,9.,(.3-length(cos(p++/.3+t*.2)))*r.y/exp(f=sin(i)*i+i))/exp(f/3.+sin(i+g+t))*(g=cos(p/.4).x)*g)p*=mat2(8,-6,6,8)/9.;o=sqrt(tanh(.2*o));
0:31

"Bokeh" vec2 p=FC.xy/r.y;for(float i,f,g;i++<9.;o+=(cos(p.y+p.x/.6+g+vec4(0,1,2,0))+1.)*smoothstep(-9.,9.,(.3-length(cos(p++/.3+t*.2)))*r.y/exp(f=sin(i)*i+i))/exp(f/3.+sin(i+g+t))*(g=cos(p/.4).x)*g)p*=mat2(8,-6,6,8)/9.;o=sqrt(tanh(.2*o));

Xor

14,455 görüntüleme • 10 ay önce

Understanding HTML, CSS and JS 🤌🏽
2:30

Understanding HTML, CSS and JS 🤌🏽

Ugwu Samuel 👨🏼‍💻

38,083 görüntüleme • 1 yıl önce

Animation for a Halloween Ghost with CSS and JS 🎃👻
0:24

Animation for a Halloween Ghost with CSS and JS 🎃👻

Viki ✨

337,079 görüntüleme • 2 yıl önce

Pinterest moved to native CSS carousels to replace legacy JS platform-wide → Using CSS primitives like scroll markers and snap, they achieved: 📉 90% code reduction (2k JS → 200 CSS) 🚀 15% faster page loads ✨ Smoother, interactive UI
1:00

Pinterest moved to native CSS carousels to replace legacy JS platform-wide → Using CSS primitives like scroll markers and snap, they achieved: 📉 90% code reduction (2k JS → 200 CSS) 🚀 15% faster page loads ✨ Smoother, interactive UI

Chrome for Developers

219,689 görüntüleme • 3 ay önce

🚀 Introducing Panda CSS The modern CSS-in-JS styling engine! Say goodbye to runtime CSS-in-JS 🎨💪✨ 🔸Works with Server Components 🔸Recipes, Variants, and Patterns 🔸Design Tokens Support Works in Next.js, Vue, Qwik, Solid, Astro, and more.
1:11

🚀 Introducing Panda CSS The modern CSS-in-JS styling engine! Say goodbye to runtime CSS-in-JS 🎨💪✨ 🔸Works with Server Components 🔸Recipes, Variants, and Patterns 🔸Design Tokens Support Works in Next.js, Vue, Qwik, Solid, Astro, and more.

Sage ⚡️

413,377 görüntüleme • 3 yıl önce

Pigment CSS is here! Our new zero-runtime CSS-in-JS library that’s compatible with React Server Components and brings significant performance improvements over other styling engines 🏎️💨 Ready to jump into it? Follow our quick guide:
2:19

Pigment CSS is here! Our new zero-runtime CSS-in-JS library that’s compatible with React Server Components and brings significant performance improvements over other styling engines 🏎️💨 Ready to jump into it? Follow our quick guide:

MUI org

30,043 görüntüleme • 1 yıl önce

Prompt: Create an interactive New Year's Eve fireworks display using HTML/CSS/JS in a single HTML file. When the user clicks, a rocket should launch and explode into colorful particles with gravity and drag physics. Include a 'Grand Finale' button that automatically launches a barrage of fireworks that form the glowing text 'HELLO 2026' in the sky.
1:14

Prompt: Create an interactive New Year's Eve fireworks display using HTML/CSS/JS in a single HTML file. When the user clicks, a rocket should launch and explode into colorful particles with gravity and drag physics. Include a 'Grand Finale' button that automatically launches a barrage of fireworks that form the glowing text 'HELLO 2026' in the sky.

Diego | AI 🚀 - e/acc

34,210 görüntüleme • 5 ay önce

🚨A grooming gang member has been found to be linked to efforts to turn a property in Leeds into a children’s care home. Abid Younis, sentenced to two-and-a-half years in 2015 for sexual activity with a child, owns a property being converted into a care home for children. Kevin O'Sullivan
2:05

🚨A grooming gang member has been found to be linked to efforts to turn a property in Leeds into a children’s care home. Abid Younis, sentenced to two-and-a-half years in 2015 for sexual activity with a child, owns a property being converted into a care home for children. Kevin O'Sullivan

Talk

142,401 görüntüleme • 1 yıl önce

A cute lamp login page, made with HTML, CSS, JS😱🥹
0:25

A cute lamp login page, made with HTML, CSS, JS😱🥹

F.O.L.A

48,759 görüntüleme • 4 ay önce

Going downhill in my WebGPU terrain proto. Imagine having a car... I would love to write another physics solver :)
1:00

Going downhill in my WebGPU terrain proto. Imagine having a car... I would love to write another physics solver :)

Sebastian Aaltonen

57,420 görüntüleme • 7 ay önce

What I coded today as a software engineer! HTML/CSS/JS edition ✨
1:23

What I coded today as a software engineer! HTML/CSS/JS edition ✨

˗ˏˋmewtru´ˎ˗

212,770 görüntüleme • 2 yıl önce

Finding the roots of a polynomial is one of the oldest and most central problems in Algebra. Once the coefficients are allowed to move through the complex plane, the roots start revealing a much richer geometry. Here is the Mathematics, try it yourself and play around with the coefficients and polynomial structure: P(x) = x¹² + a x⁸ + b x⁶ + c x⁴ + d x + 1 a = (sin(t₁) + i cos(sin(t₂) + 0.5 sin(2t₂))) M b = 0.3 (t₁ + t₂) Mᶜ c = (exp(i t₁) - cos(t₂)) M d = (cos(t₁) - 0.5 i sin(sin(t₂) + 0.5 sin(2t₂))) Mᶜ M = 1 + ∑ₖ₌₁ᵐ Aₖ exp(i 2π sₖ n / N) Mᶜ = 1 + ∑ₖ₌₁ᵐ Aₖ exp(-i 2π sₖ n / N) Here t₁ and t₂ lie on the unit circle, n is the frame index, N is the total number of frames, and Aₖ, sₖ are the modulation amplitudes and speeds.
0:30

Finding the roots of a polynomial is one of the oldest and most central problems in Algebra. Once the coefficients are allowed to move through the complex plane, the roots start revealing a much richer geometry. Here is the Mathematics, try it yourself and play around with the coefficients and polynomial structure: P(x) = x¹² + a x⁸ + b x⁶ + c x⁴ + d x + 1 a = (sin(t₁) + i cos(sin(t₂) + 0.5 sin(2t₂))) M b = 0.3 (t₁ + t₂) Mᶜ c = (exp(i t₁) - cos(t₂)) M d = (cos(t₁) - 0.5 i sin(sin(t₂) + 0.5 sin(2t₂))) Mᶜ M = 1 + ∑ₖ₌₁ᵐ Aₖ exp(i 2π sₖ n / N) Mᶜ = 1 + ∑ₖ₌₁ᵐ Aₖ exp(-i 2π sₖ n / N) Here t₁ and t₂ lie on the unit circle, n is the frame index, N is the total number of frames, and Aₖ, sₖ are the modulation amplitudes and speeds.

Mathelirium

22,783 görüntüleme • 2 ay önce

Fully GPU Cloth solver for blender using TAngra Multi Physics engine. Accurate self collision on GPU. More on Discord link in Bio. #TAngra, #b3d, #geometrynodes, #blender, #GPU, #physics, #solver, #xpbd
1:37

Fully GPU Cloth solver for blender using TAngra Multi Physics engine. Accurate self collision on GPU. More on Discord link in Bio. #TAngra, #b3d, #geometrynodes, #blender, #GPU, #physics, #solver, #xpbd

TAngraFX

44,548 görüntüleme • 1 yıl önce

here's the exploded view of what's happening 🤙 powered by one CSS custom property, transition grid-template-columns for the digits ⚡️ few lines of JS to make it work in other browsers ✅
0:22

here's the exploded view of what's happening 🤙 powered by one CSS custom property, transition grid-template-columns for the digits ⚡️ few lines of JS to make it work in other browsers ✅

jhey ʕ•ᴥ•ʔ

285,140 görüntüleme • 1 yıl önce

Prompt: Make a game like flappy bird using HTML/CSS/JS in a single HTML file
2:13

Prompt: Make a game like flappy bird using HTML/CSS/JS in a single HTML file

Diego | AI 🚀 - e/acc

145,468 görüntüleme • 6 ay önce

Responsive login form with fun animation ✨ Using HTML, CSS and JS. CodePen link below 👇
0:20

Responsive login form with fun animation ✨ Using HTML, CSS and JS. CodePen link below 👇

Viki ✨

401,492 görüntüleme • 2 yıl önce

View Transitions are a gift 🎁 One set of CSS keyframes and a scoped custom property to ::view-transition-old/new(body) 🚀
0:20

View Transitions are a gift 🎁 One set of CSS keyframes and a scoped custom property to ::view-transition-old/new(body) 🚀

jhey ʕ•ᴥ•ʔ

142,262 görüntüleme • 2 yıl önce

CSS only number slider using @​property, round(), sin() and scroll-driven animation 🤙 @​keyframes progress { to { --val: 100; }} .number-wheel { transform: rotateX(calc(var(--val) * -36deg)); } Watch for the trick reveal 👇
0:42

CSS only number slider using @​property, round(), sin() and scroll-driven animation 🤙 @​keyframes progress { to { --val: 100; }} .number-wheel { transform: rotateX(calc(var(--val) * -36deg)); } Watch for the trick reveal 👇

jhey ʕ•ᴥ•ʔ

372,646 görüntüleme • 1 yıl önce

with a tiny bit of JavaScript enhancement take that CSS driven slider and give it "that little bounce™" - use pointer-events to calculate an overdrag - map that overdrag to a CSS custom property --stretch - apply style - profit 💀
0:25

with a tiny bit of JavaScript enhancement take that CSS driven slider and give it "that little bounce™" - use pointer-events to calculate an overdrag - map that overdrag to a CSS custom property --stretch - apply style - profit 💀

jhey ʕ•ᴥ•ʔ

196,528 görüntüleme • 1 yıl önce

It looks like this in VR. The point would be for the VR avatars of players to be controlled by combining both physics animation and a multi-pass IK solver. Physics animation alone won't be good (disjointed body feeling, loss of proprioception and control).
0:38

It looks like this in VR. The point would be for the VR avatars of players to be controlled by combining both physics animation and a multi-pass IK solver. Physics animation alone won't be good (disjointed body feeling, loss of proprioception and control).

Haï~

21,886 görüntüleme • 1 yıl önce