outside references but I am going to talk which is maps so one of the goals for this session I'm gonna introduce myself a little bit about me about who I am brief history of mapping current technology and getting started with mapping in ember best practices patterns testing strategies I'll leave you with one very important thought so I'll leave you with one very important thought so a little bit about who I am I first of all I am from Tulsa, Oklahoma who here in the room is from Tulsa so yeah from Tulsa, Oklahoma there I studied social science political science I did start off in computer science I thought I wanted to be a programmer and then I you know my mother was horrified when I switched to political science but here we are although it ends well so I moved to Boston actually to earn a master's in studying urban planning with emphasis in GIS so there I really discovered that I can combine my two favorite things technology and social science and urban policy so I was able to you know more specifically look at using maps as these sort of this is really powerful political rhetorical tools for conveying and communicating about social issues so this mapping technology using that to really to advance the social cause or policy sort of change so I then moved to New York New York so where we are now I took a job with the city planning department and I'm still mapping so the end that's all we have for today thank you for it I'm kidding so what is the city planning department a very simple mission although it's very simple sounding to plan for the future of New York City and surprisingly the city planning department is responsible for the future so what is this what this means is any new developments any new buildings any desired zoning change for example maybe I want to open up a cat cafe down the street but it's own for you know I don't know something else like residential so I want to tear down you know someone's house and open a cat cafe so I probably have to like go through city planning or whatever to do that I'm not doing that so right so the team I work with is the only city planning labs and we do software we're a software development team we have two two main missions build great technology and modernize the way government does technology so we are we are changing expectations about how government delivers digital services we like to think that we are what does this mean so agile agile if you will yeah this means a lot of different things to a lot of different people but to us really it it's a stark philosophical contrast to what is typical in government's just a waterfall approach which is all of your specs are asked for upfront required upfront and then you that you know sort of you're building something for someone you get the specs and then you're later you come back and you have something that you hate so that's not good agile to us it's really simply thinking more iteratively not just about the technology but about the relationship between with the customer so you know instead of this sort of super prescriptive and kind of anti-social way of building a technology solution for a human business problem we really work closely with the customer we really we iterate we learn I mean we react to those learnings week after week after week demos every week design sessions etc open source so government has a weird kind of it depends on who you talk to but there's there's some fear around open source there's a lack of understanding really about using open source not so much creating it and providing it although that's still there too but using it sometimes there's a you know this is can we trust this why are we using the enterprise solution we've always used that before you know who are these github people whatever that's the attitude that we're trying to change our team is fully embraced bill you'd be using open source and also open sourcing our own products so we create software as a public resource all right so this presentation is not about planning laps but if you are interested there is a qr code on the screen I just learned about qr technology maybe last year it's very cool it's I don't know I just think it's cool you can open your camera up and you can get a link but literally just learn how to use that so here we are so our planners use maps every day so there's a reason for that there's you know something is being built in the city you need to know the spatial context of it you need to know what what is this change in the in the in the built environment how might it impact business how I impact traffic how I impact you know zoning or housing in the area so there's a lot of contextual information that planners really need in order to ask the right questions in order to sort of follow along with with the guidelines and policies around zoning so our flagship application Zola 1000 New Yorkers use it every day okay that's not Facebook but you know it's quite a lot I think for a small team we build this application city planners use it advocates lawyers a lot of people use it a lot of different use cases so some people are you know maybe one for one example you know where can we build housing you so allowed to look at where all of the residential zoning is and where can I build in a particular neighborhood is my property in a flood zone good question we can show you if a property is in a flood zone 30 years from now or 60 years from now there is that that available that data is publicly available to you you can also look at property information okay I want to who owns the building across the street you know what what are the other sort of associated city records for that property you know what else can I learn about that property so all of this is publicly available so here we are QR code again Zola you know is a way of really sharing information online making data easy so there's a big talk about you know open data and data is available you know everywhere one can access data but knowing how to actually have the tools to do anything with data is a totally different question we hope that Zola is solving is solving that problem so give the app a try and hopefully it doesn't break so just a brief history of maps so there's a rich historical context behind maps so it starts with John Snow not that guy sorry right so John Snow was an H in 19th century English physician a leader in development anesthesia epidemiology and public health you know just as exciting as Game of Thrones also vegetarian right so he has a whole biography worth reading another time but what is he known for so this is probably a little too familiar sounding but he is mapping he mapped there was a cholera outbreak in in Soho London in the mid part of the 19th century and people didn't understand what was happening what was coming from so John Snow mapped the outbreaks and correlated those outbreaks with the water pumps now it's interesting because at the time he actually his sort of findings were suppressed by the water company so it's a bit scandalous because the water company had its own sort of interest in protecting us you know business whatever to the detriment of public health but John Snow was able to use maps to prove his case so what about mapping beyond sociopolitical sorry what about mapping sociopolitical issues what about going beyond you know public health or even just like geology and these sorts of things so think he face guy what's he thinking about Florence Kelly I love Florence Kelly because she's a pioneer in mapping technology she was a late 19th century to 20th century reformer she was commissioned to study urban slums and factories so she was a she was a labor activist and she used mapping to illustrate the sort of the issues in wealth income disparity and to really provide a visual kind of lesson and wealth inequality so what you're looking here is an income map by block in Chicago by residential block so these are streets these little buildings the black squares are you know what is that under five dollars or something five or less and then the blue is five to ten orange and so on so what this is actually called technically is a core plethora but Florence Kelly was one of the first people to actually use this technology mapping technology to really advance social political cause so it's technically brilliant mapping tools so don't let John Snow get all the credit not kidding but if you want to learn more about women in mapping which you should you can follow this QR code because I love QR codes so you know nothing John Snow whatever okay so mapping tech from print to the web so what is a web map composed of well first we have a base map which is stat maps always present it's sort of a contextualizer it orients the viewer to you know where it is in space so streets you know streets and bridges and rivers and bodies of water and parks and things like that so these are all this typically what it based on these are just sort of general terms but then you have sort of you know everything else on top of this you have data layers so these are these are the sort of maybe focal points of your map polygons lines points yeah so it's what you're seeing was all so in Zola you have you know the light gray and blue sort of like contextual map like this is actually Manhattan just to orient you but then you can turn on these data layers it's always like colorful kind of looks like a bowl of fruit loops a bit it's a little too colorful um that's that so recent technologies we have RGS digital maps and RGS RGS was is still around still widely used but I would say maybe in the 90s it was pioneer in providing wide widespread commercial access to to digital mapping but you can put it on the web so that was a problem so in 1996 that quest launched its web service you know it's great because you can actually you know look at directions online and all that stuff but the problem was it wasn't very user friendly so every sort of pan every zoom every time you need to move around the map trigger to full page reload okay so here we go enter the tile so what are we looking at here finally you didn't you could finally use a map using tile based technology you can finally use a map without a triggering full page reload which is exciting because it's a much better user experience that's my very cool technology so how does this work so there's all sorts of like we call these like slippy maps so Google maps you know these are these are this is a typical colloquial term for it so Google maps is one example you know there's open street map there's ember map wait sorry that doesn't count so alright so how does this actually work like I was saying tiles these are really just images they're just images that JavaScript sort of you know deal like it coordinates mouse gestures and mouse events with positioning of these small images on the screen so if you actually inspect a slippy map you can see these all just tiles they're associated these all just images on a grid cats whatever everyone likes that so image based tiles have limitations so what does that mean so you know sometimes you know images tile it must be generated a server it you know it's it has limited interactivity so you can't actually do on this on the fly styling there are some approaches that get around that they're a little esoteric now I'm gonna do that so it's as a sort of solution to that you can now serve tile information as vector data that means we have dynamic interactions we can change you know coloring of things and style and zoom and suddenly in the Jeff you're seeing here we're actually switching between a point representation of data and a polygon representation of data you can also notice that it using vector tile things we're rendering this using something called Mapbox GL which actually hooks into the the metal of the graphics processing computer so it's very fast rendering this is actually what Google Maps the web app uses now so in addition to just being able to do the styling the vector tiles also include all the data so you know what you're looking at here is probably a core path of percent foreign born or percent sorry percent population under 60 I'm switching between here the different sort of different core path mappings of different statistics the reason that these can be rendered and styled on the fly is that all the data is actually present inside the vector tile itself so how are tiles made so we go we have here our sorry we have a three cylindrical map projection this is a little yes so through a cylindrical map projection we are able to project a you know globe onto a flat surface so this leads to obvious distortion you can all remember middle school geography class problems so there are lots of different ways of projecting things and but for our purposes we use a projection called when our cater good to know but to break it down a little bit assume that in the tiling and tiling something assume that the world is a square we feel that way sometimes it's really not so for zoom level zero we have one tile for the world but zoom level one there are four tiles so you close the service if you're if you're trying to zoom in you kind of you get more tiles so zoom zero one two you get more tiles so that's the I like to think about that sort of a pyramid good visual so that's all it all good to know another common format probably I don't this time in another common format is it's actually probably what most people should use for most problems I would think geojson so geojson is good for smaller data sets it's good for just being able to sorry that's my uber no so geojson it's it's good for smaller data sets it's good for really quick quick and easy things basically basically the full full spatial data is is downloaded into the browser so you know if you have a very large data set it's not gonna work but for most use cases you can really get away to geojson it's fine so what is geojson it's just opinionated JSON format for for storing spatial data so think of it as JSON API but geography map data so kind of putting it all together whoa okay a lot of stuff going on here all of this really to just do mapping well not always but I would say that for most most use cases the geojson approach mapping simple geojson is gonna work just fine but for more complicated map mapping technologies this is how it works and I would say for Zola this is how this is pretty much exactly how we kind of deal with rendering and storing and maintaining all of that data so that's a lot of stuff but we don't just build it from the ground up there are these things called cloud services Carto is is one of them I really like Carto because it is truly open source we actually did run Carto power source backing up a bit like what does it actually do it takes care of everything you see in the red red circle there takes care of all of that so the reason I like it so much is that like I was saying you can run it you're on infrastructure it's truly open source and we actually did do that you know there's a lot of companies that talk big talk about you know like it's open source you can run it this we actually delivered live services on top of it for over a year and we just did we just didn't want to maintain you know upgrades to it so you know let's pay for it but really like kind of shows how it's like the opposite like instead of paying for a service and then figuring out oh it's open source I'm just gonna run this myself we actually have the opposite experience we were running it ourselves if we prove the value of it and then you know we run a lot of applications on it still so sorry backing up but I would say Carto is great but it's not you don't if you're just trying to show a point on a map you don't necessarily need to use Carto Carto would be overkill for that although it was very cool accessibility alright so yes maps are obviously intended as a sort of visual tools that doesn't mean that they can't be described it doesn't mean that persons who depend on accessibility tooling or visually impaired doesn't mean that they can't also be enjoying and using maps so we can still we can still work on this we can still do a lot better so one thing to consider when doing accessibility is use leaflet JS the reason for that is it's all SVG based so you know some of the maps I was showing you earlier a WebGL based what that means is that there is a little canvas element and that's all there's just a canvas element you don't get you don't get all these nodes in the DOM so you can actually you can't actually put aria information on them so with SCG base mapping like leaflet you can you can put the aria information on there because you get all those dom nodes it's really nice I'll just say MapxGL this canvas base you just get a canvas really hard to make that accessible that said there is an add-on called MapxGL accessibility which I work which you know I didn't build that I'm trying to contribute more to you I encourage everyone to to take a look at this really cool problem to work on yeah so basically the way it works is you have your sort of canvas based DOM node there and then on the other side you you know you can have sort of a shadow representation of what's happening in in the map and it's all invisible but it has its all sort of DOM representation of you know maybe I have like five points or six points or something I'll have six dom nodes for those things and I'll put some information on them so that you know and then you keep these two things in sync and then it really really makes things a lot nicer there's still a lot of work to be done so if you're really interested I would check out MapxGL accessibility it's a pretty cool problem to work on we should we should make these awesome maps accessible right so case study Zola back to Zola I talk about that a lot not the marriage up wedding app sorry basic features many many many data layers map state preserved in URL layer styles shared costs other apps monthly data updates yeah so we need all of these things so so what does that mean these way the easiest way to jump in for us was to use ember not on ember mapx GL right so what is this it's simply a bindings layer on top of the core map box GL JS library so it provides you know a really nice declarative developer experience so kind of breaking down what we're looking at here on lines on line three we have the sort of outer or map box component this is what's actually building that canvas element it's initializing all the map stuff it's you know nothing's really in it yet unless you've told it so a base map will be in it but nothing else is really in it no data layers are quite in it just yet but that's what four and lines four and five do so line four you pass in again you see this geo JSON type and then you pass in the actual geo JSON data so that's what the model is going to be this is geo JSON data yeah I mean this you know if you look at the geo JSON specification any any geo JSON you pass into this map box GL I was going to understand it and then you have this other contextual component on line five called source dot layer and that's you know that's more responsible for the visual sort of styling of that data so mapped out source is all the data behind behind the stuff source on layer is the styling and stuff in the sort of paint property you see there it here's to map box geo's own styling specification so it's you know all of this is pretty the ember map box geo add-on tries to of course get as close to whatever the underlying map box base API is happening right so so problem two sibling components who depend on you know the same state of something so for example I want to turn on that zoning districts layer there so there's information about zoning districts such as its state such as whether it's on that the map needs to know about in that this meant many to know about so when we got around this is how do we you know so yeah stairs sharing state across sibling components so what we've got around with this is passing in the layer passing down a sort of layer configuration model so multiple models for each layer pass down to both components since these are data models they they have their own internal state and the menu can reference it and then the map component can reference it keeps the UI state in sync we don't have a bunch of weird like you know event buses and stuff like that you know this is one way of doing it so anatomy of the map component so you know when we first started this you know you notice that there are several widgets there are several things going on you have a print button you have a measure tool you have a draw tool you know all sorts of stuff going on so our first draft of the map component was very very very very long I think this Jeff goes to like maybe 400 or 500 lines which probably isn't that bad in the grand scheme of things but it actually it was actually interesting because in this case instead of you know reaching for what could have been the wrong obstruction meaning assuming that we know the future and that we're going to need this thing because it feels like we're probably that'll be cool and can be needed to have that thing instead of reaching for that we really allowed this sort of component this class or ripen a little more before we jumped into kind of refactoring it so so finally after it was ready kind of it was getting too long and a wieldy we need to refactor so we really knew what the problem was now we can start grouping these together so highlighted feature highlighted highlighted visual feedback so whenever the mouse hovers over a part of the map and you want that visual feedback all those concerns can be grouped together put it in a component you know the draw tool so being able to you know draw and measure stuff so all the handling for putting the things on the map when you draw a lot of mouse events all of the you know little calculations and text and being able to switch between the unit take it put in a component you know visual feedback for whenever you select something so again component so one thing I think to take from this is when in doubt make a new component you know when it's it's always scary to kind of you know start creating a new class for something but I do think you know you could really easily clean up a lot of a lot of code and a lot of complexity by simply down okay so line two for example we have here is the measurement widget we simply pass down the map into that layer widget and all the layer concerns happen there line for measurement which passed on the map it's really just sort of separating concerns and just giving things their dependencies that they really need understanding what those dependencies are all these things depend on a map instance so makes it easier to test makes it easier to sort of split out things lesson here don't abstract too soon and well this is the next session next section tests it's really hard to test maps if you were how do you even acceptance test of jail canvas you don't I mean I've tried it's scary right so you you know you have all these click events you you have all these hover events you want to make sure that visual feedbacks happening you want to make sure that you know you're not going backwards on certain behavior that things are turning on and they shouldn't be you know this is this is all really hard to deal with WebGL canvas but what you can do is use elaborate stuff so what is a stub stub is sort of a mock it's these are all sort of loosey-poosey terms I think some people have tried to really define them probably computer science journal articles can you know very clearly talk about what that means we're really a stub is just a fake class that you are using to mock certain behaviors so instead of using a real map you could use a fake class and just assume that the underlying thing works so how do you step a map dependency injection another probably pattern all that means all that means is because we've broken things out a little bit more we have our map box basic map component line one here and our testing environment through some of ember's test tooling we can stub in a yeah we can we can we can stub in the map instance so instead of that component yielding out a real map box you know map like it just you yield an instance we can stub it and then hand it a kind of dummy object and all of these methods here add layer add source get source these are all actually map box GL API methods I have seen some map box GL add-ons use elaborate stubs for this reason it's not always the best thing in the world but it has worked really well for us another tricky part is a map box GL is event driven so you know how do you simulate a mouse move event an underlying map box GL detects math mouse move and then it you know it triggers the callback for your apps handling for what happens when a mouse moves you know I was what something has worked for us is to use something like what we're seeing here which is just manually within your test actually trigger that behavior and give the callback signature that you know is needed for whatever your your own apps callback function is so you know this way you're actually triggering the behavior in your app and testing it but real talk you know this has worked really well for us but you're really not supposed to mock what you don't own so you know I don't love I don't love this solution but it has it has you know in the absence of any testing this is working really well I think ideally in the future we go back to map box GL accessibility actually in building out that add-on will really help us deal with using real mouse events using real clicks to actually test behavior on the map so but we need to build that out first but also yeah seriously so like don't mock what you don't own is is the general advice but let's you know it can be reasonable so no more aggressions we hope right so a great power comes maps how to lie with maps so I'm kind of this is the very important message I wanted to end with which is maps are very powerful rhetorical tools they are things that everyone sort of identifies with we identify with place you can point where you live where you been on the map and you know what I like this quote a lot is it's you know map users you know we we kind of just we kind of just assume and trust the map we trust maps exist every trust map is a representation of reality so this is an example this is a great example of how you know how easy it is to rhetorically misinterpret a map so what you're seeing on the left there is recent presidential election so these are how people voted sorry this is how people voted yeah so on the left there you're looking at the election results by county but if you normalize the election results by population distribution you actually get a totally different picture actually looks much closer than you could understand and the other and the other one and there was one map in this slide that you're seeing that was shared a lot by one party and this is a great X X K CD or something I guess really just my biggest pet peeve also is you know you can't just spatial correlation doesn't mean that there's actually a real relationship between these things most of it's just a function of population so we can see for example in Twitter data tweet you know this is in 2013 there's a lot of excitement about web mapping much more accessible possible to use mapping mapping tools a lot of that hashtag map thing so a lot of McDonald's being mapped but you will see that they these are largely just functions of population density so on the Twitter data's map there is tweets during the election and the right is population density so I mean I love looking at cool map but it's you know it's it's between rhetorically dishonest or just not that interesting that's okay you know another thing is augmenting a message through maps there's obviously graphic design choices that could be made you know you have this on the left we're talking about you know gun death you know raging epidemic it's black and red and the crosshair on it and and then bottom left actually what you see is these sort of granular bins so it creates a lot more like kind of I don't know visual no not yeah a little bit more visual noise I guess makes it just look kind of grizzlier on the right you kind of the opposite rhetorical angle you know the title fewer bins on the bottom left you know and you're describing not describing as violent deaths you're describing as incidents incidents per you know hundred thousand or something these are choices that you can make so yeah so thank you all for joining me my apartment I the city I'm learning is a lot of us are working from home now I never thought that would happen but yeah thank you so much please reach out on discord if you have any questions yeah thank you


