Numenta Live Streams, 20 May 2019

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: BHTMS - Cyclic Scalar Encoder

Description

Broadcasted live on Twitch -- Watch live at https://www.twitch.tv/rhyolight_

A

All right, Jeremy's, gonna bail, that's cool, don't worry about it. You can come back, listen another time, we're building a react, app whoo and if you've watched me, you know what I feel about react right now. Actually, it's working fine I'm, pretty happy with where we're at here. So let's take a look at it. Real quick! So here is the web app. We are constructing we're working on encoding numbers here, and so this is our page. We're not open up the debugger, and here is where we are at. This is a tutorial documentation.

A

It's interactive documentation that is going to explain how encoding numbers into binary representations works. This is what you have to do to get your data into a format that your brain can comprehend. At least our simulations of brain matter can comprehend thanks. They just go for for joinin. It's you need to go to bed, it's good, get to sleep. You can always watch later. I put all this stuff on YouTube we've been going for three hours now: Wow okay, so this is complete with code.

A

Examples like here's an example of a very, very simple encoder, and then here I show examples of it working you know, and, and so I've got a bunch of diagrams. That's what we're doing is we're converting these diagrams I've already written into react components so we're creating a react, application and so cool thing about this.

A

Is it's all going to be reactive, in that you can change the parameters of things and all of the diagrams update, so we're gonna have a bunch of ways for the user to tune things and to see the diagrams change in real time. Here's another one where we're encoding using a resolution instead of a minute, a Mac. So that's a concept of scalar encoding and now here we are at these cyclic encoders. So here's this is where we left off in my last BH TMS stream.

A

What we were about to do is hook up this button right here that says lions circle. What's weird: there we go and it's it needs it's a toggle button and it needs to do. Is this whole array of circles here is going to transform from a line into a circle so at, and you can see this.

A

This is the original building HTM systems that were looking at we're converting from. So here's what it's supposed to do.

A

That's what we're going to do this one's written in a slightly different way, we're gonna create it as a react diagram instead of whatever this is, but that's basically what these circles are going to do. That's the challenge! That's today's task!

A

This is a cyclic encoder, so I'm gonna close discord for the moment, because it's distracting I swear I, just closed it, okay, and so, let's just see what the state of my code is right now, because I don't remember what I, usually when I leave for the week, I I don't have anything to commit, but apparently I left for the week on Friday and I still had a bunch of stuff that I hadn't committed I didn't even added the toggle button.

A

So that was something David help me out with, or you still are you online Dave. You are Dave. Is this day this isn't Dave. This is a different Dave. There's.

B

A lot of Dave's that.

A

Are helping me I think it was David. Truman was the guy that was helping me earlier. Maybe that's still you, okay, so we got the toggle button. We got this thing. This is what I was messing with. It was these scales it's the one and only David duck.

A

Well, just call you I, like calling you Dee duck. It's like a superhero name, all right, so I'm, just trying to figure out where I was I was partially through. This I'm gonna commit this, as it is right now to the branch, knowing that it's it's not everything's, working well, I mean it's nothing's broken, but I haven't implemented everything yet so, let's just add these components and pages, the old source shouldn't be added toggle cycle. Never okay,.

A

Toggle button for cyclic line, slash circle, option push origin, cyclic, scaler, all right. Anyone who wants that the most up-to-date version of the code can do can go, get it they're from my branch, all right so.

A

Close that this is the this fancy cyclic encoder display is just what we were using as a reference, because that this has the code. I was stealing on that code, yeah cyclic encoder, so so, once we get this working we're going to see if there is an opportunity to create an abstract class for our d3 components, because we're gonna have to react diagrams that our d3 components, it's quick, quick overview here.

A

Here's here is the source code.

A

Everything starts with pages index, that's the main page, and these are all pages and we're working on encoder encoding numbers, that's the page or working on. So that's that's. What we're looking at here is an encoding numbers page, and so we've got pages here and react. Components are in this components.

A

Folder, so I have a couple of generic components like a layout, a header and this code, syntax tool that someone else helped me with, and the these are our inputs like there's a number input, the thing that I clicked up and down something David helped me with the scrubber I'm not currently using, but I might come back to on this toggle button. The diagrams are all here and the diagrams thing, and currently we've got simple scalar encoder, which is basically all of the scalar coders.

A

So far that you've seen on the screen are using this and we've got a cyclic scalar encoder, which is a lot of copy/paste code and the only one on the screen. That's that is a cyclic encoder. Is this one right here? Well, all the others are instances of the simple scalar encoder, okay.

A

So we're now we're working on basically our second, our our second diagram class and once we get it into place and it's working we'll look at potentially pulling an abstract based class out of them that perhaps deals with d3 directly. Something like that we'll see. If we need to do that, you don't want to have hazard lis, create abstract classes, but you don't want to repeat too much code either. Okay, so.

