汉中电视台
 | 网站首页  | 新闻动态  | 汉中广电  | 视频空间  | 电视电影  | 旅游风光  | 主持人风采  | 联创专栏  | 两汉三国.真美汉中  | 广播  | 
真的程序媛,敢于用纯代码绘制巴洛克肖像
作者:admin    文章来源:未知    更新时间:2020-05-21
可能你早就听说过“ASCII艺术”这种说是代码创建的图片,即使没听说过这个名词也肯定早就用过它。一点儿也不奇怪,在还没有Emoji表情可以用的年代,你肯定用过:-D、$_$、^(oo)^之类吧。用ASCII码直接生成图形就是这种艺术的基本形式,也有人会用它来做出比较复杂一点的像是一朵花、一只小熊什么的样子,当然,我要贴出下面这种图你就会瞬间明白,哦——
 
真是的,类似玩意儿从小到大没少看过,也没啥好稀奇的了。 此前,我们在讨论AI艺术的《有脸的肖像不存在主人,没脸的肖像超越时间》、《这一次,AI打败的是当代艺术家们》等文章里,也介绍过用人工智能来画画的一些技术,GAN和CAN,分别指的是生成式对抗网络(Generative AdversarialNetwork)和创造性对抗网络(Creative Adversarial Network)。
 
去年七月份,微软的机器人小冰,在中国艺术家邱志杰的调教下,也以“夏语冰”的名字出道,假毕业展之名在中央美术学院美术馆举办了《或然世界 Alternative Worlds》作品展,在没有揭晓真相之前,人们纷纷以为那些颇为娴熟的画作出自一位18岁的天才少女之手。
 
有了上述储备的你,估计在第一眼看到“代码作画”的时候,毫不以为然,觉得这很正常嘛很多案例在先,但我要告诉你的是,这次不一样,本文要介绍的这位作者是一位真正的生物学意义上的人类,而且是用手写方式写下几千行代码来完成质感极高的作品的,而不是上面ASCII码蒙娜丽莎那般的粗糙。
这张广告招贴画似的水果,看上去虽然还没那么逼真,但在光和色彩的变换上已经蛮丰富的了,查了一下代码,使用了427行写就,每一行,都是那位叫做Diana Smith的小姐姐一个键一个键地敲出来的,看到这里,是不是突然有点肃然起敬?
 
小姐姐长这样,这是她在GitHub上的头像,我觉得挺美的,其真实身份是一位生活工作在湾区的UI工程师,也是一位在GitHub和Tweet上拥有不少关注者的技术牛人。
 
平常乐于在网上分享自己的JavaScript开发和CSS开发经验,近来更因为分享了这组用代码和层叠样式表在html上显示的图片而引起了圈内的热议,像每个热爱分享的程序猿一样,Diana不仅po出了美美的照片,还挺详尽地给了一些指南,提醒想要效仿的人最该注意的一些坑。
 
水果之外的其他四张都是女性半身像,有现代的也有古代的,神情各异,一个个风姿绰约,从中也可以看出小姐姐的艺术修养相当不错。
 
比如著名的技术博主Andy Baio就在tweet上呼吁,Francine不应只被直接观看,你还得去看看其中的代码之美。它具有层层层叠的复杂代码,这些层数必须花大量时间才能手工布置和拼合,一个参数的不慎,就会让它呈现出奇怪的效果。
 
Diana自己在指南中列举了五个会影响作者成败的要素,它们分别是:边界半径(border-radius)、盒子阴影(box-shadow)、动态(transform)、线性/径向梯度(linear-gradient, radial-gradient)、溢出(overflow)。
 
对于大多数web开发目的,边界半径的最大用处就是用来得到圆角,比如生成一个按钮,但自定义的圆形元素意味着它可以拿来模拟有机物体,比如面孔,又比如脖子。Francien的脖子就是从一个矩形开始,通过调整半径来陆续逼近的。
 
盒子阴影顾名思义就是给盒子添加阴影,它不仅可以使得图片更加真实自然,也可以被用来作为增加深度的最佳方法。
 
此外,要改变元素以使它们具有运动感或透视感,就要用到旋转、移动、缩放、扭曲等动态属性。渐变就不用说了,让色带呈现自然过渡的工具。而溢出属性能够将大量杂乱元素塞入一个整洁的包中,用来创建一些有趣的形状。
 
以上这些名词听上去好像跟你用PS或AI等软件时用的也一样一样,只不过在这里,所有的参数都是Diana从键盘上输入一个个数值调试出来的,她甚至饶有兴致地给我们展示了一下属性使用不当会导致的“灾难”。
 
下面五张分别是缺失边界半径的Francine、缺失盒子阴影的Francine、缺失动态的Francine、缺失渐变的Francine和缺失溢出的Francine,
 
在接受css-tricks网站的采访时,Diana提到,自己每天的工作大多数都是围绕JavaScript展开的,这种语言有着冗长而又复杂的各种限制。
 
相比较而言,使用html CSS成了一件超高效而又简洁的事,它能够在限制很少的情况下达成一些效果,你用着用着忍不住觉得自己是个技术大师,也就完全不吝啬花上几千行去画个画啊啥的了。
 
不仅这位创作者本人从中得到了无限变形的乐趣,就连看图片的人,也可以创造性地观看它们,还是以Francine为例,这张图片如果放在不同版本的浏览器里,是能够创造出 win 98中它是这样的:
 
当然,如果有条件,你还可以用不同的浏览器来运行看看,她能有啥奇妙变化,前提是需要置入这幅画的源代码网页(可以去Diana的GitHub页面找到),像本文中已经转换成普遍的图片格式,那就变不出来了。
文章录入:admin    责任编辑:admin 
  • 上一篇:从电视到加湿器,荣耀“杂货铺”开业!赵明顺

  • 下一篇:超70%入网智能手机提供北斗服务 我国卫星导航
  • 发表评论】【加入收藏】【告诉好友】【打印此文】【关闭窗口
    title 网友评论:(只显示最新10条。评论内容只代表网友观点,与本站立场无关!)