It's getting late into January and the weather's getting crisper. I better put my coat on. A few days ago, a team of scientists from the Massachusetts General Hospital and Harvard Research Facilities announced a refinement to a genetic technique that may be a huge deal. May be the hugest deal. Crisper isn't just the name of that drawer where your New Year's resolution to eat healthy goes to die.  Let's review the basics. DNA is a chemical sequence of information that's built into a spiral, which you can find in just about any living thing. You can think of it like the design documents for how to make that thing. Sort of like a bat or a mushroom blueprint. There's a lot of complicated chemical machinery to process DNA, but the basic principle is that some part of it gets translated into RNA, which you can think of as manufacturing drawings to produce some specific element of that design, which are then transcribed into proteins, which are the physical meat that make up things like cells and muscles and hair and whatever. There's an insane amount of complexity and nuance to that process. Like, which parts of the DNA get read depend on how it's physically contorted inside the cell. And if you start reading the same genetic sequence from here, you'll get a totally different set of proteins than if you started reading it here. The fact that with all those layers of complexity, we can still say something like, oh, she's got her father's eyes, is simply astonishing. Now, that's what's supposed to happen, and it happens in almost every living thing on Earth. But viruses have discovered a bit of a shortcut. Rather than replicating themselves, instead, they just put their DNA around someone else's machinery in the hopes that it'll get picked up and accidentally manufactured. Of course, proper cellular organisms don't want to go to all that effort to manufacture someone else's crap, so they develop ways of identifying viruses and keeping their DNA from coming up the worst. CRISPR started off as one of those antiviral mechanisms.  The brackets are short palindromes of DNA code, like G-A-A-T-T-A-A-G, which let the rest of the cell know that it's not for fabrication. Quick side note, if you don't think that it's cool that life has a method for commenting out sections of genetic code just like any programming language, you can just get out of my face. Instead of making it, some bacteria use a protein that we call CAS for CRISPR associated, which grabs a 20-letter segment of that code and then roams about the cell looking for a match. If it finds any DNA that matches, it cuts it. That cutting screws up any inserted viral DNA and prevents it from replicating. Cool, right? Not as cool as what comes next. If you're a geneticist who wants to tinker with certain sequences of DNA, a protein that locates and then does something to a specific sequence in a living cell sounds like a pretty good deal. Unfortunately, CAS tends to be a little indiscriminate in what it cuts, which is a problem if you're a genetic engineer looking for something specific because you can't really be sure what you'll get out the other side. Maybe the DNA will be snipped neatly just the way that you want, or maybe they'll look like a ransom letter. And that inaccuracy can be a huge problem. Gene therapy trials, which showed remarkable promise, have been stalled for years because, although they worked 90% of the time, the other 10, they gave people cancer. That's why this recent announcement is a huge deal. These scientists claim to have tweaked CAS9 to be extremely accurate, only touching the gene sequences that it's supposed to. Now, geneticists have a very precise, not to mention extraordinarily cheap and easy to use tool, which can locate, cut, deactivate, activate, or rewrite any sequence of DNA that they want in a living cell. If it works the way that they're suggesting it does, it's going to be like moving from a typewriter to word processing software for genetics. We didn't start tinkering with the nuts and bolts of genetics until the 70s, and historically it's been a pretty exclusive thing. You needed a specialized lab with hundreds of thousands of dollars of equipment and a staff of highly trained scientists to make the most basic changes. But with CRISPR, that exclusivity proviso goes out the window. Anyone can buy some CAS9 for a few hundred bucks. Any halfway decent lab can use it to alter the DNA of anything. We're talking about the level of access going from the smartest PhDs at the most prestigious research institutions to home brewing in your garage. Now that anyone who knows a molecular biology can engineer any genome that they like, now that we can cheaply, easily, and accurately edit any DNA we care about, including human DNA, what's next? We can eliminate many monogenic diseases from the next generation of people if we want to. We just straight up get rid of them. Sickle cell anemia, cystic fibrosis, just not a thing anymore. It would be expensive, but it's certainly within our reach. We might be able to wipe out entire species on a whim. The biotech company Oxitech has engineered a genetically sterile mosquito that has decimated mosquito populations in Brazil. We might be able to do that to any species that we've decided we'd rather not deal with anymore. We can exponentially expand our knowledge of the human genome by quickly and easily producing new genotypes of mice to experiment with. Or we could start experimenting with the 20,000 known human genes to find out which combinations result in desirable outcomes. There is an established CRISPR methodology for every single one of them, ready to roll. And the thing is, with this update to CRISPR, all of these things have just become immediately relevant. This isn't some far-flung future thing. This is a few months from now. There's been a call by bio-researchers for a worldwide moratorium on genetically engineering humans that's been more or less respected. It was easy to keep an eye on the handful of labs that could do it, and it was a super complicated and very expensive process that wasn't well-suited to a lot of practical applications. But now, every single person who's born with a genetic disorder that we've sequenced is going to have that moratorium to blame. There are a ton of ethical questions that come with CRISPR. I've talked about some of them before, but there's one in particular that's been bugging me. Now that we're at a point where we have the practical option to make future humans into whatever we want, what do we even want? For example, should our kids have the genetic makeup of super geniuses? I mean, intelligence is really useful and very powerful, but it is highly correlated with depression. What's more important? Intellect or happiness? It was easy to philosophize haphazardly about this sort of thing when we didn't have the technology we needed to make it a reality. But there's nothing stopping us from determining the genetic basis of a real person's actual life now. And we have a lot of thinking to do about what that means. Please talk about it with someone, because we're going to need the answers in short order. And don't forget to leave a comment below to let me know as you thunk. Thank you very much for watching. Don't forget to blah, blah, subscribe, blah, share, and don't stop thunking.


