:quality(85)/https:%2F%2Fcdn.frvr.ai/686b88f1298ae6a06723794d.png)
:quality(85)/https:%2F%2Fcdn.frvr.ai/686b890f298ae6a06723794f.png)
Creation History
Code edit (5 edits merged)
Please save this source code
User prompt
Make a translateTriangle function and centre the cube with the translateTriangle function.
Code edit (2 edits merged)
Please save this source code
User prompt
Please fix the bug: 'Cannot read properties of undefined (reading '0')' in or related to this line: 'var p1 = project(triangle[0], triangle[1], triangle[2]);' Line Number: 144
User prompt
In the projectTriangle function, use perspective project on the 3 points array in the triangle parameter, and return a 2 point array to draw.
Code edit (1 edits merged)
Please save this source code
Code edit (5 edits merged)
Please save this source code
User prompt
make an arg for wireframes on the drawTri function, default false.
Code edit (2 edits merged)
Please save this source code
User prompt
In the drawTri function, fill in the triangles using the scanline rendering algorithm.
User prompt
Fill in the triangles using the scanline rendering algorithm.
Code edit (2 edits merged)
Please save this source code
User prompt
Create a class "Cube" and store the triangles for now.
Code edit (1 edits merged)
Please save this source code
User prompt
optimise the code for speed
Code edit (2 edits merged)
Please save this source code
User prompt
Draw a 1000 random lines in a loop in between the start valuable and the console log
Code edit (1 edits merged)
Please save this source code
User prompt
Please fix the bug: 'toString is not a function' in or related to this line: 'console.log("Time: " + toString(Date.now() - start));' Line Number: 82
Code edit (1 edits merged)
Please save this source code
User prompt
Draw the triangles in the tris.forEach function
Code edit (3 edits merged)
Please save this source code
User prompt
Make a line drawing function using the putPixel function
Code edit (1 edits merged)
Please save this source code
User prompt
Please fix the bug: 'tween.to is not a function' in or related to this line: 'tween.to(self, {' Line Number: 36 ↪💡 Consider importing and using the following plugins: @upit/tween.v1
/****
* Initialize Game
****/
var game = new LK.Game({
backgroundColor: 0
});
/****
* Game Code
****/
//[x1, y1, x2, y2, x3, y3]
var tris = [[0, 0, 8, 0, 0, 8], [0, 8, 8, 0, 8, 8]];
// Game constants for the grid
var GRID_SIZE = 64;
var PIXEL_SIZE = 2048 / GRID_SIZE;
// Create the grid of pixels
function putPixel(x, y, color) {
if (x >= 0 && x < GRID_SIZE && y >= 0 && y < GRID_SIZE) {
// Cache children array reference for speed
var children = game.children;
children[x + y * GRID_SIZE].tint = color;
}
}
// Line drawing function using Bresenham's line algorithm
function drawLine(x0, y0, x1, y1, color) {
var dx = x1 - x0;
var dy = y1 - y0;
var adx = dx < 0 ? -dx : dx;
var ady = dy < 0 ? -dy : dy;
var sx = dx < 0 ? -1 : 1;
var sy = dy < 0 ? -1 : 1;
var err = adx - ady;
var x = x0;
var y = y0;
while (true) {
putPixel(x, y, color);
if (x === x1 && y === y1) {
break;
}
var e2 = 2 * err;
if (e2 > -ady) {
err -= ady;
x += sx;
}
if (e2 < adx) {
err += adx;
y += sy;
}
}
}
var colorIndex = 0;
// Precompute offset once for all pixels
var offset = 2732 / 2 - GRID_SIZE * PIXEL_SIZE / 2;
for (var y = 0; y < GRID_SIZE; y++) {
for (var x = 0; x < GRID_SIZE; x++) {
// Get an instance of our pixel asset
var pixel = LK.getAsset('pixel', {
x: x * PIXEL_SIZE,
y: y * PIXEL_SIZE + offset,
tint: 0
});
game.addChild(pixel);
}
}
//Start of the 3d renderer
var start = Date.now();
tris.forEach(function (tri, i) {
// Extract triangle vertices
var x1 = tri[0];
var y1 = tri[1];
var x2 = tri[2];
var y2 = tri[3];
var x3 = tri[4];
var y3 = tri[5];
// Draw the three sides of the triangle
drawLine(x1, y1, x2, y2, 0xffffff); // Side 1-2
drawLine(x2, y2, x3, y3, 0xffffff); // Side 2-3
drawLine(x3, y3, x1, y1, 0xffffff); // Side 3-1
});
console.log("Time: " + String(Date.now() - start)); ===================================================================
--- original.js
+++ change.js
@@ -15,41 +15,45 @@
var PIXEL_SIZE = 2048 / GRID_SIZE;
// Create the grid of pixels
function putPixel(x, y, color) {
if (x >= 0 && x < GRID_SIZE && y >= 0 && y < GRID_SIZE) {
- game.children[x + y * GRID_SIZE].tint = color;
+ // Cache children array reference for speed
+ var children = game.children;
+ children[x + y * GRID_SIZE].tint = color;
}
}
// Line drawing function using Bresenham's line algorithm
function drawLine(x0, y0, x1, y1, color) {
- var dx = Math.abs(x1 - x0);
- var dy = Math.abs(y1 - y0);
- var sx = x0 < x1 ? 1 : -1;
- var sy = y0 < y1 ? 1 : -1;
- var err = dx - dy;
+ var dx = x1 - x0;
+ var dy = y1 - y0;
+ var adx = dx < 0 ? -dx : dx;
+ var ady = dy < 0 ? -dy : dy;
+ var sx = dx < 0 ? -1 : 1;
+ var sy = dy < 0 ? -1 : 1;
+ var err = adx - ady;
var x = x0;
var y = y0;
while (true) {
putPixel(x, y, color);
if (x === x1 && y === y1) {
break;
}
var e2 = 2 * err;
- if (e2 > -dy) {
- err -= dy;
+ if (e2 > -ady) {
+ err -= ady;
x += sx;
}
- if (e2 < dx) {
- err += dx;
+ if (e2 < adx) {
+ err += adx;
y += sy;
}
}
}
var colorIndex = 0;
+// Precompute offset once for all pixels
+var offset = 2732 / 2 - GRID_SIZE * PIXEL_SIZE / 2;
for (var y = 0; y < GRID_SIZE; y++) {
for (var x = 0; x < GRID_SIZE; x++) {
- // Center the virtual screen
- var offset = 2732 / 2 - GRID_SIZE * PIXEL_SIZE / 2;
// Get an instance of our pixel asset
var pixel = LK.getAsset('pixel', {
x: x * PIXEL_SIZE,
y: y * PIXEL_SIZE + offset,
@@ -59,31 +63,18 @@
}
}
//Start of the 3d renderer
var start = Date.now();
-// tris.forEach(function (tri, i) {
-// // Extract triangle vertices
-// var x1 = tri[0];
-// var y1 = tri[1];
-// var x2 = tri[2];
-// var y2 = tri[3];
-// var x3 = tri[4];
-// var y3 = tri[5];
-// // Draw the three sides of the triangle
-// drawLine(x1, y1, x2, y2, 0xffffff); // Side 1-2
-// drawLine(x2, y2, x3, y3, 0xffffff); // Side 2-3
-// drawLine(x3, y3, x1, y1, 0xffffff); // Side 3-1
-// });
-// Draw 1000 random lines
-for (var i = 0; i < 100000; i++) {
- // Generate random coordinates within the grid
- var x1 = Math.floor(Math.random() * GRID_SIZE);
- var y1 = Math.floor(Math.random() * GRID_SIZE);
- var x2 = Math.floor(Math.random() * GRID_SIZE);
- var y2 = Math.floor(Math.random() * GRID_SIZE);
- // Generate random color
- var color = Math.floor(Math.random() * 0xFFFFFF);
- // Draw the line
- drawLine(x1, y1, x2, y2, color);
-}
-console.log("Time: " + String(Date.now() - start));
-;
\ No newline at end of file
+tris.forEach(function (tri, i) {
+ // Extract triangle vertices
+ var x1 = tri[0];
+ var y1 = tri[1];
+ var x2 = tri[2];
+ var y2 = tri[3];
+ var x3 = tri[4];
+ var y3 = tri[5];
+ // Draw the three sides of the triangle
+ drawLine(x1, y1, x2, y2, 0xffffff); // Side 1-2
+ drawLine(x2, y2, x3, y3, 0xffffff); // Side 2-3
+ drawLine(x3, y3, x1, y1, 0xffffff); // Side 3-1
+});
+console.log("Time: " + String(Date.now() - start));
\ No newline at end of file