A

First thing I wanted to do was to get this button working circle line circle line and we're not going to do the transitions just yet I think that's where I left off here's the code render output cells, yeah.

B

A

This is what's creating the circles.

A

I believe isn't this street sells yeah I change the street, so yeah, here's the steer in the circles and this bit all that I that I copied out is creating a data array that represents the state of each circle as it as it moves, and so we're not quite doing that. Yet right now we're just sending the raw and coding in and that's what we're using to create the circles.

A

But but let's start now we're going to take that encoding and we're going to amplify it a bit okay, so we're going to take the encoding and we're going to transform it into something a bit different and we're going to return an out that has a CX and a CY in addition to a bit and the bit is either on or off we're just going to have a CX and CY and that's what we're going to use when we're deciding where CX and CY should be here.

A

So if we do this and we create the CX and CY we're basically doing this calculation here no longer here. So so this we're going to change, and this is no longer going to be a function.

A

It's going to have an inline function here. I, don't think I need this right. Let's try and do this all like harmonic and a harmony way we're also going to have access to D and I here D is the data point that's going to contain the bit CX and CY and I is going to be the index of the data point which I don't I'm, not sure we're going to need.

A

But in this case, if we're going to calculate this, we're just going to return d, dot, CX and here we'll return deep D see why you don't need to even acknowledge that index.

A

So so we're essentially saying if the displaced state is a circle, we're gonna calculate where that x value is based on circle math. If it's a line, we're gonna, do it based on linear math. Let's see what happens, everything broke, okay, so encoding is not defined. That's just because I needed this I just need this dot encoding map and then we're not sending the distant coding and we're just gonna. Send this data array, so I forgot to do that. I think! That's right!

A

All right! What else is wrong bucket spread is not defined. So, let's see bucket spread, that's something from this old code that I'd probably have hard-coded somewhere. No, no, no, okay. Let's it's something! I removed earlier I didn't think I needed.

A

Okay, it goes up here. Buckets this encoder display size, Center, I'm, not sure we need oh I hate that I used. That I did that I did variables like this I hate it I.

A

Go I went through this phase of saying let this equal blah, comma, the sequel, blah, comma, the sequel, a comma and now I wish I'd. Never would have done it because every time I come across it. It makes it hard to comment lines out. So I just want to be able to do this. I don't need not don't need that it don't need that whoops do I need this yeah.

B

A

All I need is the number of buckets.

A

All right, I'm, not certain I- need any of this, but I'm gonna keep it here for just a moment.

A

Whoops I'm gonna keep it here for a moment. Why not cause yeah I, don't know why not caused because I'm, because I'm still getting used to using the latest JavaScript.

A

Okay, let's see see what happens, should have bucket spread. Now the next error size is not to find 156. This.

B

Is what happens.

A

When you copy and paste code, okay, so there's a size here and oh so I just need this equals this size. Where am I getting this sighs pops, sighs I think this is some diagram with I. Think in my new model, I think it's diagram with yeah. Definitely, okay, so size is going to be.

A

Let's put it up here and change it, this would be props, stop diagram with.

A

So we'll need that what else brakes.

A

Display state- that's just gonna, be simple: this stuff, okay yeah. How did we do this place state now.

A

Or am I getting it it's what we should be setting it's what the toggle button is set, so this may be new code that we need to put in place because it's what it's, how are we creating it? Let's take a look. Click get out of this old source and the page numbers when we create this cyclic encoder over here or cyclic, a corner we're sending it in the display state, so should be a prop I'm. Just checking double checking here so so displays state. This is gonna. Be this stop prop stop this play state.

A

A

Same thing, I think 182 I think I just need to replace. Oh yeah yeah. That's that's it! Thank you! That's even better I! Don't even think I need this. So I'm gonna take that out business. I love how you could just change the code. It's amazing is there anything else. That's coming from props, no okay, so that displays states needs to be what was it? 182, hey, Jasper, thanks for hosting 169.

A

Is it linear scale? Okay, so the linear scale that I've defined for d3 happens all the way up here and it's this one. It's Val to screen so I think that's the one that I want. That's the scale that I want to use here, and that is just a that's just of this property yeah.

A

So linear scale, just gonna call it this about to scream.

A

See what breaks alright nothing broke. So if I'm not sure if this is gonna, work at home I've got a little bit of a display problem, but let's yeah okay. So when I click it says: centers not defined 156, that's in the handler, I think or.

B

A

The repaints center, so I need a center, of course, that makes sense Center, and this isn't going to be the out sighs. Okay, that's fine.

A

