{"ScriptPreparationCode":null,"TestCases":[{"Name":"webgl","Code":"// WebGL - 2D Image\r\n// from https://webglfundamentals.org/webgl/webgl-2d-image.html\r\n\r\n\u0022use strict\u0022;\r\n\r\nfunction main() {\r\n\trender()\r\n }\r\n\r\nfunction render() {\r\n // Get A WebGL context\r\n /** @type {HTMLCanvasElement} */\r\n var canvas = document.querySelector(\u0022#canvas\u0022);\r\n var gl = canvas.getContext(\u0022webgl\u0022);\r\n if (!gl) {\r\n return;\r\n }\r\n\r\n // setup GLSL program\r\n var program = webglUtils.createProgramFromScripts(gl, [\u0022vertex-shader-2d\u0022, \u0022fragment-shader-2d\u0022]);\r\n\r\n // look up where the vertex data needs to go.\r\n var positionLocation = gl.getAttribLocation(program, \u0022a_position\u0022);\r\n var texcoordLocation = gl.getAttribLocation(program, \u0022a_texCoord\u0022);\r\n\r\n // Create a buffer to put three 2d clip space points in\r\n var positionBuffer = gl.createBuffer();\r\n\r\n // Bind it to ARRAY_BUFFER (think of it as ARRAY_BUFFER = positionBuffer)\r\n gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);\r\n // Set a rectangle the same size as the image.\r\n setRectangle(gl, 0, 0, 900, 600);\r\n\r\n // provide texture coordinates for the rectangle.\r\n var texcoordBuffer = gl.createBuffer();\r\n gl.bindBuffer(gl.ARRAY_BUFFER, texcoordBuffer);\r\n gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([\r\n 0.0, 0.0,\r\n 1.0, 0.0,\r\n 0.0, 1.0,\r\n 0.0, 1.0,\r\n 1.0, 0.0,\r\n 1.0, 1.0,\r\n ]), gl.STATIC_DRAW);\r\n\r\n // Create a texture.\r\n var texture = gl.createTexture();\r\n gl.bindTexture(gl.TEXTURE_2D, texture);\r\n\r\n // Set the parameters so we can render any size image.\r\n gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);\r\n gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);\r\n gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);\r\n gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);\r\n\r\n // Upload the image into the texture.\r\n gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, 900, 600, 0, gl.RGBA, gl.UNSIGNED_BYTE, createCushion(0, 900, 0, 600, 0, 0.005, -0.001, 0.001, 0, 150, 0));\r\n\r\n // lookup uniforms\r\n var resolutionLocation = gl.getUniformLocation(program, \u0022u_resolution\u0022);\r\n\r\n webglUtils.resizeCanvasToDisplaySize(gl.canvas);\r\n\r\n // Tell WebGL how to convert from clip space to pixels\r\n gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);\r\n\r\n // Clear the canvas\r\n gl.clearColor(0, 0, 0, 0);\r\n gl.clear(gl.COLOR_BUFFER_BIT);\r\n\r\n // Tell it to use our program (pair of shaders)\r\n gl.useProgram(program);\r\n\r\n // Turn on the position attribute\r\n gl.enableVertexAttribArray(positionLocation);\r\n\r\n // Bind the position buffer.\r\n gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);\r\n\r\n // Tell the position attribute how to get data out of positionBuffer (ARRAY_BUFFER)\r\n var size = 2; // 2 components per iteration\r\n var type = gl.FLOAT; // the data is 32bit floats\r\n var normalize = false; // don\u0027t normalize the data\r\n var stride = 0; // 0 = move forward size * sizeof(type) each iteration to get the next position\r\n var offset = 0; // start at the beginning of the buffer\r\n gl.vertexAttribPointer(\r\n positionLocation, size, type, normalize, stride, offset);\r\n\r\n // Turn on the texcoord attribute\r\n gl.enableVertexAttribArray(texcoordLocation);\r\n\r\n // bind the texcoord buffer.\r\n gl.bindBuffer(gl.ARRAY_BUFFER, texcoordBuffer);\r\n\r\n // Tell the texcoord attribute how to get data out of texcoordBuffer (ARRAY_BUFFER)\r\n var size = 2; // 2 components per iteration\r\n var type = gl.FLOAT; // the data is 32bit floats\r\n var normalize = false; // don\u0027t normalize the data\r\n var stride = 0; // 0 = move forward size * sizeof(type) each iteration to get the next position\r\n var offset = 0; // start at the beginning of the buffer\r\n gl.vertexAttribPointer(\r\n texcoordLocation, size, type, normalize, stride, offset);\r\n\r\n // set the resolution\r\n gl.uniform2f(resolutionLocation, gl.canvas.width, gl.canvas.height);\r\n\r\n // Draw the rectangle.\r\n var primitiveType = gl.TRIANGLES;\r\n var offset = 0;\r\n var count = 6;\r\n gl.drawArrays(primitiveType, offset, count);\r\n}\r\n\r\nfunction setRectangle(gl, x, y, width, height) {\r\n var x1 = x;\r\n var x2 = x \u002B width;\r\n var y1 = y;\r\n var y2 = y \u002B height;\r\n gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([\r\n x1, y1,\r\n x2, y1,\r\n x1, y2,\r\n x1, y2,\r\n x2, y1,\r\n x2, y2,\r\n ]), gl.STATIC_DRAW);\r\n}\r\n\r\nfunction createCushion (minX, maxX, minY, maxY, coef0, coef1, coef2, coef3, base_red, base_green, base_blue) {\r\n\tconst img = new Uint8Array(Math.floor(maxX-minX) * Math.floor(maxY-minY) * 4);\r\n const lx = 0.21; // 5\r\n const ly = 0.14; // 3\r\n const lz = 0.65; // 15\r\n const width = Math.floor((maxX - minX) * 4)\r\n\r\n for (var x = 0; x \u003C maxX - minX; \u002B\u002Bx) {\r\n {\r\n for (var y = 0; y \u003C maxY - minY; \u002B\u002By) {\r\n {\r\n const nx = -(2 * coef1 * (x \u002B minX) \u002B coef0);\r\n const ny = -(2 * coef3 * (y \u002B minY) \u002B coef2);\r\n const norm = Math.sqrt(nx * nx \u002B ny * ny \u002B 1);\r\n const cosa = (nx * lx \u002B ny * ly \u002B lz) / norm;\r\n\r\n const luminance = 2 * (0.3 \u002B 0.8 * Math.max(0, cosa));\r\n const red = base_red * luminance;\r\n const green = base_green * luminance;\r\n const blue = base_blue * luminance;\r\n img[((y * width) \u002B (x * 4)) \u002B 0] = Math.min(red, 255);\r\n img[((y * width) \u002B (x * 4)) \u002B 1] = Math.min(green, 255);\r\n img[((y * width) \u002B (x * 4)) \u002B 2] = Math.min(blue, 255);\r\n img[((y * width) \u002B (x * 4)) \u002B 3] = 255;\r\n\r\n }\r\n }\r\n }\r\n }\r\n return img\r\n}\r\n\r\nmain();\r\n","IsDeferred":false},{"Name":"canvas","Code":"function addCushion (id, minX, maxX, minY, maxY, coef0, coef1, coef2, coef3, base_red, base_green, base_blue) {\r\n const canvas = document.createElement(\u0022canvas\u0022);\r\n canvas.width = maxX - minX\r\n canvas.height = maxY - minY\r\n const ctx = canvas.getContext(\u00222d\u0022)\r\n const img = ctx.createImageData(maxX - minX, maxY - minY);\r\n const lx = 0.21; // 5\r\n const ly = 0.14; // 3\r\n const lz = 0.65; // 15\r\n const width = Math.floor((maxX - minX) * 4)\r\n\r\n for (var x = 0; x \u003C maxX - minX; \u002B\u002Bx) {\r\n {\r\n for (var y = 0; y \u003C maxY - minY; \u002B\u002By) {\r\n {\r\n const nx = -(2 * coef1 * (x \u002B minX) \u002B coef0);\r\n const ny = -(2 * coef3 * (y \u002B minY) \u002B coef2);\r\n const norm = Math.sqrt(nx * nx \u002B ny * ny \u002B 1);\r\n const cosa = (nx * lx \u002B ny * ly \u002B lz) / norm;\r\n\r\n const luminance = 2 * (0.3 \u002B 0.8 * Math.max(0, cosa));\r\n const red = base_red * luminance;\r\n const green = base_green * luminance;\r\n const blue = base_blue * luminance;\r\n img.data[((y * width) \u002B (x * 4)) \u002B 0] = Math.min(red, 255);\r\n img.data[((y * width) \u002B (x * 4)) \u002B 1] = Math.min(green, 255);\r\n img.data[((y * width) \u002B (x * 4)) \u002B 2] = Math.min(blue, 255);\r\n img.data[((y * width) \u002B (x * 4)) \u002B 3] = 255;\r\n }\r\n }\r\n }\r\n }\r\n ctx.putImageData(img, 0, 0)\r\n console.log(canvas.width)\r\n console.log(canvas.height)\r\n document.getElementById(id).style.background = \u0027url(\u0027 \u002B canvas.toDataURL() \u002B \u0027)\u0027\r\n }\r\n \r\naddCushion(\u0022test\u0022, 0, 900, 0, 600, 0, 0.005, -0.001, 0.001, 0, 150, 0)","IsDeferred":false}]}