Viewing Program

Program Data

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

Title	3D Pixel Art Engine
ID	5754888916779008
Created	4 years ago, 1605024071917
Updated	4 years ago, 1605218373144
Code	<!DOCTYPE html> <!-- ———————— Pixel Art But It's 3D o.0 ———————— (so... ig that would be called voxel art?) *** INSTRUCTIONS * Use the mouse to turn, and arrow keys or 'a' and 'z' to zoom in and out. I'm honestly surprised that no one's asked me how to play yet (EDIT: it's happened now lol) Change the grassBlock variable to false for a tree-lookin thing * WHY THIS PROGRAM IS GETTING SO MUCH HATE * Because I used a built in PJS library for the 3D shapes instead of maually coding my own * ABOUT * Took me about two days to design. Feel free to code your own designs and use this whenever you want :) If you want to use your own design in a webpage, you can copy the code and mayyyybe some credit at the top of the program would be nice too This runs at full FPS for me (stopping at about 80), but idk how it works on other computers. * HOW TO USE * The bitmaps (which draws the pixels) can be found a little bit after the beginning of the pjs code. Each array inside the bitmap controls a different plane of cubes along the y axis. Inside each array, you can edit the blocks for the x and z axes. The lines the run across the screen display each of the planes: red for the x axis, blue for the z axis, and black for the y axis. You can comment out the axis markers in the code. The pixel art image is aligned using the center of each plane, so no matter how many blocks you add, it will still be in the center of the screen, unless you change the x and y placement (and size!) when it is called in the draw function. Kinda like an image, using imageMode(CENTER) instead of imageMode(CORNER). Also, you can add more pixels and change the colors inside the drawImage function. To condense the code, press conrol + 0, or command + option + 0, depending on your computer. For some reason webpages don't like automatically codensing the pjs code inside. * WHY DID I MAKE THIS * Idk I got distracted lol * CREDITS * All credit to BlueBird (https://www.khanacademy.org/profile/birdwatcher03) for the thumbnail save code. Some credit to Pamela and Element118 — i learned how to implement pjs inside a webpage from their programs. --> <html> <head> <meta charset="utf-8"> <title>3D Pixel Art Engine</title> <style> html, body { overflow: hidden; margin: 0px; } </style> </head> <body> <canvas id="JScanvas"></canvas> <script src="https://cdn.jsdelivr.net/processing.js/1.4.8/processing.min.js"></script> <!-- Processing.JS code --> <script> / Canvas / var JScanvas = document.getElementById("JScanvas"); / Processing.JS code */ var code = function(processingInstance){ with (processingInstance) { //canvas size and type size(JScanvas.width, JScanvas.height, WEBGL); //I stole this from No Name, who stole it from Green Ghost — it helps with keeping Oh-Noes quiet var setTimeout = function(time) { this[["KAInfiniteLoopCount"]] = time; }; setTimeout(-Infinity); //handy varaibles var showAxes = true; var lines = false; var grassBlock = true; //varaibles and settings cursor("default"); frameRate(60); var mx = -0.1; var my = -0.4; var mz = 0; var zoom = 0; //keys var keys = []; var moveZ = -500; var blocks = []; var balls = []; / —— bit maps —— / var treePixels = [ [ "-------", "-------", "---1---", "--121--", "---1---", "-------", "-------" ], // 1st layer from top [ "-------", "---1---", "---2---", "-12221-", "---2---", "---1---", "-------", ], // 2nd layer from top [ "---2---", "--323--", "-34243-", "2226222", "-34243-", "--323--", "---2---", ], // 3nd layer from top [ "---3---", "-54245-", "-44244-", "3226223", "-44244-", "-54245-", "---3---", ], // ... [ "-------", "---5---", "--555--", "-55955-", "--555--", "---5---", "-------", ], [ "-------", "-------", "---9---", "--899--", "---9---", "-------", "-------", ], [ "-------", "-------", "---9---", "--999--", "---9---", "-------", "-------", ], [ "-------", "-------", "---9---", "--998--", "---9---", "-------", "-------", ], [ "-------", "-------", "---9---", "--998--", "---9---", "-------", "-------", ], [ "-------", "-------", "---9---", "--999--", "---9---", "-------", "-------", ], [ "-------", "--898--", "---9---", "899999-", "---9-8-", "--89---", "-------", ], // bottom layer ]; var blockPixels = [ [ "2222222", "2112212", "2233211", "2223222", "2222222", "2111221", "2222211", ], [ "3453707", "7333337", "7333334", "3333333", "4333337", "4333337", "7473775", ], [ "7227777", "7777777", "0777772", "0777777", "7777777", "7777777", "7787007", ], [ "9229770", "9777770", "7777772", "0777778", "9777778", "0777777", "7887887", ], [ "9708880", "8888888", "8888888", "9888888", "9888889", "8888888", "8878877", ], [ "r999899", "9999999", "9999999", "8999999", "9999999", "9999999", "8998998", ], [ "rr9999r", "rrr999r", "9rrr999", "99rrr9r", "r99r9rr", "rrr9999", "9r999r9", ], ]; //functions var customCube = function(x, y, z, size, rotX, rotY, rotZ){ pushMatrix(); stroke(0); translate(x, y, z); rotateX(rotX); rotateY(rotY); rotateZ(rotZ); box(size, size, size); popMatrix(); }; var customCube2 = function(x, y, z, width, height, depth){ pushMatrix(); translate(x, y, z); box(width, height, depth); popMatrix(); }; var drawImage = function(x, y, z, size, pixelSize, pixels){ //size and placement pushMatrix(); translate(x, y, z); translate( (pixelSize1.5)-(pixels[0][0].lengthpixelSize)1.5, (pixelSize1.5)-(pixels.lengthpixelSize)1.5, (pixelSize1.5)-(pixels[0].lengthpixelSize)1.5 ); scale(size/100); //stroke if(lines){ stroke(0); } else { noStroke(); } //loops through X, Y, and Z axes for(var Y = 0; Y < pixels.length; Y++){ for (var Z = 0; Z < pixels[Y].length; Z++){ for (var X = 0; X < pixels[Y][Z].length; X++){ //defines pixel var pixel = function(col){ if(col==="none"){noFill();}else{fill(col);} customCube2( (XpixelSize), (YpixelSize), (ZpixelSize), pixelSize, pixelSize, pixelSize ); }; //draws different pixels switch(pixels[Y][Z][X]){ case '-': pixel("none"); break; case '1': pixel(color(87, 184, 22)); break; case '2': pixel(color(66, 138, 15)); break; case '3': pixel(color(53, 112, 10)); break; case '4': pixel(color(52, 97, 18)); break; case '5': pixel(color(34, 71, 6)); break; case '6': pixel(color(105, 79, 12)); break; case '7': pixel(color(140, 98, 26)); break; case '8': pixel(color(99, 61, 8)); break; case '9': pixel(color(74, 48, 8)); break; case '0': pixel(color(135, 86, 12)); break; case 'q': pixel(color(102, 92, 78)); break; case 'w': pixel(color(66, 63, 58)); break; case 'e': pixel(color(112, 86, 43)); break; case 'r': pixel(color(43, 30, 10)); break; case 't': pixel(color(87, 78, 65)); break; case 'y': pixel(color(71, 71, 71)); break; }}}} popMatrix(); }; //main draw function (I didn't indent again... smh) draw = function(){ //background and lights background(255); lights(); //display { pushMatrix(); //camera translate(0, 0, zoom); translate(JScanvas.width/2, JScanvas.height/2); rotateX(mx); rotateY(my); rotateZ(mz); translate(-JScanvas.width/2, -JScanvas.height/2); //axes if(showAxes){ fill(0); customCube2(JScanvas.width/2, JScanvas.height/2, 0, 2, 5000, 2); fill(255, 0, 0); customCube2(JScanvas.width/2, JScanvas.height/2, 0, 5000, 2, 2); fill(0, 0, 255); customCube2(JScanvas.width/2, JScanvas.height/2, 0, 2, 2, 5000); } //pixel art if (grassBlock){ drawImage(JScanvas.width/2, JScanvas.height/2, 0, 300, 10, blockPixels); } else { drawImage(JScanvas.width/2, JScanvas.height/2, 0, 300, 10, treePixels); //coordinates: x, y, z, size, pixelsize, array } popMatrix(); // end of display } //zoom function if(keys[DOWN] \|\| keys[90]){ zoom -= 5; } if(keys[UP] \|\| keys[65]){ zoom += 5; } //mouse functions mouseDragged = function(){ my += (mouseX - pmouseX)/50; mx += -(mouseY - pmouseY)/50; }; //keyfunctions keyPressed = function(){ keys[keyCode] = true; }; keyReleased = function(){ keys[keyCode] = false; }; //framerate display fill(0); textFont(createFont("Arial Bold"), 12); textAlign(RIGHT, BASELINE); text(this.__frameRate, JScanvas.width, JScanvas.height-5); }; } }; /* Credit to Element 118 for the innerWidth and innerHeight idea **/ (function() { JScanvas.width = window.innerWidth; JScanvas.height = window.innerHeight; var processingInstance = new Processing(JScanvas, code); })(); </script> <!-- Program Saver made by Bluebird --> <script src="https://cdn.jsdelivr.net/npm/html2canvas@1.0.0-rc.3/dist/html2canvas.min.js"></script> <script>//1035246 big 1032738 good var save = function(){ html2canvas(document.body,{ allowTaint : false, useCORS: true, //width:document.documentElement.clientWidth, //height:document.documentElement.clientWidth, width:600, height:600, x: 200 //y: 200 }) .then(function(canvas){ b64Img = canvas.toDataURL(); window.top.postMessage(b64Img, "https://www.khanacademy.org/"); }); }; var handleSave = function(e) { if (JSON.parse(e.data).screenshot) { setTimeout(function() { console.log("Saving..."); save(); }, 1000) } }; window.parent.savers = window.parent.savers \|\| 0; window.parent.addEventListener('message', handleSave); window.parent.savers += 1; for (window.parent.savers; window.parent.savers > 1; window.parent.savers -= 1) { window.parent.removeEventListener('message', handleSave) } </script> </body> </html>
Folds	35,44,50,450,454,486
Fork	false
Key	ag5zfmtoYW4tYWNhZGVteXIXCxIKU2NyYXRjaHBhZBiAgO3sp8GcCgw
Votes	64
Spin-Offs	4
Type	WEBPAGE
Width	400
Height	600
User Flagged	false
Origin Scratchpad	null
Hidden From Hotlist	false
Restricted Posting	false
By Child	false
Author Nick	Red Arrow ✝
Author Name	Arrowhawk
Author ID	kaid_125546068146291180258877
Author Profile Access	PUBLIC

Archive Data

Added	1 days ago, 1736134098077
Updated	1 days ago, 1736134098077
Source Deleted	unknown