That's the center of the larger circle that we're gonna be wrapping the line around. So let me click here yeah. So this this line here is gonna. Have is gonna, be as displayed as a circle down here in the center's right here when we click this, not quite we're almost there 157 radius and our radius is passed in.

A

So how do I? How did I find this I? Think it's just going to be half half of the.

A

How do I calculate this? The radius in holes never is calculate okay,.

B

A

Do pass it in I: don't want that to be a parameter. I think I'll make the radius of the circle I, don't know. Half of the diagram with we'll just see see how that works and get rid of this I. Don't think we need that SVG I, don't think we need that either.

A

There we go Hey, look at that boom-boom boom-boom on one of them. That's successful! I like that! Alright, so we got something working here. So does everybody understand what we did there? We all we're doing is instead of passing the encoder data directly in we're gonna, transform it a little bit and we're gonna calculate our CX and CY as we as we pass through and in one aspect.

A

If it's a circle, we're gonna do circle, math to figure out what the CX and CY is of each and if it's not we'll just do the linear math. So it's pretty simple. What gets tricky is when you want to do this transition. So, first of all, let's place this in the right spot, because it's first of all the radius is a little bit too big. So let's go check the radius here and let's, let's make it a little smaller.

A

B

A

And even a little bit bigger than that, we'll see. Okay, let's leave it at that for now, but the line should be down lower and soo.

A

That's probably easy enough to do well, we'll just bump them both down by this. What is a ratio to top size divided by 20? It's not really what I want there I, don't think. So what happens if I do this? Okay, it moves it down. That's not really what I want! Why can't it just be a padding, let's just say a top cell padding and we'll just give it I, don't know 100 pixels for the moment and then we'll get rid of this ratio to the top thing we're just going to make.

A

The line will be at the top, and this one will be the top plus. Whatever the circle math is so hopefully it'll start there yeah.

A

Somewhat sort of, of course, my my circle math is going to be off because it's because the radius is.

A

A

We're hacking this a little bit right now, but I don't mind too much. I just wanted to just display right and we can come back and clean it up later. That's close! Let's, let's go! Let's move this up a little and then we're gonna make it transform soon. That's alright! That's good! Okay! Okay, the.

B

A

Where are all the bits on the bit shouldn't all be on at this point? It should be ten bits on, but we've got them all ons there's something wrong in our loop here.

A

Where we're creating the data array, the bits should not always be on. Oh we're not doing the we're not doing the bit properly.

A

So I'm saying output bit is bit what did I do here if bit returned on color, so so, let's just inspect this I want to see exactly what this data object looks like.

A

Where are we here, cyclic scalar yeah? Let's, let's write after it does this: let's see what that data object looks like. Is it not gonna, not gonna. Do it there we go okay, so the data object bits: zero, zero, zero, zero, zero, all zeros there's a few ones? Okay! So that's so it's done that properly so right here when we're deciding how to fill it, we should also break Oh.

A

Interesting, it doesn't happen very often hello,.

A

Okay, that's odd! So it's usually we should get a break right here. Let's.

A

Why isn't that breaking.

A

Sometimes, with react: I have to like force the debugger to catch something I, don't know why? Okay- and this is actually that's not where I want the debugger I want the debugger right here. I want to see what this data thing is. Are they on ER? Is it styled?

A

Cuz is what on what do you mean? Oh, oh you mean. uh So this is an SVG fill color and so I'm, basically saying if it's on, if T is on, oh I, see what it is. D is now I used to depend. D has it's just stop it, so all I need to do is say dot bit. That's it! That's all! Okay! So that's easy! That was just my I was transitioning from one to the other. There.

B

A

Okay, now so, if I do circle, this should still work. Let me turn this off, because it updates a whole lot better. There. We go look at that beautiful huh so, but it is apparently bounded and it shouldn't be it should it should roll over so do I have to.

A

Maybe found it might be, the default kit range from pin index handle, let's deal with that. Quite yet, where do I create my encoder.

A

Now it should be false by by default, I. Think no.

B

No bound, it is entirely different. Coder.

B

A

Did I do this in the other one in the fancy one equals cyclic encoder. Oh.

B

A

Am using a cyclic encoder, so that's what I need to do? I need to use the cyclic encoder, it's a! So. If you look here in the page, there's a link to the cyclic code. It's super simple. It's just doing a little different application of the bit mask so I think. That's all what we need to do is in our cyclic encoder. We use cyclic, encoder I'm, hoping that's a cyclic encoder and where I created that decoder, which was I, believe.

A

Is get our code we're going to create a cyclic, encoder I think it takes the exact same parameters.

A

B

We go look at that cycles.

A

Perfectly and so we get to the end and it loops around the front. That's what the cyclic decoder does essentially same thing here you get to the end and a loops around the front. Alright, that looks nice. So let's do the transitionary parts now so now we're going to do if so so, here's a tricky bit because we have to create an animation context or an animation handle, and when someone clicks on the toggle, let's go back to about this one coding numbers.

