设计与产品essenmitsosse.de
响应式像素画
Responsive Pixel Art
2016 — 2020，它一次次回到首页
黑点是上首页（≥ 50 分）的那次投稿，空心点是没冲上去的投稿，点越大分数越高。
导读
一个实验性网页项目，展示“响应式像素画”：像素艺术图像能随窗口大小平滑缩放和重绘，在保持像素风格的同时实现分辨率无关。作者 Marcus 用类似矢量图的方式定义图像，再实时渲染成像素数据，其中宙斯和坦塔罗斯两个演示尤为惊艳。
为什么经久不衰：它把通常与固定分辨率绑定的像素艺术做成了可缩放的响应式图形，思路在多年后仍对像素风网页设计和分辨率无关图形有启发。
HN 评论精选
作者现身说法，解释项目背景并承诺后续会发布原理详解
大家好，我是做这些分辨率无关插画的 Marcus。刚上传了最新版本，图片太小时不会再卡死了。没想到反应这么热烈——一年前就做完了，昨天在柏林的 meetup 上展示后有人要在线版本，发到 Twitter 后就火了。我正在重做主页，会包含深入讲解原理以及如何应用到实际网页设计中。
essenmitsosse查看英文原文
Hello this is Marcus, the guy who did the resolution independent illustrations. I just uploaded the current version of the site, so it will no longer freeze, when the image gets to small. I also updated the Tantalos image. I am currently a bit blown away by the reaction to this. I finished this over a year ago but didn’t manage to make it public till now. I presented this at a meetup in Berlin yesterday and someone asked for an online version, which I postet to Twitter — then things escalated quickly. So because a lot of people are asking: I am currently redoing my completely outdated homepage. The new one will include an in-depth explanation of what is actually happening there, what’s the idea behind it and how I want to apply this to actual web design to make resolution-independent work more easy and less restrictive for both designers and developers. Until then I will try to answer some questions here … Scalable Greetings Marcus
解释实现原理：图像以代码形式定义，再实时渲染为像素
看源码可以发现，图像本身是用 JS 代码定义的，几乎像矢量图。比如宙斯的定义文件，然后由一个渲染器把这些定义实时转成像素数据。
noonat查看英文原文
This is really cool! If you look at the source, it appears that the images themselves are defined as JS code, almost like a vector image. For example, Zeus: http://essenmitsosse.de/pixel/scripts/zeus.px The author then has a renderer to turn these into pixel data. It seems to render them down to an actual pixel image on the fly.
赞坦塔罗斯演示的响应式效果与神话寓意巧妙契合
坦塔罗斯那页最妙的地方在于，它的响应式实现恰好呼应了神话本身的寓意——无论他怎么伸手，果实都离得更远。
FilterSweep查看英文原文
The amazing part about the Tantalos slide was that its responsive implementation actually captured the ethos of the myth itself - no matter how far he reached, the fruit moved ever farther away. outstanding work.
推荐 OpenTTD 和 aseprite 作为缩放像素图实现的学习材料
如果你对可缩放、平移的像素图背后的代码感兴趣，推荐 OpenTTD 的 Viewport、Blitter 和窗口缩放处理代码，它还支持多个视口跟随不同对象。另外 aseprite 的缩放实现代码也很干净，它的 GUI 本身就是像素画。
tony查看英文原文
If you are interested in the code behind bitmaps / pixel sprites that scale, pan, and zoom, I'd like to offer up OpenTTD. https://www.openttd.org/ Specifically, Viewports, Blitter and Resize handling: Viewport: https://github.com/OpenTTD/OpenTTD/blob/1.9.3/src/viewport.cpp Window resizing: https://github.com/OpenTTD/OpenTTD/blob/1.9.3/src/video/sdl_v.cpp#L149 Zoom: https://github.com/OpenTTD/OpenTTD/blob/1.9.3/src/main_gui.cpp#L136 OpenTTD is interesting because it can have multiple "cameras" following objects on the screen. e.g. a viewport can be opened to follow a bus or train, zoomed in, while the main viewport is zoomed out. Also I'd like to recommend aseprite (https://www.aseprite.org/), which has even cleaner code with zoom / panning / etc. The GUI itself is also pixel art: https://github.com/aseprite/aseprite/blob/v1.2.16.3/src/render/zoom.cpp, https://github.com/aseprite/aseprite/blob/v1.2.16.3/src/app/modules/gui.cpp, https://github.com/aseprite/aseprite/blob/v1.2.16.3/src/ui/view.cpp
历次讨论
同类还值得读
贝塞尔曲线入门
A Primer on Bézier Curves
Pomax 编写的贝塞尔曲线在线教程，从基础概念一路讲到曲线求交、投影、曲率等进阶内容，并配有可交互的示例和配套的 bezier.js 库。
设计与产品上首页 7 次 · 2014–2022pomax.github.io编辑精选WebGL 水面模拟
WebGL Water
Evan Wallace 制作的 WebGL Water 演示：在浏览器里实时渲染一片水面，展示折射、反射和焦散等 GPU 图形效果。
设计与产品上首页 6 次 · 2011–2025madebyevan.com设计建议：永远不要使用黑色
Design Tip: Never Use Black
设计随笔提出“永远不要用纯黑”的建议，主张在界面和绘画中改用深灰或带色相的暗色，并借阴影与色彩关系来论证。
设计与产品上首页 5 次 · 2012–2021ianstormtaylor.com用于思考不可想象之物的媒介
Media for Thinking the Unthinkable
Bret Victor 的这个页面围绕《Media for Thinking the Unthinkable》展开，探讨我们用来思考和表达复杂问题的媒介，以及以文字/符号为主的传…
设计与产品上首页 5 次 · 2013–2020worrydream.com编辑精选页面重量很重要
Page Weight Matters
博文讲 YouTube 工程师 Chris Zacharias 的一次页面瘦身实验：团队做了一个更轻量的页面版本，起初从整体平均加载时间看反而更慢；按地理区域分层后才发现，轻量版…
设计与产品上首页 4 次 · 2012–2022blog.chriszacharias.com