正在加载视频...

视频加载失败

加载此视频时出现问题。这可能是由于临时网络问题，或视频可能不可用。

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

Adam Argyle

58,635 subscribers

15,094 次观看 • 2 年前 •via X (Twitter)

Anya Rossi• Live Now

Private livecam show

2 条评论

Trist 📚 的头像

Trist 📚2 年前

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

Steve Rios 的头像

Steve Rios2 年前

@property wow, nice!

相关视频

"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));

"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(.2o));

Xor

14,455 次观看 • 1 年前

Animation for a Halloween Ghost with CSS and JS 🎃👻

Animation for a Halloween Ghost with CSS and JS 🎃👻

Viki ✨

337,213 次观看 • 2 年前

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

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,140 次观看 • 5 个月前

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

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 次观看 • 1 个月前

🚀 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.

🚀 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 次观看 • 3 年前

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:

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 次观看 • 1 年前

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.

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 次观看 • 7 个月前

🚨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

🚨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 次观看 • 1 年前

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

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

Sebastian Aaltonen

57,420 次观看 • 9 个月前

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.

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 次观看 • 4 个月前

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 ✅

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 次观看 • 1 年前

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

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

jhey ʕ•ᴥ•ʔ

142,262 次观看 • 2 年前

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 👇

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 次观看 • 1 年前

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 💀

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,882 次观看 • 1 年前

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! 👇

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 次观看 • 3 年前

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

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 次观看 • 3 年前

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 →

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 次观看 • 8 个月前

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

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 次观看 • 1 年前