2b:null 2c:["$","title",null,{"children":"rock, paper, scissors (with multiple states) | Job van der Zwan | Observable"}] 31:T71a,main = { reload; const uniforms = { u_texture: { value: dataTexture }, u_size: { value: new THREE.Vector2(width, height) }, u_time: { value: 1.0 } }; const d = 10; const camera = new THREE.OrthographicCamera(-d, d, d, -d, 0, 1); // create two targets to render to (aka render to texture) let target1 = new THREE.WebGLRenderTarget(width, height, targetOptions); let target2 = new THREE.WebGLRenderTarget(width, height, targetOptions); // we need two scenes. One where we render the texture // and one where we render the output to screen const shaderScene = new THREE.Scene(); const screenScene = new THREE.Scene(); screenScene.background = new THREE.Color(0xffffff); const geometry = new THREE.PlaneGeometry(20, 20); const shaderMaterial = new THREE.ShaderMaterial({ uniforms, vertexShader, fragmentShader // glslVersion: THREE.GLSL3 }); const shaderMesh = new THREE.Mesh(geometry, shaderMaterial); shaderScene.add(shaderMesh); const screenMaterial = new THREE.MeshBasicMaterial(); const screenMesh = new THREE.Mesh(geometry, screenMaterial); screenScene.add(screenMesh); yield renderer.domElement; raf(() => { // render shader to first target and set texture value renderer.render(shaderScene, camera, target1); uniforms.u_texture.value = target1.texture; // texture from target1 as input to target2 renderer.render(shaderScene, camera, target2); // output of target2 -> map of screen material screenMaterial.map = target2.texture; screenMaterial.needsUpdate = true; // render to screen renderer.render(screenScene, camera); // swap targets [target1, target2] = [target2, target1]; // increment time uniforms.u_time.value++ }, invalidation); }32:T729,fragmentShader = ` uniform sampler2D u_texture; uniform vec2 u_size; uniform float u_time; int state_from_color(vec3 col) { ${col_arr_str} for (int i = 0; i < ${number_of_states}; i++) { float d = distance(colors[i] / 255.0, col); if (d < 0.0001) return i; } return -1; } vec3 color_from_state(const int state) { ${col_arr_str} // this is an ugly hack. Can't index with state as it is not constant for (int i = 0; i < ${number_of_states}; i++) { if (i == state) return colors[i] / 255.0; } } vec3 random_color(vec2 pos) { ${col_arr_str} float noise = (fract(sin(u_time * 13.37 + dot(pos.xy, vec2(12.9898,78.233))) * 43758.5453123)); int state = int(floor(${number_of_states}.0 * noise)); for (int i = 0; i < ${number_of_states}; i++) { if (i == state) return colors[i] / 255.0; } } void main() { vec2 position = mod(gl_FragCoord.xy - vec2(1, 0), u_size); vec4 c = texture2D(u_texture, position / u_size); int c_state = state_from_color(c.xyz); int opp_state = c_state + 1; if (opp_state >= ${number_of_states}) opp_state -= ${number_of_states}; float counter = 0.0; for (int dx = -${area}; dx <= ${area}; ++dx) { for (int dy = -${area}; dy <= ${area}; ++dy) { if (dx == 0 && dy == 0) continue; vec4 n = texture2D(u_texture, (position + vec2(dx,dy)) / u_size); int n_state = state_from_color(n.xyz); if (n_state == opp_state) { counter++; } } } vec4 next_col = c; float n = ${Math.floor(n * 0.4)}.0 + ${Math.ceil(n * 0.6)}.0 * gl_FragCoord.x / u_size.x; if (counter >= n) { vec3 val = color_from_state(opp_state).xyz; next_col = vec4(val, 1.0); } if (position.x <= ${area}.0 || position.x >= u_size.x - ${area}.0) { next_col = vec4(random_color(position), 1.0); } gl_FragColor = next_col; } `33:[] 2f:{"id":"3b05e5555a9dd9f4","slug":null,"title":"rock, paper, scissors (with multiple states)","thumbnail":"a95881bb5bbb54e31d62469507ac9a10ccafb415916b6e8d22e148ea8b965e81","access_level":"unlisted","create_time":"$D2022-10-26T09:18:31.462Z","update_time":"$D2022-11-01T09:25:08.298Z","view_time":null,"first_public_time":"$D2022-10-26T09:20:47.234Z","has_unpublished_edits":null,"fork":{"id":"4ffdc45d98c27bcf","slug":"rock-paper-scissors-with-multiple-states","title":"rock, paper, scissors (with multiple states)","owner":{"id":"8e8363b14a130065","login":"timhau","name":"tau"}},"stars":2,"starred":false,"owner":{"type":"team","id":"3f83172cfde1e56a","login":"jobleonard","name":"Job van der Zwan","avatar_url":"https://avatars-next.observableusercontent.com/808373580aa09723ceabb9cb31d01ea6db287280b59eaa63618e259f5d28dd71","tier":"starter_2024","bio":"Tinkering with code and algorithms for fun"},"version":724,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"d36034ddfb454bdd","login":"jobleonard","name":"Job van der Zwan","avatar_url":"https://avatars-next.observableusercontent.com/808373580aa09723ceabb9cb31d01ea6db287280b59eaa63618e259f5d28dd71","tier":null,"bio":"Tinkering with code and algorithms for fun"}],"members":[{"type":"individual","id":"d36034ddfb454bdd","login":"jobleonard","name":"Job van der Zwan","avatar_url":"https://avatars-next.observableusercontent.com/808373580aa09723ceabb9cb31d01ea6db287280b59eaa63618e259f5d28dd71","tier":null,"role":"editor"}],"comments":[{"id":"f761153b004903de","reply_to_id":null,"content":"Interesting settings:\n\nmin neighbors: 38\nn states: 10\nradius: 7\nn ratio: 0.4/0.6","create_time":"$D2022-11-01T09:02:15.957Z","update_time":null,"resolved":false,"user":{"type":"individual","id":"d36034ddfb454bdd","login":"jobleonard","name":"Job van der Zwan","avatar_url":"https://avatars-next.observableusercontent.com/808373580aa09723ceabb9cb31d01ea6db287280b59eaa63618e259f5d28dd71","tier":null}}],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"rock, paper, scissors (with multiple states)","cells":[{"id":0,"value":"md`# rock, paper, scissors (with multiple states)\n\nInspired by [this tweet by Andrew M. Webb](https://twitter.com/AndrewM_Webb/status/1236274167437197320) and [this tweet by femb✦t\n](https://twitter.com/__femb0t/status/1579583495483305984), i could not resist to code my own version. \n\nThe Rules are simple\n - randomly initialise a pixel as either rock (red), paper (green) or scissor (blue)\n - for every pixel check:\n - if there are at least ${n} neighbors of the opponent, update the color to the opponent color\n (rock beats scissor, scissor beats paper, paper beats rock)\n - the edges wrap around \n\nThanks [@mootari](https://observablehq.com/@mootari) for the idea\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":720,"value":"function raf(f, invalidation) {\n let frame;\n (function tick() {\n f();\n frame = requestAnimationFrame(tick);\n })();\n invalidation.then(() => cancelAnimationFrame(frame));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":335,"value":"viewof reload = Inputs.button(\"Reload\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":345,"value":"viewof n = Inputs.range([1, 100], {\n label: \"min. number of Neighbors before update\",\n step: 1,\n value: 10\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":397,"value":"viewof number_of_states = Inputs.range([0, 32], {\n label: \"number of states\",\n step: 1,\n value: 7\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":569,"value":"viewof area = Inputs.range([1, 10], {\n label: \"radius in which to look at Neighbors (square area)\",\n step: 1,\n value: 3\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":699,"value":"width = 1980","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"height = 400","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":517,"value":"viewof colormap = Inputs.select([\"virdis\", \"magma\", \"plasma\", \"inferno\"], {\n label: \"Select colormap\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":46,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":44,"value":"vertexShader = `\nvoid main() {\n gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);\n}\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":57,"value":"seed = {\n const seed = new Float32Array(4 * width * height);\n\n for (let i = 0; i < 4 * width * height; i += 4) {\n let r = Math.random();\n for (let j = 1; j <= number_of_states; ++j) {\n if ((j - 1) / number_of_states < r && r < j / number_of_states) {\n const [r, g, b] = getColor((j - 1) / number_of_states);\n seed[i + 0] = r / 255;\n seed[i + 1] = g / 255;\n seed[i + 2] = b / 255;\n }\n }\n seed[i + 3] = 1;\n }\n\n return seed;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":532,"value":"function getColor(t) {\n if (colormap === \"magma\") {\n return hexToRgb(d3.interpolateMagma(t));\n }\n if (colormap === \"virdis\") {\n return hexToRgb(d3.interpolateViridis(t));\n }\n if (colormap === \"plasma\") {\n return hexToRgb(d3.interpolatePlasma(t));\n }\n if (colormap === \"inferno\") {\n return hexToRgb(d3.interpolateInferno(t));\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":60,"value":"dataTexture = createTexture(seed)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":86,"value":"function createTexture(seed) {\n const texture = new THREE.DataTexture(\n seed,\n width,\n height,\n THREE.RGBAFormat,\n THREE.FloatType\n );\n texture.needsUpdate = true;\n texture.flipY = true;\n return texture;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"renderer = {\n const renderer = new THREE.WebGLRenderer({\n antialias: false,\n preserveDrawingBuffer: true\n // transparent: true\n \n });\n renderer.setSize(width, height);\n\n renderer.setPixelRatio(devicePixelRatio);\n return renderer;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"THREE = {\n const THREE = (window.THREE =\n await require(\"three@0.99.0/build/three.min.js\"));\n return THREE;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"textureDim = 512","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"targetOptions = {\n return {\n minFilter: THREE.NearestFilter,\n magFilter: THREE.NearestFilter,\n format: THREE.RGBAFormat\n };\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":407,"value":"function hexToRgb(hex) {\n var result = /^#?([a-f\\d]{2})([a-f\\d]{2})([a-f\\d]{2})$/i.exec(hex);\n return result\n ? [\n parseInt(result[1], 16),\n parseInt(result[2], 16),\n parseInt(result[3], 16)\n ]\n : null;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":381,"value":"col_arr_str = {\n return (\n `vec3 colors[${number_of_states}];\\n` +\n Array.from(Array(number_of_states))\n .map((_, i) => {\n const [r, g, b] = getColor(i / number_of_states);\n return `colors[${i}] = vec3(${r}, ${g}, ${b})`;\n })\n .join(\";\\n \") +\n \";\"\n );\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":519,"value":"d3.interpolateRainbow(0.5)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1"}} 30:"$2f:body"