Viewing Program

Program Data

Program thumbnail for "{props.program.title}"

Title	Faster?
ID	5024449857241088
Created	19 days ago, 1734744264687
Updated	19 days ago, 1734745962668
Code	//Why am i rendering every point? : https://www.khanacademy.org/computer-programming/3d-graphics-wip/6192408101306368 //Pls help me. I cant make a game with this ): // You most likely won't be able to make a functional game with PJS rasterizing just because of a ton of constraints on performance from the environment. // WebGL is a great way to get around those performance constraints var disableLoopCheck = function() { this[["KAInfiniteLoopCount"]] = -Infinity; }; disableLoopCheck(); // jshint curly: false // Super sketchy and ethically questionable way to make a Float32Array in KA PJS but I forgot the right way to do it var zBuffer = (0, eval)('new Float32Array(400400)').fill(Infinity); // The .slice array method makes a copy of an array var zBufferReset = zBuffer.slice(); // Localize everything, especially math functions var _width = _width, _height = _height; // Do the division for half canvas size outside of the draw so it only happens once var halfWidth = _width / 2, halfHeight = _height / 2; var _sin = Math.sin; var _cos = Math.cos; var _atan2 = Math.atan2; var _sqrt = Math.sqrt; var _floor = Math.floor; // The built-in dist function is really bad function _dist(x1, y1, x2, y2) { return _sqrt((x1 - x2) (x1 - x2) + (y1 - y2) * (y1 - y2)); } var points = [ [100, 100, 100], [-100, 100, 100], [-100, -100, 100], [100, -100, 100], [100, 100, -100], [-100, 100, -100], [-100, -100, -100], [100, -100, -100] ]; var lines = [ [0, 1], [1, 2], [2, 3], [3, 0], [4, 5], [5, 6], [6, 7], [7, 4], [0, 4], [1, 5], [2, 6], [3, 7], ]; var triangles = [ [0, 1, 2], [0, 2, 3], // Front face [4, 5, 6], [4, 6, 7], // Back face [0, 1, 5], [0, 5, 4], // Top face [2, 3, 7], [2, 7, 6], // Bottom face [0, 3, 7], [0, 7, 4], // Right face [1, 2, 6], [1, 6, 5] // Left face ]; var triangleColors = [ [255, 0, 0], [0, 255, 0], // Front face [0, 0, 255], [255, 255, 0], // Back face [0, 255, 255], [255, 0, 255], // Top face [255, 165, 0], [255, 192, 203], // Bottom face [128, 0, 128], [0, 128, 128], // Right face [128, 128, 0], [0, 0, 128] // Left face ]; var project = function(point) { var scale = 200 / (point[2] + 300); // Do the division for half canvas size outside of the draw so it only happens once var x = point[0] * scale + halfWidth; var y = point[1] * scale + halfHeight; return [x, y, point[2]]; // Return x, y, and original z for comparison later }; var moveAll = function(dx, dy, dz) { for (var i = 0; i < points.length; i++) { points[i][0] += dx; points[i][1] += dy; points[i][2] += dz; } }; // Calculate barycentric coordinates for the point inside the triangle var barycentric = function(p, p0, p1, p2) { // Better to dodge a divide here and use multiplication instead var denom = 1 / ((p1[1] - p2[1]) * (p0[0] - p2[0]) + (p2[0] - p1[0]) * (p0[1] - p2[1])); var a = ((p1[1] - p2[1]) * (p[0] - p2[0]) + (p2[0] - p1[0]) * (p[1] - p2[1])) * denom; var b = ((p2[1] - p0[1]) * (p[0] - p2[0]) + (p0[0] - p2[0]) * (p[1] - p2[1])) * denom; var c = 1 - a - b; return [a, b, c]; }; // Check if pixel (x, y) is inside the triangle var isInside = function(px, py, p0, p1, p2) { var b = barycentric([px, py], p0, p1, p2); return b[0] >= 0 && b[1] >= 0 && b[2] >= 0; }; // Rasterize the triangle and perform Z-buffer check // Notice the extra argument for referencing imageData var rasterizeTriangle = function(p0, p1, p2, color, id) { // Using the ternary operator instead of function calls (actually didn't make much of a noticeable difference on my end but it's still ideal) var xmin1 = (p1[0] < p2[0] ? p1[0] : p2[0]); var xmin = p0[0] < xmin1 ? p0[0] : xmin1; var xmax1 = (p1[0] > p2[0] ? p1[0] : p2[0]); var xmax = p0[0] > xmax1 ? p0[0] : xmax1; var ymin1 = (p1[1] < p2[1] ? p1[1] : p2[1]); var ymin = p0[1] < ymin1 ? p0[1] : ymin1; var ymax1 = (p1[1] > p2[1] ? p1[1] : p2[1]); var ymax = p0[1] > ymax1 ? p0[1] : ymax1; // Loop through all pixels in the bounding box of the triangle for (var x = xmin; x <= xmax; x++) { for (var y = ymin; y <= ymax; y++) { // Check if the pixel is inside the triangle using barycentric coordinates if (isInside(x, y, p0, p1, p2)) { // Calculate interpolated Z value var b = barycentric([x, y], p0, p1, p2); var z = b[0] * p0[2] + b[1] * p1[2] + b[2] * p2[2]; // Interpolate Z // If this pixel is closer, update the pixel and Z-buffer var idx = _floor(y) * _width + _floor(x); if (zBuffer[idx] === undefined \|\| z < zBuffer[idx]) { zBuffer[idx] = z; // Update Z-buffer // There are 4 color values for each pixel (RGBA). The bit shift operator in this case (... << 2) is the same as multiplying by 4 (... * 4) var ci = idx << 2; id[ci] = color[0]; id[ci + 1] = color[1]; id[ci + 2] = color[2]; } } } } }; // Rotate points (just for animation) // Notice localized trig and dist functions var rotateY_ = function() { for (var i = 0; i < points.length; i++) { var p = points[i]; var a = _atan2(p[2], p[0]) + 0.01; var d = _dist(p[2], p[0], 0, 0); var nx = _cos(a) * d; var ny = _sin(a) * d; points[i][0] = nx; points[i][2] = ny; } }; var rotateX_ = function() { for (var i = 0; i < points.length; i++) { var p = points[i]; var a = _atan2(p[2], p[1]) + 0.01; var d = _dist(p[2], p[1], 0, 0); var nx = _cos(a) * d; var ny = _sin(a) * d; points[i][1] = nx; points[i][2] = ny; } }; frameRate(0); // Set the background color and initialize imageData background(0); var backColor; loadPixels(); // imageData contains a lot of information but we want a pixel color array called data that we can access with dot notation var id = imageData.data; // The .slice array method makes a copy of an array backColor = id.slice(); var draw = function() { // The .set array method just sets one array equal to another id.set(backColor); zBuffer.set(zBufferReset); rotateX_(); rotateY_(); rotateY_(); //background(0); // Clear Z-buffer for this frame // Loop through all triangles and render them with their respective colors // Some people would say to use the .forEach array method instead of a loop but if I recall correctly it makes no difference for (var i = 0; i < triangles.length; i++) { var t = triangles[i]; var p0 = project(points[t[0]]); var p1 = project(points[t[1]]); var p2 = project(points[t[2]]); // Get the color for this triangle var color = triangleColors[i]; // Rasterize the triangle and perform Z-buffer check // Notice imageData.data as an additional argument here rasterizeTriangle(p0, p1, p2, color, id); } // Update everything updatePixels(); // Display the frame rate fill(255); text(this.__frameRate.toFixed(), 20, 20); };
Folds
Fork	false
Key	ag5zfmtoYW4tYWNhZGVteXIXCxIKU2NyYXRjaHBhZBiAgLun3rb2CAw
Votes	1
Spin-Offs	0
Type	PJS
Width	400
Height	400
User Flagged	false
Origin Scratchpad	{"id":"6214970231406592","title":"3D engine? Pls help make it less laggy","deleted":"false","official":"false"}
Hidden From Hotlist	false
Restricted Posting	false
By Child	false
Author Nick	Fifth
Author Name	FifthStateOfMatter
Author ID	kaid_1065213098995021368328526
Author Profile Access	PUBLIC

Archive Data

Added	19 days ago, 1734745995532
Updated	19 days ago, 1734745995532
Source Deleted	unknown