Flowsheets v2

Glen Chiacchieri — June 2017 — overview, download

An environment for casual programming with visible data. [more]

×

F-F-F-Flowsheets, version 2!.

Hi everyone, this is my demo of the second prototype of a programming environment called Flowsheets I'm working on, to see what it's like to program with looking at real, concrete data and not just looking at abstract symbolic representations.

So here we've got this grid and we have a block in that grid that you can drag around. And each block has a name of a thing, like "a", an expression, and the result of that expression.

These expressions are right now just Python expressions, because Python is the thing that I use the most.

You can make new blocks like this and refer to old ones by name, such as "a * 10". It knows which "a" I'm referring to, and if I change the name of "a", it knows it's referring to the same thing.

I can also make new expressions. So now this one's called "a". I can say, if "foo" is greater than 10, return "yaaay", otherwise return "booo". And it returns "yaaay".

In Flowsheets version 1, I noticed it was very helpful to be able to work with a collection of data at a time, or each item in a collection of data at a time. [more]

So we'll first start by making a list of numbers 0 to 9. In this version, you can add an underscore -- this is just a preliminary syntax that works for now -- an underscore to the name, and then use that in expressions, and it'll make a new list applying whatever this expression is to each value in this list.

So 1 times 10 is 10, 2 times 10 is 20, and so on. And because these are in a grid, it's very nice to be able to look and say, ah, this turned into this, this turned into this, and make sure that everything looks okay, as you're making it.

I also decided to make a -- I don't have a good name for this, I called it "make string" -- but it's just a box that you can type in whatever text you want, and you can also have expressions in here, Python expressions. Just an interpolated string kind of thing.

I noticed I needed this when I made a couple programs in this environment so far, so I decided to make one.

And the best part is that this mapping convention of referring to each item in a list with an underscore works in that too. So I can make a brand new Fast and Furious franchise, new movies in the Fast and Furious.

Hey, has everyone seen the movie "9 Fast, 9 Furious"? I heard it's really good.

Or let's get wild. "2 Fast, 26 Furious". There's 26 bad guys, I guess.

But yeah, this mapping works over multiple expressions.

Working with lists, collections of data too, I can make a new thing. I want to get all the words in the dictionary, so we'll call this "words", and it's pretty long, it's almost 100,000 words long.

I'll make it a little smaller so it's easier to see.

And there's lots of weird words here that have apostrophes and lots of uppercase letters. So I'm going to add a filter to this expression and just say, the first thing in each word should be lowercase, and there shouldn't be an apostrophe, in each word.

And then I'll filter those out, and give me just the ones that match this filter here.

And I can further filter words down by anything that has, let's say, anything that has "len" in the word.

I'm doing this for a particular reason that will soon become clear.

I'll just add one more thing here and say: replace anywhere that has "len" in it with my name, Glen. And there we go.

We have instant punification of my name, like "ambivaGlence" or "benevoGlent" or "bGlench".

I really don't know why that's there. I'm not really sure what "blench" is here, but that's cool.

Let me just resize this here. 238 puns apparently, in the dictionary. And this is just to demonstrate that there's one nice thing, which is when you scroll, anything that is based on that also scrolls.

So you can kind of see, ah, this turned into this, "bottleneck" turned into "bottGleneck", or "calendar" turned into "caGlendar". Sorry, I'll never not be amused by making puns out of my name. And, of course, "clench" will turn into "cGlench".

Yeah, so that is most of what the environment is. There's one more thing that I'd like to show you. It's going to take a little bit to set up.

The real part that I would like to show is that I now have visualizations. So I can render that as HTML. And it has this great multicolored "butts" here. If anytime, I update the original string, to say just "butt" instead of "butts" for example, or if I just hit enter, it will automatically refresh everything.

It generates a new, randomly colored "butt" every time.

But it's pretty nice to be able to have visualizations. This is a silly use of it, but I've used it a couple times in order to actually do something useful instead of something extremely immature but oddly hypnotic.

And there's some other visualizations in there. I still don't know exactly how visualization should work right now. It's just kind of for rendering purposes, of changing what it's rendered like. I can change it back to just see kind of the text in here, and I just have this raw text view.

And of course, I could make a new thing and make that one the same thing, the same data, just a different visualization.

So this one could be what it looks like in JSON, with escape quotes, and this one could just be the rendered HTML version. Anytime I update these, the other ones will update.

So, going forward, I have two things that I'm mostly concerned about exploring.

This is a very unpolished thing and I would like to let people be able to use it, including myself. I'd want to make it pleasant for me to use it and for a few other people who are willing to put in a little bit of work in order to learn the system to use it.

So I'm going to polish it up a little bit. But the two big research questions I have are: what are the purpose of visualizations and what is a good way to use them? How should they sort of work computationally?

Because I'd like to be able to interact with these visualizations. But when I do that, how should that work? How should you be allowed to interact with these visualizations and what kinds of things can you do with them?

I have some ideas, but I need to just implement them and see what's like.

My second question is: how do I start making more abstract things in this environment? Because right now, you can do all this stuff, which is great, but you can't really define functions which are kind of one of the biggest ways of working with abstractions that we know about

For example, could I make this "randint(0,255)" expression? Can I just find a way to quickly make three of those and combine it so I didn't have to type it three times?

I would like to be able to just make a new one of these, type "randint(0,255)", and then be able to make that a function somehow.

I have ideas about how to do that, but I'm not quite sure.

But I'd like to start exploring how do you start abstracting, and how do you use functions that you've made in the past that you'd like to use in the future, so that you can really quickly explore and manipulate data.

So yeah, that's it for now. Thanks for watching and hopefully I'll have something else to show you soon.

Bye, bye.