纯Shading Language绘制HTML5时钟

今天是2014年的最后一天,这个时刻总会让人想起时钟,再过几个小时地球人都要再老了一岁,于是搞个HTML5版的时钟就是我们今天要完成的任务,实现HTML5的时钟绘制一般会采用三种方式,第一种采用CSS的实现方式,例如 http://www.css-tricks.com/examples/CSS3Clock/ ;第二种采用SVG的实现方式,例如 http://www.css-tricks.com/examples/CSS3Clock/;第三种采用Cavnas的2D绘制方式,如HT for Web中《矢量手册》中自定义绘制的clock例子,HT的例子的实现效果如下,其实现代码附在本文的最后部分。

以上三种方式都是较容易理解的实现方式,今天我们将采用的则是较为少见的WebGL纯Shading Language实现方式,这种方式极其高效,毕竟我们采用的是可利用GPU硬件加速的WebGL技术,CPU代码角度看仅有两个三角形的绘制,真正表盘的绘制逻辑完全在GPU对两个三角形进行Fragment Shading时实现。

可通过这里 http://js.do/hightopo/glsl-clock 玩玩最后的实现效果以及实现代码,采用GLSL的实现最重要的就是决定当前坐标位置的gl_FragColor的颜色,我们将始终分为表盘、外圈、刻度、时针、分针和秒针几个部分,代码后部分的留个连续Blend代码相当于逐层绘制的逻辑,以下几个函数技术点说明:

  • Rect函数中的clamp(uv, -size/2.0, size/2.0))是我们决定点是否在矩形区域的技巧
  • 函数Rotate(vec2 uv,float angle)将坐标点旋转到水平或垂直位置方便我们确定Rect和Line参数进行对比
  • Blend函数mix(shapeColor, backColor, smoothstep(0.0, 0.005, shape))是常用的混合mix和smoothstep达到更好处理边缘平滑效果GLSL常用技巧

为了说明mix和smoothstep的融合效果,我搞了个 http://js.do/hightopo/glsl-smooth-clrcle 的例子,你可以尝试去掉#define SMOOTH后边缘锯齿较明显的问题,也可以调节smoothstep(0.49, 0.5, d)的0.49为0.3等较小的参数体验渐进的效果,以下为几种效果的综合对比

GLSL的Fragment Shader实现代码如下:

#ifdef GL_ES
precision mediump float;
#endif

uniform float time;
uniform vec2 resolution;

float pi = 3.1415926; 
float tau = pi * 2.0;

vec2 Rotate(vec2 uv,float angle);

float Circle(vec2 uv,float r);
float Rect(vec2 uv,vec2 size,float r);
float Line(vec2 uv,vec2 start,vec2 end,float r);
float Merge(float a,float b);
float Outline(float a,float r);

vec3 Blend(vec3 backColor, vec3 shapeColor, float shape);

float SecStep(float x); 

