The Pixel Factory

http://acko.net/files/gltalks/pixelfactory/online.html#0

by bpierre • 11 years ago

739 47 11 years ago

matiasb• 11 years ago

Cool!

fredley• 11 years ago

This is incredible. I've learned a lot of this before, but without the awesome slides, but this presentation makes most of it so easy to understand that it becomes obvious that that's how these problems should be approached.

It really does go to show how much of a difference presentation goes to aid learning and (more importantly) understanding.

AshleysBrain• 11 years ago

Exceptional visualisations! At least for me, seeing things like the camera zooming so it's placed between the perfect-vector world and rasterised world just makes it so clear. A picture is worth a thousand words, but a visualisation like that may be worth ten thousand.

kelsolaar• 11 years ago

Impressive and really efficient presentation (not surprising from Steven Wittens).

desuvader• 11 years ago

Great job, Steven. I don't think I have ever seen anything like this before on the web. This was extremely fun to watch/read. I'll be taking a look at MathBox.js and see if I can build something fun with it as well.

joosters• 11 years ago

If you haven't seen his website front page, it's well worth a look too: http://acko.net/

I think it's been on HN before, It was the first WebGL site I've seen that just worked.

GaiusCoffee• 11 years ago

Amazing! :D Learned a lot about pixels

ChicagoBoy11• 11 years ago

Incredible work!

shultays• 11 years ago

Great presentation, however I must say the transition effect on texts are a bit too much. As soon as they appear I try to read them but they move around for a half second. A bit annoying

chrismorgan2• 11 years ago

Any one of these diagrams is the sort of thing that in one fell swoop demonstrates a principle and how something works, where a lecturer at Uni may spend twenty minutes with a couple of diagram and plenty of hand gestures and produce an inferior result. The combination of them all together makes this the sort of thing that would be a superb basis for more complete educational/training materials.

jacobolus2• 11 years ago

The thing is, a lecturer spends 20 minutes doodling this and can explain most of the same, especially if there is some ability to directly interact with the audience and clear up misconceptions. Maybe in the worst case a good lecturer takes twice as long to get the explanation across. If need-be, the lecturer can elaborate on any piece, or draw a completely new picture as the situation demands.

By contrast, making the fancy animated version takes 20 hours, plus another several hundred hours (or perhaps 1-2 orders of magnitude more) to build the framework underneath. Even better would be to make interactive explanations, but that would take dramatically more work than even the animated version.

If someone can spare the time to do it, it obviously has tremendous value, but each animator can only explain a tiny number of things in this medium, compared to, say writing a whole book with the same amount of effort. It’s similar to the contrast between telling hundreds of stories around the campfire or writing a novel vs. animating a few minutes of a Disney film.

Ideally we’d have ten thousand skilled animator/programmer/educators working on creating such explanations, sharing tools and ideas, coordinating effort to build more complete curricula, etc., but there’s not currently anyone paying them to do it, so today there are only a handful, working as volunteer hobbyists. There’s no incentive for current educators (say, college professors or high school teachers or textbook authors) to spend their time making this kind of thing, since it’s not an established and recognized genre yet, and a vanishingly small proportion of them have the requisite skills.

efaref• 11 years ago

But you only have to spend those 20 hours once.

chrismorgan2• 11 years ago

I’m not quite a fair case as I already understood all of the stuff in this talk (or at least broadly in the case of the more advanced maths), but I’m quite confident that when I was starting delving into graphics stuff that I would have got more out of half an hour going through this presentation by myself than ten times as long with a lecturer at Uni. Even one-on-one would have taken a few times as long without such visible demonstrations as are contained so beautifully in this presentation.

Uni lecturers can actually work on these sorts of things if they are so inclined; I remember one lecturer who had developed such a system, with the assistance of one of his students for part of the time as part of a research project, all as a part of his job at the Uni, not as volunteer work.

You are, of course, quite correct that the actual implementation of such a thing would take a long time; I’m familiar with this as I’ve been working on a number of more advanced interactive things and visualisations as part of some Rust training materials that I’m producing (“a book” is such a sad way of expressing such a rich subject). These things definitely do take a long time, but if they’re done well, they seriously are well over an order of magnitude better than the alternatives.

Most of all, I just want people to see things like that so that they realise just what is possible. Slides! Oh, such shackles we needlessly place upon ourselves. Static text! Oh, the vistas of imagination never explored, never seen, never even imagined.

benihana2• 11 years ago

That's really what good teaching is. It's the condensing of years work and thought into a 10 second blurb someone else can consume.

I really appreciate this presentation and I can't imagine the amount of work that went into making look it effortless and seamless.

coldtea• 11 years ago

