 Hello. Thanks for joining my session today, the importance of visuals and teaching code and reducing bias at DefConf US. Let's get started. Just a little preamble before we get going is why I think the main point here is that coding these days is everywhere. We need to use it on just about every kind of project, not just programming projects that everything can imagine from medical care to accounting to design. And in our organization, we want to teach our staff to value programming for their day-to-day work. We want to do it in a way that make people comfortable with trying something new. So this is the story of how we made that happen in my company. A little bit by myself, I am Todd Hickopian, design technologist and developer with HMC Architects. That's an architecture with capital A and in the construction and building industry. I have experience in, you know, in that field but also with data, building information modeling, virtual design and construction, a little bit about coding. So I've been doing this for a while now, 10 years in this background and teaching people and learning things myself. And this is kind of what architects do these days. This is the kind of work they do. I mean, people typically think of architects as being kind of two-dimensional like the guy on the left. But these days, everything is a model. It's a big 3D model and the model has a lot of data inside of it. It's actually a relational database is our models. So that's the kind of work we do and we want to evolve that approach. And in order to evolve it, you need to have a sophistication in how you work, for example, to get results like energy modeling for temperature, indoor energy calculations and, for example, on the right here, the flow of people and occupancy design in a floor space. So you get better information, better results for your designs and the more informed design. But this takes an evolution in how you work in order to get there. So we want to make our staff feel more comfortable with coding and scripting, not production level capacity, but to a point where they can use some basic software tools and basically programming resources on their own to do something a little more innovative and a little easier to open up options and efficiencies they couldn't do with just off-the-shelf software, the box options software. So we have to evolve how they work in order to get better results in architecture. Problem is we don't have any developers on staff that can do this. We have the budget for them. But we want everybody to learn how to do this over time. So we thought, okay, how can we get them to a basic level of coding if we don't have the budget? We can't teach our staff like traditional coders. They don't have the time. They have full-time projects to work on. And they're not going to feel comfortable with those subject matter right away. We didn't want to feel like they were going to become coders. They want to be designers. So we didn't want to remove the bias of how you typically teach people how to code with that CS background, with that kind of study of coding and give them a different way to learn to open up the group of students to learn and make it easier for them to join in, reduce the barriers, make it feel like there isn't so much against them to learn something new and potentially complicate for them and avoid teaching them as though they're coders, basically. So how do we do that? Well, there is an intimidation factor to address first and foremost. You don't want to just start, you know, here's a bunch of code, go do some lessons, you know, put the I plus plus together in a calculation, they will completely breeze on you. They don't know what's happening. They never seen that before. But they do need to learn how to code. So how do we address that intimidation factor? Well, you have to figure out like, you know, how do people teach coding? And a lot of the time it's like this kind of like flex learning where or stretch learning where you start with like a basic premise and you ask people to fill in the rest, which might work if you're a student in computer science, but not so much if you're just trying to learn enough to do some basic level coding. People usually see it like this where, you know, on the left, you have a starting point and you have to fill in the rest to get there. That's not going to help. That makes sense if you really want to learn in depth how to code, but that's not going to work for the average person who just wants to learn enough to do their job. So how do we figure that out? Well, you start with removing barriers. If people feel like there's a barrier in front of them, there's something blocking them. They're not going to be very receptive to learning. So you have to figure out what is that barrier? So we figured out, okay, make the first step non intimidating. That's one barrier to remove. That's make it easy, basically make it easy to follow something that can already kind of acclimate towards, then emphasize visuals for graphics. Because people who are creative like graphics, like seeing things not going to read it all text or so that's just not going to happen. And then by that, I mean, documentation, coding text, books about coding, that's just not going to work. So we have to make it more graphically oriented, and try different methods, what might work for one group of people or an individual work for others. So don't be afraid to try different things to get it, you know, the best possible result. And what we learned is that non intimidating step can't be the text editor, we cannot start with text editor, people will freak out this, I think you're hacking into the matrix or doing super complicated, you know, it's pretty far along at this point, if you don't use the text editor. So we want to make it something even lower than this as an entry level. And text editor, while the average person learned to code to start this way, somebody who doesn't have a background, we don't want to introduce them as like, oh, this is how the rails does it. This is how so many computer science doesn't want to show them a way that is a little more compatible with, you know, anybody's approach, which, you know, when you think about it, when it comes to problem solving, you can problem solve a lot of ways. For example, this is a different pattern theorem using both geometric and coding methods of solving for a given side and staggering theorem. So it's not as though one way is the all purpose way of doing it. There's many ways to have a analog example, either graphically, through formulas, through math, through text and code. So we're trying to attach that graphically show something that might be just, you know, written down. Well, you got a low code programming software. And this is, for example, visual scripting. This is Python called pyflow software that can let you do visual scripting with Python. Now, a lot of people already think Python is pretty easy. This is even easier. But the main point is in the easiness of it is the clarity. You can see the node on the left that make int and how to make a loop out of it, how to start a loop. It's easy to follow that because it's very touchy feeling. You can grab something from the left and connect it to the right. That's what we want to see. That's what we want to show that people make it feel like, okay, look, you can actually play around with this. It's interactive. You don't have to memorize what an integer is versus a Boolean value. You can figure this out very quickly with these visual examples. So that was our breakthrough. Use visuals, use low code, use visual scriptings. And we actually have a perfect format for that. And that is actually something called Dynamo. That's probably you see on the right here, the building. So we would typically design something like this is something you make out of a building information modeling software. Then for short, and that's something you can make with software like Revit from Autodesk. Revit, like we talked about earlier, an example of the building that's kind of rotating back and forth. It's a database. It's not just geometry. It's geometry plus data. So Revit is a relational modeling database. So what you can do is use a data and geometry to make anything. So everything on the building to the right here has data. The walls have data about what kind of walls they are, how thick they are, how tall they are. There's room information, everything. So this is a great system that everybody in my office actually uses to make designs at 3D models and documentation that we can plug in this cool little flat thing on the left here called Dynamo. And what Dynamo is is visual scripting. Just like we saw in Pipelo, it's a similar system which uses these blocks called nodes, connects them with wires to another block and so on to create code, a low code format. Dynamo open source works out of the box with this Revit software. And it's like what you see here. Inputs go into a code block to create a function again and output. That's it. That's as simple as what Dynamo does. Input, process, output. That's it. And you can see here, just add two things up in a number. You could use geometric points to organize them into a layout. There's a lot of things we do with Dynamo. They can do in a three dimensional space. A building design is designed to help facilitate those workflows. It's designed to help people feel comfortable trying to automate things. Things that are not so simple to do out of the box in the Revit software we use. We can use it with Dynamo that is directly connected, directly integrated within Revit out of the box, which is nice. So this is the tool we're using because with these basic examples of the input, process, output, one puts one equals two, you can get more complicated. You can do things like create a slider that can drop points along a curve, which is great if you're trying to lay out things like furniture or lights in a certain path that might be hard to do manually. You can do it with this system. So this is the kind of thing down the one hand. Not hard to follow. There's only five nodes here and a couple of steps along the way. Each node already does a lot of work for you. You don't have to code every single one of these things. It handles a lot of encoding internally in each of the blocks. So all you're doing is putting in the input of the slider and you have an upper left there a select option. So you select something in the 3D model, which is again touch you feel if you will like that. Select something. Now use the slider. Now move the slider and see what happens. That's the kind of interaction we want to give them on this low-code platform on a software with Revit that they can feel comfortable with because they can see results. They can move things around. They can see what's happening. It's easy to get the hang of it. You don't have to tell them to you know do a for loop or something out of the box and then move on to the next lesson. This is very much direct to the point that anybody can pick up. They can do more sophisticated things. Like in this example, this whole input field, okay, it's not just one or two nodes of the whole set of endpoints. The top set here is coordinates in a rectangular shape and the bottom there is different kinds of elements you want to put into those coordinates. Nothing more, nothing complicated. You process them so that the coordinates in the x, y, z positions are connected dots, make a square, which is a polycurve by points, and we set it to the number of levels you want and we process all this and the output at the end of this is floors and walls that can be created from our x, y, z coordinates and an outline of the levels. That sounds a little complicated. It's not, trust me, because all you do is you get this. You get a wire frame on the left in Dynamo visual preview of a skyscraper. On the right is what you get in the Revit model, which is where we want to see it, which is what people want to do. They want to make a building of some kind. They want to quickly model this and the few steps here we got to that model is let's put those inputs out there, let's get some results, and if we're happy with this, let's push it into Revit and see what it looks like, and now I just designed a skyscraper and with this you can also automate the views of the model. You can put sheets together very quickly and this could be done in a matter of minutes. This is the kind of process where you get the local platform doing a lot of work for you. They get convenient for the user and seeing the results quickly. That's again, I cannot emphasize this enough. Seeing the visual results goes a long way to encourage people to keep learning. Otherwise you're asking them to take a long course in coding to potentially get somewhere and they might just go drop out because they just get frustrated. This is immediate results and it shows potential. What else could you do with it? Can you modify the facade? Can you modify the openings in the walls and the floor plates? Yeah, a lot of things are possible so that the results were something that they would be comfortable seeing. And because this is low coding, because it already has a lot built in modules to help you code further, you can actually take the next level and do Python scripting. There are nodes within Dynamo that you put in Python real code. So once they get used to the idea of how computational design works, once they get used to the idea of how you can make use computational process and input process output, that's basically the same in any coding language. So you can then do something like a simple loop in Python as an example and spit out some geometry that could use potentially for a model placement in Dynamo and then forever. So it makes it even easier. But the first step is always learning basics, learning the world because I'm learning something that teaches you the step by step guide of computational design. And then from there you get more sophisticated. You can do things like add a long script of Python and connect it to the out-of-the-box nodes that come with Dynamo. So this is the approach we use to help people learn how to acclimate to computational design and logic to get those ideas like, you know, how can you make a more sophisticated shape that does a better job, facilitate and debate building design and you're not compromising so much in how you organize your design. It doesn't have to be so stiff. It could be much more fluid. How can we make it so we can have better spatial planning results? In this example we could take a next level use even more broader processes more nodes, more sophistication and create what they call general design which gives us options. So for example taking that tower concept you can put into a system again that connected Dynamo and say okay iterate as many possible versions of this floor plan based on these constraints as possible like this and then give me the graph on the lower right there of like what's good or bad about this iteration and then chart it out. That's something that's entirely you know possible and they don't have to do that manually and they get better results in the optimization scenario. That's something again starts with the basics of how do you even make a visual script graph and they can take it further once and you see the bottom here that's a long set of nodes that's a very long stretched out graph at the bottom here facility something like this which is orientation of furniture in just one floor. So you can see all the possible options of how on the one hand people can move around the space and on the other hand how everything can be organized for optimal space movement. That is something very challenging to do manually but here you can see it quickly created and again I can take that same script give it somebody else modify a few inputs show them how to process it computationally and give them this kind of real quick feedback cycle in a project and make them feel like they too can do this these are the kind of results and previews even we show them this as a preview what's possible and say okay look you guys can all learn this it's all not as scary as you think it gives you some interesting results but you do have to take the first step and the first step is actually pretty straightforward like one plus one equals three like that early example make a tower so you build on some very basic foundations that are visual easiest step into not too many barriers associated with software they already use and you get to a sophisticated workflow like this to help some optimized design and make serve you know the owner of the building happy to see something this well thought out and we actually applied these kind of techniques to one of our own projects the HMC architects this is a building in the Bay Area where we had to figure out the best way to assign bloopers on the sides on the one hand enough light gets in to see the inside and reduce energy costs and on the other hand there's not too much light coming in that's uncomfortable under space and there's ways you can do that manually but we want to have a little more control so again we went to visual scripting and he's a visual scripting method to control for how the bloopers can manually or excuse me automatically be adjusted so instead of having a monolithic blooper we have different openings and different space in the openings so it counts for the kind of percentage of light we want to see in there the amount of game you want to see in there for solar gain and then we can see charts like in the lower left here showing like how much light you have you have too much light now and left throughout the year throughout the day so it's easier for us to get analysis of this and we're not just using you know paper models to figure this out this is the kind of thing that gives you a unique design aspect so people can work with the project faster but at the same time get better results and this is the kind of payoff we've done in our models this is something we've done already in our projects that we've crafted over time based on those same concepts you know reduce the barriers give them something to work with give them something visual their designers they want to see something visual cannot give them textural scripting nothing in this example right here as we're using any kind of python or nothing this is all just visual scripting out of the box well not out of the box but you know there's some custom stuff in there but there's no actual text coding in here it's all based on the node and wires and controlling that and connecting to a model this is the kind of thing that people as they try to explore coding as they try to explore computational design as they try to explore programming this is the kind of thing that builds an encouragement so they can feel that they too can handle it it's not just you know the wrong people who are good in math or statistics or are comfortable with a text in a text editor so recap on what you can do to make this easier whether you're trying to like what I was doing with black company try to grow the user base so people can feel more comfortable working in these kind of projects get better results not have to hire a bunch of developers if you can't you know how can we how can you make this possible how can you make it easy either easier to teach people or introduce a new service that you're making a new coding service on your own any platform whatever how can you make this easier for people to learn who may not be accustomed to it well use diagrams diagrams go a long way not just text diagrams images pictures I know a lot of people who like to do a documentation like to write a lot of text that's nothing wrong with that but I would say put in diagrams people respond much more to it images infographics icons all that stuff they've respond much much better to that it's easier for them to relate to that than a wall of text they're just not going to read it unless you give them normal conflicts with diagrams you have to be a little more visual from the point of view somebody providing that training and content and if you're the kind of person who's you know who's already definitely sadly just trying to train other people or be an advocate or to somebody else or you know explain to people what your service does step out of the textbook to start using graphics to communicate and like I mentioned there could be low code it could be using videos gifts whatever graphics make it easy for people to see what you're doing and stop using so many buzzwords I guess like I don't know low code I guess that's my bad but you use images images communicate so much better no matter what you're doing in any field and contribute to open source projects pythons one diamonds one there's other a grasshopper these are open source projects for graphical cold learning there's plenty of them out there so if you think this is going to be beneficial for you know your own projects or teaching other people one ways to contribute to them I always try to do my best to write feedback to people who develop these open source projects so at least they can know like you know that direction might be best for them to go in based on my own experience of people and remember remove those barriers sometimes what makes perfect sense to you or your own community or your own team may not make sense to other people find the barrier in my case it was people not liking text or anything it looks like bath formulas and it's okay how about these cool nodes and graphics and you know touchy-feely wires does that make you feel better and that was the answer yes you may have to find that out yourself but do try to figure out what the barrier is to adoption because everybody's trying to learn to code these days or they will eventually at least have to you know start purchasing things that might need you to do a low code option so it's good to figure out there's a barrier to people feeling comfortable with that again make the first step not intimidating emphasize visuals and find different methods something might work the first time might not work the second time or might work for one person might not work for another don't be afraid to try different things I had to try a bunch of things before I found that you know Dynamo is a good one and the best way to train people on Dynamo on top of that we had to try different ways of teaching people whether it was like you know self-paced versus in session like I'll you know we'll sit down together and work on this versus you know how about we do a one-on-one session it may be different per person and per company so don't be afraid to try different things you'll eventually find something that works very well and you know give a hoot and fill in the gaps sometimes you do your best and you create a good concept but sometimes you need to spell every step with visual scripting they're usually pretty good about filling out every step it's kind of like an Ikea or Lego manual where you see every little thing slotted in again you have to kind of step away from the computer science mentality of like okay I gave you the basic premise not go film the rest that's not going to work when you're trying to address people's essential needs of learning how to do something for the first time again remove that bias of like okay well I came from a CS background it's how I learned that you should learn too that's I would say step away from that try to be a little more sympathetic and try to say okay look here's every step along the way what don't you understand let's work on that that'll go further than you know here's a huge gap go figure it out it's they're not trying to get great in the class they're just trying to learn how to use something new work better and here's some resources for those visual scripting and visual learning their scratch pyflow python twitter you can step through problems uh high game there's all sorts of things out there check it out if you think this might be useful to him I'm a big python fan but this couldn't be applied to just by any kind of coding medium and uh thanks everybody for the chance to talk today this is a great event great audience if you want to reach out here's my contact information and no uh that your code is not a scam it's just an easy way to get the LinkedIn no rick rolling no no no craze in this I promise and thank you