Web Directions Code 2013

Haciendo cosas chulas con las matemáticas y JavaScript

Steven Wittens  · 

Presentación

HTML (pincha para descargar)

Vídeo

Transcripción

Extracto de la transcripción automática del vídeo realizada por YouTube.

hello everyone so this is my website and as John explained that it's in 3d but the thing I'd like to draw attention to first is the fact that the word math is in the header and the reason the word math is in this header is because it's really been

a constant theme in my work but but more than that it's it's kind of my secret weapon my secret ingredient because whenever you take mathematical approach to your work you really get a lot of flexibility and power out of it you can do crazy things

like this and you know this is localhost but there's the real website that's that's running in Safari in with CSS 3d it just kind of works so that's what I'd like to talk about today that is not full screen there we go all right now you

may be wondering why is a presentation with this title standing between you and your beers on Friday and I wouldn't blame you for wondering that because you might think that what we're about to do is something like this it's not not not at all

this is quantum mechanics it's very interesting but to understand this you need to take a different approach what I'd like to talk about instead is stuff like this Paul Lockhart who said I don't see how it's doing society any good to have people

walking around with vague memories of math class and clear memories of hating it and that's true we were doing something wrong with our mathematics education and he has a really good example for this which is you take a box and inside that box you fit

a triangle and you may be wondering how much of the box does the triangle cover you may know the answer to this if you remember your geometry but the question isn't what is the answer to question is why is the answer what it is and there's really only

one thing you need to do to solve this problem and that's draw one line this line because once you've done that you've created two equal triangles on the left two equal triangles on the right which means that the entire triangle covers half of

the rectangle it's a very simple visual proof only what we do in school is we reduce it to this and then we give kids a sheet of triangles and they have to calculate the area of all of them and so the question of why do all these triangles happen to have

the same area isn't really addressed and and we don't really teach people the background which is a shame a second quote by Brett Victor who Jeremy mentioned that's the person who did the talk stop drawing dead fish though the part to understand

and predict the quantities of the world should not be restricted to those with a freakish knack for manipulating abstract symbols mathematics to me is this this is AJ s1k demo but I did and so in this one kilobyte of code that runs on campus you have 3d animation

3d floor effects the the whole thing and and yet the code is this and now I this is obfuscated and I don't have to tell you guys that but I don't put it up there so we can we can try and understand it but I rather to look at the form of this and there's

really two things one is this isn't a lot of code there's not a lot of room here and second of all all of these statements are really quite simple so how do we get something like this out of that that seems impossible or at least some serious dark

magic and the answer lies in how these simple pieces all combine so the when you're talking about making things with math the the thing to look at is the the system's you put the getter and not so much the Legos they're made out of but I like to

start in before we dive in with with some background where this began for me which was in the win amp days I'm sure a lot of people remember this when amp was you know an mp3 player was really cool not just because it had its own custom UI and was quite

forward-thinking in that regard but because it had music visualizations and you could create these crazy-ass animations that usually move more than this and that you would use a UI like this to do it and and so you type some code and the thing on the Left

changes in real time you type some more code it shrinks down and here I paste in there another random snippet and it kind of turns into this weird sort of phoenix-like effect that was completely unintentional but it looks cool looks interesting and and so

it really the the fact that it was real time and between every single keystroke it updated and showed you the results of that was key to making this program interesting and it created a community of enthusiasts who who were really into mathematics and came

from a background that wasn't necessarily you know science or engineering there's a lot of creative people designers who just learned how it worked by playing with it and so Angus said yesterday play is what make makes code fun and I think the same

applies to mathematics so I'd like to show you how that works so it takes for example a circle point moving on the circle not about that exciting but you'll see where it goes you look at it from the side it goes up and down but it traces out a sine

wave over time or rather it's a helix in 3d but you look at it from the side it looks like a sine wave so we could try and isolate one of those sections to try and play with it and you write it down and you get a formula like that and and just to clarify

I throw in a lot of formulas on the diagrams to sort of explain what it is I don't do this because I expect people to understand all of them but rather as a sort of math inversion like you have language immersion for learning I think it's important

to expose people to the fact that each one of those formulas and and symbols has an interpretation that it expresses an idea or a mechanism or an algorithm how do we make this more interesting well we can switch it to polar or circular coordinates and then

you get this nice little heart you can repeat this eight times around the circle and then you get this nice level flower and then if you're me and you're 17 you think well if I apply an arcsine I can make those leaves pointy and then you multiply it

by the upside down hard and then you get something else and then you add a whole whole lot more math and then you can stick that in your pipe and smoke it now the equation below there is the navier-stokes equation is about 200 years old I would say and it's

it's not actually still known if there's always a solution to it so the the kind of problems that that drive these these effects are quite complicated and yet the the implementation of this algorithm to animate the smoke and to implement the dynamics

that are described here turn out to be quite simple because it's it's a bunch of sort of simple pixel operations on a grid that are completely paralyzed and run on the GPU so but what this play was math really emphasized for me was that everything

in mathematics is a choice when you learn mathematics in school day they set out this ladder of subjects in front of you and tell you to climb climb climb because a you'll need it in real life and be for sure there's a payoff at the end and both of

those are lies because you don't really need anything other than simple arithmetic or geometry in in practical life but also there isn't really a payoff because the same way there isn't a payoff from learning how to paint for most people it's

just a way to play around to express yourself to do something you find interesting and so I kind of want to illustrate how that works you take for example a rational function which is a function that has X in the denominator and when you graph it you get what's

called vertical asymptotes where the values go off towards infinity either positive or negative infinity and we're told that at the point in the middle you're dividing by zero dividing by zero is undefined so don't do it because bad things will

happen but we can fix that we really can all you need to do is come up with the way of resolving that what's called a singularity in the middle which you can do for example with a mapping function and it doesn't specifically matter which function that

I'm using because there's many different ones that you can use all that matters is that it compresses the infinite range of numbers from you know negative infinity all the way a positive infinity into a finite range and then you can take those numbers

wrap them around and connect them and when you do that you find that you've created a continuous curve on the circular surface and this might you know this shows that you you try different things you apply different operators cool things happen but not

only that but this is a this is a mathematical concept called the projective number line that includes a point at infinity that is formalized correct so you can reason about it and it has applications for example in computer graphics you use a lot of projective

geometry which includes points at infinity and it's kind of you know the mathematical version of what's what's called a vanishing point when you do a perspective drawing for example you can see the point at infinity in your drawing right there

even though you could never get there and then that's kind of what mathematics allows you to do it allows you to reason about things that are maybe impossible or impractical and do so in a way that is this formally provably correct and it allows you to

do stuff like this and if you then for example feed this into a GLSL shader and animate some curves and surfaces with it you get cool little visual demos like this and so this is something I just made while playing with with that concept of projective numbers

just for fun but it it's it really is a for me both let's say recreational and educational because you really learn how the mass works by by playing around with the LEGO pieces putting them together in in new and interesting and random ways and just

[ ... ]

Nota: se han omitido las otras 4.914 palabras de la transcripción completa para cumplir con las normas de «uso razonable» de YouTube.