The thing is, a lecturer spends 20 minutes doodling this and can explain most of the same, especially if there is some ability to directly interact with the audience and clear up misconceptions.

And most of it, even in the best universities, flies right over the student's head, or they understand how to handle the abstraction and notation, but lack an intuitive model of what's going on in their head.

By contrast, making the fancy animated version takes 20 hours, plus another several hundred hours (or perhaps 1-2 orders of magnitude more) to build the framework underneath.

Once it's built though, it can be delivered to billions of students.

There's not even a contest between the quality of this and some lecturer's doodles -- this is an order of magnitude better.

And if we want, we can always augment it with a lecturer explaining the graphics further and going into detail.

Ideally we’d have ten thousand skilled animator/programmer/educators working on creating such explanations, sharing tools and ideas, coordinating effort to build more complete curricula, etc., but there’s not currently anyone paying them to do it

That's the problem -- noone paying them --, not that it's too difficult or expensive.

If anything we spend several orders of magnitude more on BS such as dog toys anually that it would cost to hire those "ten thousand skilled animator/programmer/educators".

sdenton4• 11 years ago

Another issue here is that, in addition to taking a bunch of time to build these presentations, there are piles of other demands on a prof's time. If they're a pure instructor, they have three or four other classes to teach, papers to grade, etc. If they're a researcher, they've got maybe another class or two and a strong obligation to produce world-class research, or else their teaching load will go up...

The other issue is that presentations with shiny graphics probably aren't the best way to teach, either! I can give the best lecture or presentation in the world and still have a room full of students who couldn't reproduce even a tiny bit of it. The reason for the slow pace of lectures is to break up material into small, reproducible bits: we want students to understand the ins-and-outs of the cross-product, rather than just leave it as another wikipedia link to follow when there's time later (ie, never). That said, good course design will have some 'overarching themes' or big examples that are returned to time and time again, filling out more details as students have more depth of knowledge. This is often missing in, eg, intro calculus courses, though there are exceptions.

greggman• 11 years ago

Honestly this presentation didn't work for me. I was amazed at the spectacle and a few things like perfect math world vs pixels and multi-sampler helped explain a few things but over all it was all over the place and didn't seem to get to many points or insights. It seems more like someone was asked to do a presentation, didn't have a solid idea of what to talk about, and so threw together a bunch of stuff until it filed their allotted time.

I'm not trying to be discouraging. A great presentation can go a long way to making things understandable. For example this video explaining jpeg worked for me https://www.youtube.com/watch?v=Q2aEzeMDHMA

My point is only that fancy graphics and animation are not enough. The presentation actually has to get it's points across. Maybe this one worked for everyone but me but it didn't really work for me. I don't really know what to suggest to make it better. Maybe it all made more sense live with more talking.

There were a few "bugs" For example slide 22, bi-linear filtering, pixels can't be 2 colors so that slide made no sense.

On the positive side I would love to know what software to use to make presentations easy. Yea, I get the author made his own but in general, making animation is hard work. Worse, once I've made them, even if they didn't end up being good for explaining I put so much work into making them that I can't justify starting over for something that works better. So, anything that would make that process not be so much work would be amazingly helpful.

delinka• 11 years ago

The beauty of the digital world is scalability. Certainly each lecturer that spends 20 minutes doodling this, all combined, is repeating more effort (and 'wasting' more time) than Steven expended making this presentation.

Someone only has to do this once, in the 20+ hours it takes, and any individual student in the world can peruse it. Or any lecturer in the world can make use of it in their class.

Apofis• 11 years ago

Check out an actual lecture made by the same guy:

http://acko.net/blog/how-to-fold-a-julia-fractal/

It's amazing and I really wish all future science educational materials are like this.

His framework MathBox is a really great step in the right direction and I hope it's picked up for some future material. Imagine learning calculus or physics from this? It would be a snap! It really solves the visualization problem in math education. Now imagine building interactivity into it---the possibilities are endless.

phkahler• 11 years ago

I'm not sure this material is good for a beginner. We all know this stuff, so it make for a really awesome refresher. I bet it goes a little fast for a noob though. That said, I think the approach is really cool and could be very effective.

detaro• 11 years ago

Great presentation, although I didn't finish it because the load times between steps got to annoying (it seems like they only load when you switch to the next slide, instead of preloading at least the next one or two slides)

bobajeff• 11 years ago

Yeah, my issue isn't loading times. But the need to press a button (a small button on my phone) for the next slide instead of using a swipe gesture.

It's still a great well crafted presentation. I've been given a much better understanding of some graphics concepts than I otherwise would. Will definitly come back and finish it.

bendykstra• 11 years ago

