照猫画沪是一个微信小程序，通过微信扫描上面的二维码就可以使用。

该小程序是用类似给图片添加滤镜的方式将上海建筑、计算机经典算法、经典艺术名作联系了起来。通过可视化展现它们的主要特点，加深用户对它们的理解。

小程序中会用一只猫的图片对所有的滤镜效果进行演示。用户可以选择感兴趣的滤镜，并且通过我们提供的有趣的小短文，了解其背后的艺术特点和算法原理。

这之后用户可以选择感兴趣的“沪”(上海)的建筑图片，用指定滤镜对图片进行绘制，达到照猫画“沪”的效果，也可以在绘制过程中深入理解之前学习的算法和艺术品的特点。

同时我们也对用户阅读小短文以及绘制图片的情况进行了简单的可视化。

该小程序的使用方法非常简单，只需要简单的四步。

点击首页有猫的圆型按钮，进入图片选择页面。可以通过点击上面的标签对图片进行筛选。对于每一张图像，可以点击右边的眼睛查看图片的介绍小文章，同时也可以点击左边的单选框进行选择。

下面是选择的是东方明珠标签下的陆家嘴的一张照片。

点击首页的绘画风格，进入绘画风格选择页面。绘画风格的选择方法和选择图片相似。

下面选择的是梵高标签下的星月夜。

点击首页的绘画手法，进入绘画手法选择页面。绘画手法的选择方法和选择图片相似。

下面选择的是图算法标签下的 BFS 算法。

当三个部分都选择完成之后就可以点击绘制按钮，进入绘制界面。当绘制界面后可以选择对图片进行保存和放弃。

下面是绘制过程，因为是 gif 且像素很低，所以效果不太好。感兴趣可以直接去小程序查看。

所有保存的图片可以在作品页面查看，同时会对图片、绘画风格、绘制手法以及文章的阅读情况进行简单的可视化。

众所周知，计算机算法在人们的印象中就是抽象，晦涩。但其实不然，这些算法不仅有趣，并且我们在生活中也不知不觉地在使用。

在小程序里会对每种算法用一篇短文生动进行介绍，然后对其的特点进行可视化。用有趣、直观的方式带领大家了解算法。

下面是对均匀随机算法的介绍以及 BFS 算法的结果。

下面是三种经典图算法可视化的结果，只看结果差异不明显，但是看这些图片动态绘制的过程就很明显了，很能体现出这三种算法的特点。感兴趣的同学可以去小程序查看。

艺术品一直离生活太远，大多数人也不关心和了解，更不会去鉴赏美、欣赏美。

这里会对每一些经典艺术品的特点进行有趣的介绍，并且选择一种有联系的艺术⻛格进行可视化。让人们能亲自体验用艺术⻛格进行创造。

下面是对星月夜的介绍的文章，和绘画风格对应的效果。

我们人生活在建筑里，却从来没有对建筑的风格进行了解。这里提供了大量的上海各个建筑的图片，用了一种有趣、独一无二的方式去展示它们。

下面是陆家嘴的图片和介绍的文章。

（1）技术栈：微信小程序 + 微信云开发 + lin-ui + antv + canvas

（2）算法特点和艺术品分割可视化思路：

• 从选择的图片上取样一些像素点，然后在按照取样的顺序、根据这些像素点的颜色，用新的方法重新绘制。
• 每一种算法的特点对应一种取样的方式，体现为不同的渲染图片的方式。
• 每一种艺术风格对应一种绘制新的绘制像素点的方法，体现为图片最后的展示方式。
• 每一种具体的可视化的思路会在算法和艺术风格对应的小文章说明。

下面是一些对陆家嘴的一张照片用不同绘画风格绘制的效果，动态的绘制过程欢迎大家去小程序里查看。

绘制过程有点卡顿，绘制效果比较模糊。

这是因为小程序的性能不高。一方面是会导致绘制过程比较卡顿，另一方面导致不能从图像上取样太多的点去绘制，所以每个点就会绘制的比较大，从而绘制效果模糊。

当时选择微信小程序的原因有两个原因。

• 写起来方便：使用小程序提供的云开发，不用去写后端。同时也不需要自己部署和运维。
• 跨端：不用给 Android 和 IOS 系统各写一套代码，只要有微信就可以体验。

• 在 PC 端写一个网页，解决绘制卡顿和绘制效果模糊的问题。
• 添加更多的绘制手法（算法）和绘制风格（艺术品)。

⛵️感谢帅气的雷吉安（联系方式：13308087327）小哥哥幸苦地对图片进行分类和贴标签！

⛴感谢漂亮的廖彬竹（联系方式：18217623272）小姐姐为该小程序设计logo！