void main( void ) 
{
        vec2 res = resolution / resolution.y;
        vec2 uv = ( gl_FragCoord.xy / resolution.y );
        uv -= res / 2.0;                                       

        float secAng = (SecStep(time) / 60.0) * tau;
        float minAng = (time / 3600.0) * tau;
        float hourAng = (time / 43200.0) * tau;

        float clockFace = Circle(uv, 0.45);
        float clockTrim = Outline(clockFace, 0.01);

        vec2 secDomain = Rotate(uv, secAng); 
        float clockSec = Line(secDomain, vec2(0.0, -0.15), vec2(0.0, 0.35), 0.001);
        clockSec = Merge(clockSec, Circle(uv, 0.01));
        clockSec = Merge(clockSec, Rect(secDomain - vec2(0.0, -0.08), vec2(0.012, 0.07), 0.0));

        float clockMin = Line(Rotate(uv, minAng), vec2(0.0,-0.08), vec2(0.0, 0.35), 0.005);
        float clockHour = Line(Rotate(uv, hourAng), vec2(0.0,-0.05), vec2(0.0,0.3), 0.007);
        clockHour = Merge(clockHour, Circle(uv, 0.02));

        float tickMarks = 1.0;
        vec2 tickDomain = uv;
        for(int i = 0;i < 60;i++)
        {
            tickDomain = Rotate(tickDomain, tau / 60.0);
            vec2 size = (mod(float(i + 1), 5.0) == 0.0) ? vec2(0.08, 0.01) : vec2(0.04, 0.002); 
            tickMarks = Merge(tickMarks, Rect(tickDomain - vec2(0.38, 0.0), size, 0.0));
        }

        vec3 faceColor = mix(vec3(1.0, 1.0, 0.0), vec3(1.0, 1.0, 1.0), uv.x+0.5); 
        vec3 trimColor = mix(vec3(0.0, 1.0, 0.0), vec3(0.0, 0.0, 1.0), uv.y + 0.5); 
        vec3 secColor = vec3(1.0, 0.0, 0.0); 
        vec3 handColor = vec3(0.0, 0.0, 0.0);

        vec3 color = mix(vec3(1.0, 0.0, 0.0), vec3(1.0, 1.0, 1.0), uv.y+0.5);
        color = Blend(color, faceColor, clockFace);
        color = Blend(color, trimColor, clockTrim);
        color = Blend(color, trimColor, tickMarks);                    
        color = Blend(color, handColor, clockHour);
        color = Blend(color, handColor, clockMin);
        color = Blend(color, secColor, clockSec);    

        gl_FragColor = vec4(color, 1.0);
}
float SecStep(float x)
{
    float interp = smoothstep(0.80, 1.0, mod(x, 1.0));
    return floor(x) + interp + (sin(interp * pi)) ;
}            
float Line(vec2 uv,vec2 start,vec2 end,float r)
{
    return Rect(uv-(end+start)/2.0, vec2(r, end.y - start.y), r);
}
float Rect(vec2 uv,vec2 size,float r)
{
    return length(uv - clamp(uv, -size/2.0, size/2.0)) - r;    
}            
vec2 Rotate(vec2 uv,float angle)
{
    return mat2(cos(angle), sin(angle),-sin(angle), cos(angle)) * uv;
}
float Circle(vec2 uv,float r)
{
    return length(uv) - r;    
}
float Merge(float a,float b)
{
    return min(a, b);    
}
float Outline(float a,float r)
{
    return abs(a) - r;    
}
vec3 Blend(vec3 backColor, vec3 shapeColor, float shape)
{       
    return mix(shapeColor, backColor, smoothstep(0.0, 0.005, shape));
}

HT for Web中《矢量手册》中自定义绘制的clock例子实现代码如下:

function init() {
    dataModel = new ht.DataModel();
    graphView = new ht.graph.GraphView(dataModel);
    view = graphView.getView();

    view.className = 'main';
    document.body.appendChild(view);
    window.addEventListener('resize', function(e) {
        graphView.invalidate();
    }, false);

    ht.Default.setCompType('clock-face', function(g, rect, comp, data, view) {
        var cx = rect.x + rect.width / 2;
        var cy = rect.y + rect.height / 2;
        var theta = 0;
        var r = Math.min(rect.width, rect.height)/2 * 0.92;
        
        g.strokeStyle = "#137";
        for (var i = 0; i < 60; i++) {                        
            g.beginPath();
            g.arc(
                cx + Math.cos(theta) * r, 
                cy + Math.sin(theta) * r, 
                i % 5 === 0 ? 4 : 1, 
                0, Math.PI * 2, true);
            g.closePath();
            g.lineWidth = i % 5 === 0 ? 2 : 1;
            g.stroke();
            theta = theta + (6 * Math.PI / 180);
        }
    });

    ht.Default.setImage('clock', {
        width: 500,
        height: 500,
        comps: [
            {
                type: 'circle',
                relative: true,
                rect: [0, 0, 1, 1],
                background: 'yellow',
                gradient: 'linear.northeast'
            },
            {
                type: 'clock-face',
                relative: true,
                rect: [0, 0, 1, 1]
            },
            {
                type: function(g, rect, comp, data, view) {
                    // get current time
                    var date = data.a('date');
                    if(!date){
                        return;
                    }
                    
                    var hours = date.getHours();
                    var minutes = date.getMinutes();
                    var seconds = date.getSeconds();
                    hours = hours > 12 ? hours - 12 : hours;
                    var hour = hours + minutes / 60;
                    var minute = minutes + seconds / 60;
                    var clockRadius = 250;

                    // save current context
                    g.save();

                    g.translate(clockRadius, clockRadius);
                    g.beginPath();

                    // draw numbers
                    g.font = '36px Arial';
                    g.fillStyle = '#000';
                    g.textAlign = 'center';
                    g.textBaseline = 'middle';
                    for (var n = 1; n <= 12; n++) {
                        var theta = (n - 3) * (Math.PI * 2) / 12;
                        var x = clockRadius * 0.75 * Math.cos(theta);
                        var y = clockRadius * 0.75 * Math.sin(theta);
                        g.fillText(n, x, y);
                    }

                    // draw hour
                    g.save();
                    var theta = (hour - 3) * 2 * Math.PI / 12;
                    g.rotate(theta);
                    g.beginPath();
                    g.moveTo(-15, -5);
                    g.lineTo(-15, 5);
                    g.lineTo(clockRadius * 0.5, 1);
                    g.lineTo(clockRadius * 0.5, -1);
                    g.fill();
                    g.restore();

                    // draw minute
                    g.save();
                    var theta = (minute - 15) * 2 * Math.PI / 60;
                    g.rotate(theta);
                    g.beginPath();
                    g.moveTo(-15, -4);
                    g.lineTo(-15, 4);
                    g.lineTo(clockRadius * 0.8, 1);
                    g.lineTo(clockRadius * 0.8, -1);
                    g.fill();
                    g.restore();

                    // draw second
                    g.save();
                    var theta = (seconds - 15) * 2 * Math.PI / 60;
                    g.rotate(theta);
                    g.beginPath();
                    g.moveTo(-15, -3);
                    g.lineTo(-15, 3);
                    g.lineTo(clockRadius * 0.9, 1);
                    g.lineTo(clockRadius * 0.9, -1);
                    g.fillStyle = '#0f0';
                    g.fill();
                    g.restore();

                    g.restore();
                }
            }
        ]
    });

    var node = new ht.Node();
    node.setPosition(150, 150);
    node.setSize(250, 250);
    node.setImage('clock');
    node.a('date', new Date());
    node.s('image.stretch', 'centerUniform');
    dataModel.add(node);

    graphView.setEditable(true);
    
    setInterval(function(){
        node.a('date', new Date());
    }, 1000);
}

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏TEG云端专业号的专栏

