Loading video...

Video Failed to Load

Go Home

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,094 views • 2 years ago •via X (Twitter)

LIVE

Anya Rossi• Live Now

Private livecam show

2 Comments

Trist 📚's profile picture
Trist 📚2 years ago

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

Steve Rios's profile picture
Steve Rios2 years ago

@property wow, nice!

Related Videos

"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 views • 1 year ago

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

Animation for a Halloween Ghost with CSS and JS 🎃👻

Viki ✨

337,213 views • 2 years ago

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

220,073 views • 5 months ago

No After Effects. No CapCut timeline. Just Grok writing HTML, CSS, and JS into a full motion film. This model is built different.
1:09

No After Effects. No CapCut timeline. Just Grok writing HTML, CSS, and JS into a full motion film. This model is built different.

direktur.crypto

27,853 views • 1 month ago

🚀 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 ⚡️

414,093 views • 3 years ago

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 views • 7 months ago

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 views • 1 year ago

🚨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 views • 1 year ago

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 views • 9 months ago

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

23,042 views • 4 months ago

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 ʕ•ᴥ•ʔ

286,001 views • 1 year ago

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 views • 2 years ago

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,869 views • 1 year ago

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 views • 1 year ago

CSS Tip! ✨ Trigonometric functions (sin, cos, etc.) are landing in CSS 🙌 Use them in animations & layouts 😯 How about these images laid out along a sine wave using scoped custom properties? img { translate: 0 calc(sin(var(--index) * 50%)); 👈 } CodePen.IO link below! 👇
0:27

CSS Tip! ✨ Trigonometric functions (sin, cos, etc.) are landing in CSS 🙌 Use them in animations & layouts 😯 How about these images laid out along a sine wave using scoped custom properties? img { translate: 0 calc(sin(var(--index) * 50%)); 👈 } CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

229,233 views • 3 years ago

Open Interpreter can write + run HTML/CSS/JS to make bespoke apps on the fly. > Can you make me a Pomodoro timer?
0:31

Open Interpreter can write + run HTML/CSS/JS to make bespoke apps on the fly. > Can you make me a Pomodoro timer?

killian

353,434 views • 2 years ago

Make your web UI roar-some 🦖 Swap complex JS for just a few lines of CSS to build carousels and bring animations to life. Now available in Chrome and coming soon to other browsers →
0:22

Make your web UI roar-some 🦖 Swap complex JS for just a few lines of CSS to build carousels and bring animations to life. Now available in Chrome and coming soon to other browsers →

Chrome for Developers

43,046 views • 8 months ago

Can we please stop with the scroll-jacking carousels on websites? CSS Scroll Snap is a much better solution! Re-built the Uniqlo home page with 6 lines of CSS and 4 lines of JS
2:35

Sensitive content

Can we please stop with the scroll-jacking carousels on websites? CSS Scroll Snap is a much better solution! Re-built the Uniqlo home page with 6 lines of CSS and 4 lines of JS

Wes Bos

305,237 views • 1 year ago