A

When someone clicks on the top toggle, basically, the display states going to change and when the display state changes.

A

This thing will rerender and it has to check the display state to see how it rear Enders.

A

So yeah component did update right. That's sounds right to me in cyclic, encoder and I've already got. This component did update bit here. Yeah.

B

So if it's there, you.

A

Go if the other property, what was it called.

A

Display state yeah, perfect.

A

And then we're just going to do the same thing, I think we'll just crack we'll just whoops. We will just do the same thing. We'll use this dot display state.

A

All right and then everywhere I've got this dot props.

A

A

Yeah, that's just this is for the transition, but I mean it's it all. So the button will so here's the idea. I'm gonna, have to change the button logic for this I think, because what should happen is there's a.

A

hmm Okay, so I'm gonna think about this. Actually, because what happened in the old one was, when you hit the button, there was a there's a period of time where you animated from one state to the next, where it was in a transitionary state.

A

Yeah this this is this is what will update whenever someone presses the button. The thing I'm wondering about is right. Now the button only button has two states line or circle and I need to have these states that are aligned a circle and circle to line and I need to know how long the animation is. That's how you do the calculations and the data array so what's going to get here, is just line or circle, and so I need to check if.

A

Like I've got similar code in here that does this type of checking and to places like e, so we need to so I'm, depending on a display state being line to circle or not I'm wondering what the best way to do this is we could we could set the display state from the outside and handle the animation there, but I don't think that's the right thing to do. I think the display state gets set on this component. It should kick off an animation, create an animation handle for it and then transition to the next state.

A

Internally- and there should and that's it so all you're really telling it is what state it should be in line or circle. So I know one of the things that we need is an animation, animation, duration, let's just make it 500 milliseconds. For now.

A

A

So so what should happen here is if I set the display state, it's not as simple as just setting the display state. This is where the animation would kick off. We would first check to see if we are in in an animation currently or not.

A

Before we start animating, so if somebody tries to set it back before the back-and-forth, it won't work, but let's just I did I had an animation handle I. Think in this one. Where was it? It was in different. Where did I have an animation handle?

A

You help me pick cook it up. I thought.

A

It was in the page right yeah. This is the animation handle.

B

A

I want an animation handle for my react component. I'll do basically what you did here: I'll create a handle, I'll put it as a member.

A

So I've got animation duration, animation handle. This is.

B

A

This is, this is gonna change right, so I want to. This is not a constant I. Don't just take that out for now. Let's put these together. Oh.

A

Research meeting was pretty complicated. It was hard to keep up okay. Similarly, we have this animate value, so we'll create a function right that animates similar to this. Now this one is a trigger. So if this doesn't have, this is going to be a trigger like this, it's just going to be a you can just make it a function. It doesn't have to return a function so we'll create something that and we'll do something similar to this clearinterval ba ba ba ba right.

A

That's what I'm thinking my style I put this in the right place. This should be. This should be not here, but here, right yeah. This would be here.

A

Well, the duration could be here, I, don't know, I, don't know about that, we'll see, I might move it, but the animation handle should be here and then we're will create a animate display.

A

A

All right, and that will clear clear the interval something similar to this. This is what I typically will do, is I'll create an amount of cuts and the.

A

This isn't gonna work work the same way, but it's sort of similar, so new state.

A

A

Let me just stick this through so I'm gonna, clear, whatever animation handle we have had and I am for a certain amount of time, which will be not the speed well, the speed will be.

A

A

Okay, so I'm just doing I, don't doesn't necessarily need to be in adoration here. I, don't really need adoration. I can just code this by like cuts. So what my.

A

What I need here and and two and able to display the things I want.

A

Cuz I need to be able to calculate CX and CY.

A

Based on how far, through the the data array we are and the CY is.

A

The stuff transition had to be do that for going line to circle.

A

I wonder if I screwed this up.

A

Look at the old code right now.

A

Update display I changed all this stuff.

A

Check line at 63 in the cyclic decoder well,.

A

Reuse, the page animate to value. If you need an animate to value function, to call, then you need to for each the data update the new CX CY and render up it cells then do next slice until done.

A

This component did update, happens before.

A

The four render output cells, obviously I, am trying to I.

A

Need to create this, these values here this is the CX and the see why you need to create that, based on how far along in the animation we are so like, the animation needs to have a starting point and.

A

Yes, component did update will happen before it renders that's good, because whatever I do in component did update.

B

A

To be accessible in the render function.

A

I'm curious now here.

B

Okay, maybe this maybe should work like.

A

This, how about how about this bear with me? Dave, listen to this! Well, maybe this is what you're getting at, but we have this react component I want to set state on it, I want to say, set state line, and it's going to animate from whatever state it's in to a line.