Those are medieval robots. Yes, I've read stories after stories on why Disney has dark secrets and moments behind our childhoods. Not to mention this problem affected one show on Disney Junior, The Lion Guard. It's a 2016-2019 spin-off to one of my favorite Disney franchises of all time, The Lion King. This show had the typical and wholesome adventures from any other kids' show, like SpongeBob SquarePants. The land before time to these series and my little pony friendship is magic.  There was a season 2 episode of The Lion Guard that is least known to the public, called, The Void Lens. This episode was originally aired once on October 17, 2017 as a Halloween special, like season 1's Beware the Zimli. Sadly, this episode was lost media and was replaced with the Yukimbusho tradition, which aired on October 27. Nobody on the internet has ever talked about this episode since, including The Lion King fanbase. I was the only one who knew about this episode and how I found it, so I'll give it a rundown. After I left high school, my friend gave me a USB stick and said I could possess it. The stick was a black and red SamDisk 128GB Cruiser Blade model, and it contained special files my friend had downloaded. I thanked him and went home to my bedroom. I booted up my old PC and plugged the USB stick in. It contained some interesting files. There are folders like documents, music, pictures, and videos. The documents folder is nothing important. It's mostly filled with random essays, stories, and the like. In the music folder, it had songs like Rolling Stones Start Me Up, Coldplay's Paradise, Madonna's Ray of Light, and so much more. Pictures, again, contains nothing important.  Even random memes I may find hilarious and awesome. Lastly yet interestingly, the videos folder. It consisted of subfolders leading to YouTube videos, viral clips, meme videos, DVD rips, etc. I checked out the DVD rips folder, which had movies and TV shows encoded from DVDs. There are subfolders of Disney movies like The Lion King and Toy Story, Dreamworks movies like Shrek and Madagascar, and even episodes of SpongeBob the Simpsons and Danger Mouse. That's when I came across a folder called The Lion Guard. I looked at the folder, and it had three seasons. However, I checked the season two folder, and what I found caught me off guard. Next to Rescue in the Outlands, there is a new episode that I have never heard of before. It's called The Voidlands. Being the curious person to watch this obscure episode, I started up the video, and it opened the LC Media Player. As the video starts, it cuts straight to the show's logo, skipping the intro. After Mufasa's deep voice said the show's name out loud, the title appeared under the logo, saying... The Voidlands! As it appeared, Kain's cheery voice could be heard saying the title out loud. The episode began with the Lion Guard's lair at night, with Kain and Foley having a conversation about what they are going to do tomorrow, you know, typical Lion Guard stuff. Once the talk had ended, Kain and Foley went to sleep in their separate spots in the lair. Kain yawns and dozes off, hoping that tomorrow's going to be a normal day for him and the gang, as the screen fades to black. As the screen fades back, it shows Kain waking up from his slumber, and before he is about to say good morning to his friends, he gasps. He looked everywhere, and no one was there. Foley, Banga, Beshi, Ono, Bakini, Simba, Nala, Kiara and the others were nowhere to be seen, leaving Kain all alone, until he noticed something different about the place and the environment. The pride lands around Kain are completely monochrome, with him being almost desaturated where you could barely see his color. The sky is snow white, and you can hardly make out any clouds. However, the music in this scene is a different story, which didn't fit in a show like this before. I could only describe it as 1970's horror movie ambient music, accompanied by the sound of wind blowing. Kain is immediately shocked at the sight, saying that it's just his imagination playing games on him, or the fact that he's colorblind out of nowhere. Furthermore, he decides to shrug it off and wanders around the twisted monochrome fields of the pride lands. Foley, Banga, anyone, where are you guys? Kain cried out, but no one came here for him. He even tried to assure himself that it was a joke, and that was when he saw the silhouettes of both Foley and Banga from afar. As Kain runs towards the cheetah and honey badger, he stops and gasps. Foley and Banga were facing back, and they were completely monochrome. Suddenly the two turned around to face Kain, and he immediately screams shortly at the sight. The eyes on the colorless Foley and Banga were plain white voids, staring at Kain with almost expressionless looks on their faces. Foley, Banga, Banga. Kain stuttered. What happened to you guys? What is this? As Kain asked the duo, Foley began to speak. But what's off about Foley's voice is that it didn't sound like her voice actress Diamond White. It sounded like an uncanny, creepily monotone and electronically altered voice, which didn't fit her character, and it gave me a slight chill hearing that. What's the matter, Kain? Don't you want to be one of us? Uh, no, no. Kain nervously answered. This isn't the pride lands I was used to. Whoa, what is going on? Please! Oh, Kain. Foley replied. This is not the pride lands anymore, silly. This is the void lands. Now join us, our lion friend. That was when Kain ran away in fear of the demented cheetah and honey badger. Foley starts to yell in a much more unsettling tone. Don't let him get away, Banga. He needs to be part of our society in the void lands. Get him. Banga silently nods before the two chase Kain. Then Kain trips on a rock, letting out a loud yelp. As he got up from the fall, he suddenly gasped. He noticed Beshi, Ono, and Makini, but they were devoid of any color and had white voids for eyes, like Foley and Banga. As Kain screamed and ran away, Foley and Banga went to the other three. Foley then demanded the others, saying, Get that red-haired lion cub mortals. What are you waiting for? They all nod silently as the group runs after the fearful lion. Kain's legs began to get weak from all that running, causing him to fall and not get up. He sees Foley, Banga, Beshi, Ono, and Makini walking up towards him. More characters can be seen along with them, Simba, Nala, Rafiki, Zazu, Kiara, and the other animals, all monochrome with white void eyes. Kain tried to use the roar of the elders on them, but nothing happened. Foley then said, Give it up, Kain. There's no use running away from us. You will become one of us in the voidland, our little red-haired friend. Now watch this ferocious mortals. She then walks closer to the weak Kain, who is attempting to move from Foley's evil grasp, but to no avail. She puts her par on Kain's head, leading to his timely transformation. As Foley held her par on Kain's head, he let out a loud blood-curdling scream. His almost faded colors drained from his body, and his pupils started to disappear from his eyes as they turned entirely white. As the grisly ordeal concluded, it abruptly cuts to Kain in the line guard layer at sunrise, all looking normal, yelling in horror and gasping for air, realizing that it was just a bad dream. Suddenly, he heard Foley's normal voice shouting his name. Foley comes over to Kain, comforts him, and asks him what's the matter. Kain then explains to Foley about his nightmare, detailing every single event about the Voidlands. Foley was stunned at Kain's dream story, and she began to reassure him in her happy-go-lucky tone. Oh, I'm sure you were all right, Kain. Sometimes, we all do have nightmares, and none of them even bother us at all. Come on, there's another adventure waiting for us. Oh, great idea, Foley. Kain replied, feeling relieved. Thank you for keeping me in touch. You are welcome. Foley said as the screen faded to black. Before the normal credits could play, the video abruptly ended. Not only was I a nerd or feeling any dread, I felt confused at the fact that I found this episode that only aired once, and like I previously discussed, no one has ever talked about it online. It's a good thing I have screenshots saved to this article, but there's no way in hell I would upload the footage to YouTube or Internet Archive due to legal reasons with Disney. My friend has harbored some weird shit on that USB stick, but I don't really know if that's the case. After all, the find was pretty perplexing, so I decided to move on and watch other shows and movies on that stick. Before I conclude this story, I have one more thing to put down.


