One of the main features of our game includes sprites. So sprites can range from individual nodes to tilesets. So we'll get into presenting about sprites. So sprites are important parts of our display. And these sprites can range from individual nodes to tilesets. And tilesets we'll go over later on in our presentation. So in order to download these, in order to upload these sprites you would have to download them from a pre-made website. You would have to download them from a pre-made website, or you could create your own. And for us we created our own sprites through TISCELL, a third-party program. Welcome y'all. I'd like to welcome you all to our presentation. My name is Tiffany Clark. My name is Emanuel Vargas. I think a presentation for you guys to enjoy and learn. We are, ourselves, the creators of the game, but rather, Juan and E.S.P. and the corporate mechanisms, they've all created a wonderful project for us to go through and create our own kind of mini-game design. Now you guys might be wondering, what is good though? Why have you guys come to this presentation? Why are we presenting about this presentation? Is this a good volume for me to talk about? Okay, everyone. So now it's getting to nodes. If you guys are returning to the good old good old recently released, so what's so special about good old? As you guys probably already know, if you guys are game developers or if you've been game developers, there are many other different versions of game and good old. It serves as a term for how... A good volume to talk in. A range from individual nodes to tile sets. Huh? Okay. I mean, it's probably more convenient for Tiffany to use. You know? But she has a soft voice. Yeah. All right. We shall do that. Hey, everyone. I'd like to preface this presentation by welcoming you all to our presentation. Thank you for coming out so early in the morning. 11.30. Afternoon. Morning. So, yeah, I'd like to extend his greetings. Welcome to scale. And thank you for having us present in front of you guys today.  My name is Chou Huang. And we have all collaborated together to bring this presentation for you guys about Go Do. Now, we ourselves are not the creators of Go Do, but we'd like to give credit to Juan Lineski and the creator team at Go Do.  And why am I here presenting about it to you guys today? So Go Do is an open-source game-engine software. So what does that mean for those who aren't really familiar with computer language? Open-source means that the source code is readily available and can be modified by anyone. And also, that creates a free environment for people who would like to use the application to prosper in. And if you guys are previous users of Go Do, Go Do recently released their 3.0 version, which released new features, and it's very easy to get back into it. So what's so special about Go Do? Go Do uses a very special node-based element design, which utilizes parent-child relationships. What does that mean when you're designing your game? It makes it very organized and easy to see which parts of your program and your game that you're presenting are not presenting, but coding and putting it onto Go Do to make a game. And this means that individual scripts can be added to each game element. And what does that mean for your game? It means that every single aspect of your game could be fully animated through Go Do. Go Do utilizes a grid-based game interface, so it's very easy to put your design onto the game and watch it all pieced together into your full-fledged game.  And through Go Do, you can develop both 2D and 3D games, so there's a very wide variety of games that you can create. And if you do go to that extent and create a full-fledged game for yourself, you can advertise it on their online store. So why would you use Go Do over other game engines such as Unity, Game Maker, or even Unreal Engine? So we decided to use Go Do because of its easy-to-use node design, as I mentioned previously, and there's a very well-made 2D design interface. And I've also heard from many other users of Go Do that their 2D design is a lot easier to use compared to, for say, Unity or other game engines. And this is because their design is centered around pixels, and that means that it's easier for it to be organized and seen as, you know, like your full project. Go Do also uses an easy Python-style scripting language, so it's very easy for even new and beginner programmers to get in Go Do and create your game, program your game to do whatever you want it to do. And all in all, this makes Go Do easy to pick up and go, though.  So Go Do is built around combining the works of anyone from animators to scripters to programmers to create their own fully animated or 3D game. And I like to make a side note that Go Do, as of now, doesn't have...you cannot work on the same Go Do project on different consoles, such as, per say, Google Docs where multiple users can edit the document at once. But Go Do makes it really easy for, say, an artist, a programmer, or a designer to each do their job efficiently and properly and create their game. So you can use a variety of scripting languages through Go Do. The main scripting language that Go Do utilizes is GDScript. Now, you probably, if you aren't familiar with Go Do, GDScript might be something foreign to you. And this is because this GDScript is used for only Go Do. It's a Go Do specialized code. And that might kind of intimidate you if you guys are kind of new to game designing, but I'll show you later on in the next slide why this really is not that big of a problem. You can also utilize visual scripting, C++ or C sharp scripting. And you can also add new languages through third parties such as GDNative, NativeScript, or PluginScript. And Go Do right now is currently in development to allow for Python and NIM scripting. So all in all, there's a very wide variety of scripting. If, per se, GDScript isn't your preferred style of scripting, you can still use these versions of scripting in your game. So like I mentioned before, although GDScript is specialized or Go Do only, it's really easy to get into it. And this is because there's a very easily adjustable code. And there is less code that you have to type out which consequently makes it easier to read and there's less clutter in your code. There is no compilation required to test the code itself. So that makes the runtime very short. And throughout your code, you can also use Python Polymorphism if you guys are familiar with those styles of programming, per se, and use them with GDNative. Now with that, I'll like to pass on the mic to my partner and designer, Emmanuel. All right, hello everyone. So now we're going to go into more of the editing and the deploy systems for Go Do with the actual interface when you're using the app. So Go Do does use a multi-platform deploy system, as you can see here. It does deploy on Mac, iOS, Linux, any probably the most computers that you wouldn't use. And it does also deploy a mobile system such as iOS and Android. So it does help for making desktop games and mobile games and iPhone games. It depends on what your market is and what you want to find. And for the multi-platform editing tool, Go Do does run on many other systems as mentioned before, Mac OS, Windows, Linux, which is why we're here. And Go Do does start with a very small download size of 20 megabytes. And since it starts out pretty small, it shows just how flexible Go Do is. So if you were to download it, it would grow as you do more projects and you fiddle around with it more. But it is very flexible. It will run really as soon as you download it. And it's not hassle to start working on it as we continue. So Go Do is unique. It's special in a way that it does use a node system for when you use it. I will demonstrate how the nodes work in Go Do later on, but I'm just going to talk about and preface what Go Do has to offer. So Go Do runs on a system of scenes. And scenes are basically function as the screens or the specific isolated models that you would use in your program. The scenes can start with each level in your game or it could just house a certain player or enemy type that you would put in Go Do. And all of these scenes have its own set of nodes and the nodes all make up the game together. And the nodes work in a tree system which means that you would have a root node and that root node is the main node for the rest of the scene. The type of node that you would use would depend on what you want that scene to function. So if you wanted that scene to just be the node for your player, you would use like a kinematic body which would be a body that you could use to control inputs to move around. And it would have children nodes that would function as the other parts of that scene level or character model that you would also input in your game such as hitboxes, tile maps, the sprites that you're going to use for your kinematic body and much more. And because Go Do can run 2D games and 3D games, it has its own set for those type of games which I'll demonstrate later as I go through the app with you guys. And they do overlap a little bit, but they do have labels that are on color coding. This is for a 2D game or a 3D game, so it's very easy to use. So now let's move on. If you're very familiar with making apps you know what your UI elements are, the user interface elements and your control nodes. So we're just going to go really quickly over what the main ones are. So we have our labels which you know as to display text. They're very easy to use and I'll just demonstrate how we use the labels later on. We have our texture rec, which is for your backgrounds or just static images that you just want to stay in one spot. Normally you would use this for just sprites or as I said backgrounds. Your texture progress and these type of UI elements are very useful for if you want to make a life bar or a loading screen, just anything that would progress with a value that you would put in your game. So just for your user to have a visual stimulation. Then you would have your nine patch rec, which is a skillful panel. It functions well for drop down menus or anything where you would want your user to have access to some variables. You would probably use this if you were making an RPG. You would use that for your move list. You have your texture button which is for clicking or if you didn't make a mobile game, something that the user can tap on. It's just something that functions as an event handler and starts a function depending on what you want that button to do. Before we continue, I'm going to quickly exit out and pull up the Godot system. When you first pull up and open the development engine, you have a menu and the menu in this large text over here, you have all your projects that you're working on, and on the sidebar to the side, you have functions such as scanning, new project and import.  As you know here, for the scale presentation, our project was entitled Scale 1 and we have a backup because redundancy is a very important concept to have when you're developing anything with programming because just in case anything is deleted, you always have a backup. We're going to go ahead with Scale 1 and open it. It launches the game development engine. It will take some time to load, and you can see there's an interface for everything immediately, and I'm going to walk you through each of the buttons and nodes. So first we have our scene button. The scene button functions similarly to a file button that you would notice in your text editors or Google Docs if you're familiar with that. You have the options to make a new scene, you inherit the scene, open some scenes, and save your scenes. You don't have to use the scene button to do that specifically. There are some buttons to the side as you can see here to take care of that, but there also has some more functionalities such as opening your recently closed scenes and converting your scene to other types of materials. Normally we just use it for mesh libraries and tilesets, and tilesets are something that you would be familiar with if you were into game development, and that's just a very useful way to put out your sprites. Moving on we have Project. So Project Settings are just the types of settings you would want specifically for your game or how you want the user to notice how you use your games. Normally there's a lot of options here, and we would go down here to Display, and you click on Window. It gives you options to make your game borderless if you want it to be a full screen or just a window game. And you can also set how large the display for your game is and how large it would look like if you were to test it. You would have your input map, which you can customize. Your input map is just what types of functions, what type of reaction the code would get from pressing different keys on your keyboard, and what we have listed here is the name of the key in your programming. If you were using a different type of programming language, it might be set different, but this is for GDScript, so you can always change it around, and it's also useful for other types of games as it shows over down here. It shows what the same button would be on different types of consoles. If you were to use this label in your commands and your codes, you have localization over here. This is for if you wanted to change your game's language. And autoload, plugins, and GDNative are also here. Using my left hand. So we have our debug and our editor, which we would use in hand with our programming. Yes. We would like to save the questions for towards the end, but we will be open to that. We have our help button and the help button just to link you to some online resources. If you have any questions with Godot, it is a very fresh and sometimes unfamiliar programming developing engine, so it's useful to have that. Now let's get over to these tabs in the middle. We have a switch between the 2D and the 3D developing models for Godot. As you can see, they're all grid based, and you can even view how the grid looks like in your 2D model. The size of the grid is scalable depending on what you prefer. You can change that around with configuring your snaps and how they work. The 3D functions just the same way. Your script buttons pull up all the codes that are involved in your project. We're going to pull up the code for our player character and its functionalities. This is in GD script. Just as other text editors would use it, it is color coded for your viewing pleasure. You have your asset library. The asset library functions similarly to an online store for Godot users. You are not limited to the nodes that they give you at the beginning. You can always download more later on. It helps you with other parts of your possible game design, such as if you want to put some gravity physics, you want to make some material through your 3D and for your line rendering. It's not shown here right now, but there is a functionality for reading touch on a touchscreen for a phone. It lets you figure out a way to put some touchscreen games later on. Now for our scene button. There is a plus button here that pulls up the menu for all the scenes that are involved in Godot. As you can see, because we are working on a 2D game right now, we would pull down the 2D nodes and you have all your nodes for that specific purpose. Animated sprite for your sprites that would be changing with animations or inputs. You have your cameras. If you want to change the way the player would view the game and if it follows your character or not, then you have your collision polygons and shapes so you customize what your hitboxes look like and how they operate. You have some white physics and navigation. You have your positions if you want your code to figure out where a specific sprite is located or a specific node is. You have your sprites and tile maps for the visual sides of the programming. You can always add more onto your node system such as the timers. We can get into that later. You have your file system over here. Because Godot, the projects in Google function as a file folder, it has individual files that all make it up. Every single part of it is considered a file so your scripts have a gd file. Your scenes have a tscn file. Every image, we prefer to save it into png but you can probably save it in other ways and they're all located here. Even though the file system area is kind of small, it's very easy to make new files to organize it. We'll move on over here and we have your inspector. Every node comes with its own subset of functions so if we were to go back to your level and click on our player, or we can use our sprites, it has options to switch in new textures that you would just drag from here which we will demonstrate later on. You have more node-specific functions such as the signals. We use our attack position position node and we have a signal for a visibility change just in case a node leaves the screen. The signal is the code to understand that this node is no longer visible and you could go forward with this function. That's very useful in other types of games and that's it for what you would see when you pull up the screen. Now we can continue. Let's go back to your presentation. We will be going over one of the main features of our display of game development and it includes sprites. These sprites could range from individual nodes to tile sets and we will show an example of what a tile set looks like in the next slide. In order to upload these sprites, you could simply download the file from a pre-made website or you could create your own. In our case, we used a third-party program called Piscale in order to create our own sprites for our game. Once you have downloaded these sprites, you could just simply copy and paste it to the project folder which is located over here or you could decide to drag it and drop it there and it will still be visible. There are two types of sprites that you could use in Godot and there are static sprites and animated sprites and static sprites are the ones that remain the same so this remains still and for our game it included the background, our castle, as well as our floor and for animated sprites, this includes sprites that would be in motion or in action. For example, our characters would be in movement and it's easier to work with animated sprites on Godot because it allows you to use individual sprites and when you play them it would be in action then so it's like putting together static sprites and creating an animated one. Next we would show an example of our animated sprites so this is for our main character and these are individual sprites that we created and when we demonstrate later we'll show how these work together to become in action later on and we also have our static sprites and this is an example of a tile set we created and this was in our early development progress so they don't actually have these sprites on our game but we also used the static sprites as I said earlier for stone tiles, wood planks, as well as grass floor right now we would demonstrate how to upload static sprites and animated sprites so when you open the program we'll create a new scene so when you have this open you could press the plus button next to scene and as Immanuel stated earlier this is where you'll find most of your features and since we are working with a 2D platform we would use node 2D and now it would be available on the side and in order to import a new sprite we would press it again and search up sprite so now it's available here and when we double click it it would allow you to create a new sprite and let's zoom in to this okay so over here is our project folder we said that you could download it and drag and drop it to the project folder but we already did that ahead of time so we have our sprite available here and over here it says texture and it says no but it's kind of cut off but this is where you would be dragging your images into in order to create your sprite so for example if we were to drag this image to here then it would be and there is our static sprite and it would be displayed like this so in order to create an animated sprite we would do another node and this time we would add animated sprite and I wanted to emphasize what it says on the bottom of the description it says it's a sprite node that can be used for multiple textures for animation and this is similar to what I explained earlier you could use multiple different scenes in order to create your animation and for the static sprite we used one texture as I showed earlier for the other scene but in this case it's saying you could use multiple ones of that repetition in order to create the animation so we would add the animated sprite and over here it says frames so these are the different frames you would be using for your game development and again it is cut off but it also says no the same place where it had texture previously and when you press no it should say new sprite frames so when you click that and click the area there it would give you this area to put in your action sprite so if we were to do an example with the night then we could just drag our different motions into this area and when you code it and you actually have what actions would move on certain events you would be able to see it in motion when the game is played and now we would go back to the presentation so some common issues you may face with sprites are HUD issues and HUD stands for heads of display or the user interface and this is when the world moves the rest of the features such as life bars and scores must remain still but this would be moving along as well and also there are transition issues and this includes rotations and translations that have to do that would want to remain in a fixed location and this might be due to the fact that the action that you're trying to put onto a certain object or sprite isn't linked to it so even if your sprite and your transition is there it wouldn't be moving because your sprite isn't told to react to that motion particularly it has a very big community so even if you're doing most likely you will be able to collaborate with someone else and find a solution to your problems okay and we will go on so some common game creations you could find on Godot's website are 2D shooter games as well as 2D puzzle games 3D survival and horror games as well as matching games logical games and clicker games and also these games are available on apps as well as your computers and we will go over what we created for our game alright so when we were making our game that was a project that we decided to take on with Godot we do have different skill sets we have different passions we have different career interests in the future and we wanted our teamwork to reflect that so as we mentioned earlier Chul Ho was our programmer Tiffany was our sprite designer and I was in charge of just designing the game and how it flowed and what we did with Godot is that we wanted to create a maze based game we took some inspiration from the original Legend of Zelda and that's kind of how it functions right now and our first level is that we wanted to start with having our ninja main characters start in a garden and escape the guards to find an entrance then our second level would be coming into the mansion and finding the buttons to open the entrance to the next floor and working through some traps and then our last level would be defeating the boss and collecting the stolen treasures so when we started Godot we were very new to the program we didn't have that much experience with game design most of us were just sharing our files we were collaborating and figuring out what roles we would have to do with Godot all we had to start with was just the playing program with nothing in it we had to shift through every node figure out how it worked and we had to figure out which sprites we wanted to make which codes that we wanted to prioritize and how we were supposed to share it because we found out that we did have to have all of our own Godot files and just share it online which really came down to teamwork and figuring out how to and how to import every file into one single game and have it run on that one computer so this is kind of our early development and how it looked like as you can see we did have to use some other sprites from some other developers and our scenes looked kind of messy we didn't have that much experience but now I would just like before we continue on and showing off the game I would want to show some examples of what we discovered along the way with Godot going back we have not here when we start out with Godot alright so we have our full scene so when we started out with Godot we had our animated this is what our full game looks like now but we really just started with having another separate file for what our player looks like and we really struggled with figuring out the hitboxes and how they would align their game because we did use some collision shapes and when you use a collision shape you have to first assign what that shape would look like and we decided that using a capsule shape would help out the most instead of using just a square and trying to angle it around so we went further on and this is our original game file and we didn't really use our tile maps the best at first as you can see that this is the only space where the tile actually registers but there's a lot of the sprites showing off instead of actually logging in that part of the tile as a hitbox is just a texture and that would probably fool our users when they were using the game and that wasn't good so now this is our full level and we have all our sprites listed over here we have a working tile map and now we would like to ask someone from the crowd to try to just enjoy your game for us and tell us what they think would anyone want to volunteer? would you like to come up please? yes so you're just going to use your arrow keys and walk around and you have an option to shoot some ninja stars yeah yeah so you're just going to go down here and you can go to the side so if you were to step over that lever you could... not that one so thank you for trying this out so now let's go back to your presentation and here we have the link to the gizzo website where you can download for free our gizzo engine and figure it out with yourself and hopefully this presentation did help you figure out how to use the engine and the ways you can apply it so roughly a month three to four weeks and you know like with anything new if you were getting to know it google is your best friend the internet is your best friend like while you know you do have teachers who could help you or you have colleagues who would also know more scripting than you do there's going to be millions of people across the world who are probably experiencing the same problems you have and that's the beauty about being an open source application is that you can go into these communities and be an active part of it and also learn from those people I myself I'm not really experiencing that aspect but their most likely is you just kind of have to dig around for it through the internet so for the sprites we created through piscale and it's a website I just had to search up how to create sprites and it gave me a first option to the link and basically just login with your google account and from there it allowed you to make your sprites and is there anything else that you're curious about the sprites? well I just had to dig through google to find similar images to what I would use and first we just came up with a list of what type of sprites we would need, what type of backgrounds we would need and from there I just had to search up and kind of elaborate ideas into how I would recreate my characters and the tiles yeah we had to sit down for about a week to come up with how we're going to design our game and as we said earlier in the levels we basically had to come up with first what are we going to do for our levels and then what do we need specifically for those levels okay thank you we did it primarily under a windows pc so we did have access to like other devices and we did install the app itself but since we're all more like experience with windows per se that's kind of what we've used for it but you know Godot is really open to a lot of operating systems and you can run it easily on there if you did publish the game online as I said there's an online store you'll download all of the game assets and then if you open up Godot if you recall there was like an export button put that app or game onto your Godot and I'm pretty sure you can modify it through there as in like macOS windows it's the program itself will run any operating system like of course a program meant for a windows wouldn't run on like a touch screen phone you know but like if it's used into time between or not into time but interchangeably between like per se windows linux for work just fine did that kind of answer your question not at the moment since we're all like students and just kind of preparing to get into like colleges and beyond like this was kind of like it's really fun to create games but like as of now we don't have any plans for any future games but if it does come to that point and we do end up going into development we'll definitely you know have some more ideas and I hope you have a great rest of the day weekend month year life so thank you for coming so it doesn't work so you know we had a one because I had a one yeah Isabel is two we had a two number one number two great yeah three four five okay so I hope you all are as excited as I am to be here and we hope you enjoy Isabel and I hope you enjoy our tutorial and presentation on the basics of P5JS oh yeah sorry keep on forgetting and we created these smiley faces using P5JS so yeah it's a really cool library oh I went over it so do we need this the slide is so let's animate with P5JS I yeah I apparently I said everything that she normally says in the introduction okay um so we'll just like quickly go like cool so I'm Rachel Mcquan I'm a junior at Santa Monica High School I've taken classes at SNC and I enjoy writing I like skiing and I want to major in computer science at Columbia University my name is Isabel Wagonford I am a sophomore attending Santa Monica High School I also take classes at Santa Monica College I taught myself HTML CSS and javascript using resources like free code camp and code I like to wear funny socks and I have a an adorable pet hamster named Alicia okay so what is P5JS yeah I just I can click onto my video P5JS is an open source graphical javascript library that takes the core ideas of this process platform known as processing and brings them to the web browser so what are these core ideas processing is a platform that is essentially made for programming for the arts it's a platform that makes it easy to teach accessible with add-ons it's free to download open source and it promotes most importantly the idea of shareability on the web okay I'm not holding this okay so to really understand what P5JS is today we have to go back to 2001 at the MIT media lab where students Casey Reese and Ben Fry wanted to build a platform that did two major things they wanted to build a platform that taught others to make their own creative work and a platform in which they could build their own creative work so this platform was processing so processing was really revolutionary for its time and the big question that people were asking in 2001 was what language processing should be built on and Casey Reese and Ben Fry they said Java so at the time platforms that to teach beginners to program and code did exist a prominent one being designed by numbers but platforms like this had limitations in that you couldn't visualize data you couldn't connect to hardware etc so by using Java as a language they could pull Java libraries and really expand what they could code and take it to a whole new level another important feature by using Java was the idea of applets and shareability by using a Java applet whatever you designed on processing could easily be on the web by using a Java applet so this really promoted the idea of shareability which was one of the core concepts of processing so in 2013 nearly a decade later the internet had changed technology had advanced considerably and the language of the web browser was javascript so people were asking what if processing started over and Lauren McCarthy and another MIT student she said javascript would be the answer so rather than rewriting processing completely she decided to take the core ideas that I mentioned before of processing and create a new what is essentially now a javascript library that is easy for beginners to learn and can be used for having small projects to having professionals find a place where they can create creative work essentially on a grander scale so p5.js today is being used by a lot of major foundations like Khan Academy and UCLA Game Lab to teach high school students and new coders how to program and introduce them to languages okay so at our school Isabelle and I we saw that there weren't a lot of classes and a lot of opportunities for high school students to be introduced to programming so we did a survey and I'm going to open that up and it's linked to a reference sheet that will be provided to you but we noticed yeah included in the reference sheet thank you we noticed that a lot of educators and a lot of students had little to no experience with coding so when we asked them how they were introduced to coding most that they had never been or they were introduced through a school program so this showed us that while while students oh my gosh breathe yeah it's just so read all the results yeah but it doesn't really correlate with what we were okay so a lot of people they said the most the language they knew the best was JavaScript and P5JS as a JavaScript library is a really good way to introduce programming to people who'd only been introduced to a language like JavaScript yeah because I kind of panicked because I said a lot of people hadn't been introduced to coding and they said yes there so yeah they won't okay so most people hadn't been introduced to coding so this is our survey so we noticed that a lot of people at our high school had never been introduced to coding and when we did ask the few that were most of them said they were introduced through a school program but still a vast majority of people said they had never really tried out any programming languages before when we did ask we also asked them if they had any which languages they had experience with and a lot of people said JavaScript which I believe is important I get a highlight because P5JS is a JavaScript library meaning that P5JS would be a great way to introduce all these people to program because there's a lot of awareness for JavaScript, the language yeah and a lot of people another interesting thing that Isabella and I noticed in our survey was that a lot of people wanted to learn to code but with the help of an educator and the beauty of a library like P5JS is that it is designed for beginners and you can use it to self-learn and there are a lot of resources online to help you yeah so yeah so yeah I can scroll over this one if I don't want to yeah okay yeah and a lot of since P5JS is such a visual JavaScript library it's a great way for people to learn because it allows people to code in a visual context yeah am I doing okay I'll just say like we surveyed almost 300 people at our school at the beginning yeah okay so why P5JS we believe that P5JS is a great way for beginners to get to use because it is easy to get started with you can code in your browser the code you type out will instantly show up in your web browser it's specifically designed for everyone to learn and it is a great pathway for learning JavaScript and of course these skills that you learn here are transferable to other coding languages like C programming etc and learning these languages really relate to employability and how there are so many jobs that require programming skills and in the future I mean we're training people for jobs that even exist right now so being able to teach yourself to learn these programming languages on your own is an invaluable skill and P5JS is a great place to start so now that you have an idea of what P5JS is and why you should start learning in it we're going to walk you through creating some of your own programs in P5JS code so this tutorial is intended for everyone in this room so together we'll create a smiley face and a drawing program so please take out your devices and open these addresses into separate tabs so the first address will take you to the P5JS web editor while the tiny URL that's on the slide will take you to our reference where you'll be copying and pasting from yeah yeah I will so if you guys want to try it out right now you can our little oh no we encourage everyone okay okay if you could please take out your devices and follow along it should be specified that it should be on a computer or we'll be at oh yeah yeah yeah can I fix that right now because I have to be noticed in my personal email here we are please everyone take your devices out and go to the link on the bottom the tiny URL link which is also linked to the P5JS web editor if you're using a mobile device sorry if you're using a mobile device what am I on change to desktop where is the option to change to desktop oh is it on the website is that okay like the way I did the beginning was that yeah I mean I didn't really change the name of the thing but it's okay do you want to okay so now that you have an idea of what P5JS is and why you should start learning to code with it we'll walk you through a tutorial to create some of your own simple programs in P5JS so this tutorial is intended for everyone in this room so please take out your devices if you have them and together we will code a smiley face and a drawing program in P5JS we'll get rid of that later so this is the link to our reference sheet this tinyurl.com slash scale 17x we can just get rid of that can we just get rid of this so this is the tinyurl link to our reference sheet within this reference sheet you will find the link to the P5JS web editor that will be at the top of the sheet everyone good should we recommend that it works best on a computer like good if if you're following along on a mobile phone for the web editor to render correctly on your device you will need to find an option that switches it to desktop view now we're going to switch to the web editor so this is the P5JS web editor so let's figure out how we can use the web editor so this pane on the right here this is the code pane this is where you'll be typing in all your code and if you would and when you want to see the results then you can click this play button up here and it will execute your code so let's try that right now so the results of your so the results of your code will appear on the preview pane to the right so every program in P5JS is known as a sketch and sketches consist at the bare minimum of two function definitions which in the sketch are set up and draw you'll find this in every P5JS sketch so you can think of these function definitions as containers to put your code inside of so each function definition serves a specific purpose so this function set up right here can you guys see this? okay function set up over here this is the first thing to run when you execute or play a sketch and it will set the initial properties of the sketch like creating this canvas here and it will run only once so this create canvas in setup here is called a function call we will be using these to draw shapes onto the screen but this one is really important because it will create a canvas to allow you to draw on the screen so this is the function name create canvas and then we have these two numbers here and these are called parameters and parameters are the information that you give to a function task so what do these parameters do to see what they might do we can first try to change the numbers and create canvas so for example we can change the first number and create canvas to something like 800 and leave the other one the same when you say width and height I think that's pretty it's like basic so I think we should just get that done as fast as possible so we can see that the first one specifies the width of the canvas so we can also infer that the second parameter should specify the height of the canvas since that side remains short so let's just change this back to 400, 400 for now and then after setup execute the function definition draw will execute right after setup and draw will execute continuously so everything inside it will be redrawn over and over again and this is useful for creating your own animations so to set up your sketch for drawing a smiley face onto the screen with p5.js you'll need to place your cursor on the bracket right here it needs to be behind the bracket and then press enter until it is on line 15 or past line 15 so we need this curly bracket to be on line 15 so we'll have space to copy and paste our code into this function definition so one shape that you can draw in p5.js is an ellipse so we can draw an ellipse onto the screen to create the head of our smiley face so go back to your reference sheet and copy and paste number one under this first section drawing the face by the way these forward flashes here with some words following it, those are just comments they don't do anything except to let you know what the purpose of the function is so paste that onto line 9 and make sure you run your program err on the top left yeah so we're going to be copying and pasting our code regularly so if you don't want to keep on clicking the play button up here to execute then you can just check this tiny box right here next to auto refresh and then you won't have to keep on clicking that every time you change your code so now we have a circle being drawn at the center of the screen so we know that it's coming from this function called ellipse but what do these parameters mean so this parameter right here specifies how far to the right the ellipse is being drawn while the second parameter specifies how far down the ellipse is drawn and the last two specify the width and the height so in terms of coding this is basically telling p5.js draw an ellipse 200 pixels to the right 200 pixels down and then with a width and a height of 150 pixels so next we're going to need to draw the eyes of our smiley face and we can do this by drawing rectangles so the only difference between the rectangle and the ellipse function and what is being drawn is the function name it will accept the same parameters like as far as its location and its width and height so to see this in action when we draw the eyes you can copy and paste number 2 number 2 from your reference sheet under that first section and paste it onto line 12 and now we have the left eye of our smiley face next you can copy and paste number 3 on the reference sheet for the right eye and paste it onto line 13 so now we have two eyes on our smiley face so notice how the only difference between these function calls is this first parameter right here so since this is a greater value for the first parameter the right eye will be drawn more to the right than the left eye but it will still look identical wait Rachel next we'll need to draw the arc for the mouth and an arc in P5JS is basically just an ellipse but with a slice of it cut out when you specify the start and stop angles of the arc and radiance so we can draw half of an ellipse using an arc function so we can copy and paste number 4 number 4 direction in the reference sheet onto line 14 and now we have a basic smiley face however our smiley face still looks pretty bland since there's no color in it fortunately P5JS provides us with ways to color our shapes and there are two ways in which we can color our shapes the first way is the fill and that's this inner white coloring in each of these shapes here and then the second way you can color your shapes is by coloring the stroke or the border surrounding all of these shapes so before we start copying and pasting into our editor we need to understand how we define colors in P5JS so computer screens as you probably know use pixels to create different colors but they only use three different colors of pixels red, green and blue and since these are the primary colors of light you can mix these to create the illusion of new colors so thus when you're defining a color on computers you need to specify how much red there is how much green there is and how much blue there is in that color each on a scale of 0 to 255 so if we want to color our smiley face yellow we would use the fill function in P5JS and specify a value for the red for the red value and then the green value and then you can see on this diagram here that bright red and bright green makes to create yellow so we can use this function and copy it and copy number 3 from the reference sheet hold on copy number 1 line 8 and now our entire smiley face is yellow because this fill function comes above the rest of these shapes being drawn here so therefore P5JS will draw these shapes in yellow and then since we want our smiley face to be multi-colored we can use another fill function to draw the rectangles and the arc and black so those will so then we have black eyes and a black mouth so if we're having to specify 3 parameters we can we're doing like a run through for a presentation so yeah it is yeah it's almost 130 yeah just let's get started first off thank you everyone for attending this session on P5JS I'd like to first and foremost thank scale for allowing a track dedicated to education specifically for educators instructors to continue to learn network and have the ability to contribute to the open source community my name is Kota Cole I am an instructor I'm also a consultant currently working on the California cloud which is a collection of 19 community colleges in Southern California to implement cloud computing in the respective institution welcome I met Rachel and Isabelle in my cloud computing class at Santa Monica College and I asked Rachel what inspired you to take a college class because she's only a high school student and she said well I'm looking for easy classes to take to boost up my GPA and computer science is easy for me so today Rachel and Isabelle is going to show you and demonstrate and please if you have a laptop follow along she's going to show you how easy it is to learn how to code in P5JS so without further ado Rachel and Isabelle yeah thank you professor Cole so we wanted to start off by asking how are you these finally faces actually we coded using P5JS so are you guys at a one because I'm at a one I'm really happy to be here yeah it's great yay two three no four hopefully not yeah five okay great thank you for being here our presentation we're going to teach you how to animate with P5JS at a very basic level and walk you through a really short tutorial and introduce you to the basics okay oh sorry hi I'm Rachel McQuann I'm a junior at Santa Monica High School I've taken classes at Santa Monica College I like writing, reading, I enjoy skiing and I want to major in computer science at Columbia hopefully and my name is Isabelle Wagon board I am a sophomore attending Santa Monica High School I am also taking classes at Santa Monica College I taught myself HTML in JavaScript using resources like Free Code Camp and Code Academy I like to wear funny socks and I have a pet hamster named Alicia so what is P5JS P5JS essentially is an open source graphical JavaScript library that takes the core ideas of this platform known as processing and brings them to the web so what are these core ideas so processing was made essentially to create a platform for programming for the arts it was made for teaching it's accessible with add-ons it's free to download, it's open source and it most importantly promotes the idea of shareability on the web so yeah you can do a lot of really cool things with P5JS so to really understand what P5JS is today we'd have to go back to 2001 at the MIT Media Lab where Casey Reese and Ben Fry they wanted to build this platform that essentially did two important things teach others to make their own creative work and a platform in which they could make their own to make their own work so they were really cool in what they did and P5JS processing sorry was so revolutionary at the time and a lot of people were asking this big question that what language should processing be built on and they said it was Java mainly because using a language like Java allowed to promote the idea of shareability on the web while there were platforms at the time like designed by numbers being a really prominent one there were obvious limitations in that you couldn't connect to hardware you couldn't visualize data and a number of other things so by using Java mainly because of the existence of applets it helped promote shareability with a Java applet you could just whatever you coded on processing with an applet so that was really cool at the time but by 2013 technology had advanced and changed and the language of the web browser was JavaScript so Lauren McCarthy another student at MIT she was really cool and she said that we should rewrite P5JS we should rewrite processing in JavaScript and take the core ideas and build a library that could be used by beginners to introduce to help learn to code so P5JS today is being used by big foundations like Khan Academy and UCLA Game Lab to teach people how to code and introduce them to graphical design okay so at our high school Isabel and I were we were learning about how there weren't a lot of computer science classes which is why we took classes at SMC to introduce us to this stuff but we conducted a survey to see people how much exposure they had to this so I'm just gonna open the link people at our high school had never been introduced to coding as you can see and if they had been it was through a school program a lot of people but the most common language that they were introduced to was JavaScript so P5JS being a JavaScript library would be great for people who don't have very much experience but really want to like get their hands wet programming and coding we also noticed that a lot of people felt like they could learn how to code but with the help of an educator and we feel that P5JS would be a great place for these kind of people to start because it's designed specifically for people who don't have very much experience with coding so based with online resources you could use P5JS to really start writing code and making your own designs these are just some people who actually did have experience with coding they just said these were the websites they used a lot of people said consider themselves visual learners and P5JS again is a great place to start because it allows people to code in a visual context P5JS is great so why use P5JS P5JS should be used by a lot of beginners to learn for a number of reasons including the ones I already mentioned because it's easy to get started with you can code in your browser P5JS was specifically designed for everyone to learn how to code also it's a great pathway for learning JavaScript and of course the skills you learn they're transferable to other important coding languages like Python and C programming and employability is also a great tool P5JS being a programming library for designers teaches you how to learn how to code and right now we're educating our kids for jobs that we don't know will exist in the next 20 years to be able to learn how to code with new languages and introducing yourself to software is an invaluable skill so now that you have an idea of what P5JS is and why you should start using it to learn to code we're going to walk you through a tutorial on P5JS your own simple programs in P5JS so this tutorial is intended for everyone in this room so if you haven't already you can take out your devices or laptops to follow along together we'll create a smiley face in a drawing program so to follow along with this tutorial you can type in this link in a new tab and that will take you to our reference sheet you will see a link to the P5JS web editor I'm sorry just to interject Isabelle and I will take questions at the end we really want to finish our presentation on time but if there's like a really pressing matter just raise your hand everyone good? so you can click on the link to go to the web editor at the top of the reference sheet okay let's go into the web editor so this is the P5JS web editor so let's figure out what this means so this code on the left here the code pane so this pane over here on the web editor on the left this is the code pane this is where you'll be typing in all of your code and then if you want to see the result of your code you can execute it by pressing the play button up here so let's try that right now so now we see the result of our code on the preview pane to the right there so how what's this code doing so first of all any program written in P5JS is referred to as a sketch and every sketch consists of at the bare minimum these two function definitions so we have function set up here and function raw so you can think of these function definitions as containers so each function definition serves its own purpose so this first function definition called set up sets up the sketch and it's the first thing to run when you first execute a sketch and it will run only once so this so you can put anything in here to set the initial properties of the sketch such as create canvas over here so we'll be using a lot of function calls like these to create canvas so this right here is the function name and then it's followed by some parentheses with parameters and parameters are the information that you give to a function to allow it to accomplish its task so let's try to change these parameters to see what the purpose of it is so like this first 400 here let's try to change it to 500 and that makes the canvas a little bit wider so we know that the first parameter controls the width of the canvas and then we can infer that the second parameter simply controls the height of the canvas so let's just change these numbers back to 400 by 400 because that's the size that we want to work with for now so this is just telling P5GS create a canvas for us to draw on the screen that is the size of 400 by 400 pixels after setup executes it a sketch we have this function definition called draw so draw will execute right after setup and it will execute continuously over and over again until the program ends so this is useful for creating animations so to set up our sketch for copying pasting code into we'll need to place our cursor on line 7 right here see these numbers we're going to be referring to them as lines so place your cursor on line 7 and then press enter until that curly bracket ends up on line 15 so now we have some space to copy and paste our code inside of the draw definition so the first thing we're going to do is to draw the head onto the canvas so one shape that you can draw in P5GS is an ellipse so to see how this works we're going to need to copy and paste number 1 on the reference sheet under that first section under drawing the face onto line 9 in the web editor then you can execute it again so now we have an ellipse on the center of the screen so what do these numbers mean so this first parameter specifies how far to the right the ellipse is drawn while the second parameter over here this 200 specifies how far down the ellipse is drawn while the last two parameters specify the width and the height of the ellipse so thus this is telling P5GS to draw an ellipse on the screen that is 200 pixels to the right 200 pixels down with a width and a height of 150 pixels and that's how we end up with this result on the screen another shape that you can draw in P5GS is a rectangle and we can use this to draw the eyes of our ellipse this takes in the same information as parameters this takes in the same information as parameters and we can see that in action when we copy and paste number 2 from the reference sheet on to line 12 so we're going to leave space in between these functions here because we're going to copy and paste some code in between later so now when we execute it again we'll have the left eye of our smiley face if you don't want to keep on pressing play every time you change the code then you can just check this little box right next to auto refresh and then you won't have to keep on clicking on that so now that we have the left eye of our smiley face we'll still need to draw the right eye so then we're going to copy and paste number 3 from the reference sheet on to line 13 so now we can execute it so notice how the only difference between these parameters right here is the first number of parameters so this one has a value of 215 while this one has a value of 175 so this since this is a greater number that will cause this eye to be drawn more to the right but since we left these the same they will still look identical so lastly we will need to draw the mouth of our smiley face and we can do this by drawing an arc it's just an ellipse but with a slice of it cut out when you specify the start and the stop angles and radiance as the fifth and sixth parameters of the arc function so to see how this works we can copy and paste number 4 on the reference sheet on to line 14 by the way these forward flashes here these are just comments and they don't really do anything for the code they're just there to let you know what the purpose of each line of code is doing so now we have a basically we have a drawn smiley face on the screen but it still looks pretty bland so we're going to need to color our smiley face fortunately p5js provides us with ways to color shape so the first way is by specifying the fill of a shape which is white coloring right here so that's called the fill the second way is coloring the borders of the shape which is referred to in p5js as the stroke so that's the borders right here so before we can actually start coloring our shapes we need to understand how you define colors in computers because you can't just type in yellow or blue because computers don't understand that so we're going to switch back to our presentation to help you understand how you can define colors so computer screens use pixels for their displays but they use a combination of only red, green and blue pixels since these are the three primary colors of light to create the illusion of new colors so thus we have we define colors in computers by specifying how much red there is then how much green there is and how much blue there is each on a scale of 0 to 255 this is called the RGB system so then if we want to color our smiley face yellow we can use a combination of green and red light and then use this in the fill function so then we have fill 255 for the red parameter and 255 for the green parameter and then we just put 0 for blue because we don't want any blue color so thus as you can see in this diagram here that will end up coloring our smiley face yellow so then you can copy and paste number one under the next section on our reference sheet that will be under coloring and then you can just copy and paste number one and paste it onto line 8 so now our entire smiley face is colored in yellow because this fill function is placed above it comes right before all these shapes that are being drawn in our script so this will cause p5gs to draw all these shapes in yellow next we still want our smiley face to be multi colored so we can color the eyes and the mouth of the smiley face in black by using another fill function that's placed above the rect and the arc functions so to color it in black we only need to specify one parameter for specifying a color on the gray scale so we can do fill 0 and that just means no color at all or black and then we can just paste that onto line 11 so paste number 2 under coloring onto line 11 and now we're almost done drawing our new friend lastly we don't want any border around our smiley face so we're going to tell p5gs don't draw with this stroke at all so we're going to use a function called no stroke so we can copy and paste number 3 under this section and paste it onto line 7 so that will come before all the other shapes that are being drawn so none of them will be drawn with this stroke so now we have a fully colored smiley face so we're going to switch back to our slides to show you some of our own sketches using decent concepts so we made like a smiley face a target and some flowers and you can probably imagine in your head how we were able to use that these functions that we showed you to easily make these sketches so however these sketches are still static they don't respond to user input nor are they really animated and that's what the topic of our next tutorial will cover so we're going to code a simple drawing program so if you want to save your sketch you can create a new account after this presentation but for now just open the editor again in a new tab you can go back to your reference sheet and just go to the web editor again are we ready? what should we do in terms of coding to accomplish what we want to create so the first step is to have something drawn at the mouse's position so we could let's say we want to draw an ellipse at the mouse's position as the brush so how will we even know what the mouse's position is to begin with the P5GS JavaScript library provides us with many special variables as well as the functions we were using in our program so variables are just stored bits of information in computers that you can refer to by name so two of these special variables that we can use in our program right now is mouse x and mouse y these variables just store integer values that specify the mouse x position and the mouse y position respectively so what makes this special is that we can just use these just as if they were numbers and plug them in as the first two parameters in our ellipse function so we could just say draw an ellipse at the mouse x position and the mouse y position so to see how this works you'll need to copy and paste number one under drawing program the first section under drawing program right here and then paste that onto line seven oh wait before you start copying and pasting I forgot to tell you to place your cursor onto line seven first back in the web editor so and then just press enter until it's on line 15 that way you'll be copying and pasting into the draw function so so just copy and paste number one under the reference sheet and make sure you copy all four of the lines so you don't miss that last bracket um sorry is it actually one yeah number one yeah number one onto line seven line seven so now in our program we only have a single ellipse following our cursor so what we want to happen is to have many ellipses being drawn at our cursor so what we want to do is to remove this background function that's placed on line six so delete this background function because recall that earlier when I said draw loops over and over over again so the background will always be drawn over everything but then when we remove the background function we can press play again and then now we have a stream of ellipse being drawn as our mouse moves because the background function is no longer covering it up it doesn't really make for a true drawing program because these ellipses are just being drawn at our mouse no matter what so we need to tell p5gs to draw these ellipses at the mouse's position only if the mouse is pressed so the p5gs library provides another special variable called mouse is pressed which stores a value of either true or false depending on whether the mouse is pressed or not and then in javascript you can use something called an if statement which will only run a segment of code if the condition that you specify evaluates to true so then we can place this variable into our if statement and then say and then place our ellipse as the code to be run if the if statement evaluates to true and then we can tell p5gs if mouse is pressed draw an ellipse at the mouse's position so to see how this works in code we can copy and paste number 3 on the reference sheet and make sure you copy all four lines so you don't miss that last bracket and then paste it on to line 8 so now we still don't have this ellipse inside of this if statement so the ellipse is still going to be drawn no matter what so what we need to do next is to copy this ellipse function that we have above the if statement and then paste it inside of the if statement on line 10 next we're going to need to delete the ellipse function that we still have on line 7 so then we only have the ellipse this ellipse function call inside of our if statement and now our drawing program should be doing what we want it to when we click on the canvas and just draw on the screen and then finally just for a minor improvement to look more like a brush so we can just use the fill function again to color these ellipses black so for so under the next section in our reference sheet called color we can copy and paste number 1 from the reference sheet on to line 6 and now we have a rudimentary drawing program so you can see how simple it is to make something like a drawing program with p5.js and we also have code snippets in our reference sheet that we encourage you to try and copy and paste into your drawing program that will add new features to it so you can also see how if statements and what else you can do with some of p5.js's variables so now we're going to showcase some of our own examples some of our own variations by switching back to our presentation so this first one right here I'm just going to wait for that to load so we have we have the we have the code for all of our examples that we showed you linked in our reference sheet if you want to look at the code yourself so what this does this is basically the same program that we coded together but with three new lines of code so it's basically just drawing an ellipse three ellipses that are reflected from the mouse's position by just subtracting the mouse x variables from 400 since that's the width of the canvas next we have another example that still draws on the canvas but it uses a completely different brush so now we have these colorful rotating lines that are being drawn onto the canvas so basically I just use the mouse x and the mouse y variables in the fill function as well so that it's so that it will change color as your mouse moves just to interject both of the drawing programs are linked to your reference sheet are on your reference sheet so you can try them out there's a lot more that you can do with p5.js beyond the scope of what we were able to show you in this presentation so next we're going to showcase some of our own projects that we've created over these past three months so this is just a solar system sketch in p5.js and I just drew ellipses that rotated around the center using p5.js's sign and cosine functions and for the speeds and sizes of the planets I just googled those values and plugged them in to into the functions that I used and scaled them down a little bit so it would still work this is just a simple notepad program where you can just type text in to a on to a paper screen and it just this kind of uses a little bit more javascript that does p5.js but it allows you to see how concepts like the switch statement works in p5.js and it allows you to see that more visually I made this I animated falling snow using sign and cosine functions again so it's not exactly random but it's really cool at least I think it is yeah and this is a little ghost thing that I made that uses a program similar to what we did in the simple drawing program in that it follows your mouse around yeah so so if you want to start learning p5.js after the presentation then these are some really good resources that we use to learn on our own and we have the links to these in the reference sheet as well so this first one right here p5.js.org slash reference that's the link to p5.js's documentation and when you're learning any type of code documentation is the most important resource that you can have because it's like a dictionary for everything that exists like in p5.js so it shows you what functions you can use and how you can use it in your program it also gives you helpful examples for how you can apply these then we have Khan Academy's programming course which teaches kids important programming concepts and how to animate using processing.js and processing.js has essentially the same syntax as p5.js except it's interpreted by the computer differently different when you're just programming with it my Isabelle and I used the coding train youtube videos a lot to learn how to animate with p5.js and I believe it's the best resource on this it's by a p5.js contributor named Daniel Schiffman he's really enthusiastic about what he does and he works really close with Lauren McCarthy the founder of p5.js and another resource is openprocessing.org which essentially has like a lot of people just contributing to this site and uploading their code and you can try out a couple of sketches as long as they're in javascript because there are other platforms that are open source and that you can animate on but aren't javascript so you just can like pick one and if you wanted to just like copy the code mess around with it if you it's a really cool website to check out for inspiration when you start doing your own stuff I mentioned many times during this presentation why it's important to learn p5.js and I'm going to do it again it's great for beginners it allows you to advance very very quickly you can put your code in the web browser and you can click run play and you have results you don't require like a lot of like you don't have to spend a lot of time studying like computer theory to be able to code with p5.js it's a really cool language to learn it's something that I really really like and enjoy doing almost like an art form I can't draw at all but this is like it's computer animation so it's a really cool way of being able to do what I always see on the screen and if you try out p5.js and it's not really your thing I totally understand that but you can use it as a stepping stone to other programming languages to introduce you to more concepts and then hopefully you'll find something that really clicks for you because computers are expensive and it's really cool out there so yeah we hope that p5.js is something you can try out thank you for listening to our presentation are there any questions yeah so I use the I use another special variable called frame count and that just keeps track of how many frames that have passed in p5.js so I plugged frame count into the sine and cosine functions and then plug the result of that in for the x and y values of the ellipse so you might have to do some arithmetic because p5.js does loop very very fast so you might have to do some division to slow it down and then some multiplication to make the oscillation wider um anything else no library uh yeah so Isabel and I started about three months ago right and we use the coding train videos a lot and then we use the reference thing it's the first link and um yeah so like for the snow thing that I animated that took about like 30 minutes of coding with like editing and stuff but it's for beginners it's meant for beginners and it's meant for you to be able to pick it up quickly so yeah thank you oh um if you would, sorry I don't know what's happening can you just yeah okay um yeah that's a qr code if you'd like to contact us so thank you so much for coming to our presentation we really appreciate you you've been a great audience testing testing testing testing testing testing testing but today we're going to be talking about measure by measure and the program we'll be talking about is called measure hi my name is Ewin Elimansil and my name is Victor Hugo Jimenez but you can call me Victor Jimenez and my name is Livia Joel Gaspar Andrade but you can call me EJ and we're from Harvard Teacher Preparation Academy in Wilmington so history has told us time and time again that humans have been constantly destroying the earth whether it be throwing trash on the streets or polluting the air with greenhouse gases from cars well these statistics only assert that assumption even more as the San Diego Tribune tells us that 110 million Americans live among such high levels of air pollution so um which is actually harmful to our health according to the federal government so believe it or not me and my colleagues here are actually victims of that same air pollution as our school lives right near a refinery and I run near the refinery all the time and there's always like cars passing by which only adds more to the air pollution so yeah and the second statistic that I'm talking about which is very surprising to me was how simple how something as simple as turning off the water while brushing your teeth can lead to saving up to 3 or 4 gallons of water per day which adds up to more than 1000 gallons of water per year so something as small as turning off the water while you're brushing your teeth can lead to drastic changes into the environment so even though you may think it's small for you as an individual if we do it collectively as a group it can actually harm our environment overall so our program manager will be trying to prevent any of these further issues from occurring in our environment and before we continue any further we need to talk about the U.S. Department of Energy and the U.S. Department of Department of Energy's mission is and I quote the mission of the Energy Department is to ensure America's security and prosperity by addressing its energy, environmental and nuclear challenges through transformative science and technology solutions so before we continue further with their actual website so we have here, we take it there and it takes you to a page where it has four tabs at the top and it starts off with yeah, it starts off with tabs right here below their name and it's kind of tiny right now because of the tab zoom so you can see here that it starts off with science, innovation, energy and economy, security and safety and at the far side it has save energy and save money and it will take you to a series of articles where you can find ways to save energy in your home so the first one that pops up should be 16 ways to save energy in the laundry room so if you click on it it would give you a list of ways to save energy and this is to give you some context that the U.S. Department of Energy's mission is to help you save energy at home and save money at home so it just so happens that the U.S. Department of Energy is a creator of measure which is the application that we'll be covering today and it just so happens that it does and with the program measure it shows you ways to reduce your ways, reduce your usage of liquids through the pumping assessment and save energy through the heating and fan systems so we continue further here's a quote that the U.S. Department of Energy has on its website for their pumping system part of their application so we have here and I quote dramatic energy and cost savings can be achieved in the pump systems by applying practices and purchasing energy efficient equipment. Use the software tools training and publications listed below to save energy in pump systems now what this means is that through their application you'll be able to find ways to reduce your usage of liquids such as water and reduce the harm that you cause into the environment through your daily use and daily life so before we continue further we'll go into the pumping assessment and survey tool portion of the program so now we're going to open up measure application and we have here it takes you into a page where you can see on the top right corner it has a U.S. Department of Energy and it says energy efficiency and renewable energy so once again you can take this program and be confident that it will give you a trustworthy way to save energy in the house so as you start off it has the three assessments that we'll be covering today it has create pump assessment create process heating assessment and create fan assessment so we're going to start off with the create pump assessment and you can see here it gives you a tab where it allows you to create a name for the type of assessment that you're going to have and the reason for this is because it wants to give you the ability to go back into the assessments you've created and take back the knowledge and reuse it to whatever way you want to use it now once you name the assessment you can see here on the home portion on the far side which is pretty dark but you can see here the home button you can see that all the assessments that you create are going to go back into so let's name this assessment can we get a name from the audience we should name it yeah five six seven five six seven okay so now we're going to create the assessment and it should take us to a portion of their program where you can see here that you have the assessment settings and everything starts off with the language currency, units of measure head measurement, flow measurement, power measurement pressure measurement and temperature measurement now you don't need to worry about the type of information you input into this portion and it's because it's set to the U.S. standards or the common use of tools for the U.S. so we have here English, the U.S. dollar imperial system the metric centimeters and etc we have feet, gallons per minute horsepower, pounds per square inch and degrees for temperature measurement so now we're going to continue onto the pump and fluid portion of information that you need to put for your pumping system at home so we have here the pump system for N-section ANSI slash API and you may be wondering what tech is that and why should I care, how does that work and why are the improvements that I make making an impact into the environment and at home so we exit the program and go back into the power point you'll see that this one picture that we have can answer all those questions for what is a pump system so we have here the pump system of what a normal house may have so we have here at the very bottom we have the check valve and sub pump slash pump and we can continue to see that it has a sanitary sewer to a flexible pipe with adapter and you can see that these pumping systems are interconnected all over your house and there are several types of pumping systems that you may have but we'll be covering just one type of pumping system that you'll have so we have here in the picture it goes out to the open from your pump all the way out to where your glitters would be for the pumping system so now we're going to go back into the measurement application and we'll continue to input information for it so we have the pump speed at 1780 the drive type as direct drive the fluid type is water fluid temperature 68 and specific gravity as 102 and kinematic viscosity and stages so you may be wondering why does it give us an option for the fluid type well you can see here that it gives you a several variety of fluids that you can deal with now the reason we're starting off with water is because in your normal household the only type of fluid that you're going to be dealing with is water as you can see that the daily usage of water is through washing your hands with the sink or showering with the shower head in the shower now this application can be used for other types of buildings that deal with different liquids but you can see here that it gives you the opportunity to use gasoline and you may be wondering like what kind of buildings use gasoline well gasoline stations so they'll be using gasoline type of pumps and be dealing with gasoline so we'll be going in with water now let's continue on to the next portion of the information so we have here the motor system so we have line frequency rated motor power, motor RPM efficiency class, rated voltage and full load amps now you can see here that the box is in red for full load amps and the reason for that is because it may vary depending on what type of water system you're using for example if you go into a school and you press the handle to turn on the water it goes at a current rate but if you're to use it at home you have the opportunity to use a valve and turn on the lever to go from the lowest power for the sink to the highest power so what this would do is take the average from what the lowest power would be and if you can click on estimate it will do that automatically for you so now if you get confused at any portion of our presentation or while using this application at home this measure application gives you the opportunity to take any assistance from the far right side on where you can get the information or what is that information that you're trying to collect so now we have field data and we have here operating hours at 8600, 760 hours per year so this case would be giving you the worst case scenario if you're using the water system at 24-7 so this is going to be the worst case scenario so keep in mind that this isn't actually how much the average person would use water so this is again last case scenario so for flow rate this will depend on what type of pump system you have so as I said earlier the flow rate might differ depending on how far you press the lever so we're just going to say that the GPM is about 100 and the same for motor power so now we have motor power 100 measured voltage at 460 so now that we're done putting in the information for our current pumping system at home let us continue on to the assessment portion so you can see here that it gives you the opportunity to create a new type of scenario and what this means is the way that the types of improvements you include into your pumping system at home so let's create a new name for this type of scenario and can we get a name from the audience to name it yeah it's a pretty big number so let us continue on to the new scenario and we have here several types of ways that you can create modifications at home so we have installed VFD, we have installing more efficient drive type, installing more efficient motor, reduce system flow rate reduce system head requirement adjust operational data and install a more efficient motor now these aren't the specific limitations that you have to creating improvements but these are the easiest improvements that you can make to your house so let us create the improvements in the reduced system flow rate so let's reduce the modification flow rate to what do you say EJ 80 and let's also install a more efficient motor so if we go into data we have here for the motor that we have a energy efficient and you may be wondering what is it more efficient than an energy efficient motor well it just so happens that there is a one level above that and you can use a premium you can use a premium efficient type motor so we're going to select these two modifications and let us continue on to the view report portion of our data so it gives you here several types of ways to view the information that you've created from the modifications so we have here percent savings at 21 percent and we have the we have a several variety of numbers that are unboldened and what this shows you are the modifications that you've created into your assessment so we have pump efficiency all the way down to motor power and these are simple modifications from the pump system so as you can see here that the motor rated power might have stayed the same because we didn't necessarily make adjustments to those now there are numbers here all the way at the bottom that are bolded we have annual energy annual energy savings annual cost annual savings that are all bolded so these are the outputs for what your modifications have given you so we have here annual energy has been changed from 876 to 695 that's a pretty big number you have there 181 in annual energy savings now that 181 savings has given you a change from $57,816 to $45,850 in your annual cost that's an $11,000 more money into your pocket so now let's view the data into report graphs so this portion of the information allows you to view it in a pie chart and a bar chart so let's go through the pie chart so you can see here that the useful output has changed from 5.22% to a 5.57 5.53% now, sorry I meant to say 5.27% so that 0.05% change maybe seemed like a little bit but any small bit of change into your efficiency of the pumping system can result in a higher change and bigger opportunity to help the environment now that 0.05% change has given you a how much that's a pretty big number for money in your pocket so let's go to the motor loss so it's changed from a 5.3% to a 3.61% that's an average of about a 1% change and that 1% change has given you a how much $11,000 so now let's go through the pump loss so it's gone from 90.25% to 91.12% it may seem like this may be a contrary to what we're saying but the pump loss is actually beneficial as you can see here that that 1% change has given you $11,000 into your pocket so it also gives you the option to view it in Sankey so it basically shows you the rate at which your changes are giving to the environment so if this was to be zoomed in you can see here that it has been changed from 4.53 kilowatts for motor losses to 2.86 kilowatts so now let's move into the input summary so this portion of our program allows you to see the raw data of what you've made into your new modifications so everything is raw and you can take the information and interpret it on your own and see what more modifications you can make into your system and this will also allow you to see what portions of it may have impacted others and if you get confused at any point during the presentation where you don't have certain types of information the program allows you to view a calculator option where you can calculate the information that you do have to find the information you're missing so you can see here it has system curve achievable pump efficiency motor performance, NEMA energy efficient and etc and this will conclude the portion for the pump assessment of measure so now Avere Jolo will continue the presentation now keep in mind that same user interface that Victor showed us through the pump assessment will be displayed throughout all the assessments such as the fan assessment and the heating assessment that will be part of the application so electricity so can anyone tell me ways that electricity is being used in today's convention lamps computers all the way in the back over there the camera, wow exactly so electricity is practically a fundamental building block of today's society so society may shape us to think that oh electricity is always good like for example the car company Tesla has an alternative fuel source rather than just gasoline which is electricity however I'm not saying electricity is bad in any way actually there is part of it is bad as at the end of the day electricity or at least electricity that we use is not natural it's man made and that comes through power plants so as you can see the output of these power plants may look just like steam but in reality it's actually carbon dioxide that leads to global warming in our atmosphere now the way that this steam or carbon dioxide is produced is through power plants to make a long story short power plants put chemicals such as uranium and other byproducts into water to heat it up and it will turn propellers that will conduct electricity but the output isn't as good as the as it seems yes exactly so what measure aims to do is through the heating assessment and survey tool it uses it lowers your energy usage along with making sure that the energy usage in your household is cost efficient at the same time it helps both you and the earth at the same time constantly and does this through aiming towards the boiler system inside your household which is controlled by an electrical switch that heats up things such as water as Victor talked about fluid type inside your household so one of the functions of the heating assessment is the process heating method now whoa it's a big word but in actuality you'll find out later like as we go along the presentation that Google is your friend and process heating method is just another word for the way that your system keeps up your process vessel and in other words our process vessel is our boiler so another way that the heating assessment functions is that it's able to analyze which utility waste the most energy and this through the user in putting all the energy usages in each utility that's inside their household or factory and measure is able to analyze the annual cost of all these utilities along with the annual usage of all these energy in these utilities to find out which waste the most energy and this is the next one which is guidance on prevention of further loss of energy by finding out which utility waste the most energy it's also able to review advice on how to save energy such as the way that Victor in your scenarios shows optimizing your fuel pump or finding out a more efficient motor those are just ways that measure shows how much you save money such as $11,000 in order to become more cost efficient inside your household another function of the heating assessment is the explanation of the energy balance so as I saw in Victor's presentation there are calculators inside measure and you can think of the energy balance as pretty much a balance as you must convert one unit to another unit and in the middle are conversions so the middle of the conversions are is the energy balance and that could consist of formulas in order to find out how measure the application is able to I guess I can say measure certain units into other units so you can do that by yourself another way that the heating assessment functions is through ways that it collects data so prior to using this application when I needed to find the right data in order to find to put into the assessment it was all scrambled up everywhere I couldn't find it it was really difficult to find certain categories but once I inputted it all into the application it was in an orderly fashion just in case I need to use it in future scenarios just in case I want to use it again for the assessment or my contractor needs it or anything else and the last function of the heating assessment is ways that to lower your energy usage so that's just like before how I talked about how measure gives advice on how to lower energy efficiency and increases your cost efficiency at the same time so believe it or not the heating assessment has actually struck in home for me as this was just my school, our school recently, just last year as you can see all the bungalows are like bathrooms, correct? so that means that each of them have their own systems but this led to problems as when it came to like May as May is hot so then when it came down to testing times like taking our PSAT SAT, AP exams it was all difficult for students to work in a comfortable environment as it kept on being hot and cold out of nowhere so that's why me and our classmates were extremely excited when our school announced that we were actually having a new school and that came through as you can see all the classrooms are on this side which means that all of them have the same or share the same central heating system through one boiler so now we're able to test comfortably and work comfortably so when using this application me and my group thought it was going to be difficult to find the right information for the data in measure but in actuality it was as simple as one, two, three as all we did was ask our janitor Mr. Robinson on how to find the boiler and what information we can use for the boiler so he led us to the office where the boiler was and we found out the model number which is as you can see the PKMAC CM 399 PK stands for Patterson Kelly I believe and he wasn't able to give us all the information so that's why he gave us a certain template in order to find out the model number and through that as I said before Google is your friend so all I had to do was search up the model number and it led us to a table found on the Patterson Kelly website so this table does not show all of the data that is required for measure but if it doesn't show that then you're able to contact contractors and boiler operators that know the actual information about the system so when I tried inputting all of this data into the program I actually found this diagram of an industrial boiler it may not it doesn't look like the one that we have for our school but this is for manufacturers that use boilers so just in case manufacturers they want to know where measure gets this data or where to get this data it's able to find for example the auxiliary equipment and the way that he so it's able to find rather than just visualizing it it's able to give you an image on how to find the certain data that is needed for the application this is what I found when I outputted the this is what measure gave me for the output of the application so as you can see we save our percent savings are 100% but what seems off compared to Victor's $11,000 it seems only minute compared to the vast money that Victor had in his pump assessment so Victor can actually show us how to why it's only $1 okay and so this portion of our assessment is to serve the purpose to allow you to see whether the assessment is helping you save energy or in actuality making your energy usage worse so if you can see on the table that the 100% savings show that you're going green, you're saving energy but in actuality you're only saving $1 so what this means is that it verifies that you're creating a positive output of your energy usage so this part of the assessment can't really test how much energy you're using it's because it can't determine your energy using habits because your heating systems can be used with a simple turn of a valve or a knob depending on what type of heating system you have but for a thermostat you would turn the knob and it doesn't necessarily mean you use it 24-7 and for this reason it only shows you whether you're creating a beneficial way to create a positive change now in the assessment you're able to create a variety of options to conserve energy and one of the options was to reduce the heating and melting rate for the boiling point of the boiler and it might have changed from 180 Fahrenheit to 160 Fahrenheit so you may think that you're reducing your energy usage but in actuality it creates a worse situation where we try to create that for our school and we ended up with a percent saving of negative $6,225 or you might get another number as negative $626 and you can see here we currently have a 100% beneficial for percent savings so once again it can't determine your energy using habits so it will serve as a way to determine whether you're creating a positive change or a negative change so now we'll continue on to the fan and a survey tool with you in hello so this is the last assessment for today it's the fan and a survey tool as what Victor said earlier this one is for mostly industrial use and what this difference between what Victor and EJ said earlier is that this one is for industrial and there you can use at home now I'm not saying it's impossible to apply the information I'm giving you at your house but mostly it's for industrial use like I said before now when you think of a fan what do you guys think of well this is what the actual fan looks it's a fan centrifuge and this is what it actually looks like and this is located at the roof of every convention or every factory or next to a factory or even on top of our school it's at the roof and at this very convention we are using this fan this fan is what it looks like inside or at the top of the roof and I'm just showing you guys what the basic structure of a fan looks like but in public you'll probably see it like this you'll see it there at the left and you'll see there at the right those are what it actually looks like and what's so important about these fans is that it keeps us cool it uses a lot of electricity at the same time but we all use it especially at this convention right now we all use every room is air ventilated and it's air conditioned now what from Victor said we all use the same we all use the same data and this data is not really important because Victor already went through it but I would want to put a recommendation of my own here if you want to have an easier time finding the data I would recommend you changing the horsepower to kilowatts because kilowatts is a lot easier to find the information for than horsepower now there are some things measured likes to measure well one of the things that it likes to measure is the intake of the fan now the intake of the fan is the air pressure and density of the air it's taking in like intake and I'll show you how it looks like in the actual program now this right here is not really important because this is standardized in America this is what everyone has so basically if you're using a regular fan like at the roof of this convention it's taking up air so you guys don't need to worry about this because it's already at the program now one of the other things that measure likes to know is the type of fan there are two main types of fans there's the airfoil fisw like you see on the board however there's another fan called an axial fan what's the difference is that an airfoil fisw is mainly used for industrial use and axial fan is used at your house it's the air conditioning unit at your house I'm using the airfoil fisw is because it's the most efficient and I'll talk about that later and it's what we're currently feeling right now at this very convention the reason why we use the airfoil fisw is because it's fast, quiet, and efficient why is it quiet and efficient well it's because of the engineering of it the engineering of an airfoil fisw is that it is curved down which allows it to make very too little no noise at all now the other thing that's very important when using measure is you need to know the type of motor and the motor power and this is what's a little complicated about measure measure is used for the individual person in this room right now each one has a different type of different type of motor and motor setting depending on their house and depending on the building now as you can see it's dependent on what type of motor you have now you can see here rated motor power in horsepower now horsepower this is the average of the airfoil fisw 746 horsepower for the actual fan and this would have been a lot easier to know if it was in kilowatts but you could easily do that by using conversion factor next is the only the last thing you need to really know in this program is the motor rpms or rotations per minute of the motor now this is important because the more rotations per minute the motor has the more electricity you use and what from EJ said the more electricity you use the worth it is for the environment and the more money you have to spend in the bills after you have the motor rpm and rated motor power and you can easily find this by going and calling the motor manufacturer airfoil fisw at this very convention now you can see there from what Victor said earlier you can estimate the values of things you guys don't need to really know the actual number as long as you put the motor rpms and rated motor power you will be fine and you just click estimate and that's the correct amount of amps it will use now further on the intake it is actually called the inlet and the outlet the inlet and outlet pressure is what the amount of air is going inside the air conditioner or the fan itself and the outlet is how much air and pressure is coming out now what you'll find is that the inlet will always be a negative number because it's taking in and vacuuming all the air from the outside and the outlet is how much it's increasing it's usually a high number and the more inlet it takes the more power it requires to take in that air so that's why it's very important now the inlet and outlet pressure are the only two things you guys need to know about this thing as you can see our program is very easy to use and as long as you find the information you can just plug them in and it will calculate it for you now the inlet pressure as I said before is always a negative number the airfoil SISW has a negative 0.55 kilowatts oh sorry air pressure in H2O now what's the H2O? well it's because the air going inside and you can change and then the outlet pressure for an airfoil I'm just going to call it from airfoil from now on it's at 6.65 those are the only two important things you need to know because as you can see here flow rate if you click on calculate flow rate and pressures you click that you'll get this large number and of course they don't expect you to know this large number or easily find it because as I said before every fan is different every rotations per minute air pressure is different so that's why it's easy to calculate once you have those three numbers it has this very last bottom right here compressibility factor now compressibility factor is how much energy it uses to convert that air pressure and you can just easily calculate that by clicking a button what I'm trying to prove to you guys is that it's really easy to use and you just need a few things for the actual assessment now after you plug down all those information you can sell from Victor said earlier you will make a lot of you'll save a lot of money or from what EJ's example you make maybe like little to no money at all for savings but what's so good about this program is that everyone can make a difference everyone in this room right now probably has a adult or just a kid and all of you have to think about bills and using money what's so great about measure is that you can see how much money you're using and you can help your parents out with the bills help your parents save money or even yourself you can just be interested and help the community or your school or a building that you live in and by doing this everyone can help the environment and help them individually that's why you're making a small difference even though it's just a small little task you're doing but if everyone in this room were to do a download measure it would make a big difference and it's important to keep in mind that measure was created for contractors and people that want to create buildings but it can actually be used by anyone in this room and anyone in the earth for example all students were able to use this program and to take information and create theoretical situations and conserve energy in the house any adult can use this who lives in an apartment or house as they can contact their landlord or contractor who has built their house and they can contact those same people to find the information to input into our presentation I mean application for measure so you guys must be wondering like why would we pick an application that would help us as the main question that I believe that measure puts up is who's going to step up to help the environment through programs and ultimately I believe that us as a community of programmers, engineers, techies we can all come together to create programs in order to help the environment for me or for us I think there is a slight divide between nature and tech as we may think that nature is like oh it's like the bottom ground and tech is higher up but the US department of energy does is that it bridges both nature and tech together through a simple program that anyone can use as it uses user inputs user outputs along with just helping the environment and the program itself is not just about helping the environment it also helps you as well as you may have problems economically the earth is having problems as well so using this application both helps you and earth at the same time and now if any of you are interested and we hope you're interested in downloading the application here's a URL for you to download the application so we plugged it into Google to shorten the URL to make it easier for you to find it and another portion of what you can use is this energy audit provided by the US department of energy now we actually have experience in taking down information for an energy audit because we all partake in a club called heroes for zeros in our school and in that club we find ways to save energy in our school and help our environment around us by reducing our energy usage and creating less emissions in our school so you can see here that it provides multiple ways to conserve energy and now we want to give you all a really big thanks for listening to our presentation and speaking through and we will now begin our portion of our presentation for our Q&A so if you would like to ask any questions feel free well I'm assuming that if you have a printer at home or have access to a printer you're able to take a screenshot of the information right here if you press it out and we said earlier you can come back to these assessments and maybe you can give this information to a contractor because they should be familiar with a type of program to jot down information so you can find multiple ways to find the usage of the information so I guess oh yeah you can access their site to download their application so it's important to also remember the application we've tried using it in all three types of computers we've used it in Linux, Microsoft and iOS so it's usable to anyone in this room that has different types of computers so I guess this concludes our presentation for measure by measure yeah and I'm a senior at Polytechnic School and today we're going to be recreating the 2018 World Series through R through R so before we'll begin I will note that R is a letter in the back end of the alphabet it is also my favorite programming language that we'll be using exclusively today so as I said we're going to be talking about the 2018 World Series so if you're a Red Sox fan maybe pain is not the right word but yeah the Dodgers lost the seven series in five games we played the first two in Boston lost both of them pretty badly we won the third game after like 18 innings but then we lost the last two at home so we lost the World Series and as is normal with this day in A's a lot of the mistakes the Dodgers made were criticized heavily in the media so what we're going to be looking at today is we're going to be looking at some of the claims that various media sources made and I'm not necessarily going to refute them what I'm going to do is I'm going to use Saber Metrics I'm going to talk about them a little bit but Saber Metrics is basically a study of stats basically in a baseball context Saber Metrics there will be a lot of math and there will be programming with our our studio so as I promise we're talking about Saber Metrics Saber Metrics is basically a study of a statistic study in the baseball context it has evolved heavily over time back in when baseball first began is common for people to look at box scores and base their assumptions on how players are doing based on box scores like in these papers say player X is on a 20 game hitting streak people in the paper say oh this guy is performing this player is performing pretty well and then they'll there'll be another player where day after day they see a zero under the H column Hits column and say oh this player is not doing well we should bench him trade him and release him but as time has progressed the study of baseball stats has gone deeper and deeper far beyond the box score and into more underlying stats and trends my first exposure to Saber Metrics came in a class I took a couple summers ago the Saber Metrics 101 through Boston University so that's where my interest in Saber Metrics began and that's when I learned the true art of digging deeper beyond the box score so a really basic baseball stat the runs allowed it's it's just counting one run allowed two runs allowed so on and then we get more complicated with the ERA which is basically an average of how many runs does a pitcher allow every nine innings based on the performance fielding independent pitching the basis behind this is that sometimes the defenders they may make errors on ball and play or they may just not hustle like simple ground balls that turn into hits whether or not the simple ground balls turn to hits they don't show up in the ERA ERA it's just runs allowed but field independent pitching it takes stuff that a pitcher does have a lot of control over like home runs, strikeouts, walks so basically if a pitcher allows more home runs they have a higher FIP if they walk more they have a higher FIP not more they have a lower FIP so the intuition is that if a pitcher's FIP is greater than its ERA then he's pitching they describe it as over his head basically he's getting pretty lucky with the balls that are that come and play and if it's lower then it's other way around that means he's getting really unlucky with the better balls that he allows batting average and balls in play so basically the status calculated how it is if it's a ball that's in play meaning the batter hits it and the ball goes to a place on the field where defense can make a play on it that stat calculates the percentage of times that like a ball in play results in a hit so when you're a baseball hitter when you're up and facing like a 95 mile per hour fastball your main goal is to is basically to hit it it's not I mean you can to a certain extent try to direct it either to opposite field or left side of the field or right side of the field but mainly you're hitting it and what it may as a magazine I've described perfectly it may find a hole between two defenders and result in like a two run double or it could go right out of defender and be a double play so basically players with like really high batting average and balls in plays that indicates that they're like they're lucky so a lot of times baseball statisticians when they look to see if a player's hop streak is sustainable they'll look at the batting average and balls in play and then if it's high then they'll predict the regression if it's low and the player is struggling they'll predict that he'll bounce back we're on expectancy 24 I will get to that that is my favorite I'm going to get to that that is for one of our analyses so our first step is we're going to and see basically like did they really match up well or not so when you look at the raw winning percentage games one divided by games played Red Sox they won 108 out of 162 that's a winning percentage Dodgers they have to play an extra game like a tiebreaker so as you can see Red Sox have a significant advantage however the Pythagorean winning percentage expectation it was a stat created by mainly pioneered by Bill James he came up with the formula that it very much reflects the Pythagorean theorem so it's a prediction of not only like is the team winning games but looking at what's like the ratio of runs they score to the runs the opponent scores it's basically to indicate dominance so the more the higher ratio of runs scored to runs allowed the higher winning percentage expected so the official formula is runs scored to the second power has been experimented but it's been found to the 1.83 power is more matches empirical data more so that quantity divided by runs scored to the 1.83 plus runs allowed to the 1.83 and so that is actually our first segue R there we go let me make it a little bit bigger there we go so in R one of the first things I learned with R is how to make functions so I'm going to do is make a Pythag function it takes in runs scored and runs allowed and as I described it will return runs scored to that exponent divided by scored to the exponent plus runs allowed to the exponent so right here is a is going to represent the Pythagorean for Dodgers according to pro baseball reference they scored 804 runs and allowed 610 so this is going to be their expected winning percentage so I'm going to multiply it by 163 since that's the amount of games that they actually played and then for B it's the Red Sox they scored 876 and then allowed 647 and they played 162 so this is how you run and then your code runnings will show up down here in the console area so oops we have to initialize function first initialize function there we go one of the reasons why I like RStudio is that they have as you can see they have four quadrants soon enough you'll see what goes here surprise this is where you can just enter code and run it immediately this is where you can store code and then run it all in one chunk and this is how you run it as you saw this button this is your environment it's basically a place where you can see all of your variables and what all their values instead of having to type it into here you can type it into here see the numbers match so I told you this is the one for Dodgers 101 or this is .6 so 102 wins expected B the one I said was for the Red Sox 102.89 so that's 103 so that's one win separating them now that we've taken into account dominance and as you'll remember this is a differential of 17 so here is I promise I was going to show you what goes here so I will come through on that so as I said there are a few blocks of code so this is putting more variables there we go thank you very much sir so this is the raw winning percentage that I talked about so here I talked I included some of their the competition that the Dodgers and Red Sox beat to get to the World Series this is Brewers and Braves to the Dodgers beat Yankees and Astros to the Red Sox so as you can see there is a sizable gap here now I guess now this is going to be the Pythagorean what happened to that gap it's gone mostly mostly yeah that's that's one deep exploration that was made to to kind of differentiate luck and dominance now yeah there's something to be said about finding ways to win on a nightly basis even if it's a close game but nonetheless this is a measurement taken to demonstrate dominance so yeah I did the math for you down here alright now we're going to get into our case studies I referenced earlier we're going to talk about claims of media make and we're going to analyze them not necessarily refute should? Max Muncie Bat over David Freeze ok so situation is game one there Dodgers were down by one is actually one two no I was two three but down by one top of the fifth there are two runners on there's runners on first base and second base out Dodgers are batting the Red Sox starter left the game for a reliever who's a right handed pitcher so he could have batted the manager David Roberts he could have batted either David Freeze a righty or Max Muncie a left hander so in the actual game he batted I say actual games we're about to go to a fantasy land soon he batted David Freeze he struck out now they did tie the game in the inning but they lost and they couldn't more so the criticism was according to CBS sports they thought that clearly Muncie was a better option clearly ok we'll see about that ok so this is what we're going how we're going to approach this study so as I told you before the RE-24 statistic which is what is right in front of you it assigns values what does it take situation on the bases so basically like is there nobody on runner on first runner on first and second and number of outs 0 outs, 1 outs, 2 outs 3 outs basically on average from that point on on average how many runs are scored in that inning so if that doesn't make sense whenever there is a point in time in an inning where there is a runner on first only on first and 1 out from that point on till the end of the inning the offense is expected to score 0.509 runs that's the average so this is in red because this is the situation we're analyzing as I said there's runners on first and second there are no outs so on average dodgers are expected to score 1.437 runs and obviously there's 0s for 3 outs 1s for 3 outs innings over no runs you do need to take that into account and I'll show you why in a second I'll show you why now so for the runs expected added that a player adds for each at bat simple formula it takes the run expectancy number at the end minus the run expectancy at the beginning plus the amount of runs that scored on the play some examples so in the situation the initial was it's actually 1.437 fan graphs I recently found an updated version of fan graphs updated from when I first learned about it in cyber metrics so if the batter were to strike out let me actually go back so that you can see the table so if the batter were to strike out it would be first and second one out 1.884 so it would be minus 1.437 which is the initial no runs score when you strike out so then this it would be a negative runs negative runs added if it would be a home run the resulting situation would be there would be no outs and then there would be no beyond base home runs clear as basis 0.481 0.481 minus again the initial but if you hit the home run three run score so when you do the math it would be 2.044 added deposit and screen so now we're going to play a little game we're going to take I took statistics from basically statistics from David Fries this is 2018 season and Max Muncie's 2018 season so we're going to simulate 100 played appearances of outcomes for each player randomly selected that's going to be one game and then we're going to do 10 games if one player scores 7 like win 7 games I'm going to declare that player victorious and say that's who Robert should have gone with if not then I'm going to say that it is too close to call so I'll say that it is Robert would have been fine with either player so first I'm going to be clearing the plots because there will be a lot of new stuff coming your way ok so and that's going to be keeping track of how many games played so we have to initialize it freeze score Muncie score that's going to be keeping track of how many games won that will not reset freeze count Muncie count that is the art of basically run expectancy added for each player after each game those will be reset and then here these are my basically the list of where I'm going to choose the potential outcomes from and the probabilities are based on their individual statistics so basically David freeze and all of his played appearances he had 9 walks or hit by pitches those will result in the same outcome basis loaded no outs although a professional player will tell you that a walk and a hit by pitch is different if one of them hurts much more so these are the assumed scenarios so if it strikes out same same one two one out no runs as I said if it's a walk or hit by pitch basis loaded no outs if it gets a single this is where it gets complicated I put a 50% chance for basis loaded no outs 50% chance for one runner comes around to score and there is first and second it's a double 50% chance that there is that one run scores and that there's a runner on third and second still no outs and the other potential outcome is a runner on second no outs but two of them come around to score triple the batter be at third to run score home runs rerun score grounds to double play there will be a runner left at third or there will be a runner left at first and for just a normal out this is only for ground balls can be assumed that it's just the runners on base they where they are but if it's a ground ball he could advance the runners hence the third and second or maybe not or maybe the runners initially at second will be out on his way to third so now simulation again new controls are they're fun but having never used them before a little unwieldy at the beginning in case you're wondering how to comment and I'm going to do a comment here so that we can at the beginning we can run one simulation at a time it's just a hashtag so it's a while loop for ten simulations but I'm going to walk us through like the first one one and two simulations so just a quick through the construction of my loop so it's a four loop one in a hundred so it runs a hundred times and if it gets a K or a strike out then this is the run expectancy added this is the run expectancy added they're all precalculated based on that formula that I told you about and on those assumptions I just told you about when I said how with a single there could be multiple different outcomes this is how I count for it so there's a list of the two calculated run expectancies added for both possible outcomes and it just randomly chooses one so it's completely random when it hits a single whether or not the leading runner will come around the score or not and really there's a lot more different complicated outcomes that could happen this is very much a simplistic approach because what could happen is that base running mistakes those happen, those are killers honestly that's the construction of my loop now we're going to run the first one we've got to initialize everything and last note as I said the count has to be reset after each run so that's why I have it right here okay right here you can see in this first game Max Muncie had it expected run runs expected added of 12 and a half and freeze had nine so yeah Muncie has one freeze to zero and then for visual representation of such there you go and then after one trial and again that will update time so I've highlighted everything I need to for the second run so I'm just going into wow this is quite a lopsided result this time as you can see down here freeze had a negative Muncie has once again great performance so I think you get the point so I'm going to uncomment and we are going to do the rest of the loop and then as you can see while 10 is greater than N so as I said N keeps track of the game so basically and this will tell us when N is 10 when 10 games will be played will stop so as you can see on here Muncie won seven to three this is the result of the last run so I so we have our answer for this right no the whole what CBS Sports is talking about is that it was basically taking into account that the pitcher was a right handed pitcher after all a pitcher who left was a left handed pitcher pretty good one Chris Sayle but anyways right handed pitcher so don't we have to take that into account and for just a visual representation this is how left handed hitters and right handed hitters do against right handed pitchers so I have two stats here batting average straight forward hits over OPS not that's report the basic in a nutshell it's on base percentage basically when you get on percentage of times you get on base the amount of times you get on base divided by a number of plate appearances so be walks hits and hit by pitches over at bats hit by pitches walks and sacrifices basically when you get out so that the player on base can advance flugging in a nutshell is bases for at bat not hits for at bat bases for at bat so as you can see doubles are weighted triples are weighted even more most heavy so in the creation of the OPS a basic math rule is violated you're adding fractions with different denominators I've read an article that pointed that out but as it turned out it works so that's why they get away with it so I included two lines here so basic the purpose of the lines is specifically for those in the back so that you can see if differences between two bars are not evident so that I can highlight the differences so one in this aqua marine color yes does have very detailed colors actually I'm dodging below that I like this shows batting average as you can see it's very close but left handers do have an advantage and OPS the violator of elementary math it has more of an advantage in favor of left handed hitters so everything is going maximum these way now but again just to confirm it I did the exact same game I replicated it the only difference is this time the stats are these players stats against right handed pitchers specifically these are all from fangraft really cool website there's a split tool so you can just say against right handed pitchers that's where I got these from so I have to initialize everything so I already walked you through the game so this time this time we're just going to just do the whole loop from scratch so again this is against right handed pitchers specifically as you probably expected after our previous analysis muncie 1 again this time 8-2 these are the results of the trials that I made you skip wow david freeze 1-1 I think you all know this is coming but I think cvs sports is right should richhill continue case 2 in about 11 minutes we will have a question answering session I'm really sorry yeah this is this is a this one got more attention than the freeze muncie game 4 dodgers are up 4 at the top of the 7th there's one out there's a one out first richhill has just completed 6th and 3rd innings masterfully and he's fresh off the strike out of red sox head air edwardo nunez but that came after walking about her so david roberts decided to take richhill out of the game and put in a reliever named scott alexander it didn't turn out well taking the red hot star out of the game turning it to the bullpen the bullpen gave up 9 runs and they lost and dodgers lost part of that decision i think was influenced personally i think was influenced by the fact that the opposing manager left in his starting picture potentially too long watching and everybody watched as that picture imploded to give up a full nothing lead so if you ask me i think that's what influenced the decision but yeah la time this time roberts pitching change flops for dodgers in game 4 okay we're going to go on a little math break you've probably heard of a normal distribution before 60% of the data is within 1 standard deviation 95% of it is within 2 standard deviations 99.7% is within 3 what we're going to do first i'm going to see this right here is the data for all the innings pitched by world series starters whose team won the game since 2015 not necessarily the winning picture but of all the pitchers who started for the team that ended up winning the game so you have the first need to initialize there are some warnings but it did initialize and i have my yeah my environment here wonderful environment to show me that didn't initialize so basically we're going to perform statistical analysis so the maximum number there was a picture who pitched the complete game that was actually back in 2015 and i chose 2015 because that was the beginning of a trend in the MLB more home runs more strikeouts our pitch speed has been actually been changing for years but that's the innings pitched by starting pitchers and pitchers used it's all gone down managers are more in favor of calling the bullpen frequently to get favorable matchups that's why the only complete game was all the