从线条艺术到DIY实现一个网状体Net的js库

今天无意中看到一个可视化作品:

WHAT MADE ME?

INTERACTIVE PUBLIC INSTALLATION

Most Original Exhibit Award at the Birmingham Made Me Design Awards 2012.

该作品围绕信息可视化的概念,以大型复杂的数据图形式,由游客自己生成的方式进行展示,是一个集信息可视化、交互式体验的展览装置。

通过向游客询问五个简单的问题来探索伯明翰人的画像,这5个问题分别是:

什么让你思考?

什么让你创造?

什么让你生气?

什么让你快乐?

什么让你改变?

每个问题将对应不同的颜色,可以通过连接相关的单词和彩色的线条来回答问题。

几百个选项在网格中按字母顺序显示,给参与者多种可选的答案。

这种设计形式是利用彩色直线条,形成疏密变化,达到良好的视觉效果。

直线条这种设计元素,被许多设计师所喜爱,比如用线条串联文字跟图案:

还有,线描插画:

更有创意的图标:

还有ACELAND人工智能设计师,创作的gif图:

设计师对线条对运用是娴熟、喜爱、富有创造力的。

这种形式也被运用在了网页,典型的如知乎登陆页的背景,网上也有很多模仿的作品。

在这里,我们动手实现一个,并稍微拓展下,比如,可以是彩色线条:

实现思路:

  • 在画布范围生成一定数量的粒子,
  • 用线连接粒子,
  • 让粒子保持在画布内移动。

动手敲代码:

1 简单设置个css样式及canvas标签:

在body标签里,写个canvas标签。

2 封装成JS库

我希望封装成一个Net构造函数,调用的时候,通过传入canvas,以及一些参数配置,即可生成一个Net。

可配的参数:

粒子的数量,

粒子移动速度,

粒子活动范围,

线条颜色,

粒子颜色,

背景颜色等等。

下面是一些方法的设计:

整个逻辑分为2大部分,init及move:

init:

1 通过createPoints,根据传入的option参数,生成粒子群;

2 通过clear,初始化canvas,比如设置背景色,清除画布上的其他元素;

3 通过drawPoints绘制粒子群;

4 connectPoints连接粒子,形成网状结构;

结果如下:

move:

5 先用clear重设画布

6 通过movePoints移动粒子群;

7 再次通过connectPoints连接粒子,形成网状结构;

连续调用move之后,就可以形成一下效果:

其中,movePoints有2点需要注意,我们需要通过moveArea及movePoint,两个方法移动每个粒子,并判断粒子的移动方向,更新完粒子的位置之后,再次调用drawPoints绘制出所有粒子。

moveArea是判断粒子移动方向的:

movePoint根据移动方向,更新粒子的坐标

3 升级版本:

+渐变色

修改connectPoints方法里的颜色,如下:

+线宽变化

同样,修改connectPoints方法,增加一个中点的坐标:

绘制直线变为绘制一个三角形:

测试下效果,

new Net(canvas,{num:2});

如下,发现中点偏离连线太远,可以调整mx及my的参数,使其幅度更小。

调整后,再次试下:

可以达到下面的效果:

把线改粗点,换几个颜色试试

+鼠标的交互事件

相当于以鼠标位置的x,y坐标为圆心,固定或随机值为半径重新创建一个粒子,并且push进我们之前创建好的粒子群里。

给canvas绑定鼠标监听事件:

canvas.addEventListener('click', function(e) {

let x=e.clientX,

y=e.clientY;

net.addPoint(x,y);

} );

这样就可以随意增加粒子啦。

+多种线条颜色

在createPoints的时候,给不同的point设置不同的线条颜色,然后在connectPoints的时候,根据point的线条颜色,画出线条即可。

以上为全文内容。

原文发布于微信公众号 - 科技Mix设计Lab(Design-AI-Lab)

原文发表时间:2017-08-15

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

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Golang语言社区

【Golang语言社区】H5游戏开发--从零开始开发一款H5小游戏(二) 创造游戏世界,启动发条

上一节介绍了canvas的基础用法,了解了游戏开发所要用到的API。这篇文章开始,我将介绍怎么运用这些API来完成各种各样的游戏效果。这个过程更重要的是参透一些...

3753
来自专栏葡萄城控件技术团队

基于Html5的Canvas实现的Clocks (钟表)

Canvas是Html5中非常重要的Feature 之一,究竟Canvas的未来会怎么样? 各大巨头有着不同的想法,微软的IE9会全面支持Canvas, Saf...

2036
来自专栏Rindew的iOS技术分享

细数这几年我碰到过的iOS车轮

2275
来自专栏DeveWork

WebFont 三宗罪之二:吹毛求疵的WebFont 渲染差异

话说上次发了篇危言耸听的“WebFont 三宗罪”系列之一,今日来讲三宗罪之二:吹毛求疵的WebFont 渲染差异。为什么用上“吹毛求疵”这个修饰词呢?因为Je...

2205
来自专栏偏前端工程师的驿站

CSS3魔法堂:说说Multi-column Layout

前言  是否记得《读者文摘》中那一篇篇优美感人的文章呢?那除了文章内容外,还记得那报刊、杂志独有的多栏布局吗?  当我们希望将报刊、杂志中的阅读体验迁移到网页...

2085
来自专栏腾讯NEXT学位

简单粗暴的移动端适配方案 - REM

59210
来自专栏我分享我快乐

分享-类似谷歌浏览器图标的绘制方法

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

32812
来自专栏Sign

web版《合成10》代码分享

变成月更了。 想做的事情很多,继续扩展『格斗节奏』,把『小红帽』文字冒险游戏成立一个童话系列,优化『月千之夜』和『破壳曼』,上线『Boo』。继续完成各个漫画系列...

3436
来自专栏星回的实验室

CSS居中方法集锦

这阵一直忙各路笔试面试,心越来越浮躁,也好久没有写些东西。不过也正是这些虐我千百遍的笔试面试题让我愈发地觉得确有必要整理一下知识点,让网上书上看的杂乱无章的东西...

1041
来自专栏九彩拼盘的叨叨叨

《写给大家看的设计书》摘要与总结

该书适合完全没有设计背景,或在设计方面没有经过正规培训的人。 该书的描述浅显易懂,并且配有很多插图来做描述的说明。阅读起来觉得很轻松。

743

扫码关注云+社区

领取腾讯云代金券