31:T5ac,function verboseDraw(ctx, t) { const w = 99; ctx.clearRect(0, 0, 100, 100); // Instead of two loops for horizontal and vertical we just do one scanning both. for(let i=6e3;i--;) { // World space coordinates. let X=t; let Y=1; let Z; // Ray direction in world space. let a=i%w/50-1; let b=1-i/4e3; let d=1; // Light. // Background color. let s= BACKGROUND==='Original'? b: BACKGROUND==='Beam'? a*b: BACKGROUND==='Sunny'? Math.max(0, Math.hypot(a-0.6,b-0.4)-0.2): 0; // Ray tracing! for (Z=2; Z mutable t = START_POS}>Restart`","pinned":false,"hidden":false,"mode":"ojs"},{"id":177,"value":"viewof SPEED = Inputs.range([0, 10], { label: 'Speed', value: 1, step: 1 });","pinned":false,"hidden":false,"mode":"ojs"},{"id":186,"value":"viewof START_POS = Inputs.range([0, 1000], { label: 'Starting position', value: 0, step: 1 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":3,"value":"{\n const context = DOM.context2d(100, 60, 1);\n context.canvas.style.width = '400px';\n while(true) {\n draw(context, mutable t);\n mutable t += SPEED;\n yield context.canvas;\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":233,"value":"viewof DRAW_VERSION = Inputs.radio(['Original', 'Verbose'], {label: 'Draw function', value: 'Verbose'});","pinned":false,"hidden":false,"mode":"ojs"},{"id":374,"value":"viewof MODEL = Inputs.radio(['Original', 'Simple cubes', 'Torus'], {label: 'Model to draw', value: 'Original'});","pinned":false,"hidden":false,"mode":"ojs"},{"id":411,"value":"viewof BACKGROUND = Inputs.radio(['Original', 'Beam', 'Sunny'], {label: 'Background', value: 'Original'});","pinned":false,"hidden":false,"mode":"ojs"},{"id":466,"value":"viewof TEXTURE = Inputs.radio(['Original', 'Striped', 'None'], {label: 'Texture', value: 'Original'});","pinned":false,"hidden":false,"mode":"ojs"},{"id":532,"value":"viewof GROUND_PLANE = Inputs.range([0,100], { label: 'Ground plane', value: 6, step: 1 });","pinned":false,"hidden":false,"mode":"ojs"},{"id":546,"value":"viewof CITY_DISTANCE = Inputs.range([0,100], { label: 'Distance to city', value: 32, step: 1 });","pinned":false,"hidden":false,"mode":"ojs"},{"id":541,"value":"viewof AVENUE_WIDTH = Inputs.range([0,100], { label: 'Avenue width', value: 27, step: 1 });","pinned":false,"hidden":false,"mode":"ojs"},{"id":550,"value":"viewof AVENUE_PERIOD = Inputs.range([0,200], { label: 'Distance between avenues', value: 99, step: 1 });","pinned":false,"hidden":false,"mode":"ojs"},{"id":560,"value":"viewof BUILDING_WIDTH = Inputs.range([0,100], { label: 'Building width', value: 9, step: 1 });","pinned":false,"hidden":false,"mode":"ojs"},{"id":563,"value":"viewof BUILDING_DEPTH = Inputs.range([0,100], { label: 'Building depth', value: 8, step: 1 });","pinned":false,"hidden":false,"mode":"ojs"},{"id":507,"value":"viewof BUILDING_HEIGHT = Inputs.range([0, 200], { label: 'Building height maximum', value: 45, step: 1 });","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":327,"value":"function isThereAnythingAt(X, Y, Z, t) {\n if (MODEL === 'Original') {\n // The random building height comes from (X^Z)*8.\n return Y>=GROUND_PLANE-(CITY_DISTANCE30 && (Y+110)%50<20 && X%50<20;\n } else if (MODEL === 'Torus') {\n X -= t;\n Z -= 70;\n Y += 10;\n function rot(x, y, theta) {\n const s = Math.sin(theta);\n const c = Math.cos(theta);\n return [c*x+s*y, c*y-s*x];\n }\n [X, Y] = rot(X, Y, t/50);\n [Y, Z] = rot(Y, Z, t/20);\n const q = Math.hypot(X, Z)-20;\n return Math.hypot(q, Y)-10 < 0;\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":197,"value":"function originalDraw(ctx, t) {\n ctx.clearRect(0, 0, 100, 100);\n let i, X, Y, Z, a, b, d, s, w;\n // This is from the tweet almost verbatim.\n for(w=99,i=6e3;i--;ctx.fillRect(i%w,i/w|0,1-d*Z/w+s,1))\n for(a=i%w/50-1,s=b=1-i/4e3,X=t,Y=Z=d=1;\n ++Z