【TEG TALK 5】唐国华|重复的事情一定很无聊吗

千淘万漉虽辛苦 吹尽狂沙始到金 他给我讲话的时候,我好难和平日一样嘻哈起来,不由自主的正襟危坐,他认真的表情、认真的态度、认真的语言,让我听到那~~么好笑的话...

2786
来自专栏前端架构

细节决定品质

首先不谈设计我想谈下剪头发,我们每个人都要修剪头发,特别是男人,以前我的头发是妈妈剪的,那时的她是以节约为目的的,她觉得她剪的很好,我也这么认为,所以我一直觉得...

753
来自专栏我分享我快乐

广告设计中的“虚实”对比——使用“径向模糊”

前言:学生们在学习ps软件的过程中非常的认真与努力,所以对于软件的使用可以说已经很熟练了,可是为什么当我们给学生安排一些原创设计需求的时候,学生却有种无从下手的...

3417
来自专栏无原型不设计

3个细节,轻松区分效果图和原型图

产品设计是一个相对宽泛的概念,其中包含的内容不胜枚举。尤其对于新人小白来说,产品设计的分工分类着实令他们头痛。有些设计人员很多时候连自己画的到底是什么都不知道...

2515
来自专栏C语言及其他语言

本杰明·富兰克林会怎样学习编程?

来源:编程派 优秀的编程方法是极难教的。编程书籍大抵都是这样开头的:“这是X方法的例子,还有下面这个例子”。教教基础是容易的,因为基础知识也就那么多。难就难在...

33710
来自专栏MelonTeam专栏

Flipagram 涂鸦特效逆向分析

背景 Flipagram是美国一款非常火爆的短视频应用,一度登顶美国appstore榜首。前段时间又被今日头条重金收购,被当做今日头条发展海外短视频、提升国际影...

2277
来自专栏程序员维他命

《如何有效整理信息》- 读书笔记

本书作者(奥野宣之)介绍了一个关于整理笔记的方法:“一元笔记法”。该方法摒弃了将笔记进行分类整理的方式,而是采用了一元化的方案:不采用分类记录的方式,而是将所有...

791
来自专栏帮你学MatLab

可先利其器——记忆力

记忆的时候是需要专注的。可视范围内如果有色彩明艳的物体势必会吸引注意力,那么想要帮助记忆就可以使用荧光笔将需要记忆的做上标记,或者使用其他颜色的笔书写或圈点;周...

32413
来自专栏玉树芝兰

作文练了十年,你就写成这样?

大学毕业生其实都知道,对于一篇“过得去”的毕业论文来说,10000字,真实有效的写作过程可能只需要10天(我是不是说长了?)。

542
来自专栏前端桃园

前端吐血推荐的必读书籍

自古以来就有书中自有黄金屋,书中自有颜如玉。前阵子当当搞活动,买书满 200 减 100,但是很多同学给我留言让我推荐书籍,当时是真没空,现在有空了把我看过的一...

1014

扫码关注云+社区