Welcome to the Department of Mathematics at Ohu's University. The department is home to five master's degree programs, mathematics, mathematics economics, statistics, data science and science studies. The information office is at the main entrance, ready to help with problems, large and small. On the second floor, you will find our library. The library has textbooks for your studies and study spaces where you can meet with your classmates. There are always colorful and fun flyers in the corridors from our student association called Toe Camera. You will have lessons which take place in smaller classrooms where you will present assignments to each other with supervision from your lecturer or student teacher. Our rooms are also used by students from other departments so there is always vibrant life in the corridors. You have the possibility to get an office with other master's degree students where you can read and write your assignments. In the basement, you will find the famous Mathematics Can team. Every day, students and staff from near and far buy their lunch, coffee and cake here. The cafeteria produces approximately 80 kilograms of liver pate every week and around 600 large pieces of cake every day. Besides offering lunch and being a meeting place for students and staff during the daytime, the canteen also serves as a restaurant in the evening and the student association also organizes parties and shows held here. Following the path behind the main building brings us directly into the heart of the University Park. The courtyard, called Soul Golden, has fresh air and green surroundings. It is very popular, especially during the summer when many students use it for reading and enjoying their lunch here. Through the door beside the courtyard you will find two of the lecture halls where you will have lectures. At the end of this corridor on your left you will find Phandra Helen. This corridor connects the department's two-sided building. Here there are blackboards and tables so you can work with your classmates or by yourself. The Friday Bar is also in Phandra Helen with quizzes, games and other fun activities. You and your fellow students can round off the week here in the best possible way. Not far from this connecting corridor you will find the elevator which you can take to the seventh floor and enjoy the amazing view over the campus and the Department of Mathematics. We look forward to welcoming you to the Department of Mathematics at Ohus University.


