Articles on ganimtron_10's Bloghttps://blogs.python-gsoc.orgUpdates on different articles published on ganimtron_10's BlogenSat, 08 Oct 2022 15:53:02 +0000Week 16 - Working with Rotations!https://blogs.python-gsoc.org/en/ganimtron_10s-blog/week-16-working-with-rotations/<h2>What did you do this week?</h2> <hr> <p>Last week my mentors noticed that each <strong>DrawShape</strong> has its individual <strong>rotation_slider</strong> which increases redundancy and complexity in setting its visibility on and off. Instead, they suggested moving the <strong>rotation_slider</strong> to <strong>DrawPanel</strong> and keeping a common slider for all the shapes.</p> <p>PR <a href="https://github.com/fury-gl/fury/pull/688">#688</a> does the above mentioned thing.<br> There isn't any visual difference as everything is as it was earlier, just the code was modified a bit to make it work properly.</p> <p>After this, I started working with the rotation for the <strong>Polyline</strong> feature. For rotating the <strong>Polyline</strong>, I implemented something similar to what I had did while rotating the individual shapes. Firstly I calculate the bounding box and the center of the shape, then apply the rotation to the points through which the polyline was generated.</p> <p><a href="https://github.com/ganimtron-10/fury/tree/polyline-with-grouping">Polyline:</a></p> <p> </p> <p style=""><img alt="" height="400" src="https://user-images.githubusercontent.com/64432063/193308748-6bc14acb-b687-4d88-9c41-12991186a104.gif" width="400"></p> <p>As we can see above the rotation seems correct but as earlier the shape is translating from its original center. This should be easy to fix.</p> <h2>Did you get stuck anywhere?</h2> <hr> <p>Instead of implementing the approaches for creating and managing the `Polyline`, I kept on thinking of various ideas on how I could do so, which wasted my time. I should have thought about some approaches and tried to implement them so that I would get an idea of whether things would work or not.</p> <h2>What is coming up next?</h2> <hr> <p>Working on<strong> Polyline</strong> to make sure everything works fine.</p>praneethshetty10@gmail.com (ganimtron_10)Sat, 08 Oct 2022 15:53:02 +0000https://blogs.python-gsoc.org/en/ganimtron_10s-blog/week-16-working-with-rotations/Week 15 - Highlighting DrawShapeshttps://blogs.python-gsoc.org/en/ganimtron_10s-blog/week-15-highlighting-drawshapes/<h2>What did you do this week?</h2> <hr> <p>This week I started with highlighting the shapes. As discussed earlier, I had two ways, but while implementing them, I found out both ways aren't that good to continue with.<br> The first way in which we thought of creating the scaled shapes in the background had an issue with the stacking. The border(blue rectangle) and the shape(grey rectangle) both seem to look like different shapes just grouped together as shown below.</p> <p style=""><img alt="" height="400" src="https://user-images.githubusercontent.com/64432063/192321622-964cef6e-f965-4a24-8dcf-0b899fe5e387.gif" width="400"></p> <p>While playing around with the second way, which was to add yellow color to the shape to make it brighter, it was difficult to identify which shape was selected. Also sometimes instead of making it brighter the addition of color created a new color which again confused the user.<br> After discussing these, issues my mentors suggested having a user-defined highlight color that will be shown whenever the shape is selected.</p> <p style=""><img alt="" height="400" src="https://user-images.githubusercontent.com/64432063/192326416-4454718d-1dda-4a13-9f97-07387a50a580.gif" width="400"></p> <p>Along this, we were also trying to integrate shaders to the Actor2D (i.e. the UI elements) but there were some issues with it. I used <a href="https://fury.gl/latest/auto_tutorials/03_shaders/viz_shader.html#sphx-glr-auto-tutorials-03-shaders-viz-shader-py">this</a> shaders example as a starting point and just replaced the <strong>utah</strong> actor by Rectangle2D actor. This program executed successfully without any errors, but it didn't give the required output.</p> <p>So instead of wasting time searching for how it is done, we thought it would be great if we directly ask in the VTK discourse forum. For this, I had to create a minimalistic pure VTK code. You can check out my code as well as the post <a href="https://discourse.vtk.org/t/how-to-connect-shaders-to-actor2d/9384">here</a>.</p> <h2>Did you get stuck anywhere?</h2> <hr> <p>No, I didn't get stuck this week.</p> <h2>What is coming up next?</h2> <hr> <p>Working on the rotation slider and the polyline.</p>praneethshetty10@gmail.com (ganimtron_10)Sat, 08 Oct 2022 15:48:41 +0000https://blogs.python-gsoc.org/en/ganimtron_10s-blog/week-15-highlighting-drawshapes/Week 14 - Updating DrawPanel architecturehttps://blogs.python-gsoc.org/en/ganimtron_10s-blog/week-14-updating-drawpanel-architecture/<h2>What did you do this week?</h2> <hr> <p>This week I continued updating the DrawShape and DrawPanel. </p> <p>So as we can see below, whenever we create, translate, or rotate the shapes on the panel, it sometimes overlaps the <strong>mode_panel</strong> or <strong>mode_text</strong> which are used to select and show the current mode respectively.</p> <p style=""><img alt="" height="400" src="https://user-images.githubusercontent.com/64432063/188268649-65ea24f0-3f46-4545-8e52-e07513a94b9f.gif" width="400"></p> <p>To resolve this, I created a PR <a href="https://github.com/fury-gl/fury/pull/678">#678</a> which moves the <strong>mode_panel</strong> and the <strong>mode_text</strong> to be on the borders of the panel.</p> <p style=""><img alt="" height="400" src="https://user-images.githubusercontent.com/64432063/188268804-949ec656-7da3-4310-ba8b-7e4f0281faa1.gif" width="400"></p> <p>Along this, there were some similar functionalities in the <a href="https://github.com/fury-gl/fury/pull/653">Grouping Shapes PR</a> and the <strong>DrawShape</strong> due to which some lines of code were repeating. To remove this duplicacy I created a PR <a href="https://github.com/fury-gl/fury/pull/679">#679</a> to move these functions to the <strong>helper.py</strong> file.</p> <p>Then I tried different ways of highlighting the shapes,</p> <p>1. To create a copy of the shape and scale it in the background so that it looks like a border or highlighted edges.</p> <p>2. Add yellow color to the shape so that it looks brighter.</p> <h2>Did you get stuck anywhere?</h2> <hr> <p>No, I didn't get stuck this week.</p> <h2>What is coming up next?</h2> <hr> <p>Working on these new PRs to get them merged. Implement a highlighting feature.</p>praneethshetty10@gmail.com (ganimtron_10)Mon, 26 Sep 2022 16:32:41 +0000https://blogs.python-gsoc.org/en/ganimtron_10s-blog/week-14-updating-drawpanel-architecture/Week 13 - Separating tests and fixing bugshttps://blogs.python-gsoc.org/en/ganimtron_10s-blog/week-13-separating-tests-and-fixing-bugs/<h2>What did you do this week?</h2> <hr> <p>This week I managed to fix the translation issue in PR <a href="https://github.com/fury-gl/fury/pull/653">#653</a>. This was happening because of the calculation error while repositioning the shapes. Now it works as intended.</p> <p style=""><img alt="" height="400" src="https://user-images.githubusercontent.com/64432063/187058183-840df649-163e-44dd-8104-27d6c2db87a9.gif" width="400"></p> <p>Also, the PR <a href="https://github.com/fury-gl/fury/pull/623">#623</a> got merged as now the tests were passing after the update.</p> <p>As we are now adding new features to the <strong>DrawPanel</strong>, the current tests are becoming bigger and bigger.<br> Due to this creating, debugging, and managing tests are becoming harder.<br> So to keep things simple, separating the tests to validate individual parts and features of the <strong>DrawPanel</strong>. This was done in PR <a href="https://github.com/fury-gl/fury/pull/674">#674</a>.</p> <p>Along this, there was a redundant parameter called <strong>in_progress</strong>, which was used to keep a check whether the shapes are added to the panel or not, but it was confusing, and discarding it didn't affect the codebase. So PR <a href="https://github.com/fury-gl/fury/pull/673">#673</a> removed that parameter and separated the two functions.</p> <h2>Did you get stuck anywhere?</h2> <hr> <p>Debugging the issue in PR <a href="https://github.com/fury-gl/fury/pull/653">#653</a> took most of the time this week. I had to manually calculate and check whether the calculations were correct or not. </p> <h2>What is coming up next?</h2> <hr> <p>Currently, the borders around the shapes are not actually the borders, they are the bounding box of that shape. So I have to find out some ways to highlight the shapes when selected by the user.</p>praneethshetty10@gmail.com (ganimtron_10)Fri, 16 Sep 2022 01:34:33 +0000https://blogs.python-gsoc.org/en/ganimtron_10s-blog/week-13-separating-tests-and-fixing-bugs/Week 12 - Fixing translating issues and updating testshttps://blogs.python-gsoc.org/en/ganimtron_10s-blog/week-12-fixing-translating-issues-and-updating-tests/<h2>What did you do this week?</h2> <hr> <p>I started with updating the tests for PR <a href="https://github.com/fury-gl/fury/pull/623">#623</a> as some of the tests weren't covering all the aspects in the code.<br> Previously I was just creating the <strong>DrawShape</strong> and adding it to the scene but now I had to analyze the scene to see whether they were properly added or not.</p> <p>Then I moved on to PR <a href="https://github.com/fury-gl/fury/pull/653">#653</a> to resolve the clamping issue. As you can see below, the shapes overlappes when they move nearer to the panel border.</p> <p style=""><img alt="" height="400" src="https://user-images.githubusercontent.com/64432063/187023615-d7c69904-4925-41b1-945d-b5993c20c862.gif" width="400"></p> <p>To solve this, I am thinking of calculating the center of the group and clipping it according to the panel, which may give us the required result. I tried doing the same, and it worked partially.</p> <p style=""><img alt="" height="400" src="https://user-images.githubusercontent.com/64432063/187023880-84e13dab-313b-49e4-9b06-df5465c9d762.gif" width="400"></p> <p>As we can see above, the shapes are kind of clamping but there's some issue with positioning. It would be good to go once this is fixed.</p> <p>Along this, I tried to integrate shaders with the <strong>Rectangle2D</strong> but there's something which I am missing. When I tried executing that program, it executed successfully but I am not getting the desired output. I tried debugging the code as well using the <strong>debug</strong> flag on the <strong>shader_to_actor </strong>function but still, it doesn't throw any error.</p> <h2>Did you get stuck anywhere?</h2> <hr> <p>While updating the tests for PR <a href="https://github.com/fury-gl/fury/pull/623">#623</a> the quad shape wasn't getting analyzed by the <strong>analyse_snapshot</strong> method. I tried various approaches to fix it, but it didn't work.</p> <h2>What is coming up next?</h2> <hr> <p>Merging the PRs <a href="https://github.com/fury-gl/fury/pull/623">#623</a>, <a href="https://github.com/fury-gl/fury/pull/653">#653</a> and working on the freehand drawing.</p>praneethshetty10@gmail.com (ganimtron_10)Sat, 10 Sep 2022 02:15:38 +0000https://blogs.python-gsoc.org/en/ganimtron_10s-blog/week-12-fixing-translating-issues-and-updating-tests/Week 11 - Creating a base for Freehand Drawinghttps://blogs.python-gsoc.org/en/ganimtron_10s-blog/week-11-creating-a-base-for-freehand-drawing/<h2>What did you do this week?</h2> <p> </p> <hr> <p>This week I tried to imitate the working of <em>vtkImageTracer</em>. Previously, I had created a small prototype for freehand drawing by adding points at the mouse position (which you can check out <a href="https://blogs.python-gsoc.org/en/ganimtron_10s-blog/week-7-working-on-rotation-pr-and-trying-freehand-drawing/">here</a>). As mentioned, there were some drawback of this method.<br> So to overcome these issues, I tried combining both methods. Considering points using the previous method and instead of adding points I tried creating lines between them which looks promising. Below you can see a demo.</p> <p><a href="https://github.com/ganimtron-10/fury/tree/freehand-drawing">Freehand Drawing:</a></p> <p style=""><img alt="" height="400" src="https://user-images.githubusercontent.com/64432063/186952329-636a0d81-6631-4e8d-9486-9a8c5e88a9a7.gif" width="400"></p> <p>While doing this, I started working on how I could efficiently draw the lines and smoothen them out. My mentors referred me <a href="https://github.com/rougier/python-opengl/blob/master/09-lines.rst">this </a>to learn more about constructing and rendering lines.</p> <p>Along with this, I updated a few tests and some small bugs in PR <a href="https://github.com/fury-gl/fury/pull/623">#623</a> and <a href="https://github.com/fury-gl/fury/pull/653">#653</a>.<br> ​​</p> <h2>Did you get stuck anywhere?</h2> <hr> <p>No, I didn't get stuck anywhere.</p> <h2>What is coming up next?</h2> <hr> <p>Enhancing the freehand drawing feature.</p>praneethshetty10@gmail.com (ganimtron_10)Tue, 06 Sep 2022 16:32:56 +0000https://blogs.python-gsoc.org/en/ganimtron_10s-blog/week-11-creating-a-base-for-freehand-drawing/Week 10 - Understanding Codes and Playing with Animationhttps://blogs.python-gsoc.org/en/ganimtron_10s-blog/week-10-understanding-codes-and-playing-with-animation/<h2>What did you do this week?</h2> <hr> <p>I started working on the PR <a href="https://github.com/fury-gl/fury/pull/645">#645</a> created last week and tested a few more corner cases such as What happens if the maximum value is exceeded?? What if we give a value less than the minimum value range??<br> Most of these worked as intended.</p> <p>Then I moved on to <em>vtkImageTracer</em>, I tried implementing this locally. It required an ImageSource on which the tracing was done. As you can see below, I managed to implement the pure VTK version of the widget. After this, I tried integrating this with FURY and besides the ImageSource all things were successfully handled by FURY.</p> <p style=""><img alt="" height="400" src="https://user-images.githubusercontent.com/64432063/185802405-b289dbc9-08a3-496a-8cc4-ef8c4d40bf60.gif" width="400"></p> <p>As per the suggestions from the mentors, I started looking at the implementation of the <a href="https://github.com/Kitware/VTK/blob/master/Interaction/Widgets/vtkImageTracerWidget.cxx">vtkImageTracer</a> to see how they manage the widget. My prior experience with C++ helped me a lot with this because the original implementation of vtk is in C++.</p> <p>Here, I found an approach similar to the polyline. They first grab the current point, check whether it's inside the area, and then use the last point to draw a line by calculating some kind of motion vector.</p> <p>Using the Animation Architecture created by Mohamed, I created a Bouncing Text Animation using UI elements to check the compatibility of the UI System with the Animation.</p> <p><a href="https://github.com/ganimtron-10/fury/blob/354e56338d197fe2a29b628e86a16ad7c7a845b5/docs/tutorials/02_ui/viz_ui_text_animation.py">Bouncing text animation:</a></p> <p style=""><img alt="" height="341" src="https://user-images.githubusercontent.com/64432063/185803066-70e320de-0777-478d-87bf-30767b02efe2.gif" width="400"></p> <h2>Did you get stuck anywhere?</h2> <hr> <p>Proper tutorials weren't there to implement <em>vtkImageTracer</em>, which took time to make it work locally.</p> <h2>What is coming up next?</h2> <hr> <pre>Working on the Freehand Drawing.</pre>praneethshetty10@gmail.com (ganimtron_10)Mon, 29 Aug 2022 14:02:27 +0000https://blogs.python-gsoc.org/en/ganimtron_10s-blog/week-10-understanding-codes-and-playing-with-animation/Week 9 - Grouping and Transforming Shapeshttps://blogs.python-gsoc.org/en/ganimtron_10s-blog/week-9-grouping-and-transforming-shapes/<h2>What did you do this week?</h2> <hr> <p>I started this week by creating a quick PR <a href="https://github.com/fury-gl/fury/pull/645">#645</a> for the UI sliders. The sliders raised <strong>ZeroDivsionError</strong> when the min and max values were the same. To solve this, I handled the case where the value_range becomes zero and then manually set the handle position to zero.</p> <p>Then I updated the implementation of the Grouping Shapes feature to support the translation and rotation of the shapes grouped together, as you can see below.</p> <p style=""><img alt="" height="400" src="https://user-images.githubusercontent.com/64432063/183248609-4281087c-c930-4141-907a-5a906732524a.gif" width="400"></p> <p>After this, I worked on the <strong>PolyLine</strong> and removed the extra point being added to the start of the <strong>PolyLine</strong> whenever a new instance was created.</p> <p style=""><img alt="" height="400" src="https://user-images.githubusercontent.com/64432063/183280803-5d7ae350-f080-478d-8a2f-a71460037ea4.gif" width="400"></p> <h2>Did you get stuck anywhere?</h2> <hr> <p>No, everything went well.</p> <h2>What is coming up next?</h2> <hr> <pre>Completing the PR <a href="https://github.com/fury-gl/fury/pull/623">#623</a> and <a href="https://github.com/fury-gl/fury/pull/653">#653</a>. Searching different approaches for implementing the freehand drawing.</pre>praneethshetty10@gmail.com (ganimtron_10)Thu, 18 Aug 2022 17:32:30 +0000https://blogs.python-gsoc.org/en/ganimtron_10s-blog/week-9-grouping-and-transforming-shapes/Week 8 - Working on the polyline featurehttps://blogs.python-gsoc.org/en/ganimtron_10s-blog/week-8-working-on-the-polyline-feature/<h2>What did you do this week?</h2> <hr> <p>This week I started working on the <strong>polyline</strong> feature. After a lot of investigating and trying out different things, I found a way to call the dragging event manually without any prior click event. VTK actually captures the mouse movement using the <strong>MouseMoveEvent</strong>. This event is then modified by FURY to only be called after the click event. So I added a new callback to track the mouse movement and set the current canvas as an active prop because it is required to capture the drag event happening on it.</p> <p style=""><img alt="" height="400" src="https://user-images.githubusercontent.com/64432063/182432684-abd015e5-b63d-4aab-b6a5-c8ba5dab3252.gif" width="400"></p> <p> </p> <p>I had to look for some ways by which we could make the icons look smoother. For this, I created an icon test file, which consisted of a set of icons of varying scales. Then on these icons, I used some vtkTexture methods discussed in the meeting, such as `<strong>MipmapOn</strong> and <strong>InterpolateOn</strong>. You can see some differences in the icons below:</p> <p> </p> <p style=""><img alt="" height="322" src="https://user-images.githubusercontent.com/64432063/182910990-fe4934ee-4201-4c3c-8ab4-1a4f7bfa9276.png" width="600"></p> <p> </p> <h2>Did you get stuck anywhere?</h2> <hr> <p>It took some time to get settled with all the things as my college reopened.</p> <p>I was trying to use shaders with the UI elements to implement the freehand drawing, but then my mentors suggested that I should look  into the tracer widget in the VTK.</p> <p> </p> <h2>What is coming up next?</h2> <hr> <p>Updating PR <a href="https://github.com/fury-gl/fury/pull/623">#623</a> to keep <strong>rotation_slider</strong> on the top of the screen.</p> <p>Looking into various vtk tracer widgets to see if we can use that to create freehand drawings.</p>praneethshetty10@gmail.com (ganimtron_10)Thu, 18 Aug 2022 17:26:09 +0000https://blogs.python-gsoc.org/en/ganimtron_10s-blog/week-8-working-on-the-polyline-feature/Week 7 - Working on Rotation PR and Trying Freehand Drawinghttps://blogs.python-gsoc.org/en/ganimtron_10s-blog/week-7-working-on-rotation-pr-and-trying-freehand-drawing/<h2>What did you do this week?</h2> <hr> <p>I continued PR <a href="https://github.com/fury-gl/fury/pull/623">#623</a> and fixed the displacement of the shape from its original position when applying rotation. This was happening because most of the calculations resulted in <em>float</em> values, but as the pixel position were integers we had to explicitly convert these values into <em>int</em>. This conversion rounded off the values and as we call this function continuously, each time the round-off would happen, the shape would get displaced.</p> <p style="text-align: center;"><img alt="" height="400" src="https://user-images.githubusercontent.com/64432063/181723334-ef9ec75d-d3bf-4b79-83bf-272545c4dd12.gif" width="400"></p> <p>To fix this, I converted all the calculations into integer calculations using floor division "<strong>//</strong>" instead of normal division "<strong>/</strong>".</p> <p style="text-align: center;"><img alt="" height="400" src="https://user-images.githubusercontent.com/64432063/181723783-352092aa-b7a7-4d13-8d26-553315c7e1aa.gif" width="400"></p> <p>The tests were failing in <strong>Ubuntu</strong> and the <strong>macOS</strong> because the mouse click event wasn't propagated to the line due to some unknown reasons. When investigating more about the issue, Mohamed suggested and helped me implement another approach to select the shapes. In this approach, we calculate the distance between the mouse click event position and each of the shapes, and if any of the distances is less than a specific value (which I call as limit value), then we send this current event to that element.</p> <p><a href="https://github.com/ganimtron-10/fury/tree/new-selection">New shape selection technique:</a></p> <p style="text-align: center;"><img alt="" height="400" src="https://user-images.githubusercontent.com/64432063/181730428-debd0617-dc32-4232-93ab-18ab903e92de.gif" width="400"></p> <p>I also tried to implement a freehand drawing mode by adding <em>Disk2D</em> as points. But as you can see below, there are many flaws in this.</p> <p>- First of all, we add many <em>Disk2D</em> objects which make it memory consuming process.<br> - If the mouse moves very fast, then we can see the gaps between points.<br> - Storing, managing, and transforming are difficult.</p> <p style="text-align: center;"><img alt="" height="393" src="https://user-images.githubusercontent.com/64432063/181731181-1f242c65-ccb8-4589-a2ed-40bfb3718cfd.gif" width="400"></p> <h2><br> Did you get stuck anywhere?</h2> <hr> <p>It was hard to debug why the tests were failing in <strong>Ubuntu</strong> and <strong>macOS</strong>. I tried investigating it by installing Ubuntu and got nothing, but then while implementing the new selection approach, it automatically got fixed.</p> <p> </p> <h2>What is coming up next?</h2> <hr> <p>Getting PR <a href="https://github.com/fury-gl/fury/pull/623">#623</a> merged and working on the polyline feature.</p>praneethshetty10@gmail.com (ganimtron_10)Wed, 03 Aug 2022 17:10:04 +0000https://blogs.python-gsoc.org/en/ganimtron_10s-blog/week-7-working-on-rotation-pr-and-trying-freehand-drawing/Week 6 - Supporting Rotation of the Shapes from the Centerhttps://blogs.python-gsoc.org/en/ganimtron_10s-blog/week-6-supporting-rotation-of-the-shapes-from-the-center/<h2>What did you do this week?</h2> <hr> <p>This week I started implementing a new feature to rotate the shapes from the center using <em>RingSlider2D</em>. I already had a <em>rotate</em> function that rotates the shape around its pivot vertex, so I updated it to support rotation from the center.</p> <p><a href="https://github.com/fury-gl/fury/pull/623">Rotation from center</a></p> <p style="text-align: center;"><img alt="" height="300" src="https://user-images.githubusercontent.com/64432063/180257893-196baafe-3c42-4152-b5f4-643b794176d2.gif" width="300"></p> <p>Then I tried to group the shapes to transform and modify them all at once. For this, I had to investigate more about the key press and release events. Then I managed to select and deselect shapes by holding the <em>Ctrl</em> key.</p> <p><a href="https://github.com/ganimtron-10/fury/tree/grouping-shapes">Grouping Shapes</a></p> <p style="text-align: center;"><img alt="" height="300" src="https://user-images.githubusercontent.com/64432063/180261113-39760cba-0343-41e7-924a-c741eb838f0b.gif" width="300"></p> <p>I improved the <em>polyline</em> feature by adding a separate class to manage the creation and manipulation of the lines but still; I was facing the same issue with the dragging event, which initialized a new object every time a new line was created.</p> <h2>Did you get stuck anywhere?</h2> <hr> <p>It was difficult to rotate the shape from the center because the pivot(or the reference point) of the shape wasn't consistent. As you can see below it changed depending on how the shape was created.</p> <p style="text-align: center;"><img alt="" height="400" src="https://user-images.githubusercontent.com/64432063/176093855-6129cc25-d03d-45ba-872e-c8d2c6329a1e.gif" width="400"></p> <p>To handle this, I created an interface between the actual pivot point and the center of the bounding box, which made it easy to calculate and set the positions.</p> <p>Also, I wasn't able to find a way by which I could manually call the dragging event without a preceding click event which was required for the <em>polyline</em> feature.</p> <h2>What is coming up next?</h2> <hr> <p>Complete <a href="https://github.com/fury-gl/fury/pull/623">Rotation from center</a> PR.</p>praneethshetty10@gmail.com (ganimtron_10)Thu, 28 Jul 2022 00:47:46 +0000https://blogs.python-gsoc.org/en/ganimtron_10s-blog/week-6-supporting-rotation-of-the-shapes-from-the-center/Week 5 - Working on new featureshttps://blogs.python-gsoc.org/en/ganimtron_10s-blog/week-5-working-on-new-features/<h2>What did you do this week?</h2> <hr> <p>This week I tried to create a base for some upcoming new features.<br> The first thing I updated was the Properties panel which I prototyped in <a href="https://blogs.python-gsoc.org/en/ganimtron_10s-blog/week-3-dealing-with-problems/">Week 3</a>.<br> So previously, it was just displaying the properties but now after the update, it is able to modify the properties(such as <em>color</em>, <em>position</em>, and <em>rotation</em>) too. This was a quick change to test the callbacks.</p> <p><a href="https://github.com/ganimtron-10/fury/tree/properties-panel">Properties Panel:</a></p> <p style="text-align: center;"><img alt="" height="300" src="https://user-images.githubusercontent.com/64432063/178412630-a0013a1a-3bfd-46fa-8445-fb5cff728e9c.gif" width="300"></p> <p>Then I worked with the bounding box to make it visible whenever a shape is selected.<br> For this, I used the existing functionality of the <em>Panel2D</em> actor to create borders around the bounding box.</p> <p><a href="https://github.com/ganimtron-10/fury/tree/bb-border">Bounding Box</a></p> <p style="text-align: center;"><img alt="" height="300" src="https://user-images.githubusercontent.com/64432063/178413769-5e4626d6-a207-489a-9789-59777c3e0522.gif" width="300"></p> <p>Also along with this, I managed to add the <em>polyline</em> feature on user interactions. This creation isn't that smooth but works as intended.</p> <p><a href="https://github.com/ganimtron-10/fury/tree/polyline">Poly Line</a></p> <p style="text-align: center;"><img alt="" height="300" src="https://user-images.githubusercontent.com/64432063/178414652-f47f3b25-a2c5-484a-bdbe-94f4ba1eff1f.gif" width="300"></p> <h2><br> Did you get stuck anywhere?</h2> <hr> <p>Handling interactions for the <em>polyline</em> was complicated. I wasn't able to invoke the <em>left_mouse_click </em>event, then as  I was trying to invoke the events internally, it started creating multiple copies of the same line.</p> <h2><br> What is coming up next?</h2> <hr> <p>I will be enhancing the <em>polyline</em> feature.</p>praneethshetty10@gmail.com (ganimtron_10)Sat, 16 Jul 2022 04:11:05 +0000https://blogs.python-gsoc.org/en/ganimtron_10s-blog/week-5-working-on-new-features/Week 4 - Fixing the Clamping Issuehttps://blogs.python-gsoc.org/en/ganimtron_10s-blog/week-4-fixing-the-clamping-issue/<h2>What did you do this week?</h2> <hr> <p>Phew!! This week was a tedious week for me as parallelly my End-Sem exams also started. So as usual I started from where I left off last week, <strong>The Clamping Issue</strong>. As per the discussion with the mentors, we decided to use the <strong>AABB bounding box</strong> method to calculate the bounding box around the shape and then reposition or transform respectively, as now we had a fixed reference point. So after doing some calculations with the mouse positions and the bounding box points at last, I was able to clamp all the shapes sucessfully.</p> <p><a href="https://github.com/fury-gl/fury/pull/599">DrawPanel UI</a></p> <p style="text-align: center;"><img alt="" height="473" src="https://user-images.githubusercontent.com/64432063/175497817-21974f43-d82b-4245-b93d-2db1081e6b04.gif" width="450"></p> <p>While testing these changes, I found an issue that whenever we just do a single <em>left mouse click</em> on the shape, it automatically translated a bit. As you can see below.</p> <p style="text-align: center;"><img alt="" height="300" src="https://user-images.githubusercontent.com/32108826/175790660-e4b05269-e8d3-44e9-92e1-336c0eeb34ca.gif" width="393"></p> <p>This was due to the difference between the global mouse click position and the canvas position, which was then fixed by converting the mouse click position to the relative canvas position.</p> <p>Along with this, I tried to add some control points using <em>Disk2D</em> for the shape so that we can use them later on to transform the shapes.</p> <p><a href="https://github.com/ganimtron-10/fury/tree/control-points">Control points</a></p> <p style="text-align: center;"><img alt="" height="300" src="https://user-images.githubusercontent.com/64432063/177264804-15e67715-b714-4e33-ac68-423375d81740.gif" width="300"></p> <p>Also, to enhance the visualization of the bounding box, I added a box border covering the shapes.</p> <p><a href="https://github.com/ganimtron-10/fury/tree/bb-border">Bounding Box Borders</a></p> <p style="text-align: center;"><img alt="" height="300" src="https://user-images.githubusercontent.com/64432063/177264077-a8859a96-e3f7-444c-9760-8b9b17542f0f.gif" width="300"></p> <h2><br> Did you get stuck anywhere?</h2> <hr> <p>No, Everything worked out fine.</p> <p> </p> <h2>What is coming up next?</h2> <hr> <p>Enhancing the control points to work perfectly.</p>praneethshetty10@gmail.com (ganimtron_10)Wed, 06 Jul 2022 15:18:14 +0000https://blogs.python-gsoc.org/en/ganimtron_10s-blog/week-4-fixing-the-clamping-issue/Week 3 - Dealing with Problemshttps://blogs.python-gsoc.org/en/ganimtron_10s-blog/week-3-dealing-with-problems/<h2>What did you do this week?</h2> <hr> <p>This week was full of researching, playing around with things, prototyping ideas, etc.<br> I started with last week's clamping issue and managed to solve this issue while drawing shapes by clipping the mouse position according to canvas size, but it didn't solve the problem with translating these shapes. I tried solving this using various approaches, but if one thing would get fixed, other things would raise a new error.</p> <p>Instead of spending too much time on this, I thought it would be great to switch to other work and discuss this problem with the mentors. So I started to create a basic prototype for the properties panel, which would be used to manipulate different properties of the selected shape.</p> <p style="text-align: center;"><img alt="" height="315" src="https://user-images.githubusercontent.com/64432063/176094716-6be012b8-36c5-43e7-a981-612dbd37ab09.gif" width="300"></p> <p>But then the question arises <em>How to efficiently take data from the user?, Which data format would be easy to compute and best for user experience?</em> and so on.</p> <p>Alongside I was trying to create polylines but whenever I wanted to start the creation of the second line the dragging event wasn't triggered as each dragging event required a left mouse click event associated with it. <br> I tried to do that manually but it didn't work.</p> <h2>Did you get stuck anywhere?</h2> <hr> <p>As I mentioned when I translated the shapes it would go out of the canvas bounds. Here the problem was with the reference point by which I was calculating all the transformations it changed depending on various cases as shown below.</p> <p style="text-align: center;"><img alt="" height="400" src="https://user-images.githubusercontent.com/64432063/176093855-6129cc25-d03d-45ba-872e-c8d2c6329a1e.gif" width="400"></p> <p>This became more complex when working with a line because then the cases again differ depending on the quadrant in which the line lies.<br> I worked around and tried to compute the bounds but it wasn't getting updated as the shape transformed.</p> <h2>What is coming up next?</h2> <hr> <p>Solving the clamping issue to restrict the shape's position to be in the canvas boundaries.</p>praneethshetty10@gmail.com (ganimtron_10)Mon, 04 Jul 2022 14:11:52 +0000https://blogs.python-gsoc.org/en/ganimtron_10s-blog/week-3-dealing-with-problems/Week 2 - Improving DrawPanel UIhttps://blogs.python-gsoc.org/en/ganimtron_10s-blog/week-2-improving-drawpanel-ui/<h2>What did you do this week?</h2> <hr> <p>This week I had to refactor and make my code cleaner along with some bug fixing, I started by adding tests and tutorials so that my changes could be tested by everyone. Then I separated the mode for <strong>selection</strong> so that it would be easy to select an individual element and work along with it. Once the selection mode was complete I started with the <strong>deletion</strong> of the elements.</p> <p>Now, as we have various modes the question arises, How do we know which mode is currently active and how would users know it?? For this, I took references from some other similar applications and came up with an idea to toggle the icon of the selected mode whenever the mode is selected/deselected as we had individual buttons with an icon for each mode. </p> <p><a href="https://github.com/fury-gl/fury/pull/599">#599</a></p> <p style="text-align: center;"><img alt="" height="315" src=" https://user-images.githubusercontent.com/64432063/174710174-87604e78-e563-458d-8db7-28941301b02c.gif" width="300"></p> <p>Along with this I also started to learn how to access key events so that in near future some keyboard shortcuts can be added.</p> <h2><br> Did you get stuck anywhere?</h2> <hr> <p>No, Everything went well.</p> <h2><br> What is coming up next?</h2> <hr> <p>In the current version of the <em>DrawPanel</em>, the shapes can be created and translated beyond the canvas boundaries, so we have to clamp the positions according to the canvas.</p>praneethshetty10@gmail.com (ganimtron_10)Sat, 02 Jul 2022 08:49:02 +0000https://blogs.python-gsoc.org/en/ganimtron_10s-blog/week-2-improving-drawpanel-ui/Week 1 - Laying the Foundation of DrawPanel UIhttps://blogs.python-gsoc.org/en/ganimtron_10s-blog/week-1-laying-the-foundation-of-drawpanel-ui/<p>This week we started with our first technical meeting in which the weekly tasks were assigned. So I had to start with some background or canvas and draw a line using mouse clicks.</p> <h2><br> What did you do this week?</h2> <hr> <p>I started with a simple <em>Panel2D</em> (which is basically a movable rectangle on which we can add other UI elements) as a background and then assigned its mouse click callback to print <strong>“Clicked!”</strong> to verify the event triggering.</p> <p>Then I modified the event callback to create a <em>Rectangle2D</em> at that current mouse position(Now you would ask, Why <em>Rectangle2D</em>?? We wanted to change the width of the line, which wasn't possible with the regular line). This would create a rectangle at that point but it had size.<br> So I had to then calculate the distance between the first point where the mouse was clicked and the current position to resize it accordingly. </p> <p style="text-align: center;"><img alt="" height="337" src="https://user-images.githubusercontent.com/64432063/174661567-76251ce9-380f-4a41-a572-65865d028a9c.gif" width="400"></p> <p>This thing creates a Rectangle, not a line. So I had to think of some other approach.<br> The first thing that came to my mind was to keep the width of the rectangle constant and apply some rotation to the rectangle according to the mouse position and this worked!</p> <p style="text-align: center;"><img alt="" height="355" src="https://user-images.githubusercontent.com/64432063/174661632-98e1c4ec-31a2-4c4d-8e52-7bf2a47592c7.gif" width="400"></p> <p>As previously we created an interactive rectangle(unintentionally), I thought it would be great if I could add different modes for creating different shapes(ie. line, rectangle, circle as these shapes already existed in the UI System).</p> <p>Considering this I implemented a class to create and manage these shapes and a panel to select which shape is to be drawn along with a <em>TextBlock2D</em> to show the current mode.</p> <p><em>DrawPanel UI:</em></p> <p><a href="https://github.com/fury-gl/fury/pull/599">PR #599</a></p> <p style="text-align: center;"><img alt="" height="432" src="https://user-images.githubusercontent.com/64432063/174661680-8a5120ff-ec88-4739-945b-b87074f9742b.gif" width="400"></p> <h2><br> Did you get stuck anywhere?</h2> <hr> <p>I was facing issues with implementing the rotation. I scanned the utils to find some method to do the same but there wasn't any for <em>Actor2D</em>. Then I read some docs and tried out various functions.<br> At last, I decided to implement it by the most general method which is to calculate the new rotated points by multiplying them with the rotation matrix and that seemed fine for now!!</p> <h2><br> What is coming up next?</h2> <hr> <p>Deletion of the shapes is to be implemented along with tests and tutorials. </p>praneethshetty10@gmail.com (ganimtron_10)Wed, 29 Jun 2022 05:23:39 +0000https://blogs.python-gsoc.org/en/ganimtron_10s-blog/week-1-laying-the-foundation-of-drawpanel-ui/My Pre-GSoC '22 Journeyhttps://blogs.python-gsoc.org/en/ganimtron_10s-blog/my-pre-gsoc-22-journey/<p><big><strong><span style="font-size: 16px;">Hello Guys!! I am Praneeth Shetty, currently pursuing a Bachelor of Engineering in Computer Engineering, and here is my journey from where I started to the selection into GSoC22.</span></strong></big></p> <p> </p> <h2>The Beginning of Programming</h2> <hr> <p>My programming journey started way back in 7th std when we had a subject called Information Technology in which the last two lessons were based on HTML and Javascript. I loved to create simple pages in HTML but was struggling to learn Javascript as it felt a bit complex at the start.<br> I would practice these programs in our computer lab whenever we would have our practical lab (once or twice a month).<br> Next year I received a laptop from my cousin's brother(which I still use). While setting up the things he started enquiring about my academics and asked me to create an HTML code. He was happy to see that I could do that so to explain to me the usage of javascript he created a small program. He executed it and gave it to me, where it was written: <strong>“Enter your Name?”</strong> I typed Praneeth and pressed Enter. A new page was loaded with a Text stating <strong>“Hello Praneeth!! How are you??”</strong> I was amazed to see the output.<strong> How could that machine know me and greet me?? Is Javascript such a powerful tool?? Can I make the computer talk using Javascript??</strong> These questions flooded my mind. That day I realized that, If I had a good command of Javascript, I could control the whole computer and can make it do whatever I want. Because of this, I started giving more attention to Javascript.</p> <h2><br> Interest in Game Development and Animation</h2> <hr> <p>Around one and a half years after this, I was able to code basic javascript programs. During my vacation, while I was searching for a gameplay video on Youtube, A video titled “How to Make a Game” by Brackeys grabbed my attention and made me click on it. I watched the whole video but was unable to understand most of the things ie transform, rigid body, mesh, collider, etc. But it generated an internal feeling that I can also create a game. I tried to replicate the process in the video but when I went on to the Official Website of Unity(Game Engine) the whole package size was around 1.5 Gigabytes which was a huge sum at that time(the time when 2G ruled and 100 Megabytes was for 10 INR). So I was unable to work on it. But still, some unknown inspiration motivated me to watch the whole <strong>“<a href="https://www.youtube.com/playlist?list=PLPV2KyIb3jR53Jce9hP7G5xC4O9AgnOuL">How to Make a Game</a>”</strong> playlist of 10 videos. As I moved ahead some concepts were getting cleared and I had a surface-level idea of how to make things work in-game(Not how games actually worked). As I was pretty much immersed in game development my feeds started showing “How to create a 3D character”, and “How to Animate” videos which led me to discover Blender, 3Ds Max, etc. animation software.<br> I downloaded Blender as it was a lightweight free package and started messing around with things in it. But after a few months, Blender made some remarkable changes and brought version 2.80 which required a few system specifications which my laptop didn't satisfy.<br> By this time I used to spend some extra hours in my College learning Unity and created my first Game which was an exact copy of the Brackeys Game Series. I was very happy to successfully create a game all on my own and used to think about what all new features can be added to it.</p> <h2><br> Intro to Opensource</h2> <hr> <p>While finding alternatives to Unity and Blender, I found a lightweight software called <a href="https://godotengine.org/">Godot</a> and I was surprised to see the whole game engine was just around 100 Megabytes(which compared to Unity and Unreal is 10/20 times smaller). I tried searching about How and Why is Godot so Small and one of the reasons I found was, that it is open-source software. I had heard this term before while working with blender but still was unable to clearly understand what it is. Another answer I received is an extended application of the previous one which stated most features are implemented from scratch by various contributors in open source software whereas other big software libraries are used a lot for very minimalistic features too which makes it dependent and bulky. Around this time I had also switched to Python and was working on some mini projects and games using it. It also helped me in working with Godot, which has its own language called GDScript which resembles python.</p> <h2><br> GSoC - 21</h2> <hr> <p>As I was drowning in the oceans of Open Source, I read some blogs which mentioned some of the programs and events related to it viz. Google Summer of Code (GSoC), Hacktoberfest, GirlScript Summer of Code(GSSoC), etc.<br> I was excited to participate in these events but wasn’t getting proper guidance. I used to watch interviews and best practices for these events due to which I found out that for GSoC we have to select the organizations and then apply and this would be the basic flow of the program. So taking this into consideration I started searching for organizations on GSoC archives.</p> <p>Firstly I was looking for any Javascript-related project as I had better command of it than python and there I found out about p5.js which was a creative coding library. I forked their repo, cloned it, and then tried to build it on my local machine but after many attempts, I was still unsuccessful to build it locally. I raised a question in their community and also mailed an old GSoC student but they too were unable to solve the query. This disappointed me a lot and kind of I was going to end my open source journey here but just thought of giving it a try again. While searching through the organizations I found lots of known projects regarding which I had no idea that those too were open source. While searching I found Python Software Foundation in the organization list and thought why not consider python. After looking into the organization I found out that PSF was an umbrella project for many sub-projects in which FURY(<strong>F</strong>ree <strong>U</strong>nified <strong>R</strong>endering in p<strong>Y</strong>thon) suited me the most because I was a beginner and didn’t have any idea regarding the data analysis, API formation, and the other stuff. But because of my prior experience and interest in Game Dev, I was comfortable with FURY. I again forked, cloned, and tried to execute the first tutorial on it, it took a few minutes to run then a few more minutes to download some required files and then a black box appeared but with nothing on it, I thought there would be some error with something so re-executed it and it took few minutes and the first Earth Animation tutorial was successfully executed. I was fascinated by viewing the visuals of the Earth with the orbiting moon and the satellite animation (I had doubts whether my laptop will be able to handle these computations or not, but till now It hasn’t proved me wrong in most of the cases). I checked the code then and within 200 lines of code, all this was all possible. That made me understand the real power of FURY.</p> <p>After this I checked for some of the good first issues but as it was the GSoC period most of the issues were under process so I tried to learn more about the tutorials and the code. There I found a few documentation errors which I fixed as my first PR. I also pointed out some issues which I faced while working with FURY. FURY has a great discord community that engages newbies and solves most of their issues. After two months GSoC Contributors Applications started and I also tried to apply for the same. I created a proposal on Improving the UI system but due to lack of experience and as I was unable to prove my coding skills, I was rejected. But this didn’t disengage me from FURY. I loved the simplicity by which each part was created. Then as time passed I worked on some of the issues and created some more PRs.</p> <h2><br> GSoC - 22</h2> <hr> <p>Again this year GSoC Started with new rules, and new energy and with more enthusiasm I too prepared to participate in it. Five new ideas were posted for GSoC in which I again chose the UI improvement as I had a good understanding of the existing UI system in FURY. Last year's experience helped me a lot in creating the proposal. This time I was also prepared(compared to last time) as I had made some contributions and also had spent time on the code base to understand it. Days passed and lastly, the result day arrived, and anxiety was at its peak. I had set an alarm to remind me to keep checking the mail for the result, refreshing and changing tabs. Exactly at 11:32 PM IST, a mail dropped with the subject <strong>“Congratulations, your proposal with Python Software Foundation has been accepted!”</strong> and my happiness had no bound.</p>praneethshetty10@gmail.com (ganimtron_10)Tue, 28 Jun 2022 08:25:57 +0000https://blogs.python-gsoc.org/en/ganimtron_10s-blog/my-pre-gsoc-22-journey/