Interactive 3D Coordinate Projection

A small ColdFusion site that plots a set of random 3D points onto a 2D image and lets you rotate the view around the X, Y and Z axes.

Live demo: https://www.trinthlo.com/sites/3dplotting

What it does

• Generates 20–30 random points (each axis between -8 and 8) the first time the app starts, and keeps them in the application scope so every view shows the same set.
• Rotates every point by the chosen angles, then drops the depth value to flatten it onto the image.
• Draws the points in magenta along with three color-coded axes: X in black, Y in green and Z in red.
• Each X-/X+, Y-/Y+, Z-/Z+ button changes its rotation by 0.01 radians and redraws the image on the server with cfimage.

How the projection works

All of the math lives in do3d2d() in Application.cfc. A point (x, y, z) is scaled to pixels, rotated around X, then Y, then Z (angles in radians), and moved to the center of the image:

rotate around X:  y0 = y·cos(rx) + z·sin(rx)      z0 = z·cos(rx) − y·sin(rx)
rotate around Y:  x1 = x·cos(ry) − z0·sin(ry)     z1 = z0·cos(ry) + x·sin(ry)
rotate around Z:  x2 = x1·cos(rz) + y0·sin(rz)    y2 = y0·cos(rz) − x1·sin(rz)

screen = (x2 + centerX, y2 + centerY)

There's no perspective: the depth (z1) is thrown away, so objects farther away don't look smaller.

URL parameters

Parameter	Default	Description
rx	0.99	Rotation around the X axis, in radians
ry	1.04	Rotation around the Y axis, in radians
rz	0.37	Rotation around the Z axis, in radians
w	1000	Image width in pixels (limited to 200–1000)
h	1000	Image height in pixels (limited to 200–1000)
reinit		Restarts the application, which creates a new set of random points

Example: index.cfm?rx=0.5&ry=0.5&rz=0&w=600&h=600

Requirements

• Adobe ColdFusion 2016 or later. It may also run on Lucee with the Image extension installed, but that hasn't been tested.
• HTTPS. The site redirects every http request to application.urls.secure.

Setup

1. Put the folder in your web root, for example https://localhost/3dplotting.
2. In Application.cfc, inside onApplicationStart, change application.urls.normal and application.urls.secure to the address where the site will run (for example https://localhost/3dplotting). If you skip this step, the https redirect and the page's CSS, JavaScript and images still point to the Trinthlo demo site.
3. Open index.cfm in a browser. If you opened the site before changing the URLs, restart ColdFusion first so the new values are loaded.

Project structure

Application.cfc   App settings, SSL redirect, and do3d2d()
index.cfm         Point generation, image drawing and the rotation form
layout.cfm        Page layout and footer
assets/           Bootstrap, jQuery, site CSS and images

License

MIT, see LICENSE.