Home
TagsAuthors

Links

ResumeFriends

这是一个孤独行者的轨迹。

  • Lm7
  • Domik
  • Sein.js
  • wx-minigame
  • hana-ui
  • Nekohand
  • JerryFu
  • 南史
  • Hide Links
  • TagsHomeAuthors
  • Create
  • Skill
  • Art
  • Life
    • 前端视觉交互——Shader实现扩散水纹涟漪效果

      少女dtysky

      世界Skill

      时刻2018.07.01

      路标

      HTML5

      WebGL

      Shader

      Ripple

      Water

      Liquid

      Code,Demo。涟漪,是指现实世界中水面上落入物体时、以物体为圆心向四周不断生成扩散圆形式的涟漪并逐渐衰减的现象。真实世界的涟漪十分复杂,在图形学中,我们只能模拟它来按达到一个近似效果。而为了模拟涟漪,图形学也提供了各种各样的方法,像是各种map(flow map)等,但在这里,为了最简化资源和达到最好的动态效果、并阐明原理,本例由纯Shader绘制。

      Web方向传感器的正确使用姿势

      少女dtysky

      世界Skill

      时刻2018.06.25

      路标

      HTML5

      Javascript

      Orientation

      方向传感器

      现在移动设备普遍提供了重力传感器和方向传感器来测量设备方向,HTML5标准也提供了标准的API来进行方向信息的获取,获取方式是通过两个事件,他们分别是“orientationchange”和“deviceorientation”。

      前端视觉交互——Particle3DByThree

      少女dtysky

      世界Skill

      时刻2018.06.24

      路标

      HTML5

      WebGL

      3D

      Particle

      粒子

      曲线

      力

      Code ,Demo。这个效果是3D Particle Explorations其中之一的实现。觉得蛮有意思满酷炫就研究实现了一下。

      My world

      少女dtysky

      世界Create

      时刻2018.06.18

      路标

      少年H

      世界

      列车

      少年H在世界上留下的一些痕迹。

      前端视觉交互——PixelDisplacement2D

      少女dtysky

      世界Skill

      时刻2018.06.18

      路标

      HTML5

      WebGL

      Shader

      Displacement

      Water

      Liquid

      2D pixel displacement mapping,即2D像素位移映射(其实pixel换成fragment更合适,毕竟像素只是片段的一个子集),可以算作是3D vertex displacement mapping的一个变种。

      Lottie原理与源码解析

      少女dtysky

      世界Skill

      时刻2018.06.15

      路标

      HTML5

      SVG

      Lottie

      Lottie(Bodymivin)是一个动画库,其和GSAP这类专注动画曲线、插值等js动画库不同,它本质上是一套跨平台的平面动画解决方案。其提供了一套完整得从AE到各个终端的工具流,通过AE的插件将设计师做的动画导出成一套定义好的json文件,之后再通过渲染器进行渲染,它提供了“SVG”、“Canvas”和“HTML”三种渲染模式,最常用的是第一种和第二种。

      【诗】我是一个行者III

      少女命月天宇

      世界Art

      时刻2018.05.18

      路标

      诗

      原创

      行者

      孤独

      生活

      在这个夜晚, 行者停在了海上。 在风平浪静的前方, 有一轮鲜红的月亮。

      前端视觉交互——TreesGenerator2D

      少女dtysky

      世界Skill

      时刻2018.04.22

      路标

      HTML5

      Canvas

      Tree

      Growth

      利用约束参数随机通过点击生成一颗颗抽象化的树。这个效果是我在去年(2017)的the best of codepen发现的,觉得是很有意思,非常具有艺术感,于是学了下原理并在这里实现了一下。

      前端视觉交互——DigitalClock3D

      少女dtysky

      世界Skill

      时刻2018.04.22

      路标

      HTML5

      WebGL

      3D

      ThreeJS

      Clock

      一个基于THREE和GSAP(Tween)实现的3D数字时钟。这个也是以前见过的一个效果,觉得很不错就尝试做出来了。

      《某日,青年H发现,他失去了自己的良心》

      少女命月天宇

      世界Art

      时刻2018.04.08

      路标

      青年H

      良心

      这是一个平淡无奇的早晨,阳光在七点左右准确无误得从窗边以四十五度照射到了青年H的电脑桌上。如若在平时,这光并不会对他产生丝毫影响——毕竟平时的他都是要睡到九点左右的。但今日不同,此时的他正坐在椅子上,呆呆得望着窗外那被朝阳穿透的云。他一边这么望着,一边不停得用手探着自己的身子。

      «3

      4

      567»

    Links

    Lm7DomikSein.jswx-minigamehana-uiNekohandJerryFu南史

    这是一个孤独行者的轨迹。