 I would like to introduce my team members, that's Akshit, who is in the Optics subgroup and also 3JS part. Anupam has done 3JS and Optics also. Sachin is the tester and the blender integration part. Prakati has handled all the backend part in Java and me and Sneha has done the mechanics part and Rishabh is the front-end developer of our team. So this is the outline of our presentation. First I will talk about the objective of our project, then the technologies that we used to develop the framework that we have created, then the demonstration part, then the numbers and metrics involved, then our learnings and challenges and the future scope of our project. So the main objective of our project was to develop an animation creation framework which is interactive and easy to use as most of my team members are from Software Quota who struggled to create animations while participating in the Software Quota challenge. Initially they spent a lot of time in learning what is 3JS, what is PyLibrary and read its complete documentation. Then they were able to create the animations by writing the code for object creation, object selection, drag and drop, user control and everything which is required to create animations. Now as we all have that experience, using that experience we tried to build a platform which makes the process of creating animations much simpler by reducing the number of lines of codes that user has to provide for creating any animations. And as an application part I would say that our platform fills the gap between the graphics person and the software person because a graphics person can create better scenes than a software expert but a software expert can create much better animations by writing better code. So our framework is flexible to combine both the technologies. Now these are some of the technologies that we used in our project. 3JS which is a JavaScript library for creating 3D animations. For database part we used MySQL, for backend Java and for 3D modeling and making some advanced objects we used Blender and for the front end part we used HTML, CSS and Bootstrap. Now for the demonstration part I would like to invite Anupam and Akshit. So we are going to show a video demo because of short of time. We are going to create an animation through our framework. This is the main page. We are going into category mechanics, the panel, the settings. These are the basic features we have. Change theme, choose objects, animation code editor, drag and drop control, concept editor, user control, static code editor, save progress, save as and write. You will see the usage of these along by making an animation by an example. So what now user is doing is setting the background. It just gets easier by just clicking. He can change the background while in the 3JS library you just have to write tons of lines of code to just create this animation while we have provided an interface where he can click and get an animation. For this we have choose objects. Here we can drag and drop an object and it creates a 3JS object while in 3JS you have to write a code for this object also. So here we can change the color of the object. For this also in 3JS we have to write codes and all that stuff. We have removed that feature for writing the code. We have just provided a graphical interface where he can change it very easily by changing the opacity. Like he can change material. There are different kinds of material in 3JS provided which depend like this is a wireframe material. You can see the object in a wireframe material and for this also we have to write codes in 3JS while we have provided a simple user interface. Right now we cannot see the object is showing black because we have not added the light. For form material to show we have to add lights to the scene. Now we are going to add light. So here we are adding the light. We can change the intensity, color and anything we want to create how we want the scene to look. We can have 4 to 5 number of lights, a spot light, a point light and different kinds of light. We can change intensity, how they are going to look. You can see the shining effect around the ball of the ball to create a more realistic effect in that. For all this stuff in 3JS what we have done in our software quota we have to write a lot of code just to change this, just to set up these lights. We tried to remove that part by just providing a GUI setup. So we can change the radius of the ball. So we have chosen a ball. Now the user is choosing a wedge system and changing the color like we change in the ball panel. So this is how he can create scene by just dragging and dropping. He don't know how to write a code for this. So here he created two wedge system and a ball. So now we are going to write the code for the animation part for what basic logic of physics is for defining the variables like gravity, how the motion will happen, all that stuff. We are going to define variables like gravity and all that from where to start the motion. For this, the software people just have to write the code for the motion. So here we are writing the code, basic code for the animation required logic, basic logic. So this is another animation code where the animation code for the motion is written. So the user is defining the logic how the motion is done by the effect of gravity on wedges. Now you can see by the logic which user provided the motion of the ball is happening. We can add user controls. These user controls are for changing like we want to give user more control over the objects. Like we want the user to be able to change the gravity of the surrounding space while he is experimenting. These user control will be shown when the user clicks on run animation part. So there was user control where we provide user to control the object like we are surrounding or changing the properties of the objects. That's why what 3JS provides us is to control the objects. Like we can create the object in blender, but the animation more interactive way that 3JS provides. We have incorporated that also. The creator of the animation can define what a user can change in this. He has defined that he can change the gravity of the object. So that was the save. He saved the object. Now we are going to see it on our dashboard. These are the saved experiment list. We are going to show it on our live site. The save experiments. So this is our main site in Shiksha website. So when the user runs he gets the control what he had it at the creation time. Like he can change the gravity to 15.7 rather than 10. So the motion of the ball moves according to that. You can add display panels, what is the speed and everything to make it more interactive manner. Like because physics cannot be learned in animation. It's more about experimenting how things change. So we tried to implement that. What was the property changed when you just showed the live one? It was gravity. The gravity, okay. But the motion was not showing the actual way the gravity looked. For example it was slow on the slope. It was fast on the horizontal field and again it was fast on the ascent. So that is kind of anti-gravity. What was happening? No sir. What was there was the logic written for that code was when a ball is dropped from this edge at a corner. So the logic was still continuing about that. So in between the things were changed. Yeah in between but the initial logic but that was the problem of the logic. Initially if you the logic was written by the developer. He can write any logic he wants. If you find... Yeah can you just open that? Yes. Is this default gravity? Yes sir. Okay. Yeah so see this on while it goes up it speeds up which is not possible right? No sir. See it just gets a push from somewhere and then it just goes up. Sir actually this might be the problem with the screen of this laptop because in this laptop we define the parameters as it has a white screen. In this laptop the screen is not that white. Yes sir lag. There is a lag. Yeah there is a lag. Because I think in laptop it's working fine. No no the lag I can understand but that lag cannot be separate for horizontal movement versus diagonal movement. It has to be uniform everywhere. The change of speeds are slightly odd. I think so. It can't go just a push cannot happen to this thing. So whatever it is our framework provides a way where user can write the logic. There might be a problem with the logic we have. So basically Baal is following what user wrote about it. So yeah that's what I'm asking is it default gravity? No sir. There is no default. There is no default. User can change it. Okay my point is that when you have such templatized version like you started from some interface where it said run. Yes sir. When you start run the good idea is to have it at default which is the default gravity which will happen in real life. It should follow something as default because how will the user understand what is going wrong here. They'll only visibly see things wrong here but something should be shown as default and obviously this is a great option to change and show according to the user perspective that they want to change anything perfectly fine. Usability is great. The problem is that learnability will get hampered if it is not showing the default any time. So basic thing is we provide a framework where user can write what default value he has to show what default what gravity does. He defines what gravity does. So basic thing is the user defining the experiment might done it in a wrong manner but he can done it a right way. We just provide a framework where he can do anything. I understand that. I'm saying yes sir. No it's just a demo he can create anything from that. We're just providing a demo. Yes I know. It is like for example I open any word processor by default it will have a black as a text input thing. Obviously I can write yellow text also but if you start showing me a document with his white text on a white paper I will not see anything. So I'll think that nothing is getting written and I'll start contemplating whether I am writing or laptop is not showing me or what is happening. So there has to be something called default and then you can give an option saying that now you change whatever parameters you want and see the results. That is fine. The thing is we cannot we didn't simulated gravity what is gravity. Our software does not know what is gravity. We just provided a framework where user defines what is gravity. What is you are showing what you are getting there is what user defined gravity is how the things will change when he changes the gravity because we cannot simulate whole gravity because we have that library fizzy.js which simulate gravity and all that stuff but it is very it takes very high computational power which loads your computer and it does not work very good. The graphics were there were very slow we tried that. So no what have you defined here as a user. So we define a we wrote a equation. So what is that equation doing. Yeah so we have written actually the wrong equation that's why it's following a wrong path. So we have we are not creating a physics engine because that's not practical for us. So we are just providing a framework for user to create animations. See all this whatever you are creating is for some users and your aim is to teach physics in a better way right. Is that your objective at some point at a very global level. So obviously I like the software promise you are showing in this the way you can do it but it should not be at the cost of learning of physics right. So if you give something which is wrong as a default and then not even mention that then it will be it will be very difficult for people to learn the right things. No I will I will just answer that their objective is not to teach physics. Okay their objective okay their one of the specification was something called E EJS easy Java simulations which was built by some professor in Europe somewhere I think Holland Netherlands or something okay that claimed okay that a teacher physics teacher can create animations okay it was based on that okay. So he had these objects okay which which are there and I can attach an equation x of that object is equal to this y of that object I can define variables okay and use the variables in the equation okay. So that is exactly what they are doing so they are defined a variable called gravity okay they have written the equation wrong so it is a physics teacher who is wrong not their software okay. So basically I am sure they have written the equation wrong all that thing is it works on that thing is not there because consistently showing that it it speeds up on the way up okay that that is consistent so the equation is wrong okay that doesn't mean the framework is wrong the framework I will see the basic idea behind this is we have used my library okay to admit people through software quota okay now the those people had to work with 3js to create scenes okay and a lot of comments whether this does not look good you increase that and but that is not what we want to test when we admit people we want to test their programming skills okay so according to me programming skills are there to capture the physics equation okay to capture the boundary condition when the ball hits that then the equation has to change actually it doesn't have to change but collision detection etc that is what we want to test. So ideally what we will do next year okay if we want to run the software quota again okay we will up to their scene creation okay we will supply okay so the animation because every every stage has got a save okay so we will we will supply something with this okay and we will ask the user now you supply the animation code and you supply the user control code and then I get the animation okay so the basic programmer's job is now limited to animation code okay as well as the user control what are the user control which we specify okay so that is ideally they also have experimented with that okay ideally we may not even use 3js to create the scene okay so we can use blender to create the scene okay and and give it to 3js as a json file okay so I get this thing and with all the colors and all that okay and I'll leave it to a software quota people now you simulate that the there should be control over gravity there should be control over the angle with they have not done I can drag and drop the angle so this is what I'll specify and all this all the software person has to do is write their animation code check it and that's it so that is the basic idea behind it okay so create a framework by which I can test or I can assign a job a programming job not a visual job not a graphics editor job the separation was the thing okay so in the next day software quota probably we'll have we'll use this if it is working okay and ask them to only supply the animation code as well as the user control code so separation of the graphics portion and the programming portion was their objective so we have another section called optics the basic UI are almost similar he can set background and all that stuff we have done in mechanics so here he's changing the background in optics basic theme is like lenses mirror all all these objects can be reused because the equations are same we tried to animate it in a in a such a manner where user can add any number of lenses and he gets the where the position of images are because it follows equation and similar equation so we tried to change it like the user can click and change the focal length and anything of that so this is a mirror because it has very large focal length that's why you cannot see it right now so you can save it and view it again afterwards so this is what a mirror is this was a mirror convex mirror because it is very thin part if you increase the focal length there decrease the focal length you can see a spherical part also that was it now we will going to show how we integrate blender in our software so blender is one of the most popular 3d modeling and animation software available in the market right now the best thing about blender is it is open source and free to use for all so in our framework we integrated blender as it provides a high quality model and texture for free basically so we wanted to load objects from blender and use it in a framework to do this we started with making a human heart the thing about using blender object in a framework is we have to convert each object into dot json file and mr. Do was already provided a exporter for that so we just needed to create a human heart and if we if we want to animate in a framework we wanted to divide it in different pieces so we can control each of the piece of a human heart differently differently so if we can have the video you will have a more clear idea so what I am doing in this window is taking different objects and making it into one so that I can animate it differently on the three json so these are some arteries and veins so what I'll do next is I'll import these things differently into separate json's and I'll have it in my framework and then group it as one single object and all I'll export it with three json exporter now while doing it you must ensure that you select a face materials and textures because you need them in your scene using that we have uploaded the object into our database now we'll just show you how it looks and we'll create another blender using objects and we'll create another animation using the objects of blender so we'll add some lights so this is the heart and if you can see clearly there are different portions which are taken from different models and one thing about we can perform an open heart surgery as well so in this experiment we are going to take two models from blender and animate them we are setting the scene of course we need it I will take a table from a blender that's a free object available online now that's a sphere we are going to rotate a sphere just to show that our framework works and we can do anything with it we'll have some light okay I try to add some light weight but I was unsuccessful okay while while importing the blender object one thing that you it gives you a very powerful tool that you can animate it in our framework the thing with blender is when you render the animation it is saved as a video file so you cannot do anything with that you can only show it but we can edit it and we can do anything we want now I'll write the animation code for that sphere and I'll rotate it in all the directions and now you can see that it is rotating so this proves that our frameworks work for blender objects as well so we can create any number of complex animation in our framework too so this was all about blender part we'll okay have a blender file where there is animation like you said you can export it as video but you can also export it as a blend file now if that has animation can you why can't you just import that here okay sir the animation which I have worked with were one with a regular model which have some skeleton the animation what it is running and walking they were two animation embedded on that model so what we did is we exported it that dot json file and imported our framework it was able to do the running and walking but the thing is when you embed animation we cannot edit it further in our framework so that's why we prefer it exporting as a separate model so we can do anything we want will you be able to access the the bone information there like the rigging information so suppose we have attached bones here in blender and blender allows me to animate this based on the bone structure that I have defined and that is possible only in blender obviously because that's the software for animation now once you get into this tool you will be able to animate like rotation bounds and all that but if I want the bone to work like this where there is a series of bones and they should act accordingly and there are some limitations here will you be able to give those controls to me here sir actually do you lack of time hours or even to experiment with that you answer theoretically right now you don't have to show me demo of that will you be able to sir right now I won't be able to do that you won't be able to okay so you will be able to do transformations like place rotate move scale yes yeah that you have tried and that is possible yes and if you import a animated like walk and all that it is able to show me as it is but you are not able to edit it and the answer to that is because the thing which is making it move inside blender is something called rigging which is not getting transferred here so that rig information is not coming here therefore you are not able to edit it so maybe as a future where you can keep that if you can if you can study the blend blend file which has the rig information there that will help you in demystifying this gap right now which will enable you to also control the bones from here okay yeah dot blend has all the information okay you can also go to a website called sketchfab so that actually allows you to to do exactly what you can do here only thing it is not allowing you to edit things but you can upload a blend file on sketchfab and then you can see that animation from various angles which is right now happening here it's browser based and you can actually export that html and place it anywhere you can embed it in your own website and things like that can happen in fact the latest version of Sketchfab also allows you to upload your games there so i have i'm still exploring that that how if it it is user friendly there so i can play that game directly there i think that would be something interesting and you can also have a look at it because they are very vibrant website sketchfab thanks good work thank you sir now the blender pass is done we'll continue with our presentation i'll just make it as fast as possible oh these are some metrics we have covered two topics optics and mechanics lines of code approximately 11000 number of table data by 7 number of object 37 still counting what we have learned first of all we have learned how to work in a team and these are some technical knowledge vgs library database design web development blender of course now challenges phase integration part was very difficult to do solving bugs and we are still solving bugs blender integration of course and database designing because we didn't take any designing course before a future work so blender of course we can add more feature about blender in the future work now one thing is codeless framework so what we are offering right now is codeless framework for optics only because mechanics we cannot use anything there's a library called phygy dot here but it's too heavy to use in anything so cordless framework is what we can do in the future this will be all thank you everyone