A

A

From the outside, let's say: I wanted to I wanted to transition over 50 steps. You know to go from one state of a line to a circle as soon as I get updated to a line here and component that did update I know it's gonna render, but now I need to kick off something that basically Brett is going to rerender every 50 steps, so I need to perhaps I, don't know, I don't know.

A

What's the best way to do this is so you're saying you can just put that logic into an animate to value, so you pass it like animate current to target and it will automatically interpolate.

A

You would just return before calling this update right here.

A

Oh, you mean call animate to instead of update and then the animate to would do the update.

A

B

A

This with like the with what d3 is going to be doing.

A

Okay, you can pseudocode it, but I'm trying to think like.

A

The way that I I had it written in that and the other in the fancy encoder was not didn't use this component, the update thing it was like setting a state. How did it do it? I can't remember I.

A

Should probably undo all these changes I don't know why they were there. Okay,.

A

Where's the button toggle.

A

Displaced, a.

A

Okay, here's the here's the function I had transitioned from and to and I was creating an animation handle. Just like I was saying and calling update, display.

A

All right so I have this transition variable. So here's here's the true this transition verb. I think this is what I'm using somewhere else ah here. It is so circle to line skips okay. So this is what I was what I was missing.

A

Circle two lines scale Y and it takes this transition. What is this? It's just a scale, it's a linear scale and this transition right all right, so I'm using so I'm using the linear interpolation that d3 does to to to identify where, in the transition space I am based on this. This transition variable so I need to keep track of. So when someone presses that button and I get an update, I'm saying okay I'm a circle now I need to be a line. I need to first of all update my state to circle.

A

To line kick off an animation set, a transition. The animation isn't going to update the transition every time it hit intervals and update and then and then that will animate the thing.

A

I'm gonna close this window, it's cold in here.

A

So I think that's close I think what I was just saying, close I just have to at least that's that's. What I, how I did would do it with d3 is um created, treated a scale that helps me transition circle to line versus line to circle, and these are different only because well they're inverses of each other. Aren't.

B

A

No, no they're, not so they're, so we're actually doing this to to work with the height and the.

A

These are both about height. This is all about height. The X is easy, I think the X is easier or is it circle one scale X I? Oh here you go. It's pseudo coding it up.

B

A

Eat some of my sandwich, you guys excuse me for a moment 31! No here we go.

A

So I'm not sure what the best way to do I mean it seems like component did. Update is going to be set when toggle button is pressed, but all this other state, maybe not I, mean all the other internal state because we're going to loop through a whole bunch of different we're going to transition from one state to another. So there's going to be a bunch of states line to circle circle, the line whatever and each one of those has to render to get where we're going so.

A

I did that, but we should be able to do that manually.

B

A

A

By falco, thanks for joining.

A

Can't miss the Belgian Miss Universe is every good Queen Elizabeth contest. There's not like a TV show.

A

Violin interesting sounds fun.

A

Hey net pixel, thanks for asking, because I'm not trying to make money my company's not trying to make money off, twitch we're just trying to spread information and.

B

Engage our community.

A

So if you want to help out just spread the word and you've been helping so you're doing and you're doing enough.

A

You can certainly subscribe that helps. It just helps me look better.

A

Just like that, thanks for that pixel and now you get a little brand by your name in chat.

A

Twitch is doing a great service, I, don't mind them, taking a cut.

A

That's not really service they're making do post money, I'm sure.

A

B

This out, David.

A

David's busy coding well I'm eating a sandwich. I.

A

Should open the discourse back up in case.

A

Some of this technical stuff honestly might be better to do offline and come back with a good explanation of it. Instead of dragging all you guys through the dirt, as I figure out what what needs to be done, there's a simple solution here, I think.

A

So yeah yeah yeah I like that, so this transition output cells lined a circle that is circled a line.

B

A

The tricky thing is, this is sort of what I'm doing.

B

This through d3.

A

So all I want all I need for.

B

A

To work is just.

B

A

Number, basically, how many cuts do I want to make from A to B that's how many transitions or how many steps in the transition and then I have to have this I have to have this anchor this cursor through the transition, if I have that.

A

So, if I, basically, if someone calls thrust as the line button and I'm and I know, I need to transition from circle to line I I have to kick off the animation, create this transition cursor and then on the if in the transit within the animation, update the discrete update the anim update, whatever update the transition cursor and then the d3 will do everything else.

A

B

I think that's.

A

The right thing to do here.

A

So I'm not sure this whoa. What's that a little hint so.

B

I'm not sure this is necessary. What.

A

All I really think I need, and, and this this seems familiar, this is what I generally. This is what I did in the last one, but but I'm not manipulating the data array. Here, that's that's the thing you have to think about, and this component did update. I'm, not manipulating the data array. The data.

