TE
科技回声
首页24小时热榜最新最佳问答展示工作
GitHubTwitter
首页

科技回声

基于 Next.js 构建的科技新闻平台,提供全球科技新闻和讨论内容。

GitHubTwitter

首页

首页最新最佳问答展示工作

资源链接

HackerNews API原版 HackerNewsNext.js

© 2025 科技回声. 版权所有。

The Art of PNG Glitch

222 点作者 erikschoster超过 9 年前

14 条评论

mrspeaker超过 9 年前
I was always interested in glitching images - but was frustrated with the checksum&#x2F;read errors. I took a slightly different approach with JPGCrunk (<a href="http:&#x2F;&#x2F;www.mrspeaker.net&#x2F;dev&#x2F;jpgcrunk&#x2F;" rel="nofollow">http:&#x2F;&#x2F;www.mrspeaker.net&#x2F;dev&#x2F;jpgcrunk&#x2F;</a>): instead of modifying the image then trying to display it, randomly mess with the internals of the encoder (I used a JavaScript implementation so it was easy to modify <a href="https:&#x2F;&#x2F;github.com&#x2F;mrspeaker&#x2F;jpgcrunk&#x2F;blob&#x2F;master&#x2F;scripts&#x2F;enc.js#L548" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;mrspeaker&#x2F;jpgcrunk&#x2F;blob&#x2F;master&#x2F;scripts&#x2F;en...</a>)<p>This way the &quot;glitching&quot; happens inside the encoder algorithm, and then there&#x27;s nothing to have to repair!
评论 #10223835 未加载
评论 #10226002 未加载
lbebber超过 9 年前
I made an animated PNG glitching demo a while ago. <a href="http:&#x2F;&#x2F;codepen.io&#x2F;lbebber&#x2F;pen&#x2F;EjVPao" rel="nofollow">http:&#x2F;&#x2F;codepen.io&#x2F;lbebber&#x2F;pen&#x2F;EjVPao</a><p>The approach is simple: just mess with the base64 string.
pavel_lishin超过 9 年前
Chrome seems to load the examples really slowly, and some of them not at all.
评论 #10224623 未加载
评论 #10222715 未加载
评论 #10223135 未加载
评论 #10222724 未加载
nateguchi超过 9 年前
A few people did this back in the days of flash [1]<p>[1] <a href="http:&#x2F;&#x2F;blog.soulwire.co.uk&#x2F;wp-content&#x2F;uploads&#x2F;2010&#x2F;02&#x2F;glitchmap.swf" rel="nofollow">http:&#x2F;&#x2F;blog.soulwire.co.uk&#x2F;wp-content&#x2F;uploads&#x2F;2010&#x2F;02&#x2F;glitch...</a><p>(more info: <a href="http:&#x2F;&#x2F;blog.soulwire.co.uk&#x2F;laboratory&#x2F;flash&#x2F;as3-bitmapdata-glitch-generator" rel="nofollow">http:&#x2F;&#x2F;blog.soulwire.co.uk&#x2F;laboratory&#x2F;flash&#x2F;as3-bitmapdata-g...</a>)
评论 #10230454 未加载
TazeTSchnitzel超过 9 年前
I didn&#x27;t know PNG was so simple. Encode scanlines in terms of each other, then pass the whole thing to DEFLATE... and it is effective. That&#x27;s very elegant.
评论 #10223929 未加载
评论 #10224340 未加载
fitzwatermellow超过 9 年前
While it&#x27;s definitely not my cup of tea, Glitch Art certainly has a long and twisted history ;)<p><a href="http:&#x2F;&#x2F;kernelmag.dailydot.com&#x2F;issue-sections&#x2F;features-issue-sections&#x2F;12265&#x2F;glitch-art-history&#x2F;" rel="nofollow">http:&#x2F;&#x2F;kernelmag.dailydot.com&#x2F;issue-sections&#x2F;features-issue-...</a>
mfkp超过 9 年前
Related - online tool to play with JPG glitching: <a href="https:&#x2F;&#x2F;snorpey.github.io&#x2F;jpg-glitch&#x2F;" rel="nofollow">https:&#x2F;&#x2F;snorpey.github.io&#x2F;jpg-glitch&#x2F;</a>
spin超过 9 年前
I am reminded of the story behind the cover art for the soundtrack to &quot;The Social Network&quot;: <a href="http:&#x2F;&#x2F;www.rob-sheridan.com&#x2F;TSN&#x2F;" rel="nofollow">http:&#x2F;&#x2F;www.rob-sheridan.com&#x2F;TSN&#x2F;</a>
bhauer超过 9 年前
My favorite is Figure 17, the alpha glitched image with &quot;PNG&quot; written four times.
评论 #10223270 未加载
octatoan超过 9 年前
How was the header image made?
psychobabble超过 9 年前
Whhhyyyyyy ?
imaginenore超过 9 年前
Ironically, the big header image is JPG<p><a href="http:&#x2F;&#x2F;ucnv.github.io&#x2F;pnglitch&#x2F;files&#x2F;header.jpg" rel="nofollow">http:&#x2F;&#x2F;ucnv.github.io&#x2F;pnglitch&#x2F;files&#x2F;header.jpg</a>
itistoday2超过 9 年前
I think the very last one is my favorite. It has an interesting mix of modified and unmodified components.
wonkaWonka超过 9 年前
The interesting part about PNG is that since it uses the DEFLATE algorithm, and only applies compression per row&#x2F;line, with no awareness of relationships between lines, is that in most cases, the effective compression is nearly the same as if you took apart each row of uncompressed pixels as an individual image, and took all those separate images and put them in a zip file.<p>Disregarding the cruft of headers and other file format overhead, there would be a direct relationship between the size of a PNG image, and the raw, uncompressed row-level data zipped up and handled in a similar way.
评论 #10222832 未加载
评论 #10222823 未加载