WebGL (+ Threejs) Scatterplot

28:null 29:["$","title",null,{"children":"WebGL/Three.js setup - random scatterplot | Brianna Wilson | Observable"}] 2e:Tc1d,// If you want to run from a .html file // // // // // // WebGL (+ Threejs) Scatterplot // // // // //

// // // // 2f:[] 2c:{"id":"578c239ad3c7d5d3","slug":null,"title":"WebGL/Three.js setup - random scatterplot","thumbnail":"756bcf748d412b73dec6ff1c4c5ad3bd59fb60b6602474f80d4f615e9a6d3375","access_level":"public","create_time":"$D2023-10-29T04:10:01.243Z","update_time":"$D2023-10-29T19:55:50.238Z","view_time":null,"first_public_time":"$D2023-10-29T04:10:01.243Z","fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"bdd5b15ae58c174e","login":"bronna","name":"Brianna Wilson","avatar_url":"https://avatars-next.observableusercontent.com/e8378cd926f2998bd803d1651f90f4c1442c923062ce42676a4fc5460cf815fc","tier":"starter_2024"},"version":166,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"dc0841074bf3ab25","login":"briannawilson","name":"Brianna Wilson","avatar_url":"https://avatars-next.observableusercontent.com/eee1750230ba4eac2ba9c81f461a7c2cb3c2448d6fd4b00a8f3f13a73e80c37c","tier":null}],"members":[{"type":"individual","id":"dc0841074bf3ab25","login":"briannawilson","name":"Brianna Wilson","avatar_url":"https://avatars-next.observableusercontent.com/eee1750230ba4eac2ba9c81f461a7c2cb3c2448d6fd4b00a8f3f13a73e80c37c","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":2,"collection":{"id":"839d21f59c8d2be4","slug":"dvs-workshop","title":"DVS-workshop","owner":{"id":"bdd5b15ae58c174e","login":"bronna","name":"Brianna Wilson"}},"type":"notebook","body":{"title":"WebGL/Three.js setup - random scatterplot","cells":[{"id":0,"value":"# WebGL/Three.js setup - random scatterplot","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":5,"value":"## HTML","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":10,"value":"### 1 - Create the canvas element you'll draw on","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":12,"value":"canvasElement = html`

`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":15,"value":"## Javascript","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":23,"value":"### 2 - Imports","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":26,"value":"THREE = import(\"three@0.158.0\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":18,"value":"### 3 - Grab the HTML canvas element & set up the renderer","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":20,"value":"canvas = canvasElement","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":38,"value":"renderer = {\n const renderer = new THREE.WebGLRenderer({ canvas: canvas })\n renderer.setClearColor(0x002036, 1) // set background color\n return renderer\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":50,"value":"### 4 - Set up the scene & camera","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":55,"value":" scene = new THREE.Scene()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":62,"value":"camera = new THREE.OrthographicCamera(-1, 1, 1, -1, 1, 10) // left, right, top, bottom, near, far","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":93,"value":"camera.position.z = 1","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":29,"value":"### 5 - Define your visualization's attributes","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":31,"value":"numberOfPoints = 100","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":124,"value":"// // optional: make dynamic attributes\n// viewof numberOfPoints = Inputs.range([100, 10000], {label: \"number of points\", step: 10, value: 100})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":33,"value":"sizeOfPoints = 10","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":35,"value":"pointColor = 0xffffff","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":69,"value":"### 6 - Prepare the point coordinates, geometry, and material","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":141,"value":"material = new THREE.PointsMaterial({ size: sizeOfPoints, color: pointColor })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":145,"value":"// // OPTIONAL: custom shader to clip square points into circle points\n// material = new THREE.ShaderMaterial({\n// uniforms: {\n// pointSize: { value: sizeOfPoints },\n// color: { value: new THREE.Color(pointColor) },\n// },\n// vertexShader: `\n// uniform float pointSize;\n// void main() {\n// gl_PointSize = pointSize;\n// gl_Position = vec4(position, 1.0);\n// }\n// `,\n// fragmentShader: `\n// uniform vec3 color;\n// void main() {\n// vec2 coord = gl_PointCoord - vec2(0.5);\n// if (length(coord) > 0.5) {\n// discard;\n// }\n// gl_FragColor = vec4(color, 1.0);\n// }\n// `\n// })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":73,"value":"points = {\n // clear any existing points before drawing new ones\n if (scene.children.length > 0) {\n scene.remove(scene.children[0])\n }\n\n // create array of point coordinates\n const numPoints = numberOfPoints\n \n const vertices = []\n for (let i = 0; i < numPoints; i++) {\n vertices.push(Math.random() * 2 - 1) // x\n vertices.push(Math.random() * 2 - 1) // y\n vertices.push(0) // z (not used for 2D)\n }\n\n // prepare the geometry\n const geometry = new THREE.BufferGeometry()\n geometry.setAttribute('position', new THREE.Float32BufferAttribute(vertices, 3))\n\n // set geometry and material of the points\n const points = new THREE.Points(geometry, material)\n return points\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":80,"value":"### 7 - Add the points to the scene","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":84,"value":"scene.add(points)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":97,"value":"### 8 - Render the scene","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":95,"value":"renderer.render(scene, camera)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":112,"value":"// starts animation loop\nrenderLoop = {\n function update() {\n renderer.render(scene, camera)\n\n requestAnimationFrame(update)\n }\n\n update()\n\n // doesn't return anything, just starts the loop\n return\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":165,"value":"$2e","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W2f","stdlib":"1","titling":"auto"}} 2d:"$2c:body"