B

A

Is recreated on every update right here and and what we're going to need access to is this transition?

A

All I need is this transition, so the animate loop is just going to kick off the animation and then decide how many cuts they're going to be and then update this transition, some type of transition, curse or counter or whatever, and we're going to use it in in the d3 renderer to decide how far where the circles are going to be like I've got it in my head now what I want to do, but but I don't unless.

A

But I do have to at some point to make a decision. You know. I have to look. I have to inspect the state, so I just got a state set. What's my state now? Is it the same state? Okay, then I do nothing.

A

Is it the opposite state then I have to go into this transitionary state called line to circle, kickoff a transition or kickoff an animation loop and then set my transition cursor and then move it ahead through the animation loop, rendering every time so we'll do that through component did update instead of calling update, which is what you said originally David was to make sense to me so.

A

B

Do this display.

A

State thing here this is this- is where we'll come into this create and patient handle here, create animation, handle.

A

Create a transition cursor through a transition cursor and then.

A

Animation updates each time calls update I guess each time, but at first it it sets transition. Cursor calls update each time. Let's do that a curse or that's what we're gonna do I think and then, and it's much like in this fancy. Encoder thing will will do well fit.

B

We'll figure that.

A

A

So let the only look at this.

B

A

A

B

It's like this this this. Let me just copy.

A

And paste this, because this is it's very similar I- think to what this is going to be this type of transition. I, don't know if we're gonna do this line two circle bit deal, but this handle anyway, I think it's gonna be pretty similar, so you're.

B

Not sure if this is the right approach, I.

A

Don't know if we need to store the display state at all I'm, not sure. Maybe we don't even need this so.

B

A

Start with the.

B

Handle I've already named.

A

It animation handle.

A

B

Gonna get rid of this too I. Don't think this is the right place to do it.

A

A

B

No, no thanks, I! Don't think this is the right thing.

A

To do I don't this is all I can do, because.

A

I'll, all we need to do is so so bear with me here. Bear with me I'll. All we need to do is I think call this the animation handle. Where did I kill that thing? Oh.

A

Yeah I cleared.

B

A

Okay, so we create the innovation and then we we do this thing. We need to create a animation cursor or this transition bit. That.

B

Whatever we create.

A

Here needs to be accessible within the three loop, so I think we need to attach it to this and I'm pretty sure.

A

I'm gonna have to use a me here right to get access to this this, unless I'm missing something.

A

So I'm gonna create this transition thing and I didn't I haven't created how many cuts there are. It doesn't really matter we could just say, but.

A

Sixteen I don't know it doesn't really matter, and then we have to have a count, no think so.

A

This animation handle is essentially going to run. This is wrong hold on.

A

Why is this there? It's just a bad bad, indentation, I think.

A

Okay, I'll just clean this up, I, don't think we need to do that.

A

Okay, so assuming we have a new display state here, so we're either moving from line to circle or circle. To line sorry I haven't paid attention to chat.

A

Bah bah bah bah: let's see keeping track of my transition, incrementing the counts. If the counts goes over the cuts, then we have finished the display. So that's the point where we update the display, which would be me dot. This display state.

A

So maybe we can get rid of these intermediate states somehow it's not I, never liked them and then we'll delete the transition and then update this whoops how'd that happen. I think I hit the wrong button.

A

All right, I'm, not certain this is going to work but I'm. But let's, let's try so I know that if somebody sets the display state that we want to start an animation, so we're going to set an animation handle we're going to do 16 cuts and then the interval is.

A

A

Hundred milliseconds I, don't know it shouldn't really be interval right. It should be speed.

A

Okay, so if I can count on this transition being here, then I can I. Think I can make some progress down here when we're expecting it. So so.

A

Okay, okay, so, okay, let's, let's start with the line and instead of looking for the display state of circle to line which is not which let's say we don't have that anymore. We need something else. So.

A

It's not just a it's going to be line, but then there's also going to be and if, if it's a line and this dot animation handle as so, so if, if we're animating a line, so let's move this. Let's move this here that work think so. So let's do this first! Oh, that was awful something the indentation of that was was bad.

A

That's right, though: that's what I want that was fine, that why did it indent so awful okay, but that's okay, so so.

B

We're gonna check.

A

First, if it's the line and there's animation handle, try committing to a branch I can't test. Just give me a second give me a second I want to get to I want to see. If this confirms or or not my the idea I'm having in my head.

A

Okay, so if it's, if we're, if we're transitioning, basically from a line to something else,.

A

Yeah to a circle, so we're still in a line but reanimating, which means we're going to a circle. Oh.

A

Which is actually I totally. Did this wrong I grabbed the wrong I grabbed the wrong I want this circle to line code, and it's.

