/shader-kaleidoscope

A Shader and PIXI.js tool for rendering image into a Kaleidoscope

Primary LanguageCirru

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:

Workflow

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

License

MIT