A browser-based computational tool for cross-section drawing, section property calculation, and bending stress analysis under uniaxial and oblique bending, with interactive 3D visualisation.
Developed by Assoc. Prof. Rasim Temür · İstanbul University-Cerrahpaşa, Department of Civil Engineering
Part of the Vetin initiative for the digitisation of academic instruction tools.
Main Interface
The application is accessible directly through a web browser without requiring any software installation, user registration, or server-side processing. All computations are performed client-side.
Vetin Pure Bending is an open-source, web-based software developed for educational use in mechanics of materials and structural analysis curricula. The application enables interactive construction of arbitrary composite cross-sections from rectangular, circular, half-circular, and quarter-circular primitives — including void regions through boolean subtraction — and computes the complete set of section properties required for bending analysis.
Given a user-specified bending moment (magnitude and inclination), the application determines the resultant bending moment components, the neutral axis orientation, and the extreme normal stress values, and renders the full stress distribution over the cross-section. A synchronised three-dimensional visualisation of the deformed member is provided via WebGL rendering.
The software is intended to support both undergraduate instruction and self-directed learning by providing immediate, interactive visual feedback on cross-section behaviour under bending.
Key properties of the application:
- Operates entirely within the client browser; no server-side computation is required
- Functions offline as a Progressive Web App (PWA), compatible with major desktop and mobile platforms
- User interface is localised in 33 languages
- Supports composite cross-sections constructed from multiple primitives with boolean subtraction
- Source code is freely distributed under the MIT License
The cross-section is constructed interactively on a grid canvas. Each primitive is placed by clicking and dragging:
| Tool | Description |
|---|---|
| Rectangle | Add or subtract a rectangular region |
| Circle | Add or subtract a full circular region |
| Half Circle | Add or subtract a semicircular region |
| Quarter Circle | Add or subtract a quarter-circular region |
Placed elements can be repositioned and resized via the Edit mode. The canvas supports zoom, pan, and fit-to-screen operations. Project state (all sections and applied loads) can be saved to and loaded from a JSON file.
Upon modification of the cross-section, the following quantities are computed and updated instantaneously:
Section Area
- A — total net cross-sectional area
Centroidal Moments of Inertia
- Ix, Iy — second moments of area about the centroidal x- and y-axes
- Ixy — centroidal product of inertia
Principal Moments of Inertia
- I1, I2 — principal second moments of area
- φ — inclination of the principal axes with respect to the centroidal axes
Axis Transformation
- Ix', Iy', Ix'y' — moments of inertia on an axis system rotated by an arbitrary angle φ
- Interactive Mohr's circle construction for moment-of-inertia transformation
The user specifies the applied bending moment as a resultant vector:
| Symbol | Quantity | Unit |
|---|---|---|
| M | Resultant bending moment magnitude | kNm |
| φM | Inclination of the moment vector | ° |
| Mx | Component about the centroidal x-axis | kNm |
| My | Component about the centroidal y-axis | kNm |
Mx and My are linked to M and φM and update simultaneously. Both the magnitude and the inclination can be adjusted via a numerical input or a continuous slider; dragging either slider updates the stress results and the 3D deformed shape live. The magnitude slider extends its own range if a value beyond it is typed in.
Upon specification of the moment, the following quantities are computed:
Neutral Axis
- φn — inclination of the neutral axis
- xt, yt — coordinates of the intersection of the neutral axis with the section boundary
Normal Stress
- σmax — maximum normal (tensile) stress
- σmin — minimum normal (compressive) stress
The main canvas renders the following overlays simultaneously, each toggleable independently:
| Overlay | Contents |
|---|---|
| Centroidal Axes | Centroidal x–y axis system |
| Principal Axes | Rotated axis system aligned with the principal inertia directions |
| Neutral Axis | Line of zero normal stress for the current moment state |
| Stress Distribution | Colour-mapped normal stress field over the cross-section |
| Force / Moment Vector | Graphical representation of the applied moment vector |
| Moment Components | Decomposition of M into Mx and My |
| Dimension Lines | Overall section dimensions |
| Element Boundaries | Individual primitive outlines |
| Element Centroids | Centroid markers for each primitive |
| Geometric Centroid | Centroid of the composite section |
An interactive three-dimensional view renders the cross-section extruded along the member axis using Three.js (WebGL):
- Adjustable bar length
- Toggleable wireframe and edge display
- Deformed configuration — the member is drawn bent under the applied moment (see Deformed Configuration below); toggleable
- Transverse lines — cross-section contours drawn at intervals along the member, which make the curvature and the rotation of plane sections legible; toggleable and drawn for the undeformed member as well
- Magnification — the deformation is exaggerated; a user multiplier overrides the automatic scale, and the drawn end rotation is reported in the panel
- Mouse control — left-drag to pan, right-drag to orbit, middle-drag (or wheel) to zoom
- Fit all — recentres the member and fits it to the panel from the current viewing direction; the fit distance is obtained by projecting the eight corners of the bounding box onto the camera axes, so it is exact for any aspect ratio and any oblique view
- ViewCube — an AutoCAD-style navigation cube: drag it to orbit, click a face to look along it, or use the ÖN / ARKA / SOL / SAĞ / ÜST / 3B buttons beneath it. Changing the view keeps the current zoom and pan
- Fullscreen support
- SVG Export — The current section drawing can be exported as a scalable vector graphics file, suitable for inclusion in reports and lecture materials.
- Project Save / Load — The complete project state (all sections and load data) can be saved to a JSON file and reloaded in a subsequent session.
- Three display themes — Light, Dark, and Blueprint (technical-drawing style)
- Responsive layout — Adjustable split between the drawing canvas and the 3D panel via a draggable resizer
The user interface is fully localised in 33 languages. The active language is selectable at runtime and persisted across sessions via localStorage:
| Code | Language | Code | Language | Code | Language |
|---|---|---|---|---|---|
tr |
🇹🇷 Turkish | en |
🇬🇧 English | de |
🇩🇪 German |
fr |
🇫🇷 French | es |
🇪🇸 Spanish | it |
🇮🇹 Italian |
pt |
🇧🇷 Portuguese | ru |
🇷🇺 Russian | ro |
🇷🇴 Romanian |
bg |
🇧🇬 Bulgarian | el |
🇬🇷 Greek | sl |
🇸🇮 Slovenian |
sq |
🇦🇱 Albanian | hy |
🇦🇲 Armenian | ka |
🇬🇪 Georgian |
he |
🇮🇱 Hebrew | ar |
🇸🇦 Arabic | fa |
🇮🇷 Persian |
ur |
🇵🇰 Urdu | hi |
🇮🇳 Hindi | bn |
🇧🇩 Bengali |
ne |
🇳🇵 Nepali | dz |
🇧🇹 Dzongkha | my |
🇲🇲 Burmese |
th |
🇹🇭 Thai | id |
🇮🇩 Indonesian | tl |
🇵🇭 Filipino |
cn |
🇨🇳 Chinese | ja |
🇯🇵 Japanese | ko |
🇰🇷 Korean |
uz |
🇺🇿 Uzbek | tg |
🇹🇯 Tajik | ky |
🇰🇬 Kyrgyz |
The application is implemented using standard web technologies without dependency on a JavaScript framework:
| Technology | Role |
|---|---|
| HTML5 / CSS3 / JavaScript (ES6+) | Core application architecture |
| HTML5 Canvas API | Section drawing and stress visualisation |
| Three.js (WebGL) | Interactive 3D member visualisation |
| PolyBool.js | Boolean operations for composite section geometry |
| SVG (Scalable Vector Graphics) | Vector export of section drawings |
| Service Worker API | Offline caching and PWA functionality |
| Web App Manifest | Home screen installation support |
| localStorage API | Persistence of user preferences (language, theme) |
bending/
├── index.html # Application entry point and HTML shell
├── manifest.json # PWA manifest descriptor
├── sw.js # Service Worker (offline caching)
│
├── script.js # Core computations, canvas drawing, UI logic
├── script3d.js # Three.js 3D visualisation module
├── poly_utils.js # Polygon boolean operation utilities
│
├── translations.js # Localisation string repository (33 languages)
│
├── style.css # Base styles, themes (light / dark / blueprint)
│
├── logo.svg # Application logotype
├── icon.svg # Source vector icon
├── IUC.svg # İstanbul University-Cerrahpaşa logo
├── icon-192.png # PWA icon (192 × 192 px)
└── icon-512.png # PWA icon (512 × 512 px)
The application is hosted and publicly accessible at:
https://www.rasimtemur.com/vetin/bending/
As the application comprises static files only, it may be served locally using any HTTP server:
# Clone the repository
git clone https://github.com/rasimtemur/vetin-momentofinertia.git
cd vetin-momentofinertia
# Python 3 — built-in HTTP server
python -m http.server 8000
# Node.js — via npx
npx serve .Navigate to http://localhost:8000 in a web browser to launch the application.
On browsers supporting the PWA specification (Chromium-based browsers, Firefox, Safari on iOS), the application may be installed to the device home screen or desktop via the browser's "Install" or "Add to Home Screen" functionality, enabling offline access.
- Draw the cross-section — Select a drawing tool from the toolbar and click-drag on the canvas to add rectangular or circular primitives. Use the subtract variants to create openings.
- Edit elements — Switch to Edit mode to reposition or resize individual elements by dragging their handles.
- Read the section properties — The area (A), centroidal moments of inertia (Ix, Iy, Ixy), and principal moments (I1, I2, φ) are updated immediately in the right panel.
- Apply a bending moment — Enter the moment magnitude M and its inclination φM, or specify the components Mx and My directly.
- Read the bending results — The neutral axis orientation (φn) and the extreme stresses (σmax, σmin) are displayed in the results panel.
- Inspect the stress distribution — Enable the Stress Distribution overlay to visualise the colour-mapped normal stress field over the cross-section.
- Activate the 3D view — Toggle 3D View to open the three-dimensional WebGL panel and inspect the member geometry and deformed configuration.
- Export — Save the section drawing as an SVG file, or save the complete project to a JSON file for later use.
The centroid and second moments of area of the composite section are computed by summation over all primitives, applying the parallel axis theorem for each element:
-
Centroid coordinates
x̄ = Σ(Aᵢ · x̄ᵢ) / ΣAᵢ, ȳ = Σ(Aᵢ · ȳᵢ) / ΣAᵢ
-
Centroidal second moments of area
Ix = Σ(Ixc,i + Aᵢ · dᵧ,ᵢ²), Iy = Σ(Iyc,i + Aᵢ · dₓ,ᵢ²), Ixy = Σ(Ixyc,i + Aᵢ · dₓ,ᵢ · dᵧ,ᵢ)
where dₓ,ᵢ and dᵧ,ᵢ are the distances from the composite centroid to the centroid of element i. Subtracted regions contribute with a negative area.
The principal second moments of area are obtained from the centroidal moments by the transformation:
-
I1,2 = (Ix + Iy)/2 ± √[((Ix − Iy)/2)² + Ixy²]
-
tan(2φ) = −2 Ixy / (Ix − Iy)
For a section subjected to biaxial bending with moment components Mx and My about the centroidal axes, the normal stress at a point (x, y) is:
σ(x, y) = (Mx · Iy + My · Ixy) / (Ix · Iy − Ixy²) · y − (My · Ix + Mx · Ixy) / (Ix · Iy − Ixy²) · x
The neutral axis is the locus of points where σ = 0. Its inclination with respect to the x-axis satisfies:
tan(φn) = −(Mx · Iy + My · Ixy) / (My · Ix + Mx · Ixy)
The 3D view draws the member in its bent state, as a beam whose two ends stay in place while the curvature develops over the span — the classic picture of a simply supported member under end moments. Writing the stress field as a gradient over the section, σ = Gx · x + Gy · y, the curvature acts along G — that is, perpendicular to the neutral axis — so oblique bending correctly bends the member out of the plane of the applied moment, and its magnitude is proportional to |G|. The sense of the curvature follows the applied moment vector by the right-hand rule about the member axis: for Mx > 0 the member sags.
Every cross-section is mapped onto a circular arc. With Θ = κ · L the total rotation between the two end sections (each end rotates Θ/2), the arc radius is taken as R = (L/2) / sin(Θ/2), which holds the chord — and therefore both end centroids — exactly in place. A fibre at a distance s from the neutral axis is placed on a radius R + s, so its length changes by the factor (1 + s/R): the same linear distribution as σ = E · s / ρ. Plane sections therefore remain plane and rotate about the neutral axis, and for small curvature the mapping reduces to the classical beam results, deflection v = κ · z · (L − z) / 2 and axial displacement w = κ · s · (z − L/2). Pinning the chord stretches the drawn neutral axis by Θ / (2 sin(Θ/2)) — under one part in a thousand at small angles, 15 % at the display cap — which is not perceptible and is the price of keeping the supports where they belong.
Note on signs: the stress formula above resolves the applied moment on the opposite end face, so the fibre drawn as elongating is the one plotted as σmin in the section diagram. The deformed shape is drawn to agree with the moment vector shown on the section, not with the sign of the stress ordinate.
Actual elastic curvatures are far too small to be seen, so the deformation is magnified, as in finite-element post-processors. No elastic modulus is defined in this tool, hence there is no “times the true value” factor. The magnification is instead anchored to the stress level of the section: |G| · r, where r is the distance from the centroid to the farthest fibre, is the order of the extreme-fibre stress, and a value of 60 MPa is drawn as a 30° end rotation. Because r is a fixed property of the geometry, the scale does not depend on the applied moment — the drawn deflection stays proportional to it — nor on the direction of bending, so bending about a weaker axis still shows its true relative curvature (in the ratio I1/I2). Anchoring to stress rather than to a fixed moment also makes the picture independent of the size of the section: a 20 mm bar and a one-metre girder at the same stress are drawn with the same sag. A cap of 60° keeps the picture readable under very large moments; the panel marks the scale as limited when the cap is active.
This software is distributed under the MIT License.
Full license terms are available in the LICENSE file.
Assoc. Prof. Rasim Temür
Department of Civil Engineering
İstanbul University-Cerrahpaşa
🌐 rasimtemur.com
Vetin is a collection of open-source, browser-based computational tools developed for use in civil and structural engineering education. Additional tools within the Vetin ecosystem are accessible at rasimtemur.com/vetin.
Developed in support of engineering education.
GitHub ·
MIT License ·
İstanbul University-Cerrahpaşa