B

In the right spot, it's.

A

In the right spot, so it's that's perfect. So if, instead of displaced state line to circle, we just say displace state line and.

A

This animation handle so now we know we're animating from line to circle. If this is the case, updating other props, while this animation is running, will most likely break it. Maybe maybe we'll see.

A

Okay, so we've got this transition scale. Linear, I'm,.

A

Yeah so I'm creating these scales on the fly based on based on I. You know, based on where we are the data array. We're creating I, don't need this I'm gonna, let I'm gonna let this go and see if it works. Center.

A

Yeah I already have Center I can get rid of this I've got radius, got theta yeah theta that bucket spread yeah.

A

All right, let's just see what what is broken at this point.

A

Failed to compile 73 animation handle I had a lot of weird comments going on around here. Set interval, I think I, just don't have I. Think I just need a prince, no.

A

Constant count equals zero. That's it.

A

A

ah We got some what kind of clothes okay count is read. Only oh yeah I can't make count constant.

A

A

Update displays not function on ad, because it's just update right component tip, update, we're gonna call this stuff update, and this really needs to be else right, we're gonna, otherwise we're gonna update. We don't want to update every time component account, or else this would happen over and over. No, that's not true.

A

We're always gonna update.

A

Okay know that sorry I, don't understand what you're saying I thought this might cause like a oh, it's Sun press, the keys, nice.

A

Okay, so it didn't do exactly what I wanted, but it did break so.

B

I mean that's sort of progress.

A

So let's check this out here.

A

So right here, I'm gonna, stop we're gonna, okay, so we've already rendered so. Okay, so I can already tell we haven't defined a transition yet so the first thing we got to do when this happens is say: this dot transition equals zero because.

B

A

Going to update right away- and we need to let it know that it's in the middle of a transition.

A

Render outputs still looking at this props display state.

A

Render output render output cells, it is yeah here, yeah I mean I I want to write. I. Think I want to look at that. That's that's good I want it to look at the because it's going to set it right here and I'm deciding what I'm, what type of how I'm going to show the circles dependent on the display state and whether the animation handles set. If I see the display state this line and there's an animation handle it's set. I know I'm going from line to circle. Okay,.

A

Okay, where was I? What was the break? Oh yeah transition. That's what I just updated, I'm gonna Hugh's animation handles one of the conditions, because I know, if there's an animation, handle that I'm transitioning from one to the next, because I'm going to clear it as soon as the transitions over so I'm going to use the state as the original state the display state, if it's a there's no animation handle I, know I'm in that state. If there is one of no I'm moving to the other state.

A

Here's where I want to cut right here, I press line transition to zero so count over. So this is gonna be zero. Again, that's strange!

A

It's not exactly expected hold on so as soon as I press this it shouldn't render. Yet okay, it's not rendered.

B

A

Over over over, we are display state line. It's not equal circle. Oh, that's! That's wrong! Right! I! Do that if.

B

This plays state.

A

Oh yeah, this just means if it's changed. Okay, so yes, we're gonna go into this. Okay, I have not rear-ended yet, and so, but once we get so here's the thing that bothers me we're gonna, it's gonna update, I, don't want to update. Yet all right, I wanted to I want the animation to update it. So as soon as we go here, it updates- and now it goes circle. I, don't want a circle.

A

So that's why I was trying to put that update elsewhere and then you said no and I thought it was you, but I think it might have been your son, so I'm gonna manually, not manually but I, mean I'm gonna call update here and I'm gonna call update. Oh I could just return there, you're right, I hate returning within functions, though I mean within conditions. I really try. I would prefer to try and return at the end of the method, but so this will work too right.

A

It's just a little bit more explicit when you return in the middle of a condition, if you're not within that condition. Reading it you're not aware of that context. So I try not to return from within conditions. I'll I'll do something in the conditions and then use that state to make a decision later. So in this case, each one of these. This is going to update it if the prop changed or value changed, and this is going to animate an update if the display state change.

A

Otherwise, if anything else, changes which which it won't, because these are the only two things that I'm allowing it to change right now. So why don't I just take it out.

A

Let's see okay.

A

So I want to hook right here and so we're not going to animate it. Yet.

A

For I'm not going to change those for this one, the cyclic encoder I, don't even have code for it to update. Yet.

B

A

Probably not going to this is not going to update because of page state changing other.

B

Ones I might do.

A

It but I think for this one: no okay: where are we at so so we're in the animation? Now we're going to calculate the transition? We should start at zero. The next one should be one: okay, we're not cutting we're just going to update I didn't do it doesn't do it, okay, something's wrong, so the transition is being updated right so and the transition is a number from zero to one. So let's go up here and figure out.

A

