Widgets for Visualizing Engineering

Hi! First off, I'm just an upcoming junior in Civil Engineering, and I have little teaching experience. I have done well in engineering classes so far though, and I've thought about ways to improve how classes are taught. While there are some widgets for engineering, like those in MATHTAB and Wolfram Alpha, they seem to be mainly meant as calculators. There is almost nothing in them which could not be easily visualized on paper or in one's head. However, in many of the introductory engineering courses, there does seem to be much intuition which can be understood through visuals but is typically overlooked by students. I've started working on widgets with MATLAB to show this intuition, and here are several ideas:

• Modify material properties and stresses on a material element and see deformation. Apply transformations to see how stress transformations clearly relate to a geometric transformation of the deformed element.
• Shows internal stresses in element of beam undergoing user defined shear and moment. Make cuts into beam and see horizontal shear stress. This should show how stresses on the vertical cross section relate to shear and moment forces, and how force balance relates normal and horizontal shear stress
• Shows cylinder undergoing torsion to show the relation between the shear stress and the deformation.
• Define vector field representing steady fluid flow by controlling value at a point and first order derivatives. See how the vector field relates to the acceleration a particle giving insight for Euler's equations.
• Shows cylindrical element of fluid in a pipe to show how force balance gives rise to the velocity profile. User defines radius of element and flow rate.

Realistically, it will likely end up as an interesting project to put on my resume. However, I would be making them with the goal of being useful to complement instruction and for students' personal use. Do you think they could be useful? Do you have any advice to give? Thanks!

I did end up working on them, so I'm attaching them here in case anyone wants to take a look (I have them in order of best to worst in my opinion):

Stress and Strain Transformation
Motion of Fluid Particle
Stress in Beam
Rod Under Torsion

No thanks.

I don't know if the extra investment in time and energy would be justified from your point of view, but you could consider implementing it in HTML and JavaScript plus some graphic libraries. That would make it accessible to more people who don't have access to specific software.

I've actually started working on that. I plan on creating a site for it; I'm using the domain seeciv.com (at the moment nothing is up though).

My main questions would be:

• How difficult would it be to convert MATLAB to JavaScript, and are there any tools to help me convert it?
• How I could make it run rapidly enough so that there wouldn't be noticeable lag when the 3D graphics are being updated continuously?
• What libraries could I use? (Right now I was just considering creating the 3D surface plots in Plotly).

If any of you have any suggestions on this, I would greatly appreciate it!

You could try to write it in Glowscript (VPython in a browser).

Here's some starter code I gave to my students on their way to computing the flux through a cube.
https://trinket.io/library/trinkets/3e25027ad1

Here's an animated simulation of a gas on the glowscript.org site:
https://www.glowscript.org/#/user/m...terandinteractions/program/S1-hard-sphere-gas

If you are going to write your own calculations and need a visualization pipeline you may want to consider VTK which has plenty of bindings available, including python (e.g. PyPI vtk) and javascript (vtk.js).

Thank you very much for both of your responses! I looked at both of them (Glowscript and VTK) and they both seem very promising. My impression (based on very little knowledge on this) is that Glowscript combines common 3D shapes to create graphics while VTK relies more on 3D meshes. However, it looks like Glowscript can also do 3D plots and VTK does have https://lorensen.github.io/VTKExamples/site/Python/GeometricObjects/GeometricObjectsDemo/. It does seem like both would have all the functionality I would need.

Most of my graphics are made using 3D surface plots in MATLAB, with some 3D curves as well. I believe that both Glowscript and VTK would work for this; my question is really which one has a gentler learning curve and which one would be easier to transfer from MATLAB. For some context, I learned some Python a few years but I likely forgot much of it (I have never learned Javascript).

I also want to check that both VTK and Glowscript allow for user interactions of the kind I have in MALTAB (using widgets like sliders, spinners, radio buttons etc.). It looks like Glowscript does based on this example, but I don't know if VTK does. (I do see a lot of them have user interactions, but they don't seem to use the same sort of widgets I'm planning on using).

One concern I have with Glowscript is that I couldn't find much documentation; are there any useful resources on it?

Also, all of my apps have equations written in latex which are updated as the user toggles the widgets. Does VTK and/or Glowscript have this functionality?

Thank you once again!

Glowscript's documentation is at
https://www.glowscript.org/docs/VPythonDocs/index.html
Among the URLs listed is
https://rhettallain_gmail_com.trinket.io/numerical-calculations-in-physics#/numerical-calculation-tutorials/introduction-and-vectors
There is also a users group: https://groups.google.com/g/glowscript-users

Glowscript was designed by physicists with physics students as their target audience.
It supports the Matter and Interactions textbook: https://matterandinteractions.org/ ,
a modern calculus-based introductory physics textbook.

