2b:null 2c:["$","title",null,{"children":"02 | vectors & brush strokes | Shirley Wu | Observable"}] 31:T719,# 02 | vectors & brush strokes **Notes/quotes from Nature of Code, chapter 1: ** - vector: an entity that has both magnitude and direction - new position = velocity applied to current position - If velocity is a vector (the difference between two points), what is position? a position is the vector representing the difference between position and origin - magnitude calculated by Pythagorean theorem - The strict definition of acceleration I’m using here is: the rate of change of velocity. Think about that definition for a moment. Is this a new concept? Not really. Velocity is defined as the rate of change of position. In essence, I am developing a “trickle-down” effect. Acceleration affects velocity, which in turn affects position - acceleration does not merely refer to the speeding up or slowing down of a moving object, but rather any change in velocity—magnitude or direction. Acceleration is used to steer an object **Ideas**: - dots/balls that fly around a container? - leaves blowing in the wind - ink spreading on paper or in water? - play with different motion behaviors, cellular automata - brush strokes in 3D? so spheres **define rules of the “world” and figure out how to implement it** ## 1. single brush stroke I want to try and recreate a dry brush stroke like these:

^{source: [artisticpov.jessemaccabe.com](https://artisticpov.jessemaccabe.com/)} So let's start with a single brush stroke. To do that, I'll start with drawing a set of thin rectangles, arranged vertically. So in the vertex shader, I'd be passed **positions** for each triangle. For each pair of triangles (that make a rectangle), I'll also apply **translation** and **scale**.32:T56f,{ const canvas = DOM.canvas(width, height); const gl = canvas.getContext("webgl"); d3.randomSeed; // 1. create shader program const program = initShaderProgram(gl, vertexSource, fragmentSource); // 2. get data ready const numSquares = 50; const { positions, scales, translations } = createBrushStroke( numSquares, { x: width / 2, y: height / 2 }, { width: 0.5, height: 15 } ); // initialize data const positionAttribLoc = gl.getAttribLocation(program, "a_position"); const positionBuffer = initPositionBuffer(gl, positions); const scaleAttribLoc = gl.getAttribLocation(program, "a_scale"); const scaleBuffer = initPositionBuffer(gl, scales); const translateAttribLoc = gl.getAttribLocation(program, "a_translation"); const translateBuffer = initPositionBuffer(gl, translations); const resolutionUniLoc = gl.getUniformLocation(program, "u_resolution"); // 3. render // gl.clearColor(0, 0, 0, 1); // gl.clear(gl.COLOR_BUFFER_BIT); gl.viewport(0, 0, width, height); gl.useProgram(program); // set data on the program setPositionAttribute(gl, positionBuffer, positionAttribLoc); setPositionAttribute(gl, scaleBuffer, scaleAttribLoc); setPositionAttribute(gl, translateBuffer, translateAttribLoc); gl.uniform2f(resolutionUniLoc, width, height); // draw! gl.drawArrays(gl.TRIANGLES, 0, 6 * numSquares); return canvas; }33:T6d2,{ const canvas = DOM.canvas(width, height); const gl = canvas.getContext("webgl"); // 1. create shader program const program = initShaderProgram(gl, vertexSource, fragmentSource); // 2. get data ready const { position, velocity, acceleration } = createStraightMotion(); const positions = []; const scales = []; const translations = []; // initialize data const positionAttribLoc = gl.getAttribLocation(program, "a_position"); const scaleAttribLoc = gl.getAttribLocation(program, "a_scale"); const translateAttribLoc = gl.getAttribLocation(program, "a_translation"); const resolutionUniLoc = gl.getUniformLocation(program, "u_resolution"); // 3. render // gl.clearColor(0, 0, 0, 1); // gl.clear(gl.COLOR_BUFFER_BIT); gl.viewport(0, 0, width, height); gl.useProgram(program); // animate while (position[0] < width) { const numSquares = 25; vec2.add(velocity, velocity, acceleration); vec2.add(position, position, velocity); createBrushStroke( numSquares, { x: position[0], y: position[1] }, { width: 0.5, height: 10 }, positions, scales, translations ); const positionBuffer = initPositionBuffer(gl, positions); const scaleBuffer = initPositionBuffer(gl, scales); const translateBuffer = initPositionBuffer(gl, translations); // set data on the program setPositionAttribute(gl, positionBuffer, positionAttribLoc); setPositionAttribute(gl, scaleBuffer, scaleAttribLoc); setPositionAttribute(gl, translateBuffer, translateAttribLoc); gl.uniform2f(resolutionUniLoc, width, height); // draw! gl.drawArrays(gl.TRIANGLES, 0, positions.length / 2); yield Promises.delay(1, canvas); } return canvas; }34:T701,{ const canvas = DOM.canvas(width, height); const gl = canvas.getContext("webgl"); // 1. create shader program const program = initShaderProgram(gl, vertexSource, fragmentSource); // 2. get data ready const { position, velocity, acceleration } = createStraightMotion(); const positions = []; const scales = []; const translations = []; // initialize data const positionAttribLoc = gl.getAttribLocation(program, "a_position"); const scaleAttribLoc = gl.getAttribLocation(program, "a_scale"); const translateAttribLoc = gl.getAttribLocation(program, "a_translation"); const resolutionUniLoc = gl.getUniformLocation(program, "u_resolution"); // 3. render // gl.clearColor(0, 0, 0, 1); // gl.clear(gl.COLOR_BUFFER_BIT); gl.viewport(0, 0, width, height); gl.useProgram(program); // animate let offset = 0; while (position[0] < width) { const numSquares = d3.randomNormal(30, 10)(); vec2.add(velocity, velocity, acceleration); vec2.add(position, position, velocity); createBrushStrokeNoise( numSquares, { x: position[0], y: position[1] }, offset, positions, scales, translations ); offset += 0.001; const positionBuffer = initPositionBuffer(gl, positions); const scaleBuffer = initPositionBuffer(gl, scales); const translateBuffer = initPositionBuffer(gl, translations); // set data on the program setPositionAttribute(gl, positionBuffer, positionAttribLoc); setPositionAttribute(gl, scaleBuffer, scaleAttribLoc); setPositionAttribute(gl, translateBuffer, translateAttribLoc); gl.uniform2f(resolutionUniLoc, width, height); // draw! gl.drawArrays(gl.TRIANGLES, 0, positions.length / 2); yield Promises.delay(1, canvas); } return canvas; }35:T7a1,{ const canvas = DOM.canvas(width, height); const gl = canvas.getContext("webgl"); // 1. create shader program const program = initShaderProgram(gl, vertexSource, fragmentSource); // 2. get data ready const { position, velocity, acceleration } = createStraightMotion(); let positions = []; let scales = []; let translations = []; // initialize data const positionAttribLoc = gl.getAttribLocation(program, "a_position"); const scaleAttribLoc = gl.getAttribLocation(program, "a_scale"); const translateAttribLoc = gl.getAttribLocation(program, "a_translation"); const resolutionUniLoc = gl.getUniformLocation(program, "u_resolution"); // 3. render // gl.clearColor(0, 0, 0, 1); // gl.clear(gl.COLOR_BUFFER_BIT); gl.viewport(0, 0, width, height); gl.useProgram(program); // animate let offset = 0; while (true) { const numSquares = d3.randomNormal(30, 10)(); // if (positions.length > 200000) { // positions = []; // scales = []; // translations = []; // } varyAcceleration(position, velocity, acceleration); vec2.add(velocity, velocity, acceleration); vec2.add(position, position, velocity); createBrushStrokeNoise( numSquares, { x: position[0], y: position[1] }, offset, positions, scales, translations ); offset += 0.001; const positionBuffer = initPositionBuffer(gl, positions); const scaleBuffer = initPositionBuffer(gl, scales); const translateBuffer = initPositionBuffer(gl, translations); // set data on the program setPositionAttribute(gl, positionBuffer, positionAttribLoc); setPositionAttribute(gl, scaleBuffer, scaleAttribLoc); setPositionAttribute(gl, translateBuffer, translateAttribLoc); gl.uniform2f(resolutionUniLoc, width, height); // draw! gl.drawArrays(gl.TRIANGLES, 0, positions.length / 2); yield Promises.delay(1, canvas); } return canvas; }36:[{"id":"525588619f54497518d46213f04557b54013094b044085ade59e8c81a9fe580c5cace1a6938f4fcb2878250200164a2683f440c2d7bd482bcc3263eac88921db","href":"https://static.observableusercontent.com/files/525588619f54497518d46213f04557b54013094b044085ade59e8c81a9fe580c5cace1a6938f4fcb2878250200164a2683f440c2d7bd482bcc3263eac88921db","name":"Screenshot 2023-02-08 at 6.56.59 PM.png","type":"image/png","lastModified":1675901335524.496,"size":27536},{"id":"236cc1d87e8e077d66e219bda98c3b8bd50135789878315a4e0d7712fa22cdefeda16b41d16360542a710c88333b8b12d26a620fbbd3e541fffb77ea084f6a59","href":"https://static.observableusercontent.com/files/236cc1d87e8e077d66e219bda98c3b8bd50135789878315a4e0d7712fa22cdefeda16b41d16360542a710c88333b8b12d26a620fbbd3e541fffb77ea084f6a59","name":"Screenshot 2023-02-08 at 1.17.02 PM.png","type":"image/png","lastModified":1675900885268.346,"size":111765},{"id":"acd0c79ad0019e8f449796dddc7c6df190d40f0c3e20b23558d691ff03a2dc70648a1de6f466fc96c3ed392aa1b0099a7c585684469111ad345b83e22d97eee8","href":"https://static.observableusercontent.com/files/acd0c79ad0019e8f449796dddc7c6df190d40f0c3e20b23558d691ff03a2dc70648a1de6f466fc96c3ed392aa1b0099a7c585684469111ad345b83e22d97eee8","name":"Screenshot 2023-02-08 at 6.52.55 PM.png","type":"image/png","lastModified":1675900908804.747,"size":16100},{"id":"ca89fd2b9226fc1e9bb5c24f731ad90aee2e7b60f242081605ecefcaf8a589dea53b35a37fc353d2a954f10f721431796e9b4d87cf5c1e448794fd09de4b3fde","href":"https://static.observableusercontent.com/files/ca89fd2b9226fc1e9bb5c24f731ad90aee2e7b60f242081605ecefcaf8a589dea53b35a37fc353d2a954f10f721431796e9b4d87cf5c1e448794fd09de4b3fde","name":"Screenshot 2023-02-08 at 6.48.23 PM.png","type":"image/png","lastModified":1675900885230.994,"size":20992}] 2f:{"id":"6ce053d91118311e","slug":"02-noc-vectors","title":"02 | vectors & brush strokes","thumbnail":"c023db8a11ecdc9bad01339b587e4635f4d6241666cd0863b22f2f050f466560","access_level":"public","create_time":"$D2023-02-07T15:25:39.150Z","update_time":"$D2023-04-13T14:22:27.188Z","view_time":null,"first_public_time":"$D2023-02-08T17:31:08.566Z","fork":false,"stars":10,"starred":false,"owner":{"type":"team","id":"dd2028e442ef0aed","login":"sxywu","name":"Shirley Wu","avatar_url":"https://avatars-next.observableusercontent.com/f9949405cbe75a900a143ef7b67a9dff399dd0b11782e3ccae81e67e976e4f58","tier":"starter_2024"},"version":656,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"295ff02db5133ff8","login":"sxywu","name":"Shirley Wu","avatar_url":"https://avatars-next.observableusercontent.com/f9949405cbe75a900a143ef7b67a9dff399dd0b11782e3ccae81e67e976e4f58","tier":null}],"members":[{"type":"individual","id":"295ff02db5133ff8","login":"sxywu","name":"Shirley Wu","avatar_url":"https://avatars-next.observableusercontent.com/f9949405cbe75a900a143ef7b67a9dff399dd0b11782e3ccae81e67e976e4f58","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"02 | vectors & brush strokes","cells":[{"id":0,"value":"$31","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":29,"value":"vertexSource = `\nattribute vec2 a_position;\nattribute vec2 a_translation;\nattribute vec2 a_scale;\n\nuniform vec2 u_resolution;\n\nvoid main() {\n vec2 transformed = a_position * -a_scale + a_translation;\n \n vec2 clipSpace = (transformed / u_resolution) * 2.0 - 1.0;\n\n gl_Position = vec4(clipSpace, 0, 1);\n}\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":33,"value":"and for now, just return black in the fragment shader:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":39,"value":"fragmentSource = `\nprecision mediump float;\n\nvoid main() {\n gl_FragColor = vec4(vec3(0), 1);\n}\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":48,"value":"And in Javascript, create three arrrays each with ~10 elements:\n1. positions: unit squares, same for every element\n2. scale: x-scale is uniform but y-scale is varied\n3. translation: for now, only translate y-axis","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":52,"value":"unitSquare = [\n [1.0, 1.0], // right top\n [-1.0, 1.0], // left top\n [-1.0, -1.0], // left bottom\n [1.0, -1.0], // right bottom\n [-1.0, -1.0], // left bottom\n [1.0, 1.0] // right top\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":58,"value":"width = 512","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":59,"value":"height = 256","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":243,"value":"createBrushStroke = (\n count,\n translate,\n size,\n positions,\n scales,\n translations\n) => {\n positions = positions || [];\n scales = scales || [];\n translations = translations || [];\n const xScaleRandom = d3.randomNormal();\n const yScaleRandom = d3.randomNormal();\n const xTranslateRandom = d3.randomNormal(translate.x, size.width);\n const yTranslateRandom = d3.randomNormal(translate.y, size.height);\n _.times(count, (i) => {\n const xScale = xScaleRandom();\n const yScale = yScaleRandom();\n const xTranslate = xTranslateRandom();\n const yTranslate = yTranslateRandom();\n _.each(unitSquare, ([x, y]) => {\n positions.push(x);\n positions.push(y);\n scales.push(xScale);\n scales.push(yScale);\n translations.push(xTranslate);\n translations.push(yTranslate);\n });\n });\n\n return { positions, scales, translations };\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":55,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":257,"value":"## 2. draw straight line across\n\nTry this with vectors, implementing `position`, `velocity`, `acceleration`:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":337,"value":"createStraightMotion = () => {\n const position = vec2.fromValues(0, height * 0.25); // initialize at left middle\n const velocity = vec2.create();\n const acceleration = vec2.fromValues(0.025, 0.005);\n\n return { position, velocity, acceleration };\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":265,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":349,"value":"## 3. use Perlin noise ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":356,"value":"createBrushStrokeNoise = (\n count,\n translate,\n offset,\n positions,\n scales,\n translations\n) => {\n const height = Math.round(p5noise(offset + 20000) * 160);\n _.times(count, (i) => {\n const xScale = d3.randomNormal(2, 1)();\n const yScale = d3.randomNormal(0.5, 0.5)();\n const xTranslate = translate.x + p5noise(i * 1000 + offset);\n const yTranslate =\n translate.y + height * (p5noise(100000 + i * 1000 + offset) - 0.5);\n _.each(unitSquare, ([x, y]) => {\n positions.push(x);\n positions.push(y);\n scales.push(xScale);\n scales.push(yScale);\n translations.push(xTranslate);\n translations.push(yTranslate);\n });\n });\n\n return { positions, scales, translations };\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":374,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":500,"value":"## 4. varying acceleration\nCurrent thoughts: it looks unnatural because there's no variation in \"strength\" of how much the brush is pressed down. Also concerned for performance, and [Don McCurdy](https://vis.social/@donmccurdy@fosstodon.org/109830669405826011) recommended [this article by Fernando Serrano](https://blog.mozvr.com/a-painter-performance-optimizations/).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":530,"value":"varyAcceleration = (position, velocity, acceleration) => {\n const [x, y] = position;\n // vary acceleration\n const noiseScale = 0.01; // for 2D noise\n vec2.set(\n acceleration,\n d3.randomNormal(0, 2)() / 30,\n d3.randomNormal(0, 2)() / 60\n // (p5noise(x * noiseScale, y * noiseScale) - 0.5) / 10,\n // (p5noise(x * noiseScale + 1000, y * noiseScale + 1000) - 0.5) / 20\n );\n\n // if it goes out of bounds, then reverse direction\n const [velocityX, velocityY] = velocity;\n if (x < 0 || width < x) {\n vec2.set(velocity, -1 * velocityX, -1 * velocityY);\n }\n if (y < 0 || height < y) {\n vec2.set(velocity, velocityX, -1 * velocityY);\n }\n // const [accX, accY] = acceleration;\n // if (x < 0 || width < x) {\n // vec2.set(acceleration, -1 * accX, -1 * accY);\n // }\n // if (y < 0 || height < y) {\n // vec2.set(acceleration, accX, -1 * accY);\n // }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":503,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":614,"value":"## # gallery\n\naka. the ones that looked the nicest.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":606,"value":"html`\n

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":655,"value":"","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":41,"value":"

\n
\n
\n
\n\n## # imports","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":44,"value":"import {\n initShaderProgram,\n initPositionBuffer,\n setPositionAttribute\n} from \"@sxywu/00-webgl-setup\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":268,"value":"glMatrix = import(\"https://unpkg.com/gl-matrix@3.4.3/esm/index.js?module\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":274,"value":"vec2 = glMatrix.vec2","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":358,"value":"p5 = require(\"p5\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":364,"value":"p5noise = p5.prototype.noise","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W36","stdlib":"1","titling":"auto"}} 30:"$2f:body"