What's going on reset encoder render output cells dive in there so right here we should be able to let's actually, let's pause right here, so we're creating the data array display state is circle.

A

So it's this, that's the problem. The display states already updated to circle and it's not actually what I wanted I think I just have I think I just set.

A

Oh yeah, that's the problem. Isn't.

B

A

B

So I'm just gonna have to change my logic.

A

A little bit since I'm, allowing the toggle button to set the state so I'm so I have to assume. Okay, that's now the state I'm moving to and not the state I'm coming from, which I can do. Okay, so in component, did update we're gonna assume that this.

B

Is the state we're moving.

A

A

Because, apparently, react is gonna set this and I don't actually.

B

Wait a minute this doesn't.

A

Make sense it doesn't make sense. Does it right here is where the display states should be oh I'm, gonna. Let react manage this state, so I'm not gonna. Do this well, let react manage the state, and so now now bear with me here down here. If so, if we're in a circle, we do a circle if we're in a circle, and actually this is now gonna- be line. No.

B

A

If, if we're moving to a circle, that's what this is I, don't think so wait. Did you just write that circles? This also need a circle and animation handle no, no, no see I, think you're, I think Dave, you're you're, just maybe you're, not understanding the way d3 is working here. So this is going to happen on every R animation. This.

A

This data structure is going to be recreated on every animation and this transition that we're using from 0 to 1 is going to help us decide what what step of the animation we're in and that will decide where what CX and CY is for each for each circle. In the it's.

B

A little circle in the big circle.

A

So, if we're a circle, it's easy. If we're going to a circle, we're animating to a circle, it's a little harder right, so this animation happen for circle to line and line a circle. Yeah, that's the idea! So I'll have like this bit here for one in this bit here for the other. That's it once I get these little things hooked up it should it should work. So this one's going to be lying to circle and that's the thing yeah line line to circle, yeah.

A

Let's see where we're at here, okay, so displaced it, oh so so I need to prep push to put this hold it here.

A

Before let me grab this whole bit here.

A

I need to put this here. If there we go so I'm putting it before circle, just saw it so I can say. If we're moving to a circle, let's say positioning to circle or we or we are a circle.

A

Circle no transition.

A

A

Okay, okay, making progress, linear scales, not defined, that's because I I haven't I forgot to create it. I think. There's this linear scale, which I've commented out somewhere. This is um this, is one I've already created? It's called value to scale. What is it called? It's an orient d3 here it is Val to screen. This is the one I want.

A

It's two out but I think it's it's one of these. It might be bits to output display it's one of these actually I think it's bits to help with display. So let's do that one.

A

What line is that 195? Okay, so this scale linearts to output, display yeah yeah cuz. This is the bit index and this will tell us where and the output display it needs to be, and now this ratio to top oh I, don't know if that's still gonna work anymore, we'll find out.

A

Okay, ratio to top is not defined. That's because I changed it. I.

A

Think I just hard-coded something I.

A

I took that out and I replaced it with just a top cell, padding I, think I'm, not sure, that's yeah, that's a top cell padding I'm, not sure. If this is gonna work, ah it worked check it out. All right, I mean there's a little bug there, but that's what I'm talking about didn't quite work, but it worked well enough. The cheer! Oh! We got some problems, but it worked once it worked once the first time.

A

Okay, but we can. We can move all along with this, so the rest of the issues you're, probably just because we haven't hooked up the others like transitions and everything yeah push to production. Okay, so I will commit this. It's buggy it's buggy, but I will commit it right now and I'm gonna take off because I'm gonna work a little bit on this offline and I have some other things that I need to do with the new mental anomaly benchmark.

A

So let me get this in production and you guys if anybody has any questions or anything, let me know otherwise: I'm, probably I'm, going to wrap it up for the day. All we have changed is this one cyclic scalar encoder? What did I miss here? Okay,.

A

A

Change the name.

A

B

To go swimming that sounds good.

A

Okay, animation handle so I'm gonna I'm gonna delete this stuff because I'm think we pushed through it I think the rest is gonna, be simple. That's the hard part getting that didn't that first little spike through and seeing something work is the hard part, but I think we're on the right track here.

A

Alright, a lot of code changes here. This is going to get a little more complicated as we keep going and I have. We haven't done this transition yet circle to line or actually this is yeah circle to line, but it's basically the same thing just backwards.

A

That's it. Okay looks good to me: let's just do it! The this.

A

Cyclic encoder line to circle.

A

Transition complete but buggy just leave it at that and get push origin cyclic scalar there you go everybody, that's a wrap. It's a wrap thanks, everybody for for joining me for HTM building HTM systems.

A

We are we're wrapping it up now, so I'll find I, think I'm just gonna wrap it up and leave it leave. You guys be take care thanks. A lot. I will probably be back tomorrow. If not Wednesday.

A