С помощью чего реализуют такой эффект?

Question

[Алексей Скляров]

Есть сайт luciekoldova.com , в шапке которого вращаются частицы по кругу. С помощью чвего вообще реализуется подобное?

Наткнулся на three.js, particles.js , но все они реализуют какую-то хаотичную систему, а хотелось бы просто залить весь экран этими частицами, с возможностью взаимодействовать с ними (например сдувать слева направо).

Answer 1

[McBernar]

В three.js вы можете делать с партиклями что захотите.
На самом деле, это даже довольно просто — там очень крутой API у библиотеки.

Answer 2

[Roman Grinberg]

На сайте, если посмотреть код, реализовано с помощью canvas в div с классом sim.

Если порыться в коде сайта, то там можно найти скрипт, связанный с этим:

Код

var basePath = '';
			var imageSizes = [160,230,320,640,750,1440,1536,1920,2048,2880,3840]
			var simConfigs = {"pages":{"home":{"zoom":0,"points":{"pointColor":1,"pointSize":1.5,"slope":13.552421676545,"strength":1.7883149872989,"offset":8.5266723116003,"displace":0,"explicitCount":50,"rotation":0.02},"noise":{"timeSpeed":0.06,"scaleX":15,"scaleY":50,"scaleZ":35,"exp":10,"depth":6}},"materials2":{"zoom":1},"studio":{"zoom":0.8,"points":{"pointColor":0.95,"pointSize":3,"slope":16.8,"strength":3,"offset":15,"displace":-0.0245,"count":0,"explicitCount":4000,"rotation":0.05},"noise":{"timeSpeed":2,"exp":0.75,"depth":1}},"list":{"zoom":0,"points":{"pointColor":1,"pointSize":1,"pointOpacity":1,"slope":17.344299745978,"strength":3,"displace":-0.067908552074513,"displaceNormalWeight":1,"rotation":0.03},"noise":{"scaleX":50,"scaleY":20,"scaleZ":5,"depth":3}}},"materials":{"glass":{"points":{"slope":1.5,"strength":2.3,"offset":-26.155800169348,"displace":0.02,"count":0.61087383573243,"rotation":0.05},"noise":{"timeSpeed":0.5,"scaleX":50,"scaleY":50,"scaleZ":50,"exp":6.8284289585097,"depth":6}},"wood":{"points":{"slope":3,"strength":3,"offset":-14.233690562897,"displace":-0.024555461473328,"displaceNormalWeight":1,"rotation":0.1},"noise":{"animate":1,"constrainScale":0,"scaleX":18,"scaleY":35,"scaleZ":1,"invert":1}},"metal":{"points":{"pointOpacity":1,"pointSize":25,"slope":14.094118543607,"strength":3,"offset":39.95766299746,"displace":0,"count":0,"explicitCount":500,"rotation":0.1},"noise":{"timeSpeed":2,"exp":0.75960321761219,"depth":1}},"fabric":{"points":{"slope":1.2,"strength":2.4,"offset":15,"displace":0.1,"count":0.7,"rotation":0.062150719729043},"noise":{"timeSpeed":0.69,"scaleX":17.5,"scaleY":21.8,"scaleZ":96.7,"exp":5.6,"depth":1}},"marble":{"points":{"slope":5.4269686706181,"strength":0.84538526672312,"offset":30.744234332815,"displace":0.066124114673585,"displaceNormalWeight":0.33598645215919,"rotation":0.1},"noise":{"timeSpeed":0.039996610023081,"scaleX":30,"scaleY":15,"scaleZ":4,"exp":3,"depth":5}},"copper":{"points":{"pointSize":1.3,"slope":0.55169701383831,"strength":3,"offset":12.861998404606,"displace":0,"displaceNormalWeight":0.075867929109007,"count":0.55722453438768,"rotation":0.05},"noise":{"timeSpeed":0.1,"scaleX":1,"scaleY":2,"scaleZ":50}},"cork":{"points":{"slope":0.55169686706181,"strength":3,"offset":-50,"displace":0.018797629127858,"displaceNormalWeight":0.65029635901778,"rotation":0.05},"noise":{"timeSpeed":0.07298899237934,"scaleX":11.347174621187,"scaleY":84.881455195136,"scaleZ":12.375726760365,"exp":8.9331646007486}},"leather":{"points":{"slope":3.531030589949,"strength":3,"offset":50,"displace":0,"rotation":0.018797905178095},"noise":{"timeSpeed":0.02,"scaleX":5,"scaleY":5,"scaleZ":30,"exp":0.9}},"plastic":{"points":{"slope":0.01,"strength":0,"offset":0,"displace":-0.26299745977985,"rotation":0.1},"noise":{"animate":1,"timeSpeed":-0.3,"constrainScale":1,"scaleX":42.5,"scaleY":42.5,"scaleZ":42.5,"invert":1,"exp":2.060066434294,"depth":2}}},"home":{"from":{"zoom":0,"points":{"pointColor":1,"pointSize":1.5,"slope":13.552421676545,"strength":1.7883149872989,"offset":8.5266723116003,"displace":0,"explicitCount":50,"rotation":0.02},"noise":{"timeSpeed":0.06,"scaleX":15,"scaleY":50,"scaleZ":35,"exp":10,"depth":6}},"to":{"points":{"slope":1.5,"strength":2.3,"offset":-26.155800169348,"displace":0.02,"count":0.61087383573243,"rotation":0.05},"noise":{"timeSpeed":0.5,"scaleX":50,"scaleY":50,"scaleZ":50,"exp":6.8284289585097,"depth":6}}}}

И в других файлах тоже есть что-то связанное с конфигом для этого. Тут проще будет использовать particles.js или three.js со своими правками.