Difference between revisions of "GUI-in-Scilab/C2/Plotting-3D-parametric-curves-in-GUI/English"
PoojaMoolya (Talk | contribs) |
Nancyvarkey (Talk | contribs) |
||
(4 intermediate revisions by one other user not shown) | |||
Line 13: | Line 13: | ||
'''Title Slide''' | '''Title Slide''' | ||
− | | Hello, and welcome to the Spoken Tutorial on “Building a '''GUI''' for plotting '''3D parametric | + | | Hello, and welcome to the Spoken Tutorial on “Building a '''GUI''' for plotting '''3D parametric curves”'''. |
|- | |- | ||
| | | | ||
Line 22: | Line 22: | ||
In this tutorial, we will learn: | In this tutorial, we will learn: | ||
− | + | *To plot the '''parametric equation''' of a sphere using '''GUI.''' | |
− | + | *Use of '''surf command''' | |
− | + | *Use of '''mesh command''' and | |
− | + | *Use of '''meshgrid command''' | |
− | + | ||
|- | |- | ||
| | | | ||
Line 34: | Line 33: | ||
'''Only Narration''' | '''Only Narration''' | ||
− | | | + | |To record this tutorial, I am using: |
− | To record this tutorial, I am using: | + | |
− | + | ||
− | + | ||
− | + | ||
− | + | *'''Ubuntu 18.04 OS''' | |
− | + | *'''Scilab 6.1.0''' and; | |
− | + | *'''GUI Builder Toolbox 4.2.1''' | |
The process demonstrated in this tutorial is identical in '''Windows OS''' also. | The process demonstrated in this tutorial is identical in '''Windows OS''' also. | ||
Line 54: | Line 49: | ||
https://www.spoken-tutorial.org | https://www.spoken-tutorial.org | ||
− | | | + | |To follow this tutorial: |
− | To follow this tutorial: | + | *The learner must have basic knowledge of '''Scilab''' and '''GUI Builder toolbox.''' |
− | + | *For pre-requisite '''Scilab''' tutorials please visit this website. | |
− | + | ||
− | + | ||
− | + | ||
|- | |- | ||
| | | | ||
Line 66: | Line 58: | ||
'''Code Files''' | '''Code Files''' | ||
| | | | ||
− | + | *The files used in this tutorial are provided in the '''Code files''' link. | |
− | + | *Please download and extract the files. | |
− | + | *Make a copy and then use them while practising. | |
− | + | ||
|- | |- | ||
| | | | ||
Line 78: | Line 69: | ||
The '''parametric equation''' of a sphere is: | The '''parametric equation''' of a sphere is: | ||
+ | '''x = r*cos(θ)*sin(φ)''' | ||
+ | '''y = r*sin(θ)*sin(φ)''' | ||
+ | and '''z = r*cos(φ)''' | ||
− | + | where, | |
− | + | *'''x, y, z''' are the '''cartesian coordinates''' of a given point on the sphere. | |
− | + | *'''r''' is the radius of the sphere and; | |
− | + | *'''theta''' & '''phi''' are the spherical '''coordinates'''. They lie in the range '''0''' to '''2𝞹'''. | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | We will use these three equations to plot the sphere. | + | We will use these three '''equations''' to plot the sphere. |
|- | |- | ||
| | | | ||
Line 99: | Line 87: | ||
'''Scilab''' offers many ways to create and customize various types of '''3D''' plots. | '''Scilab''' offers many ways to create and customize various types of '''3D''' plots. | ||
− | We will learn to use the '''surf''' and '''mesh''' | + | We will learn to use the '''surf''' and '''mesh commands''' in this tutorial. |
− | These '''commands''' are used to create a '''3D''' | + | These '''commands''' are used to create a '''3D surface''' plot. |
|- | |- | ||
| | | | ||
Line 109: | Line 97: | ||
'''Only Narration''' | '''Only Narration''' | ||
− | | | + | |What is the '''surf command?''' |
− | The '''surf command''' draws a '''3D parametric''' | + | The '''surf command''' draws a '''3D parametric surface''' plot. |
It essentially creates a surface with a solid edge and solid face colors. | It essentially creates a surface with a solid edge and solid face colors. | ||
Line 125: | Line 113: | ||
|'''What is the mesh command?''' | |'''What is the mesh command?''' | ||
− | The '''mesh command''' also draws a '''3D parametric''' | + | The '''mesh command''' also draws a '''3D parametric surface''' plot. |
In this case, the surface has solid edge colors but no face colors. | In this case, the surface has solid edge colors but no face colors. | ||
Line 141: | Line 129: | ||
'''''help mesh''''' | '''''help mesh''''' | ||
− | |||
− | |||
− | |||
|- | |- | ||
| | | | ||
Line 150: | Line 135: | ||
Open the '''plotting3dcurves.sce''' file. | Open the '''plotting3dcurves.sce''' file. | ||
− | |||
| | | | ||
Locate the '''plotting3dcurves.sce''' file in the saved folder. | Locate the '''plotting3dcurves.sce''' file in the saved folder. | ||
− | Open the file '''plotting3dcurves.sce''' using the '''GUIBuilder | + | Open the file '''plotting3dcurves.sce''' using the '''GUIBuilder Toolbox.''' |
|- | |- | ||
| | | | ||
Line 161: | Line 145: | ||
hover over the '''Slider, Text''' box and an '''Axes'''. | hover over the '''Slider, Text''' box and an '''Axes'''. | ||
− | |||
| | | | ||
It shows the '''GUI''' with three '''objects''', namely '''Slider, Text''' box and an '''Axes'''. | It shows the '''GUI''' with three '''objects''', namely '''Slider, Text''' box and an '''Axes'''. | ||
Line 174: | Line 157: | ||
hover over the '''Text''' box. | hover over the '''Text''' box. | ||
− | |||
| | | | ||
Next, we have a '''Text''' box to display the radius. | Next, we have a '''Text''' box to display the radius. | ||
− | It has '''Tag ‘txt_radius’''' and the '''String | + | It has '''Tag ‘txt_radius’''' and the '''String ‘Radius’'''. |
|- | |- | ||
| | | | ||
Line 185: | Line 167: | ||
hover over the '''Axes'''. | hover over the '''Axes'''. | ||
− | |||
| | | | ||
Lastly, we have the '''Axes''' to display the plot of the sphere. | Lastly, we have the '''Axes''' to display the plot of the sphere. | ||
Line 213: | Line 194: | ||
Click on '''OK.''' | Click on '''OK.''' | ||
− | |||
| | | | ||
I will name this file as '''parametric-3d.''' | I will name this file as '''parametric-3d.''' | ||
Line 257: | Line 237: | ||
On '''SciNotes''' Window, | On '''SciNotes''' Window, | ||
− | inside '''sl_radius_callback''' | + | inside '''sl_radius_callback function''' |
highlight, | highlight, | ||
Line 265: | Line 245: | ||
'''''r = strtod(handles.txt_radius.string)''''' | '''''r = strtod(handles.txt_radius.string)''''' | ||
| | | | ||
− | Now notice the '''sl_radius_callback function''' | + | Now notice the '''sl_radius_callback function definition'''. |
It has two lines of code in it. | It has two lines of code in it. | ||
Line 309: | Line 289: | ||
Type the code as shown here with the same '''syntax'''. | Type the code as shown here with the same '''syntax'''. | ||
+ | |||
+ | |||
The same code can be found under the Code files section. | The same code can be found under the Code files section. | ||
+ | |||
You can use it as explained earlier in this tutorial. | You can use it as explained earlier in this tutorial. | ||
Line 337: | Line 320: | ||
The range of '''u''' and '''v''' is defined from '''0''' to '''2𝞹''' with a '''step''' size of '''0.1'''. | The range of '''u''' and '''v''' is defined from '''0''' to '''2𝞹''' with a '''step''' size of '''0.1'''. | ||
− | Finally, the '''matrices | + | Finally, the '''matrices u''' and '''v''' are stored into '''phi''' and '''theta''' respectively. |
|- | |- | ||
| | | | ||
Line 347: | Line 330: | ||
'''''z = r*cos(phi);''''' | '''''z = r*cos(phi);''''' | ||
− | | Further three lines define the sphere's parametric equation in terms of '''x, y''' and '''z'''. | + | | Further three lines define the sphere's '''parametric equation''' in terms of '''x, y''' and '''z'''. |
|- | |- | ||
− | | | + | | Only narration |
| Next, we will plot a '''3D parametric''' curve of a sphere. | | Next, we will plot a '''3D parametric''' curve of a sphere. | ||
|- | |- | ||
Line 365: | Line 348: | ||
Then next we will see the '''mesh command'''. | Then next we will see the '''mesh command'''. | ||
− | For now, I have commented out this line by putting two forward slashes. | + | For now, I have '''commented''' out this line by putting two '''forward slashes'''. |
− | Hence the output of only '''surf''' | + | Hence the output of only '''surf command''' will be plotted. |
|- | |- | ||
| | | | ||
Line 377: | Line 360: | ||
'''''xgrid()''''' | '''''xgrid()''''' | ||
− | | Then the next two lines are used to add labels and grid lines to the '''Axes'''. | + | | Then the next two lines are used to add '''labels''' and '''grid lines''' to the '''Axes'''. |
|- | |- | ||
| | | | ||
On the '''SciNotes Window''', | On the '''SciNotes Window''', | ||
− | inside '''sl_radius_callback''' | + | inside '''sl_radius_callback function''', |
type, | type, | ||
Line 390: | Line 373: | ||
Now let us call the '''plot_sphere() function''' inside the '''callback function'''. | Now let us call the '''plot_sphere() function''' inside the '''callback function'''. | ||
− | At the end of '''sl_radius_callback function''' | + | At the end of '''sl_radius_callback function definition''' type '''plot_sphere().''' |
As a result, varying the radius value on the '''Slider''' the sphere will be plotted. | As a result, varying the radius value on the '''Slider''' the sphere will be plotted. | ||
Line 407: | Line 390: | ||
Click on '''File with echo.''' | Click on '''File with echo.''' | ||
| | | | ||
− | Now, run this simulation by clicking on the '''Execute''' button in the '''menu bar'''. | + | Now, run this '''simulation''' by clicking on the '''Execute''' button in the '''menu bar'''. |
Click on '''File with echo.''' | Click on '''File with echo.''' | ||
Line 418: | Line 401: | ||
move the '''Slider''' indicator towards right slowly. | move the '''Slider''' indicator towards right slowly. | ||
| | | | ||
− | We can see that as we move the | + | We can see that as we move the indicator on the '''Slider,''' a sphere is being plotted. |
The '''surf command''' now plots a colored '''3D''' sphere. | The '''surf command''' now plots a colored '''3D''' sphere. | ||
Line 437: | Line 420: | ||
Press '''Ctrl + S.''' | Press '''Ctrl + S.''' | ||
| | | | ||
− | I'll now add two forward slashes before the '''surf''' | + | I'll now add two '''forward slashes''' before the '''surf command''' to '''comment''' it out. |
− | Then I’ll remove the forward slashes added before the '''mesh''' | + | Then I’ll remove the '''forward slashes''' added before the '''mesh command''' to now see its output. |
Save the code by pressing '''Ctrl + S''' keys together. | Save the code by pressing '''Ctrl + S''' keys together. | ||
Line 449: | Line 432: | ||
click on '''File with echo.''' | click on '''File with echo.''' | ||
− | | Again, click on the '''Execute''' | + | | Again, click on the '''Execute menu''' and then on '''File with echo.''' |
|- | |- | ||
| | | | ||
Line 456: | Line 439: | ||
move the '''Slider''' indicator towards the right slowly. | move the '''Slider''' indicator towards the right slowly. | ||
| | | | ||
− | The '''Graphic window Number 2''' will now show the output of the '''mesh''' | + | The '''Graphic window Number 2''' will now show the output of the '''mesh command'''. |
Let us move the '''Slider''' indicator and observe the output. | Let us move the '''Slider''' indicator and observe the output. | ||
− | As stated earlier, the '''mesh''' | + | As stated earlier, the '''mesh command''' now plots a '''3D''' sphere with a white surface. |
|- | |- | ||
− | | | + | | Only narration |
− | | So this way we can build a '''GUI''' for plotting a '''3D''' | + | | So this way we can build a '''GUI''' for plotting a '''3D parametric curve''' in '''Scilab'''. |
|- | |- | ||
| | | | ||
Line 473: | Line 456: | ||
In this tutorial, we have: | In this tutorial, we have: | ||
− | + | *Plotted the '''parametric equation''' of a sphere using '''GUI'''. | |
− | + | *Used the '''surf command'''. | |
− | + | *Used the '''mesh command''' and; | |
− | + | *Used the '''meshgrid command'''. | |
− | + | ||
− | + | ||
|- | |- | ||
| | | | ||
Line 487: | Line 468: | ||
As an assignment, please do the following. | As an assignment, please do the following. | ||
− | + | *Using '''surf''' and '''mesh''', build a '''GUI''' to plot a '''3D''' hemisphere. | |
− | + | '''Parametric equations: x = r*cos(θ)*sin(φ) , y = r*sin(θ)*sin(φ) & z = r*cos(φ)'''. | |
− | + | *Place the hemisphere on a horizontal plane. | |
− | + | *Change radius ‘'''r'''’ from '''1''' to '''10''' using a '''Slider''' and display it in a '''Text''' box. | |
− | + | *Consider that '''theta''' & '''phi''' vary from '''0''' to '''𝞹.''' | |
− | + | *Add '''grid lines''' to the plot and '''label''' the '''Axes'''. | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
|- | |- | ||
| | | |
Latest revision as of 16:25, 21 September 2021
Title of the script: Building a GUI for plotting 3D parametric curves
Author: Rashmi Patankar, Utkarsh Anand
Keywords: GUI, GUI Builder Toolbox, Slider, Scilab, Parametric equation, Sphere, 3D, Text box, Axes, callback function, surf, mesh, meshgrid
Visual Cue | Narration |
---|---|
Show Slide: Title Slide |
Hello, and welcome to the Spoken Tutorial on “Building a GUI for plotting 3D parametric curves”. |
Show Slide: Learning Objectives |
In this tutorial, we will learn:
|
Show Slide: System Requirements Only Narration |
To record this tutorial, I am using:
The process demonstrated in this tutorial is identical in Windows OS also. Annotations are added to the tutorial if there are any differences. |
Show Slide: Pre-requisites |
To follow this tutorial:
|
Show Slide: Code Files |
|
Show Slide: What is a Parametric Equation of a Sphere? |
What is a Parametric Equation of a Sphere?
The parametric equation of a sphere is: x = r*cos(θ)*sin(φ) y = r*sin(θ)*sin(φ) and z = r*cos(φ) where,
We will use these three equations to plot the sphere. |
Show Slide: Commands to create 3D surface plots |
Scilab offers many ways to create and customize various types of 3D plots. We will learn to use the surf and mesh commands in this tutorial. These commands are used to create a 3D surface plot. |
Show slide: What is the surf command? Only Narration |
What is the surf command?
The surf command draws a 3D parametric surface plot. It essentially creates a surface with a solid edge and solid face colors. Hence, in this tutorial, the surf command will plot a colored 3D sphere. |
Show slide: What is the mesh command? Only Narration |
What is the mesh command?
The mesh command also draws a 3D parametric surface plot. In this case, the surface has solid edge colors but no face colors. So, in this tutorial, the mesh command will plot a 3D sphere with a white surface. |
Show slide: Scilab Help Documentation |
For more information on mesh and surf commands type the following on the Scilab console: help surf help mesh |
Switch to GUIBuilder Toolbox. Open the plotting3dcurves.sce file. |
Locate the plotting3dcurves.sce file in the saved folder. Open the file plotting3dcurves.sce using the GUIBuilder Toolbox. |
On the Graphic Window Number 1, hover over the Slider, Text box and an Axes. |
It shows the GUI with three objects, namely Slider, Text box and an Axes. The Slider has Tag ‘sl_radius’ and String ‘Radius’. Its value can vary from 10 to 20. |
On the Graphic Window Number 1, hover over the Text box. |
Next, we have a Text box to display the radius. It has Tag ‘txt_radius’ and the String ‘Radius’. |
On the Graphic Window Number 1, hover over the Axes. |
Lastly, we have the Axes to display the plot of the sphere. It has Tag ‘ax_plot’ and String ‘Sphere’. Now let us generate the Scilab code for the same. |
On the GUIBuilder Palette Window, in the menu bar, click on Generate. Click on Generate GUI Code . |
Go to the GUIBuilder Palette, and click on Generate in the menu bar. Then click on Generate GUI Code. |
On the uiputfile Window, type parametric-3d. Click on OK. |
I will name this file as parametric-3d. Click on the OK button. |
Cursor on GUI Created Window, click on OK. |
It shows a new dialog box that displays “GUI created successfully!” Click on OK. The corresponding Scilab code file opens. |
On SciNotes Window, highlight, handles.txt_radius. |
handles.txt_radius is the handle for the Text box. |
On SciNotes Window, highlight, handles.ax_plot. |
handles.ax_plot is the handle for the Axes. |
On SciNotes Window, highlight, handles.sl_radius. |
handles.sl_radius is the handle for the Slider. |
On SciNotes Window, inside sl_radius_callback function highlight, handles.txt_radius.string = string(handles.sl_radius.value) r = strtod(handles.txt_radius.string) |
Now notice the sl_radius_callback function definition. It has two lines of code in it. The code essentially connects the Slider to the Text box. As a result when the Slider is moved, its exact value is displayed in the Text box. Then the value of the Text box is stored inside a variable ‘r’. |
On the SciNotes Window, type on new line outside the sl_radius_callback function, function plot_sphere() delete(handles.ax_plot.children) u = 0:0.1:2*%pi; v = 0:0.1:2*%pi; [phi, theta]= meshgrid(u,v) x = r*cos(theta)*sin(phi); y = r*sin(theta)*sin(phi); z = r*cos(phi); surf(x, y, z); //mesh(x, y, z); xtitle('Plotting sphere', 'X-axis', 'Y-axis') xgrid() endfunction |
Now, let us write a user-defined function plot_sphere() to plot the sphere. Type the code as shown here with the same syntax.
The same code can be found under the Code files section.
|
Highlight, delete(handles.ax_sphere.children). |
First, I have written a delete function to remove the subplots of the graph. |
highlight, u = 0:0.1:2*%pi; v = 0:0.1:2*%pi; [phi, theta]= meshgrid(u,v); |
Notice the next three lines. The meshgrid command is used. It is used to generate u and v matrices for three-dimensional plots. The range of u and v is defined from 0 to 2𝞹 with a step size of 0.1. Finally, the matrices u and v are stored into phi and theta respectively. |
highlight, x = r*cos(theta)*sin(phi); y = r*sin(theta)*sin(phi); z = r*cos(phi); |
Further three lines define the sphere's parametric equation in terms of x, y and z. |
Only narration | Next, we will plot a 3D parametric curve of a sphere. |
highlight, surf(x, y, z); |
Firstly, we’ll see the output of the surf command. |
highlight, //mesh(x, y, z); |
Then next we will see the mesh command. For now, I have commented out this line by putting two forward slashes. Hence the output of only surf command will be plotted. |
On the SciNotes Window, highlight, xtitle('Plot of sphere', 'X-axis', 'Y-axis') xgrid() |
Then the next two lines are used to add labels and grid lines to the Axes. |
On the SciNotes Window, inside sl_radius_callback function, type, plot_sphere() |
Now let us call the plot_sphere() function inside the callback function. At the end of sl_radius_callback function definition type plot_sphere(). As a result, varying the radius value on the Slider the sphere will be plotted. |
On the SciNotes Window, Press Ctrl + S on the keyboard. |
Let us save our code by pressing Ctrl + S keys together. |
On the SciNotes Window, click on the Execute button in the menu bar. Click on File with echo. |
Now, run this simulation by clicking on the Execute button in the menu bar. Click on File with echo. The Graphic Window Number 2 will appear. |
On the Graphic Window Number 2, move the Slider indicator towards right slowly. |
We can see that as we move the indicator on the Slider, a sphere is being plotted. The surf command now plots a colored 3D sphere. |
Close Graphic Window Number 2. |
Now let us test the output of the mesh command. Close the Graphic Window Number 2. |
On the SciNotes Window, //surf(x, y, z); mesh(x, y, z); Press Ctrl + S. |
I'll now add two forward slashes before the surf command to comment it out. Then I’ll remove the forward slashes added before the mesh command to now see its output. Save the code by pressing Ctrl + S keys together. |
On SciNotes Window, click on Execute, click on File with echo. |
Again, click on the Execute menu and then on File with echo. |
On Graphic window Number 2. move the Slider indicator towards the right slowly. |
The Graphic window Number 2 will now show the output of the mesh command. Let us move the Slider indicator and observe the output. As stated earlier, the mesh command now plots a 3D sphere with a white surface. |
Only narration | So this way we can build a GUI for plotting a 3D parametric curve in Scilab. |
Show Slide: Summary |
Let us summarize. In this tutorial, we have:
|
Show Slide: Assignment |
As an assignment, please do the following.
Parametric equations: x = r*cos(θ)*sin(φ) , y = r*sin(θ)*sin(φ) & z = r*cos(φ).
|
Show Slide: About Spoken Tutorial Project |
The video at the following link summarises the Spoken Tutorial project. Please download and watch it. |
Show Slide: Spoken Tutorial Workshops |
We conduct workshops using Spoken Tutorials and give certificates. Please contact us. |
Show Slide: Answers for THIS Spoken Tutorial |
Please post your timed queries in this forum. |
Show Slide: FOSSEE Forum | Please post your general and technical queries on Scilab in this forum. |
Show Slide: Textbook Companion project |
The FOSSEE team coordinates the TBC project. For more details, please visit this site. |
Show Slide: Lab Migration |
The FOSSEE team coordinates the Lab Migration project. For more details, please visit this site. |
Show Slide: Acknowledgements |
The Spoken Tutorial project is funded by the Ministry of Education, Government of India. |
Show slide: Thank you |
This is Utkarsh Anand, a FOSSEE intern 2021, IIT Bombay signing off. Thanks for joining. |