Note: these slides have not (yet) been optimized for low-end GPUs or mobile.

Wow, yeah. I'm using an old laptop with Ubuntu. Firefox ground to a halt, crashed and then my computer spontaneously rebooted.

benihana2• 11 years ago

That's a bummer. It was a gorgeous experience on my gaming rig with a 144hz monitor.

thegeomaster• 11 years ago

Yeah, it's a bummer. I have a desktop a bit on the low-end (though I don't usually have problems), and Firefox hung on me, even the music playing in another tab started getting jerky. Didn't get to see the slides :(

pcr0• 11 years ago

On a Macbook Air here. Presentation went smoothly but fan was on full blast, and CPU/GPU temp went above 60C. Very cool.

SSLy• 11 years ago

Just to chime in, the presentation works great on latest firefox, arch linux, intel hd4600 in mobile cpu.

iso8859-1• 11 years ago

You should probably switch to software rendering; this could be a security issue.

Aldo_MX• 11 years ago

The presentation worked better in Opera (Chromium) for me. I got a laptop with Intel HD 3000 graphics.

sagarm• 11 years ago

It worked surprisingly well on my 2014 Moto X. Not 60 fps, but no slideshow either.

deminature• 11 years ago

Perfectly smooth here on a 2012 rMBP in Chrome, just blew through about 20% battery in 10 minutes. I guess you can't have both incredible 3D and great battery life.

fenomas• 11 years ago

See also the same author's presentation "Making WebGL Dance, or How I Learnt to Stop Worrying and Love Linear Algebra".

http://acko.net/files/fullfrontal/fullfrontal/webglmath/onli...

(Shares some slides with the new one)

hacker_9• 11 years ago

Wow this is incredible stuff. I work with shaders everyday so have an understanding of the concepts discussed, but I've never visualized them like that! Really captivating.

sergiotapia• 11 years ago

I feel lucky I get to watch these slides at 5K resolution on my iMac! Amazing!

transfire• 11 years ago

Sigh. Running the latest Fedora on an AMD A10 with Firefox and this barely works at all.

paganel• 11 years ago

It blocks my latest FF on a 3-year old Mac Mini with 4GB or memory. That's not much, but that's not ancient technology, either.

waynecochran• 11 years ago

I am teaching Computer Graphics for about the 15th time this fall. I have always wanted to to an animation of the GL pipeline -- I think it would explain a lot -- maybe this will inspire me to do so.

The problem, is soon as I finish, the pipeline will change, technology will switch, and it will soon be archaic. This is a huge amount of work!

I applaud the herculean effort and great result.

Animats• 11 years ago

That's beautiful. WebGL makes you realize that all the "designers" fooling around with CSS are playing in the kiddie pool.

Of course, as soon as you use WebGL, users expect the visual quality of an AAA game. What you tend to get is crap like this.[1] It's possible to get the GPU to do great things for you.[2] But that's a programming exercise. Good 3D content is expensive. Most of the WebGL demos available either have very little content, or are recycling old video games.

All this technology, already deployed, and little good content for it.

[1] http://montagejs.github.io/beachplanetblog/ [2] http://madebyevan.com/webgl-water/

angersock• 11 years ago

WebGL has some other, less-flashy uses.

I've worked around some really shitty canvas performance by switching to a WebGL backend, because of dumb memory leaks on IE.

ThomPete• 11 years ago

A picture might be worth a thousand words, but animation is worth a thousand pictures.

The way animation illuminates an understanding of the holistic wholeness rather than the discrete part normal education teaches, is so underutilized in education.

Heres to hoping someone soon will specialize in creating animated educational material.

wodenokoto• 11 years ago

What does this guy do for a living? Research, teach? Develop? Whatever it is, I'm amazed he has time to make these incredible 3D presentations.

vikrantpogula• 11 years ago

These slides are the best way to learn graphics! It also shows the true potential of the web !!

axxu• 11 years ago

This is great, I'm a complete noob and I learned a lot! Something that I didn't understand though is how sampling rate and the justification for Apple's Retina are related (slide 31). I probably just don't know enough about either, but I'd greatly appreciate it if someone could explain. :)

lionhearted• 11 years ago

My mind is totally blown.

Does anyone know if the author has written or presented on his workflow as he goes from idea, to concept, to rough draft, to finished product? I'd really love to learn how he goes about it... Pixel Factory was so dense and clear thinking, beautiful, intuitive. Wow.

irascible• 11 years ago

The author of this is both a programmer and an artist. Totally inspiring work.

pieter_mj• 11 years ago

As with previous presentations, the author has struck educational gold so to speak.

The Pixel Factory

Related Stories