Our Retrieval Practice Quiz is the secret weapon in our classrooms. Now, research to click the link in this video, research explores how quiz frequency and timing influences student learning. And why is this important? Well, we know quizzes can aid memory retention and deepen understanding, but I guess the frequency and length of them also matters. So teachers who adjust quiz frequency and where they place them can also maximize engagement and effectiveness. Maybe they shouldn't always happen at the start of the lesson, maybe they shouldn't happen at the end. I guess it's something for you to think about and explore. What if starting each lesson with a quiz revolutionized your learning outcomes? What if they happen at the end? If you're a primary teacher, the answer is going to be different. If you're a secondary teacher, who only sees their students once or twice a week, the answer is also going to be a different. So experiment with your quizzes in your lessons to enhance learning engagement, but dig into the data to see what difference lesson quiz frequency and timing also has on outcomes.


going to be heading. So to kind of begin with that, my background largely comes from the domain of music. I've been working in that area, music technology area, for quite some time, also video and audio signal processing kind of areas over the past about nearly 15 years. So and I was super thrilled to find the low latency audio support in browsers coming up around sometimes 2011 if I recall. And given that my first exposure to programming itself was through making noises on machines, this was super thrilling that you could just launch a browser and make noises with it. So I'll see if I can relive some of that thrill through this talk. So my agenda is going to be fairly simple. I'm going to run through a personal history of noise making on computers. So why I say that this is, originally I intended to make this a kind of a whirlwind tour of computer music, but I cannot possibly do justice to that. So I decided to make this a personal version of it. So how my engagement itself began with audio and computers. And then dive into the Web Audio API's architecture and conventional architectures in computer music systems. And we look at some of the primary gorgeous that people run into when they're first faced with the Web Audio API. And how we can use a few techniques, simple techniques to solve them. One of them being the dynamism of the single flow graphs and then the intricacies of just-in-time scheduling of audio events. And this stuff is evolving, the spec is not finalized just yet and there are some nice goodies in the, I mean just waiting to spring on us. So I'll talk a bit about them towards the end and all of this goes with demos. So no fun talking about audio without sound. So this, as I mentioned, I just want to give a personalized history of my engagement with computers and noise making. So in the beginning, my very first thing was the screen going blank. So when I first started, when I was first exposed to computers, just about every machine was capable of making some interesting sound or the other and that was fascinating to begin with. And that played a large role in how I approached and what got me into computing in the first place. So it's pretty important for me. Just to keep a bit of context around that, the Seymour Papert, this work done by Seymour Papert was even before I was born, so that's where that begins. So he formulated this extension to this notion of constructivist learning where he believed that the true process of learning involved making things where the by-product of something is making something, that's a by-product of learning has to be making some tangible product. So he made this turtle graphics system which is a robot that kids control by writing typing commands such as forward 50, left 30 degrees kind of very simple commands and then kids went on to master geometry through this without being taught about the rules of Euclidean geometry. That's a phenomenal work at that time. And his key thing is that we need to have this kind of manipulative material and the early machines that we had provided this kind of manipulative material. Anybody recognize this machine here? Sinclair ZX Spectrum, I think it's probably older than most folks. So this, even this, this is a home computer, so it looks like a keyboard but it's an entire computer in that two megahertz processor, 128 kb memory if you're lucky. And you plug this into the TV, into your TV, turn it on and you've got a prompt. You can type basic commands at the prompt and you could type this beep duration pitch and it would make a noise. Like today's computers fail by this benchmark in my opinion. The extensive boot process that you have to go through without, before you can begin to make something interesting out of the machine is just so appalling. So this ZX Spectrum had this beep command that was like really cool. This is the BBC Micro. This had more extensive sound generating routines. It had a better audio subsystem there and you could, you could do a variety of noises with there. There were noise generators in there as well as pitch tone making routines as well. So that was a sound command that you could give to these machines to make these sounds. Even DOS GW Basic had the play command where you can, you could give it a string that's constructed out of like letters of, letters representing notes and durations of these notes. You can play that in sequence and it will wait till that playback finishes. So this, this was even before GUI's came into the mix. What happened to all of that? Like after for about almost, I don't know, about eight years or something, the ability to make quick sounds with our machines just vanished, it just went into some kind of a black hole. Today that stuff is turning around. So that's the, that's what I want to highlight now. So before the Web Audio API, tough luck. So if I were to give my machine to my son and I, I expect him to some, somehow produce some interesting sounds of his own construction, I'd be out of luck before this. But now what's happened is that we have, if Chrome, if you're lucky enough to have Chrome installed on your machine by default when you write, so you just launch Chrome, go into this into the console and just you can type commands that make noises, very interesting and high fidelity and low latency noises. That's fabulous. So let me look at what we, what it would take to do this beep in, in the Web Audio API and we just use this as our central piece for today, for today's discussion.  So this, I'll walk you through this code a little bit. So yeah, it's not a one liner by any means, right? But it's got things, at least you can write a function to do the beep that the Sinclair that I expect them was good at doing with just out of the box. This is a, and it's pretty straightforward to achieve this because the API is organized in a very, in a very familiar signal, signal flow graph kind of structure. So I'm going to just go ahead and make that beep now. And I'm always thrilled when this happens. Every time I do this, I get goosebumps in some sense. So there you go. That's a beep function. And I hope some sound comes out of this. 330 hertz and I want it for two seconds. Okay. Atone comes up and I can modify that. Six, sorry. Fonts, okay. There goes beep. So at the heart of this beep is a very simple structure. Which is a graph that goes like this. So you've got a sort with wave generator that's being plugged into some kind of a game that controls this volume. And you plug that into the filter that reduces some of the highs and makes the sound a bit smooth. And then you check it out into the audio output. So this ability to generate audio using such signal flow graphs is kind of a milestone leap in the audio capabilities of the browser. So this doesn't come out of the blue. It's got a long precedent in computer music history. So I'll share some examples of where this stuff comes from. So that you get an idea of how this material is organized. I mean, how this API itself is structured and organized. So CSound was one of the very early and very influential systems in computer music. Was developed sometime around 1986. And it itself based on an older program called Music M. It introduced some concepts that are persistent to date. So for example, the instrument and score split. So you see there's a section that defines what your instruments are. And there's a section that's orchestrating these instruments. So the instrument specification talks about, okay, and I'm just doing a simple oscillator from a sine wave table. And I'm taking that signal to the A1 and I'm outputting it to the audio file. So in this case, it's an offline processing. So, and it also introduced the concepts of control rate versus audio rate distinction. So audio sampling rates are generally very high, like 48,000 hertz, 48,000 samples per second. But you don't necessarily want to control these sounds at that same rate, either for computational reasons or you just don't need that kind of fidelity. So there's a distinction between control rate or K rate and the audio rate. This has been borrowed into subsequent systems as well. So this is a pretty influential system. And this is Max. This is also since 86, it was developed by Miller Pocket and further developed by David Zikareli. It's now a commercial product and it's one of the staple programs that it gets used by a large section of the computer music community. Every audio device that you can buy probably has some kind of a plug-in that will patch into Max. So it's a data flow kind of paradigm where you do all your programming visually and the whole system is live. And it supports both control signals as well as audio signals. And these days, Max has even more capabilities. It can also do visual processing and graphics and more rich media stuff like that. But this is pure data. So Miller Pocket made an open source version of the same Max-like system. And this is one of the very dense screenshots of what's called a net PD in action. This kind of cockpit-like interfaces are fairly common in the computer music community, so it's pretty interesting to always look at them, the degree of control that innovations demand. So this is since 1990, so it's pretty old already. The reason I put this screenshot up is that these systems were not only being used for making noises, they were also being used for making interfaces to control those noises. So this is Super Collider. It's a client server kind of system where the server does the signal flow graph rendering. And there's a client-side language, pretty general-purpose multi-paradigm language, that's used to control what's happening on this synth server. And even Super Collider also has routines for putting up interfaces and synchronizing the commands that you send via these interfaces to the server. That's 96. But this is before the Web Audio API, I did some of my own synthesis work in Super Collider, and this is an example. You don't need to read the code here, but just the gist of it is that there are two sections. One is trying to synthesize a Vena tone out of it, and the second one is trying to control that tone to make kamakas in kinetic music, so that was part of my work before the Web Audio API. But now I don't need to do this because I can do all of this stuff in the browser itself. This Chuck, since 2003, Chuck brought an explicit model of time into the programming language itself, and even the language looks sort of like a wiring diagram. So you've got a sine wave oscillator, M, that's modulating sine oscillator, C, and that's being pumped into the DAC. DAC is digital to analog converter, so that's the audio output. And so the right arrow thing is generally referred to as Chuck, so sine or M Chuck to sine or C Chuck to DAC, so that's how you read the code in this case. So there's an explicit model of time, so time is being progressed in sections of one second in this case. So the notion of a signal flow graph is very common across all of these systems right from 1986 to today, and the Web Audio API builds on top of this. But what it does, while other systems also had to build these user interfaces and other supporting systems into them for them to be useful, like Pure Data and Super Collider, the Web Audio API, of course, does much less. It just handles the audio part, but leverages everything else that we have in the browser today, and that's very powerful. So it changes a lot of things for us, because we now have a kind of a cross-platform audio programming environment, and I'm going to share a demo of a system that's called the Rhythm Engine. It was developed originally in the late 90s, around 96, 97, by my supervisor, Peter Kellogg, and it was developed for Windows, and it ran on the old Windows machines and output MIDI, and it controlled drum sounds on the MIDI. And this, once, I rewrote the whole system using the Web Audio API so that it's now accessible via browsers where it's just a single click, and that's the kind of preservation of ideas, and there's some important ideas behind the Rhythm Engine that I'll just talk about shortly. I'm going to switch to my demo there. Is it clear enough? So the Rhythm Engine's core idea is what if a rhythm can be represented as a point in a multi-dimensional space, where each of the axes is some kind of perceptually continuous thing. By that, what I mean is there is some kind of more of straightness or more of offbeat in one direction or more of phase shift or more or less of various parameters. So if we represent a particular rhythm in this kind of multi-dimensional space, then we can do very interesting things with that. So in this case, I just start by playing one, one just one drum. So choose my kit. This is a very simple beat, right? So this is what's called a straight beat. So you will find that in rock quite often. So I'm going to switch that. I'm going to reduce its straightness for a little bit. It's just going to become slower. So that's a completely different kind of feel, right? So, and what you can do with this, you can also play around with a threshold to reduce its complexity, right? You see how it slowly shifts from one kind of intensity to the other. So it uses accents to achieve that. So this, no, that's just one voice. Now we can add more voices, but instead of going through all of that manually, what I'm just going to do is I'm going to drag and drop a preset file and so that I can show you what we can do with that. So this is, there are four voices in this case and I'll talk you through this. So this is a very simple beat. So what I've done is I've created four presets out of these four voices that have totally different characteristics and not totally different characteristics, somewhat different characteristics. And I place those presets into this space and how I can smoothly morph between them. So by representing all of these four rhythms in this kind of continuous space, I can now move between them smoothly. So this, it was possible to bring this kind of a live interaction onto the web primarily only after the Web Audio API came into existence. So we'll revisit the beep a little bit at this point. So there are lots of issues with this if you might notice, like how am I doing on time? That's okay. So this, you'll see that it creates an oscillator, but it doesn't return anything. So how is it that, how do we know that the sound is going to persist till the sound finishes? For example, why, I mean, what if the garbage collector kicks in and destroys all of them because all these references are going away? This is something that the Web Audio API takes care of for you, it maintains the references to these nodes in the vendor and the background until they are no longer needed. So one of the issues with this is that the oscillator node in particular and the source nodes in the API are what are called ephemeral nodes. So they are one shot. You trigger them once and after you stop them, you cannot use them again. They have to be reclaimed and you have to create a new item. This stumps a lot of people who are initially coming to the Web Audio API. So what happens is this, so when we did the beep 332.0, this is what's set up for us. And after two seconds, nothing. So this whole thing just disappears after two seconds if we no longer hold any references to the oscillator. But even holding references to the oscillators of no help because you cannot start it again, if you start it again, it'll throw an exception by specification. So how do we make the max kind of interface for Web Audio API if the nodes keep disappearing, disappearing willingly, right? So that's an issue. This, what we can do as with most of the problems in computer science, we can add a level of indirection. We can create a gain node to which all these processing elements are connecting instead and pipe that to the output. Now when we do that, what happens after two seconds would be something like this. You'd get something, you'd at least have that gain node intact. But after two seconds, you're free to beep again. And you can actually beep as many times as you want even before the two seconds finishes because they'll all get mixed into the same gain node anyway. So this is one approach that we can use to create stable illusion, an illusion of stable models. So in a sense what we are doing is that we are letting the Web Audio API be the server component of what I showed in Super Collider.  So the 2.0 is an important thing here. So the sound dies precisely two seconds afterwards. But precisely what I mean is the precision is like one sample. So it's sample accurate timing is provided by the Web Audio API. It's precision of like typically one out of one by 48,000 of a second if that's your sampling rate. The second problem is that we want interactivity. So this is the problem with the beep function. We schedule the beep to disappear two seconds afterwards. But what if we change our minds before the two seconds is finished? What we really want is we want just in time scheduling for these kinds of sounds. So when we do, so is set time out adequate for this. So let's just create a timer that's going to kill the beep after two seconds. But then if we change our mind, we can always kill that timer. But that's not good enough because set time out has very poor jitter characteristics in the browser. Like no musician would respect the kind of jitter that set time out shows. So set time out is not an option. Neither is set interval. Set interval is a little bit better but it's still not an option. Request animation frame is a very good candidate. The jitter characteristics for this are very good relative to the others. And it's tied to the display refresh rate. So it runs typically at 60 times a second on its own. So that's, so request animation frame in conjunction with the sample accurate timing of the web audio API. We can get great interactivity and timing accuracy. So what happens is that we want to compute audio for about a little bit more than the next request animation frame called that. So that by the time it arrives, there is at least something that's going to go out and we're not going to stall or the audio is not going to break out. So this is the typical pattern of overlapping computation of audio that we want to do in real time. So when I moved that morph slider in the rhythm engine demo, what you saw there was that these computations were sort of making instant by instant choices on what to do next. And especially when it comes to the tempo changes. So, and the Web Audio API provides something called a script processor. You can write arbitrary JavaScript code that image sound. You can actually compute float 32 buffers and send it out to the audio and it'll play back. There are some, in the current specification and implementations, there are some serious drawbacks to the script processor. That permit, that do not permit it to be used very well with the other notes. I'll show a couple of cases of that. So a library that I wrote, just that gathers all of these lessons into a handful of functions, which is Stellar. So the first problem of the disappearing nodes is solved by Stellar's graph node, which makes it easy to create stable abstract sound models. And then the scheduler is an interesting part of Stellar. So what it does is the scheduler separates the specification of an interactive audio visual rendering from its actual play time. And apart from that, it also takes care of sample accurate timing and just-in-time timing, just-in-time decisions as well. So I'll show a couple of examples, just after I walk through graph node and schedule a bit. So graph node is a very simple function of this kind. It takes any object and then turns it into something that can participate in the signal flow graph. And the scheduler is, that the player of the scheduler works on functions of this kind. So if you're familiar with functional programming, you can read this pretty much as a continuation passing style thing or callback passing style function, except that now a clock is being threaded through these callbacks, so that this asynchronous thing is happening over time. And the timing is precise in this case. So, and it also provides a whole number of higher order functions that you can draw on for composing different sounds together. So I built a small explorer for playing around with both the scheduler and the graph nodes. I'll show a little bit of that. So this is the stellar explorer. Ignore the comments, they're not so important. There's just for the person who's visiting that for the first time. What they can do here is I wanna show, I wanna beep for the first time like a child, right? So that's been one of the things. So I'm gonna do some bit of live coding here just for kicks. If I, I'm just creating a, I'm creating a built-in chime model. I'm instantiating it in the CH variable. And I'm gonna say, I'm gonna make a note of this, 72, 0.5, that's one note, and the procedure note of 79, 0.5, that's another note. But these notes are just models for playing back those notes. They're not actually being played just yet. And you can play them as many times as you want. So if I do play, so that's the first note, and that's the second note. Then what I can do is I can put them together into a track and do that. So that's, well, this thing just plays and stops. So I wanna keep it going for a while while I make a few other tweaks. So I can just loop that. So this is gonna keep playing while I'm gonna do a few other things. So when I click on the CH, I can get the half-life and a few other controls. So this is a very simple beginning, and I'll show a couple of more interesting examples of that. So this combines precise synchronized visuals with the sound. It's again, the simple random notes being played, but there are also synchronized visuals here. So I'm just gonna select everything and just hit run. Bit of a delay through the visual system so you can notice breaks and synchronization. And now I can control this. What I can do is I can also change the speed that provides you in terms of live control. So that brings me to roughly the close of this. So there are a few goodies coming. I mentioned a couple of problems that people usually run into, and these are being addressed. One of them is that we do not have a clear way to coordinate the musical events that are generated by the, that you schedule in the Web Audio API to other events that you might wanna do, like visuals or sending out MIDI or controlling lighting using MIDI or any of the other display activities that I do in it. So there is additional facility coming in for doing this. So currently we have current time that always progresses in real time, but there's work on just specifying and implementing a current play time so that we have a clear idea of when the sound that I'm computing is actually going to be heard by people. So that's the output latency. This information is gonna be available and it'll completely change the precision with which we can orchestrate things in the browser. So the second thing that's really exciting is audio workers. So I mentioned that the script processor node provides, lets you write arbitrary JavaScript and compute float 32 buffers that you can ship out to the audio system. So that, in the current implementation, those scripts run in the main thread. So if you have other activity that's going on in the main thread, it's going to seriously impact the audio that you're generating. You're likely to end up glitching the audio. As a consequence, what people do is they have very large buffers, like 2048 samples or maybe even 49 to six samples. And those, and that ends up in reducing the latency and the whole point, the WebBody API was, people began working on it in the first place was to have low latency audio. With the audio workers initiative, we're gonna have a JS code run right in the audio thread and without any breaks, without interfering with the main thread, which means you can do your UI in the main thread and have the audio be smooth. That's a super big deal because we now have arbitrary JS code that's on par with the native code that the browser's put in for all the processing, the filters and all the other native code filters. It would even be possible to completely reimplement all the native functionality in pure JavaScript with that particular, when that happens. And I'm actually looking forward to that because that leads to some really cool things that you can do, which you cannot do at the moment. So one thing that I wanna show in that is, show about that is the bug that we have and we call it a bug, but this is what's in the current implementation, as I mentioned, the script processor now runs in the main thread. And because it's running in the main thread, it's, there's got to be events being passed back and forth between the audio thread and the main thread. This means every time you pipe audio through a script processor node, it incurs some major delay. And this is code where you're not supposed to hear any delay between these from a conceptual perspective, but because of the implementation and the specification of this point in today's stage. You will hear that, because all I'm doing in this case is I'm writing an on-audio process that's copying data from any, it's input pin to the output pin doing absolutely nothing else. So if that's all what it's doing, then if I pipe the input data directly to the speaker and the JavaScript output to the speaker, I shouldn't be able to hear a difference. But now in this case, I can hear a delay and that's what I mean we will get better. So you can hear two tones. So in principle, you're supposed to hear only one tone. If there's no, if the script node does not add any delay. If you add other native nodes, like a gain node or something instead of the script node that also does the same kind of copying, you would not hear that delay. And we want the JavaScript code to also coexist, have basically the same performance characteristics as native code to get some very interesting functionality out. So that's what's coming up. And once this is up, I'm super excited about that. So in conjunction, as I mentioned initially, the Web Audio API just deals with the audio part of it and leaving and just leveraging everything else that's getting into the browser and being put into the browser by other teams. So the creative possibilities are just exploding at this particular point. And especially when you throw in networking, people are doing network jam sessions using this. Google has done a few demos on that file. As it stands, quite a few of the old Web Audio API demos are broken because the spec is also evolving and the browser implementations have also evolved but the code has not kept pace. So you may find, if you go around exploring, you may find that the demos are a bit broken. But never mind, they'll catch up once version one is finalized and people are happy with audio workers. So thank you. I'm at the end. Any questions? Hey, great talk by the way. One question. If you heard about Chris Wilson, he's already working on Web Audio and all those things. His project regarding Web Audio Playground. Do you think in future that your libraries can be fused together to create something fun? Because right now he has run core JavaScript coding if you see the code. But on top of it, if we introduce your libraries over there like GraphNode and all those things, do you see any benefit over there? I wrote those mostly for my own purpose because I found reusing the GraphNode and the scheduler to be much easier to do. I don't have to keep solving the same problem every time I make a project of that kind. So, of course re-use is always welcome on that front. I mean I've had a couple of requests. People have tried to use Stellar for actually writing an audio editor and also orchestrating full sequences of signal processing flows. And so there is some interest in that regard, but quite often what I find is that the code just gets, the code for doing the timing especially, that keeps getting reinvented. Maybe once the current play time and other things stabilize, then it will become less important. It may become less important. We'll see when that happens. Thank you. What's wrong? Take the notes. It's not so much libraries. It's more like, that's more music domain stuff. In fact, part of my research work, I showed you some supercalator code that did venous synthesis, but I mean that was part of my research as well. We do not have an adequate formal understanding of a Raga system, even though we have a lot of musical, logical literature on it. So, and synthesis is a great way to explore the rules behind this system. So just go ahead and keep doing it, like play around with note generation, play around with Gamaka generation. Just keep doing it until you figure out what that's where. We don't have major libraries today to do that. You know, there is some amount of work, some, for example, there's this system called Gaayaka that you can take a look at. It's not based on web audio, but it provides some amount of intelligent Gamaka feeling of phrases in Raga's. My own work was based on, my PhD thesis was based on Gaayaka's, was building on top of Gaayaka's work. And there's still a lot more to be done. We've probably like five years before we have major very interesting results to show on that front. There's already some amount of interesting results, but we need more understanding to comment on that. Yeah, hi. Great talk, by the way. I had two questions. First was regarding debugging. Obviously, when you're making all that kind of stuff, you need to test, you need to debug. What's your experience with that? And with the developer tools, if you use them, is there any kind of feedback that you would want browser makers to do? And the second part is regarding, this was about the Web Audio API, but I'm curious about your thoughts on the Get User Media API. And the Get User Media API, in which people can actually take input from the mic, and have you played around with that and combine it with the Web Audio API? Yeah, I'll take the first one. Debugging, in the case of music, is pretty, to some extent, easy because you hear the wrong result. You hear what you don't expect. So it's a bit easier on that front. Apart from that, the regular development tools surface. Regarding the WebRTC, the Get User Media, I mean, the microphone input is already integrated into the Web Audio API. In fact, Stellar already has a module called mic that just lets you grab the microphone input and type it through processing routines. The other integration with some of the other media stream APIs, like loading an audio or video thing off a URL and then piping that through the Web Audio APIs processing system, that's being worked on. Good parts of that are implemented in Firefox, but not in Chrome yet. So it's in various stages of implementation and proposal at this stage. Thank you, Shree Kumar. So feedback forms have been distributed to you guys.