Why this task?
One of the hardest troubles when you’ re learning a brand new programming language is finding a task that can teach you the basics, but that’ s still fun enough to help keep you learning more. And “ Hello World” is only fun your best few times… it has no real life impact.
But imagine if your Hello World could have an impact to the real world? What if it could control the structure like this one?
Therefore let’ s get started on baby’ ersus first Rust to WebAssembly component.
And in a way, this the right project for your first WebAssembly project… but not because this is the kind of task that you’ d use WebAssembly for.
People generally use WebAssembly because they want to raise their application and make it operate faster. Or because they want to make use of the same code across both the internet and different devices, with their different systems.
This project doesn’ t do either of those.
The reason this is a good task for getting started with WebAssembly is just not because this is what you would use WebAssembly for.
The space/time procession as bytes
What we should have here is a 3D space. Or even really, if you think about it, it’ h more like a four dimensional area, because we’ re going through period as well.
The computer can’ t believe in these four dimensions, though. So, just how do we make these 4 dimensions make sense to the computer? Let’ s start with the fourth dimension plus collapse down from there.
You’ re probably familiar with the way in which that we make time the fourth aspect make sense to computers. That’ ersus by using these things called frames.
The screen is similar to a flipbook. And each frame is similar to a page in that flip book.
On the web, we talk about getting 60 frames per second. That’ s what you ought to have smooth animations across the display screen. What that really means is that you possess 60 different snapshots of the screen… of what the animation should appear like at each of those 60 points throughout the second.
In our situation, the snapshot is a snapshot associated with what the lights on the space need to look like.
So that offers down to a sequence of snapshots from the space. A sequence of 3D representations of the space.
Now we want to move from 3D to 2D. And this case, it is pretty simple. All we need to do is take those space and flatten it away into basically a big sheet associated with graph paper.
So now we’ re down to 2D. We simply need to collapse this one more time.
We can do that by taking all the series and putting them next to one another.
Now we’ re right down to this line of pixels. And this we are able to put in memory. Because memory is actually just a line of boxes.
This means we’ ve gotten this down to an one-dimensional structure. We all still have all of the data that we acquired in a two-, three- or four-dimensional representation. It’ s just becoming represented in a different way. It’ s becoming represented as a line.
Why is this a good model with regard to learning WebAssembly? Linear memory.
It will do this by phoning a method on the WebAssembly module.
WebAssembly will go and fill in all of the colours for each pixel in the linear memory space.
Let’ s take a look at how you use this data from JS.
Linear memory, the particular hard way
In case you’ re doing everything your self and not using any libraries, after that you’ ll be working straight with the linear memory.
This linear memory is just a single big line of 1s and 0s. When you want to create meaning from these 1s and 0s, you have to figure out how to divided them up. What you do is make a typed array view on the ArrayBuffer.
For example , in case you were using hexadecimal values, your numbers would be 24 bits broad. So you’ d need a container that can fit 24 bits. Every box would contain a pixel.
The smallest box that would match is 32 bits. So we would certainly create an Int32 view on the barrier. And that would wrap the pieces up into boxes. In this case we’ d have to add a little cushioning to fill it out (I’ m not showing that, yet there would be extra zeros).
In contrast, if we used RGB ideals, the boxes would only become 8 bits wide. To get a single RGB value, you would take every single three boxes and use those people as your R — G — and B ideals. This means you would iterate over the containers and pull out the numbers.
Considering that we’ re doing things hard way here, you need to write the particular code to do this. The code will certainly iterate over the linear memory plus move the data around into a lot more sensible data structures.
For a project like this, that’ ersus not too bad. Colors map properly to numbers, so they are easy to stand for in linear memory. And the information structures we’ re using (RGB values) aren’ t too complicated. But when you start getting more complex information structures, having to deal directly along with memory can be a big pain.
It would be a lot easier if you can pass a JS object straight into WebAssembly and just have the WebAssembly change that. And this will be possible later on with specification work currently occurring in the WebAssembly community group.
But that doesn’ capital t mean that you have to wait until it’ s in the spec before you can begin working with objects. You can pass items into your WebAssembly and return these to JS today. All you need to do is definitely add one tiny library.
Linear memory, the easy way
Today, this tool is specific to Corrosion. But with the way that it’ ersus architected, we can add support with this kind of higher level interaction for some other languages — languages such as C/C++.
Hopefully you now observe how to take control of this space… Ways to say Hello World, and hello there to the world of WebAssembly.
Just before I wrap this up, I actually do want to give credit to the people who made this project possible.
The seeds of the concept for this project came from a dancing party in a space like this We attended in Pittsburgh. But this particular project was only possible due to the amazing group of people that gathered to be able to a reality.
Sandra Persing — I found her with a vision and she produced that vision real
Dan Brown and Maciej Pluta, who took that vision plus turned it into something much more exciting and engaging than I needed imagined
Till Schneidereit, who helped me figure out how all the parts fit together
Josh Marinacci, who created the site and produced taking control of the space possible
Dan Callahan, who hopped in with his development and debugging wizardry to ensure all of the pieces worked well together
Trevor Farrenheit Smith, who created the digital space so that everyone can feel the Arch, even if they aren’ to at the event
Jordan Bebenita and Yury Delendik, in whose work on WebAssembly Studio makes it possible to discuss WebAssembly with a whole new audience
Rustaceans: Alex Crichton, Ashley Williams, Sarah Meyers, Jan-Erik Rediger, Florian Gilcher, Steve Klabnik, Revisionist, Istvan ‘ Flaki’ Szmozsanszky, whom worked on WebAssembly Studio’ s Corrosion integration and helped new, aspiring Rust developers level up their abilities
The JSConf EUROPEAN UNION team for all of their hard work ensuring that we could get the project off the ground
Ian Brill, the designer who’ s work inspired this particular project and who’ s effort ensured we could share it together with you