It comes ready to use on http://glowscript.org and http://trinket.io.
Unlike VPython7 (which runs on the desktop),
Glowscript (which runs in the browser) cannot import Python libraries.
(Some Python libraries can be imported for Python on trinket.io,
but not Glowscript on either trinket.io or glowscript.org.
So, your code in Glowscript will have to be self-contained.)

Of possible interest:
https://www.glowscript.org/docs/VPythonDocs/MathJax.htmlI haven't kept up with VTK to say more about it.
(My friends from college were starting up Kitware when they introduced me to VTK.)

Thank you once again. I didn't see the documentation before, but it seems very clear and straight forward, so it looks like that won't be an issue. It also sounds like Glowscript is used for applications more similar to what I'm doing than VTK for example. I think I only have two concerns now:

• As far as I can tell, the only way to make an arbitrary 3D surface is to use triangle/quad, and it seems like that could get fairly difficult. Do you know if there's a simpler way of doing it? If there isn't, would you happen to know if it would be easy to go from MATLAB's surf to Glowscript's triangle/quad?
• I notice Glowscript does have LaTex, but I can't tell if you can change it dynamically using a widget like a slider. (In my case, I want underbraces with numbers under certain variables. As the person moves the slider, the number should change).

I will also make sure to ask on the Google Group, although it looks like only the creator answers questions, and I'm not sure how much time he would have.

Also, here is a blogpost containing a gif of the MATLAB apps being used.

VTK is more like a general purpose visualization library that can be used for visualizing data generated by other libraries, either as part of a specific application or as visualization engine in a tool or similar. That is, you still need to integrate it with all the other parts (mesher, FEM solver perhaps, result plot management, etc) needed to build an application with a specific purpose.

It does sound like you are mostly interested in calculating and presenting some results, and not necessarily that much interested in designing the application yourself, and in that case it makes perfect sense to disregard VTK and look at more complete tools or applications that provide more of the features you need. I am by no means expert in this area and would be hard pressed to recommend any specific tool over another (e.g. I am not aware of Glowscript), but as an example of what I mean with tool could be Jupyter notebooks or similar.

Yes, I think it makes sense for me not to use VTK now.

My understanding is that Jupyter notebooks is a way of presenting Python code and results on a browser. However, it would not be on one's own website where you have full control over the layout.

One of the reason's for me wanting to create a website is to create a layout which makes it easier for someone to follow along with what the 3D graphics mean. Ideally, I would want something like this site on visualizing statistics, in which there's text to follow through which relates to a 3D graphic which changes as you scroll. On a related note, how difficult do you think it would be to create something like this using something like Glowscript?

Thank you once again for all your help.

person123 said:

Thank you once again. I didn't see the documentation before, but it seems very clear and straight forward, so it looks like that won't be an issue. It also sounds like Glowscript is used for applications more similar to what I'm doing than VTK for example. I think I only have two concerns now:

• As far as I can tell, the only way to make an arbitrary 3D surface is to use triangle/quad, and it seems like that could get fairly difficult. Do you know if there's a simpler way of doing it? If there isn't, would you happen to know if it would be easy to go from MATLAB's surf to Glowscript's triangle/quad?

I don't know. You can have a look at
https://www.glowscript.org/#/user/GlowScriptDemos/folder/Examples/program/Plot3D/edit
Maybe a function can be written to make the transformation easier.
Let us know if you find one or write one.

person123 said:

• I notice Glowscript does have LaTex, but I can't tell if you can change it dynamically using a widget like a slider. (In my case, I want underbraces with numbers under certain variables. As the person moves the slider, the number should change).

I will also make sure to ask on the Google Group, although it looks like only the creator answers questions, and I'm not sure how much time he would have.

Also, here is a blogpost containing a gif of the MATLAB apps being used.

Bruce Sherwood and others are active on the users group.
And, on occasion, reported bugs are resolved surprisingly quickly.

I'm sure you can get answers to your more detailed questions there.
Good luck!By the way, Glowscript and trinket.io can be embedded in webpages as in
https://www.wired.com/2015/04/dare-change-numerical-calculation/ ( Rhett Allain )

See also
https://www.compadre.org/PICUP/exercises/exercise.cfm?I=130&A=gsvpythonintro (Aaron Titus)
https://twitter.com/GlowScript_Code

I ended up using GlowScript for the project; I now have a website up and running with one of the apps transferred. It's at seeciv.com.

Nice.

Welcome to a Glowscript!

A while back I taught pre-engineering courses on Statics and Mechanics of Materials. This would have been helpful to have.
(I tried to write programs in VPython, but it had recently come out and I was new at it.)

I’m still trying to get some visual intuition about how stresses appear in a truss.

Maybe you could add an experiment to your site to illustrate these concepts: