J.c
原文：[Leaf Notes – An Interactive Web Toy][1] ![Art, story & experience][2] 在浏览器上体验 https://tendril.ca/ 我最近为多伦多的设计动画工作室 Tendril 推出了一个可互动的 Web 小玩具。你可以在其 [官网首页][3] 亲自体验。该网站会轮流展示数个不同的 Web 玩具，所以可能需要刷新一到两次才能看到它。 玩法非常简单：用鼠标划过植物就能使它们开花，并发出相应音调。 该项目十分有趣，我对目前结果也非常满意。[Twitter][4] 和 [Instagram][5] 上的热烈反应使我备受鼓舞，其中最让我暖心的是一位年仅四岁的小孩在平板上进行了体验。 本文将阐述我与优秀团队 Tendril 如何创造这个...
### 基本概念 #### 时间复杂度： 外链：[https://www.jianshu.com/p/f4cca5ce055a][1] #### 空间复杂度 是指一个程序运行所需内存的空间大小，利用程序的空间复杂度可以对程序运行所需要的内存大多少有个预估判断。一个程序的执行除了存储空间和存储本身所使用的指令、常数、变量和输入数据外，还需要一些对数据进行操作的工作单元和存储一些为现实计算所需信息的辅助空间。程序执行时所需存储空间包括两部分： - 固定部分：这部分空间的大小与输入、输出数据的个数多少、数值无关，主要包括指令空间（代码空间）、数据空间（常量、变量）等所占用的空间，这部分属于静态空间。 - 可变空间：这部分空间主要包括动态分配的空间，以及递归栈所需的空间等，该空间大小与算法有关。一个算法所需的存储空间用f(n)表示，S(n)=O(f(n))，其中 n 为问题的规模，S(n) 表示空间复杂度。 ### 第一章——排序 ![排序的时间和空间的复杂性][2] 来自：http://bigocheatsheet.com/ #### 最快最简单的排序——桶排序 原理是将数组分到有限数量的桶里。每个桶再个别排序（有可能再使用别的排序算法或是以递归方式继续使用桶排序进行排序）。 代码（注：实例代码主要体现算法思路，不进行验证等额外操作）： ```js function bucketSort(arr) { const buckets =...
原文：[Piet Mondrian][1] 用代码复现皮特·蒙德里安的艺术作品并不是件简单的事情。老实说，我认为没有方法能复现他的作品，毕竟它们都是手绘的。但我们可以尝试复现皮特作品的部分工作，这也是本教程要阐述的部分。当然，我们也会进行上色。 老规矩，以下是初始化代码，其中包括设置 canvas 大小和使用 `window.devicePixelRatio` 缩放 canvas 以适配视网膜屏幕。而页面中仅有一个 `` 元素。 ```js var canvas = document.querySelector('canvas'); var context = canvas.getContext('2d'); var size = window.innerWidth; var dpr = window.devicePixelRatio; canvas.width...
原文：[Hypnotic Squares][1] [William Kolomyjec][2] 的工作让我们再次想起一些以前（old school）的生成艺术，专注于简单图形、平铺和递归。 今天我们要复现他的作品之一——催眠方块。 页面中仅有一个 320x320 像素的 ``。 老规矩，以下是初始化代码，其中包括设置 canvas 大小和使用 `window.devicePixelRatio` 缩放 canvas 以适配视网膜屏幕。 ```js var canvas = document.querySelector('canvas'); var context = canvas.getContext('2d'); var size =...
原文：[Circle Packing][1] 圆形填充是一个非常神奇的效果。蕴含数学魅力的它，看似非常复杂。在本教程中，我们将创建一个有趣的圆形填充效果。尽管它实现起来并不特别高效，但仍然很快。 老规矩，初始化 canvas。 ```js var canvas = document.querySelector('canvas'); var context = canvas.getContext('2d'); var size = window.innerWidth; canvas.width = size; canvas.height = size; context.lineWidth = 2; ``` 现在，我将阐述一下实现流程，并因此而确定需要哪些变量。该实现流程并不是最高效的，但能完成工作。 流程如下：...
原文：[Un Deux Trois][1] 对于爱好生成艺术的人来说，[Vera Molnár][2] 是他们的灵感来源。因为她是最早创作数字艺术的人之一，并且作品十分引人注目。在本教程中，我们将仿造她的作品之一——一二三。 毫无疑问，我们将使用几乎称为“标准”的初始化代码，即获取用于绘制的 canvas 和上下文 context，同时设置 canvas 的尺寸大小。 ```js var canvas = document.querySelector('canvas'); var context = canvas.getContext('2d'); var size = window.innerWidth; canvas.width = size; canvas.height =...
原文：[Triangular mesh][1] > 本文由才华横溢的 [maxwellito][2] 撰写。如果你对编写文章感兴趣，可以像他一样提交一份 [提案][3]。 这种三角网格效果常出现库和 SVG 中。今天我们将用 canvas 实现它！同时，这也是一个说明坐标系和替换细节而得到漂亮效果的案例。 老规矩，首先是初始化得到一个方形 canvas。 ```js var canvas = document.querySelector('canvas'); var context = canvas.getContext('2d'); var size = window.innerWidth; canvas.width = size;...
原文：[Cubic Disarray][1] [Georg Ness][2] 的奇妙作品是生成艺术的真正灵感来源。在本教程中，我们将实现他的作品之一：无序方块。 `` 是页面中唯一的元素，其大小为 300x300 像素。 老规矩，下面是初始步骤，里面没有任何渲染操作。 ```js var canvas = document.querySelector('canvas'); var context = canvas.getContext('2d'); context.lineWidth = 2; var size = window.innerWidth; canvas.width = size; canvas.height...
原文：[Joy Division][1] 欢乐分队的专辑封面有一段非常有趣的历史。同时也是一个数据驱动艺术的惊艳案例。 ![Unknown Pleasures][2] 欢乐分队的《Unknown Pleasures》专辑封面 这里我们打算使用 canvas 实现，没有额外 API。只需在 HTML 中放置一个 300x300 像素的 元素。 首先进行初始化，没有任何渲染操作。 ```js var canvas = document.querySelector('canvas'); var context = canvas.getContext('2d'); var size = window.innerWidth;...
原文：[Tiled Lines][1] 今天，我打算在这里讲一个很早期却很简单的编程艺术。它就是最初在 Commodore 64 编码实现的 [10 PRINT][2]。 > Commodore 64：Commodore 64，也称为C64、CBM 64或在瑞典被称作VIC-64，是由Commodore（康懋达国际）公司于1982年1月推出的8位家用电脑。——[百度百科][3] 由于其简单而惊艳，已被多次实现。 这里我们打算使用 canvas 实现，没有额外 API。只需在 HTML 中放置一个 300x300 像素的 `` 元素。 首先进行初始化，没有任何渲染操作。 ```js var canvas = document.querySelector('canvas');...