A shader and PIXI.js tool for rendering Kaleidoscopes

Demo https://r.tiye.me/Phlox-GL/shader-kaleidoscope/

Usages

• Mouse Drag on point to move the shift position of image
• Mouse Drag on buttons to change: image scale, divide angles, radius of visible area for texture
• Click to upload a squared image as the texture
• Shift + Mouse Drag, to move canvas
• Shift + Wheel, to zoom in/out
• Hold two circles nearer to center of screen to fullscreen(disabled in desktops)

使用介绍

• Shift + 鼠标拖拽, 拖动画布 (触摸屏上是左侧菱形按钮)
• Shift + 鼠标滚轮, 缩放画布 (触摸屏上是右侧菱形按钮)
• 右下角上传文件可以替换背景图
• 触摸屏中, 同时按住操作按钮左右靠中间的圆点触发全屏(桌面版没有该功能)

几个按钮可以拖动控制各个参数,

• parts 为 3 对应万花筒三棱的效果, 也可以设置 4 或者 2.4 看是怎样的效果,
• 右侧两个按钮, 是拖动做顺时针/逆时针旋转, 控制图片和图形旋转的

Videos

Output videos:

• https://space.bilibili.com/14227306/search/video?keyword=万花筒
• https://www.ixigua.com/home/3166205900759127/video/?keyword=万花筒&list_entrance=userdetail

Workflow

https://github.com/Phlox-GL/phlox-workflow

License

MIT