Viewing Program

Program Data

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

Title	City of Color [Actual 3D Engine]
ID	6680377081495552
Created	7 years ago, 1526588827229
Updated	7 years ago, 1528597334872
Code	// So... I didn't realize that the latest khantest was HTML only until now. So... this is what I WOULD have entered. // XD Oh well. It's still a cool project and there's a lot of cool functions that I wrote for it to make sure it was compatible. /** @Controls * Drag mouse to rotate * UP and DOWN arrow keys to move in and out * + and - keys to change the size of the city */ //Also, shoutout to KWC who left a comment on this program with some useful tips for various improvements and tweaks! var citySize = 10; //Try playing with this to change the city's size. City size will be constrained to [1, 40]. var targetFPS = 60; frameRate(0); var keys = []; var Camera = { x: 0, y: 0, z: 0, rotX: 0, rotY: 0, }; var Translation = function(x, y, z, rotX, rotY) { return( { position: [x,y,z], sinRotX: Math.sin(rotX), cosRotX: Math.cos(rotX), sinRotY: Math.sin(rotY), cosRotY: Math.cos(rotY), } ); }; var Rotation = function(rot) { return({ sin: Math.sin(rot), cos: Math.cos(rot), }); }; var randomElement = function(arr) { return(arr[Math.random() arr.length \| 0]); }; var Render = function() { this.bgColor = color(255, 255, 255); this.shapes = []; this.multiplier = width/2; this.translation = Translation(0, 0, 0, 0, 0); }; //Clears the render canvas Render.prototype.clear = function() { this.shapes = []; }; //Sets the field of view of the canvas in the range [1, 170]° Render.prototype.setFOV = function(degrees) { var w = max(width, height); var fov = constrain(degrees, 1, 170); this.multiplier = w * ((180-fov)/fov); }; //Outputs any shapes in the render Render.prototype.output = function() { background(this.bgColor); noStroke(); for(var i = 0; i < this.shapes.length; i ++) { var s = this.shapes[i]; fill(s[0]); beginShape(); for(var j = 1; j < s.length; j += 2) { vertex(s[j], s[j+1]); } endShape(); } }; //Adds a shape to the render Render.prototype.push = function(object) { var s = this.shapes; var t = this.translation; var pos = t.position; var fov = this.multiplier; var drawing = [object[0]]; var shapeArr = object.slice(); for(var j = 1; j < shapeArr.length; j += 3) { var point = []; point[0] = shapeArr[j ] - pos[0]; point[1] = shapeArr[j+1] - pos[1]; point[2] = shapeArr[j+2] - pos[2]; var point2 = point[2] * t.cosRotY + point[0] * t.sinRotY; shapeArr[j ] = point[0] * t.cosRotY - point[2] * t.sinRotY; shapeArr[j+1] = point[1] * t.cosRotX + point2 * t.sinRotX; shapeArr[j+2] = point2 * t.cosRotX - point[1] * t.sinRotX; drawing.push((shapeArr[j]/shapeArr[j+2])fov, (shapeArr[j+1]/shapeArr[j+2])fov); } s.push(drawing); }; //Sets the camera for the render Render.prototype.setCamera = function(x, y, z, rotX, rotY) { this.translation = Translation(x, y, z, rotX, rotY); }; //Does not use the "new" keyword to avoid memory leakage var Building = function(x, z, width, depth, floorHeight, floors, _color, windowColor, lightRotation, verticalLightRotation, windowColumns) { var half_width = width/2; var half_depth = depth/2; var black = color(0, 0, 0, alpha(_color)); var blackWindow = color(0, 0, 0, alpha(windowColor)); var conv = PI/180; var color1 = lerpColor(_color, black, 0.5 + lightRotation.sin * 0.5); var color2 = lerpColor(_color, black, 0.5 - lightRotation.cos * 0.5); var color3 = lerpColor(_color, black, 0.5 + verticalLightRotation.sin * 0.5); var w_color1 = lerpColor(windowColor, blackWindow, 0.5 + lightRotation.sin * 0.5); var w_color2 = lerpColor(windowColor, blackWindow, 0.5 - lightRotation.cos * 0.5); var shapeArray = []; shapeArray.push( [ color1, x - half_width, 0, z - half_depth, x - half_width, -floorHeight * floors, z - half_depth, x + half_width, -floorHeight * floors, z - half_depth, x + half_width, 0, z - half_depth ], [ color2, x - half_width, 0, z - half_depth, x - half_width, -floorHeight * floors, z - half_depth, x - half_width, -floorHeight * floors, z + half_depth, x - half_width, 0, z + half_depth ] ); var roof = Math.random(); if(roof < 0.7) { shapeArray.push( [ color3, x + half_width, -floorHeight * floors, z - half_depth, x - half_width, -floorHeight * floors, z - half_depth, x - half_width, -floorHeight * floors, z + half_depth, x + half_width, -floorHeight * floors, z + half_depth ] ); } else if(roof < 0.85) { shapeArray.push( [ color2, x - half_width, -floorHeight * floors - 10, z + half_depth, x - half_width, -floorHeight * floors, z - half_depth, x - half_width, -floorHeight * floors, z + half_depth ], [ color3, x + half_width, -floorHeight * floors, z - half_depth, x - half_width, -floorHeight * floors, z - half_depth, x - half_width, -floorHeight * floors - 10, z + half_depth, x + half_width, -floorHeight * floors - 10, z + half_depth ] ); } else { shapeArray.push( [ color1, x + half_width, -floorHeight * floors, z - half_depth, x - half_width, -floorHeight * floors, z - half_depth, x + half_width, -floorHeight * floors - 10, z - half_depth, ], [ color3, x + half_width, -floorHeight * floors - 10, z - half_depth, x - half_width, -floorHeight * floors, z - half_depth, x - half_width, -floorHeight * floors, z + half_depth, x + half_width, -floorHeight * floors - 10, z + half_depth ] ); } for(var i = 0; i < floors; i ++) { //for(var j = 0; j < windowColumns; j ++) { shapeArray.push( [ w_color2, x - half_width * 0.8, -i * floorHeight - 0.2 * floorHeight, z - half_depth, x - half_width * 0.8, -i * floorHeight - 0.8 * floorHeight, z - half_depth, x + half_width * 0.8, -i * floorHeight - 0.8 * floorHeight, z - half_depth, x + half_width * 0.8, -i * floorHeight - 0.2 * floorHeight, z - half_depth ] ); shapeArray.push( [ w_color1, x - half_width, -i * floorHeight - 0.2 * floorHeight, z - half_depth * 0.8, x - half_width, -i * floorHeight - 0.8 * floorHeight, z - half_depth * 0.8, x - half_width, -i * floorHeight - 0.8 * floorHeight, z + half_depth * 0.8, x - half_width, -i * floorHeight - 0.2 * floorHeight, z + half_depth * 0.8 ] ); //} } return(shapeArray); }; //I use these to make functions run independant of the frame rate //This used to be named AsyncThread var Coroutine = function(time) { this.tasks = []; this.iterator = 0; this.repeat = false; this.deltaTime = time; this.timer = millis(); this.realtime = false; }; Coroutine.prototype.newTask = function(task) { this.tasks.push(task); }; Coroutine.prototype.run = function() { if(this.lastExecution === undefined) { this.lastExecution = millis(); } if(this.tasks.length <= 0) { return(true); } if(this.realtime) { this.timer = this.lastExecution; } else { this.timer = millis(); } while((millis()-this.timer) < this.deltaTime) { if(this.iterator >= this.tasks.length) { if(this.repeat) { this.iterator = 0; } else { this.lastExecution = millis(); return(true); } } this.tasks[this.iterator](); this.iterator ++; } this.lastExecution = millis(); return(false); }; Coroutine.prototype.clear = function() { this.tasks = []; this.iterator = 0; }; Coroutine.prototype.restart = function() { this.iterator = 0; }; Coroutine.prototype.initialize = function(isRepeat, isRealTime) { if(isRealTime !== undefined) { this.realtime = isRealTime; } if(isRepeat !== undefined) { this.repeat = isRepeat; } this.lastExecution = millis(); this.iterator = 0; }; Coroutine.prototype.completion = function() { return(this.iterator/(this.tasks.length-1)); }; Coroutine.prototype.iterate = function() { if(this.tasks.length <= 0) { return(true); } if(this.iterator >= this.tasks.length) { if(this.repeat) { this.iterator = 0; } else { this.lastExecution = millis(); return(true); } } this.tasks[this.iterator](); this.iterator ++; return(false); }; var City = function(width, height) { this.colorPalate = []; //Height and width of city if(height !== undefined) { this.size = { width: abs(width), height: abs(height), }; } else if(width !== undefined) { this.size = { width: abs(width), height: abs(width), }; } else { this.size = { width: 0, height: 0, }; } //Stores all of the buildings in the city this.grid = []; }; City.prototype.addColor = function(r, g, b) { if(b === undefined) { this.colorPalate.push(color(red(r), green(r), blue(r))); } else { this.colorPalate.push(color(r, g, b)); } }; City.prototype.setSize = function(width, height) { if(height === undefined) { this.size.width = width; this.size.height = width; } else { this.size.width = width; this.size.height = height; } }; var time = { deltaTime: 0, ms: millis(), lagMs: millis(), }; //Variables used during the program var targetRot = { x: -0.4, y: PI/4+0.1, }; var rotationConstraints = { x: [-0.8, -0.2], y: [0.2, PI/2-0.2], }; var cameraBoomLength; //Load the program //Used later during loading screen var lagLoad; //Creates a new canvas renderer var canvas = new Render(); canvas.bgColor = color(132, 225, 235); canvas.setFOV(60); var pipeline = new Coroutine(1000 / targetFPS); //Initialize the loading pipeline var load = new Coroutine(1000 / targetFPS); //Initialize city and buildings citySize = constrain(citySize, 1, 40); var myCity = new City(citySize); //Colors of buildings for(var i = 0; i < 100; i ++) { var c = color.toRGB( Math.random() * 255, Math.random() * 25 + 100, Math.random() * 50 + 205 ); myCity.addColor( c[0], c[1], c[2] ); } //Defines the angle of the light by pre-calculating the sine and cosine of the angle var lighting = Rotation(-PI/5); var vertical_lighting = Rotation(-PI/3); //Oh noes work-around. Contains the definition for the spread of buildings var generateBuilding = function(x, y) { var c = randomElement(myCity.colorPalate); myCity.grid.push( Building( -x * 30, -y * 30, random(20, 25), random(20, 25), 15, round(random(3, 11)), c, lerpColor(c, color(0, 0, 0), 0.25), lighting, vertical_lighting, round(random(1,2)) ) /Building( -x 30, -y * 30, 30, 30, 10, 2, randomElement(myCity.colorPalate), color(156, 156, 156, 200), lighting )/ ); }; //Another Oh-noes workaround. This one creates the render pipeline's ability to get information from a building. var pipelineTaskPushBuilding = function(building, render) { return(function() { pipeline.newTask( function() { for(var j = 0; j < building.length; j ++) { render.push(building[j]); } } ); }); }; //Function used to initialize the loading and rendering pipelines var reload = function() { //Set the size of the city citySize = constrain(citySize, 1, 40); myCity.setSize(citySize); //Clear load pipeline load.clear(); var cityWidth = myCity.size.width; var cityHeight = myCity.size.height; myCity.grid = []; //Generate buildings for(var x = 0; x < cityWidth; x ++) { for(var y = 0; y < cityHeight; y ++) { generateBuilding(x, y); } } //Initialize render pipeline load.newTask(function() { pipeline.clear(); }); load.newTask( function() {pipeline.newTask(function() { canvas.clear(); }); }); load.newTask(function() { pipeline.newTask(function() { canvas.setCamera(Camera.x, Camera.y, Camera.z, Camera.rotX, Camera.rotY); }); }); load.newTask(function() { pipeline.newTask(function() { canvas.push([ color(64, 64, 64), 10, 0, 10, -cityWidth 30 + 10, 0, 10, -cityWidth * 30 + 10, 0, -cityHeight * 30 + 10, 10, 0, -cityHeight * 30 + 10, ]); }); }); for(var i = 0; i < myCity.grid.length; i ++) { load.newTask(pipelineTaskPushBuilding(myCity.grid[i], canvas)); } load.newTask(function() { pipeline.initialize(false, true); }); //Initialize the loading pipeline load.initialize(false, false); //Make sure program knows to reload pipeline lagLoad = false; cameraBoomLength = (myCity.size.width + myCity.size.height) * 30; }; reload(); //Main execution of tasks is done here var readyToDraw = false; var draw = function() { time.lagMs = time.ms; time.ms = millis(); time.deltaTime = time.ms-time.lagMs; //Camera position in world. This is used to update the transform position in the render pipeline every time the renderer wants to render a frame. if(keys[UP]) { cameraBoomLength -= 0.1 * time.deltaTime; } if(keys[DOWN]) { cameraBoomLength += 0.1 * time.deltaTime; } cameraBoomLength = max(cameraBoomLength, (myCity.size.width + myCity.size.height) * 30); var sinRotY = Math.sin(targetRot.y); var cosRotY = Math.cos(targetRot.y); Camera.x = -myCity.size.width * 15 - sinRotY * cameraBoomLength; Camera.y = -200 - (myCity.size.width + myCity.size.height) * 8; Camera.z = -myCity.size.height * 15 - cosRotY * cameraBoomLength; Camera.rotY = targetRot.y; Camera.rotX = targetRot.x; //We will wait for the city to load. The variable lagLoad ensures a frame between the city loading and the realtime pipeline beginning execution. if(lagLoad) { //One the game is loaded, we enter the realtime render pipeline //If all the shapes are defined, we draw them if(readyToDraw) { pushMatrix(); translate(width/2, height/2); canvas.output(); popMatrix(); fill(255, 255, 255); textSize(50); textAlign(CENTER, TOP); text("City of Color", width/2, 10); readyToDraw = false; } //Run the realtime pipeline if(pipeline.run()) { //Once the pipeline has completed execution, we draw to the canvas and restart the pipeline. readyToDraw = true; pipeline.restart(); } } else { //Loading screen lagLoad = load.run(); var l = load.completion(); noFill(); background(255, 255, 255); fill(0, 0, 0); textSize(20); textAlign(LEFT, BOTTOM); text("Loading", 5, height-5); if(lagLoad) { load.clear(); //Reduces memory usage } readyToDraw = false; //lagLoad = false; } }; var keyPressed = function() { if(!keys[keyCode]) { switch(keyCode) { case 82: reload(); break; case 187: citySize ++; reload(); break; case 189: citySize --; reload(); break; } } keys[keyCode] = true; }; var keyReleased = function() { keys[keyCode] = false; }; var mouseDragged = function() { var x = mouseX - pmouseX; var y = mouseY - pmouseY; targetRot.x = constrain(targetRot.x + y * 0.001, rotationConstraints.x[0], rotationConstraints.x[1]); targetRot.y = constrain(targetRot.y + x * 0.003, rotationConstraints.y[0], rotationConstraints.y[1]); };
Folds	23,29,31,41,42,47,49,51,53,58,60,62,64,68,70,82,84,110,113,115,118,226,230,237,238,240,241,265,266,269,270,272,273,278,279,281,282,296,298,323,324,331,332,341,343,347,350,353,354,357,380,389,396,415,417,427,429,476,481,545,547,564,565,567,569,574
Fork	false
Key	ag5zfmtoYW4tYWNhZGVteXIXCxIKU2NyYXRjaHBhZBiAgKL3x_juCww
Votes	170
Spin-Offs	8
Type	PJS
Width	600
Height	500
User Flagged	false
Origin Scratchpad	null
Hidden From Hotlist	false
Restricted Posting	false
By Child	false
Author Nick	ScusX
Author Name	GiantScus
Author ID	kaid_690562335310574068784363
Author Profile Access	COACH

Archive Data

Added	10 months ago, 1739460621502
Updated	10 months ago, 1739460626309
Source Deleted	unknown