31:T4f4,## 1. Getting the vector data Let's start by considering how we want to retrieve our vector data. One possible approach is to think about a 2D vector field in terms of the following function: - ${tex`f(p_x, p_y) = (v_x, v_y)^T`}
The function *f* takes the x and y coordinates of a query position *p* as input and returns a two-dimensional vector *v*. The returned vector represents the direction and magnitude of the field at the queried position. We could use this function to sample data values from a specific data source, such as a CSV file. However, for the examples in this notebook, we can implement the function directly to obtain various simple vector fields. As an example, let's construct a vector field representing a flow with increasing strength from left to right. As inputs to our function, we consider normalized values between 0 and 1 for both the x and y components. The corresponding field function would then look like this: - ${tex`f_{\text{left\_to\_right}}(p_x, p_y) = (p_x, 0)^T`} Or if we were to express the same thing in code with an arrow function expression: - `left_to_right = (x, y) => [x, 0]` Following this pattern, we can now create a set of field functions with different properties and store them in a map container.32:T71e,{ // Create a canvas. const padding = 2; const height = width / (18) - 2 * padding - 4 * padding / 18; const ctx = DOM.context2d(width, height); // Draw static arrows and corresponding colors for (let i = 0; i < 8; ++i) { // Calculate the angle, direction and color for the iteration. const angle = (i / 8) * 2 * Math.PI; const dir = [ Math.cos(angle), Math.sin(angle) ]; // Angle to vector. const color = dirToColor(dir); // Calculate the horizontal offset. const x = 2 * height + 10 * padding + 2 * height * i + 4 * padding * i; // Draw the arrow. drawArrow(ctx, x + 0.5 * height, 0.5 * height, dir, 0.25 * height); // Draw the colored rectangle. ctx.fillStyle = rgbToHex(color); ctx.fillRect(x + height + padding, 0, height, height); // Draw the rectangle outline. ctx.strokeStyle = "black"; ctx.strokeRect(x + height + padding + 1, 1, height - 2, height - 2); } // Draw animated arrow and color. while (true) { // Calculate angle, direction and color based on time. const time = Date.now() / 1000; const angle = 0.25 * time * 2 * Math.PI; mutable animatedVector = [ Math.cos(angle), Math.sin(angle) ]; // Angle to vector. const color = dirToColor(animatedVector); // Clear only the animated part of the canvas. ctx.clearRect(0, 0, 2 * height, height); // Draw the arrow. drawArrow(ctx, 0.5 * height, 0.5 * height, animatedVector, 0.25 * height, 2); ctx.lineWidth = 1; // Draw the colored rectangle. ctx.fillStyle = rgbToHex(color); ctx.fillRect(height + padding, 0, height, height); // Draw the rectangle outline. ctx.strokeStyle = "black"; ctx.strokeRect(height + padding + 1, 1, height - 2, height - 2); // Return the canvas. yield ctx.canvas; } }33:T45d,fieldTypesCanvas = { // Draw the vector fields as a row of colored and labeled images. // Create the canvas. const padding = 5; const size = Math.floor(width / fields.size) - padding; const ctx = DOM.context2d(width, size); // Set rendering properties. ctx.font = "14px sans-serif"; ctx.fillStyle = "#000"; ctx.strokeStyle = "#000"; ctx.textAlign = "center"; ctx.textBaseline = "bottom"; ctx.shadowColor = "#fff"; // Draw each field as an image. let offset = 0; for (const [name, field] of fields.entries()) { // Create an image for the current field. const image = await createImage(ctx, size, size, field); // Calculate the horizontal offset. const x = offset++ * (size + padding); // Draw the image. ctx.drawImage(image, x, 0, size, size); // Draw the label. ctx.shadowBlur = 5; // Blur outside of text for visibility. ctx.fillText(name, x + size * 0.5, size - padding); ctx.shadowBlur = 0; // Deactivate blur. // Draw the outline. ctx.strokeRect(x + 1, 1, size - 2, size - 2); } // Return the canvas. yield ctx.canvas; }34:T442,function drawArrow(ctx, cx, cy, dir, size, lineWidth = 1, strokeColor = "#000") { // Calculate arrow properties. const mag = getMagnitute(dir); const normal = getNormalized(dir); const angle = Math.atan2(dir[1], dir[0]); // Use the vector magnitude to scale the length of the arrow. const length = Math.max(1, size * mag); // Calculate start and end position of arrow. const x0 = cx - normal[0] * length; const y0 = cy - normal[1] * length; const x1 = cx + normal[0] * length; const y1 = cy + normal[1] * length; // Set the render properties. ctx.strokeStyle = strokeColor; ctx.lineWidth = lineWidth; ctx.lineCap = "round"; ctx.beginPath(); // Set the center line of the arrow. ctx.moveTo(x0, y0); ctx.lineTo(x1, y1); // Set the lines of the arrow head. ctx.moveTo(x1, y1); ctx.lineTo(x1 - length * Math.cos(angle - Math.PI / 6), y1 - length * Math.sin(angle - Math.PI / 6)); ctx.moveTo(x1, y1); ctx.lineTo(x1 - length * Math.cos(angle + Math.PI / 6), y1 - length * Math.sin(angle + Math.PI / 6)); // Draw the arrow. ctx.stroke(); }35:T502,{ // Create a canvas. const size = Math.min(width, 450); const ctx = DOM.context2d(size, size); // Set border and render properties. ctx.canvas.style.border = "solid 1px black"; ctx.canvas.style.cursor = "none"; // Hide the cursor. ctx.font = "14px sans-serif"; ctx.fillStyle = "#000000"; ctx.textBaseline = "bottom"; ctx.shadowColor = "#fff"; ctx.shadowBlur = 5; // Get a field and create a background image. const field = fields.get("circle"); const image = await createImage(ctx, size, size, field); // Define the draw function. let draw = (x, y) => { // Draw the background image. ctx.drawImage(image, 0, 0, size, size); // Draw the instruction label. ctx.fillText("Move mouse / pointer over image!", 5, size - 5); // Get the vector for the sample position. const dir = field(x / size, y / size); // Draw the arrow for the vector. drawArrow(ctx, x, y, dir, 50, 3, "#fff"); // Outline. drawArrow(ctx, x, y, dir, 50, 1, "#000"); // Arrow. }; // Initial draw for a default sample position. draw(0.25 * size, 0.75 * size); // Redraw for every new pointer position. ctx.canvas.onpointermove = ctx.canvas.onpointerdown = (e) => draw(e.offsetX, e.offsetY); yield ctx.canvas; }36:T4a2,## 4. Adding a particle simulation The previous techniques produce a static image of the vectors in the fields. However, we can also consider animations to illustrate how the characteristics of the flow vary in different areas of the fields. Imagine throwing some balls into a stream of water and watching how they are carried by the flow in different directions over time. One way to do this is to incorporate a particle simulation that is driven by a vector field. Initially, the particles are randomly placed within the field. In each simulation step, a vector is sampled for each particle position. The particles are then moved in the direction of the sampled vectors. This process is repeated until a termination criterion is reached, e.g. the lifetime of the particle has expired and it is reinitialized at another random position in the field. A particle simulation normally consists of several building blocks, including the creation, updating and resetting of particles. In addition, we also need a way to draw the particles on the screen. Let's start with creating a function that generates one particle and set its properties, e.g., its position, size, color, and lifetime.37:T566,{ await visibility(); // Create the main canvas which will be on screen. const size = Math.min(width, 450); const ctx = DOM.context2d(size, size); ctx.canvas.style.border = "solid 1px black"; // Create a secondary offscreen canvas for rendering effects. const effectCtx = DOM.context2d(size, size); // Get a field. const field = fields.get("circle"); // Create the particles. const particles = createParticles(15); // Animation loop. let time = performance.now(); while (true) { // Calculate the time delta. const now = performance.now(); const dt = (now - time) / 1000; time = now; // Instead of clearing the canvas, we reduce the opacity of the existing content. // The fade out rate has to be an integer and greater than one to have an effect // because the alpha channel of the image data takes 8-bit integer values. const fadeOut = Math.max(1, Math.floor(100 * dt)); reduceOpacity(effectCtx, fadeOut); // Update and draw the particles. particles.forEach((particle) => { updateParticle(particle, field, dt, 100 / size); drawParticle(effectCtx, particle); }); // Clear the main canvas. ctx.clearRect(0, 0, size, size); // Render the effect canvas. ctx.drawImage(effectCtx.canvas, 0, 0, size, size); // Return the canvas. yield ctx.canvas; } }38:T437,### E3. Experiment with other field functions Besides extending the visualization, you can also try to define your own vector data. One way would be to simply write a few more field functions in a similar way as we did at the beginning of the notebook. To get started, you can try [Field Play](https://anvaka.github.io/fieldplay), a nice online editor for testing different vector fields. It also has a *randomize* option that you can use to create different versions. Try writing your own function, or copy and convert the code from the editor to this notebook. See if you can find some interesting flows! If you're adventurous, you can also try creating a couple of functions that combine two or more existing functions by adding, subtracting, negating, or scaling vectors at corresponding points in the fields. If you want to add some dynamics, you can even try interpolating between fields over time. This can lead to some interesting results. Don't forget to add your new function to the `fields` collection so that they are easily accessible in the cells of the notebook.39:T75f,flowVis = { // Create main onscreen canvas. const size = Math.min(width, 350); const ctx = DOM.context2d(size, size); // Render properties. ctx.canvas.style.border = "solid 1px black"; ctx.shadowColor = "#fff"; ctx.shadowBlur = 5; // Create a secondary offscreen canvas for particle effects. const particleCtx = DOM.context2d(size, size); // Animation loop. let time = performance.now(); while (true) { // Calculate the time delta. const now = performance.now(); const dt = (now - time) / 1000; time = now; // Calculate the field interpolation factor as a function of time. const t = Math.sin(0.5 * now / 1000); // Define a field function. const field = (x, y) => { const v0 = fieldProps.fieldA(x, y); const v1 = fieldProps.fieldB(x, y); return interpolateVector(v0, v1, fieldProps.interpolate === "yes" ? t : 0); }; // Reduce the opacity of previous content in particle canvas. const fadeOut = Math.max(1, particleProps.fadeOut * Math.floor(100 * dt)); reduceOpacity(particleCtx, fadeOut); // Update and draw the particles. particles.forEach((particle) => { updateParticle(particle, field, dt, particleProps.speed * 100 / size); drawParticle(particleCtx, particle); }); // Create a background image. const image = await createImage(ctx, size * 0.5, size * 0.5, field, fieldProps.alphaScale); // Clear the canvas. ctx.clearRect(0, 0, size, size); // Draw the background image. ctx.drawImage(image, 0, 0, size, size); // Draw grid of arrows. ctx.shadowBlur = 5; drawArrowGrid(ctx, field, arrowProps.gridSize, arrowProps.size); ctx.shadowBlur = 0; // Draw the particle canvas. ctx.drawImage(particleCtx.canvas, 0, 0, size, size); // Return the canvas. yield ctx.canvas; } }3a:[] 2f:{"title":"Flow visualization of a 2D vector field with arrow glyphs and particle simulation (solution)","cells":[{"id":0,"value":"# Flow visualization of a 2D vector field with arrow glyphs and particle simulation (solution)","pinned":false,"hidden":false,"mode":"md"},{"id":352,"value":"A step-by-step demonstration of creating a visualization of (dynamic) two-dimensional vector fields.","pinned":false,"hidden":false,"mode":"md"},{"id":2113,"value":"{\n let canvas = duplicateCanvas(flowVis);\n canvas.style.border = \"solid 1px black\";\n return canvas;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":962,"value":"The steps to create the visualization (+ exercises step) are as follows:\n1. [Getting the vector data](#cell-967)\n2. [Creating a color image from the data](#cell-1045)\n3. [Drawing direction arrows](#cell-1331)\n4. [Adding a particle simulation](#cell-1333)\n5. [Exercises](#cell-1335)","pinned":false,"hidden":false,"mode":"md"},{"id":967,"value":"$31","pinned":false,"hidden":false,"mode":"md"},{"id":1030,"value":"fields = new Map([\n [\"left to right\", (x, y) => [x, 0]], // Horizontal flow from left to right.\n [\"diagonal\", (x, y) => [x, x]], // Diagonal flow from top-left to bottom-right.\n [\"circle\", (x, y) => [y - 0.5, 0.5 - x]], // Circular flow.\n [\"repel\", (x, y) => [x - 0.5, y - 0.5]], // Repelling flow from the center.\n])","pinned":true,"hidden":false,"mode":"ojs"},{"id":1058,"value":"To sample one of the vector fields at a particular position, we can then simply call the appropriate function to retrieve the vector. ","pinned":false,"hidden":false,"mode":"md"},{"id":1062,"value":"exampleVector = fields.get(\"left to right\")(0.5, 0.5) // Sample the field.","pinned":true,"hidden":false,"mode":"ojs"},{"id":1045,"value":"## 2. Creating a color image from the data\n\nWith a way to retrieve a vector for a given query position, we can now begin to visualize the data. Let's start simple and create a color image that represents the local directionality of our vector field. For this purpose, we must be able to assign the direction of a vector to a specific color.","pinned":false,"hidden":false,"mode":"md"},{"id":2395,"value":"","pinned":true,"hidden":false,"mode":"ojs"},{"id":671,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":1197,"value":"In the above example, the x and y components of the vectors have been assigned to the red and green channels of the colors. However, we need to make sure that the respective value ranges are taken into account. That is, we must first normalize the vectors and then remap their values so that they are between 0 and 255 to convert them to correct color values.","pinned":false,"hidden":false,"mode":"md"},{"id":669,"value":"function dirToColor(dir) {\n // Normalize the vector (value range from -1 to 1).\n const normal = getNormalized(dir);\n // Map values to be between 0 and 1.\n normal[0] = (normal[0] + 1) * 0.5;\n normal[1] = (normal[1] + 1) * 0.5;\n // Convert to array of color values.\n return [ Math.floor(normal[0] * 255), Math.floor(normal[1] * 255), 0, 255 ];\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1203,"value":"mutable animatedVector = [ 0, 0 ]; // Example vector (same as in the animation above).","pinned":true,"hidden":false,"mode":"ojs"},{"id":1209,"value":"animatedVectorColor = dirToColor(animatedVector) // Animated vector converted to color.","pinned":true,"hidden":false,"mode":"ojs"},{"id":2229,"value":"With this mapping from vector to color, we can create a color image from our vector field. The process is not very complicated. First, we create an image data object with a custom size. Then we loop through the pixels of the image. For each pixel coordinate, we calculate its position in the field and query the field function. The resulting vector is then converted to a color and assigned to the pixel's color channels.","pinned":false,"hidden":false,"mode":"md"},{"id":1212,"value":"async function createImage(ctx, width, height, field, alphaScale = 1.0) {\n // Create the image data.\n let image = ctx.createImageData(width, height);\n\n // Loop through the image pixels.\n for (let y = 0, i = 0; y < height; y++) {\n // Convert pixel-y to field-y (value between 0 and 1).\n const fy = y / (height - 1);\n \n for (let x = 0; x < width; x++, i += 4) {\n // Convert pixel-x to field-x (value between 0 and 1).\n const fx = x / (width - 1);\n \n // Retrieve the vector from the field for the current pixel.\n const dir = field(fx, fy);\n // Convert the vector to a color.\n const color = dirToColor(dir);\n\n // Assign the color values to the pixel color.\n image.data[i] = color[0]; // Red\n image.data[i + 1] = color[1]; // Green\n image.data[i + 2] = color[2]; // Blue\n image.data[i + 3] = color[3] * alphaScale; // Alpha\n }\n }\n\n // Create and return a bitmap image from the image data.\n return createImageBitmap(image);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":2262,"value":"We can use the `createImage()` function to create a visualization of a field functions that we defined in step one of the notebook.","pinned":false,"hidden":false,"mode":"md"},{"id":2264,"value":"{\n // Create a canvas.\n const size = Math.min(width, 450);\n const ctx = DOM.context2d(size, size);\n ctx.canvas.style.border = \"solid 1px black\";\n \n // Get a field.\n const field = fields.get(\"circle\");\n \n // Create and draw the image.\n const image = await createImage(ctx, size, size, field);\n ctx.drawImage(image, 0, 0, size, size);\n\n // Return the canvas.\n return ctx.canvas;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":2232,"value":"We can also call the `createImage()` function several times to get a visual overview of all our field functions and view them side by side.","pinned":false,"hidden":false,"mode":"md"},{"id":1227,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":1445,"value":"By coloring the individual image pixels based on the vector field data, we can see changes in the flow direction. This gives us a first impression of the different characteristics of the vector fields. However, it is not easy to visually determine the actual direction values at individual positions based only on the colors. So, we have to improve the interpretability of our visualization.\n","pinned":false,"hidden":false,"mode":"md"},{"id":1331,"value":"## 3. Drawing direction arrows\n\nA common way to visually represent the properties of a vector is to draw an arrow. The orientation of the arrow symbolizes the direction of the vector. The length of the arrow can optionally be used to encode the magnitude of the vector. We can follow the same idea to illustrate individual vectors of our vector field. So let's create a function to draw an arrow for a given vector.","pinned":false,"hidden":false,"mode":"md"},{"id":413,"value":"$34","pinned":true,"hidden":false,"mode":"ojs"},{"id":2268,"value":"We can use the `drawArrow()` function to visualize the properties of a single vector at a selected position. In the following example, an arrow is drawn over the color image to illustrate the relationship between color and arrow orientation. The position of the arrow is determined by the mouse pointer or touch point. Try moving the mouse over the image or touching different locations to explore the vector field.","pinned":false,"hidden":false,"mode":"md"},{"id":1427,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":2246,"value":"So far, we have only considered a single arrow for one position. In the following exercises, we will look at drawing multiple arrows to visualize the flow properties at different positions simultaneously. However, even with multiple arrows, we can only visualize the properties of the vector field at fixed positions. This makes it difficult to understand how the properties change as we follow the flow through the field. So let's focus on another approach for now: adding a particle simulation.","pinned":false,"hidden":false,"mode":"md"},{"id":1333,"value":"$36","pinned":false,"hidden":false,"mode":"md"},{"id":1503,"value":"function createParticle(x, y, size = 3, time = 20, color = \"#a6cee3\") {\n // Return a particle object that stores the particle positions and its properties.\n return { x: x, y: y, size: size, color: color, time: time }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":2464,"value":"A particle simulation usually consists of more than one particle. So we add a function to create an array of particles that we will simulate together.","pinned":false,"hidden":false,"mode":"md"},{"id":1517,"value":"function createParticles(count = particleProps.count, size = particleProps.size, time = particleProps.lifetime) {\n // Create an array of particles with random positions.\n let particles = [];\n for (let i = 0; i < count; ++i) {\n particles.push(createParticle(Math.random(), Math.random(), size, time));\n }\n \n return particles;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":2480,"value":"Next, we define a function that takes care of updating the particles at each simulation step. This involves sampling the field at the current particle position and moving the particles to a new position based on the sampled vectors. We also update and check the lifetime of the particles and verify that they are within the simulation boundaries. If the lifetime has expired or they have moved too far, we reset them.","pinned":false,"hidden":false,"mode":"md"},{"id":1533,"value":"function updateParticle(particle, field, dt = 1, speed = 0.01) {\n // Get the particle's x and y coordinate.\n let { x, y } = particle;\n // Lower the particle's lifetime based on the elapsed time.\n particle.time -= dt;\n \n // Check if the particle is inside boundaries and alive.\n if (x >= 0 && x <= 1 && y >= 0 && y <= 1 && particle.time > 0) {\n // Sample the field at the current particle position.\n const dir = field(x, y);\n // Move the particle based on the sampled field vector, scaled by the elapsed time and velocity factor.\n particle.x = x + dir[0] * dt * speed;\n particle.y = y + dir[1] * dt * speed;\n } else {\n // Reset the particle (outside boundary or beyond lifetime).\n resetParticle(particle);\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":2485,"value":"Resetting particles involves placing them in a new, random position and renewing their lifetime.","pinned":false,"hidden":false,"mode":"md"},{"id":1545,"value":"function resetParticle(particle, time = particleProps.lifetime) {\n // Reset the particle position.\n particle.x = Math.random();\n particle.y = Math.random();\n // Reset the particle lifetime.\n particle.time = time;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":2470,"value":"Finally, we can create a function that draws a particle on the screen indicating its position, size, and color. For simplicity, we will represent the particles as colored circles. Each circle will also get an outline so that it is more visible on a colored background. When we place the particles on the screen, we need to convert the coordinates in our simulation (positions between 0 and 1) to screen coordinates (position between 0 and width or height of the canvas).","pinned":false,"hidden":false,"mode":"md"},{"id":1521,"value":"function drawParticle(ctx, particle) {\n // Get the width and height of the canvas.\n const width = ctx.canvas.width / window.devicePixelRatio;\n const height = ctx.canvas.height / window.devicePixelRatio;\n \n // Construct a circle to represent the particle.\n ctx.beginPath();\n ctx.arc(\n particle.x * width, // Convert x to canvas coordinates.\n particle.y * height, // Convert y to canvas coordinates.\n particle.size,\n 0,\n 2 * Math.PI\n );\n\n // Fill the circle.\n ctx.fillStyle = particle.color;\n ctx.fill();\n\n // Draw the circle outline.\n ctx.strokeStyle = \"#333333\";\n ctx.stroke();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":2487,"value":"What remains is to incorporate the simulation into an animation loop. In each iteration, we first draw the background image, update the simulation based on the time elapsed since the last image, and then draw the particles on top at their new positions.","pinned":false,"hidden":false,"mode":"md"},{"id":1554,"value":"{\n await visibility();\n \n // Create a canvas.\n const size = Math.min(width, 450);\n const ctx = DOM.context2d(size, size);\n ctx.canvas.style.border = \"solid 1px black\";\n\n // Get a field and create a background image.\n const field = fields.get(\"repel\");\n const image = await createImage(ctx, size, size, field);\n\n // Create the particles.\n const particles = createParticles(15);\n \n // Animation loop.\n let time = performance.now();\n while (true) { \n // Clear the canvas.\n ctx.clearRect(0, 0, size, size);\n\n // Draw the background image.\n ctx.drawImage(image, 0, 0, size, size);\n\n // Calculate the time delta.\n const now = performance.now();\n const dt = (now - time) / 1000;\n time = now;\n\n // Update and draw the particles.\n particles.forEach((particle) => {\n updateParticle(particle, field, dt, 100 / size);\n drawParticle(ctx, particle); \n });\n \n // Return the canvas.\n yield ctx.canvas;\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1335,"value":"## 5. Exercises\n\nThe following exercises provide some ideas on how to extend the visualization. Try them out or come up with your own extensions!","pinned":false,"hidden":false,"mode":"md"},{"id":1613,"value":"### E1. Draw a grid of arrows\n\nInstead of drawing an arrow for a single position in our vector data, you can try drawing several arrows at once. The advantage is that you can see the direction and magnitude of the vectors at different locations at the same time. This allows you to compare the flow characteristics in different areas of the vector field. The only question is where to sample the field and place the arrows? A common approach is to simply draw a grid with evenly spaced arrows. The resulting visualization is sometimes called a *hedgehog plot*. So, try creating a new function that draws a grid of arrows. You can use the existing `drawArrow()` function as a base.","pinned":false,"hidden":false,"mode":"md"},{"id":2332,"value":"---\n\n#### ➡️ Solution:\n\nThe following function draws a grid of arrows. The grid resolution and arrow size can be adjusted with the parameters.","pinned":false,"hidden":false,"mode":"md"},{"id":1662,"value":"function drawArrowGrid(ctx, field, gridSize, arrowSize = 10) {\n // Get width and height of canvas.\n const width = ctx.canvas.width / window.devicePixelRatio;\n const height = ctx.canvas.height / window.devicePixelRatio;\n \n // Calculate width and height of grid cell.\n const xStep = width / gridSize;\n const yStep = height / gridSize;\n\n // Loop through the cell in the grid.\n for (let y = yStep * 0.5; y < height; y += yStep) {\n // Calculate the field y-coordinate.\n let fy = y / (height - 1);\n \n for (let x = xStep * 0.5; x < width; x += xStep) {\n // Calculate the field x-coordinate.\n let fx = x / (width - 1);\n \n // Sample the field for the center of the grid cell.\n let dir = field(fx, fy);\n\n // Draw an arrow for the grid.\n drawArrow(ctx, x, y, dir, arrowSize);\n }\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":2335,"value":"We can use the `drawArrowGird()` function to draw multiple arrows on a color image of the vector field. See how the arrows give you an idea of how the flow changes in the field? Try changing the field function to see different patterns of arrows!","pinned":false,"hidden":false,"mode":"md"},{"id":1658,"value":"{\n // Create a canvas.\n const size = Math.min(width, 450);\n const ctx = DOM.context2d(size, size);\n\n // Render properties.\n ctx.canvas.style.border = \"solid 1px black\";\n // Shadow color and blur to highlight arrows against a dark background.\n ctx.shadowColor = \"#fff\";\n ctx.shadowBlur = 5;\n\n // Get a field and create a background image.\n const field = fields.get(\"circle\");\n const image = await createImage(ctx, size, size, field);\n \n // Clear the canvas.\n ctx.clearRect(0, 0, size, size);\n\n // Draw the background image.\n ctx.drawImage(image, 0, 0, size, size);\n\n // Draw grid of arrows.\n drawArrowGrid(ctx, field, 10, 15);\n \n // Return the canvas.\n yield ctx.canvas;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1616,"value":"### E2. Draw particle traces\n\nTry extending the simulation of [step 4](#cell-1333) of this notebook to also visualize the trajectory of the particles. By showing not only the current position of the particles, but also a trace of their previous positions, you can get a better idea of how the flow properties change locally in the vector field.\n\nOne way to do this is to create and save a history of the particle positions while the simulation is running. You could then draw the particles at all captured positions, optionally with connecting lines between them. Note, however, that depending on the length of the history set, this may result in a large number of draw calls. Another way to approach this task would be to use image effects. You could draw the particles of each new simulation step into the same image buffer, but before each drawing call, reduce the opacity of the previously drawn content. This causes the drawn content to fade out over time, which also creates the illusion of particle traces.","pinned":false,"hidden":false,"mode":"md"},{"id":2343,"value":"---\n\n#### ➡️ Solution:\n\nThe following solution to the task implements the approach with image effects. We start by creating a function that reduces the opacity of the drawn content of a canvas.","pinned":false,"hidden":false,"mode":"md"},{"id":244,"value":"function reduceOpacity(ctx, fadeOut) {\n // Get the current image content of the canvas.\n let image = ctx.getImageData(0, 0, ctx.canvas.width, ctx.canvas.height);\n\n // Loop through all the pixels in the image.\n for (let i = 3; i < image.data.length; i += 4) {\n // Reduce the value of the alpha channel.\n image.data[i] = Math.max(0, image.data[i] - fadeOut); // Make sure that alpha does not become negative.\n }\n\n // Put the modified image content back into the canvas.\n ctx.putImageData(image, 0, 0);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":2347,"value":"To apply this effect, we create a separate *offscreen* canvas to draw the particles. For each simulation step, the opacity of the particle canvas content is first reduced. Then, the particles for the current simulation step are drawn over the previous content (i.e., the canvas is not cleared before drawing). The particle canvas content can then be used as an image and drawn on the main canvas that is visible on the screen. By separating the particle canvas from the main canvas in this way, we can later more easily combine the particle visualization with the other visualization techniques.","pinned":false,"hidden":false,"mode":"md"},{"id":196,"value":"$37","pinned":true,"hidden":false,"mode":"ojs"},{"id":2450,"value":"Our particle simulation allows us to draw the tracks of a fixed number of particles. There are several other (texture-based) techniques you can use to create denser flow visualizations. One common approach is to use a line integral convolution algorithm. For example, take a look at [this notebook](https://observablehq.com/@stwind/line-integral-convolution) by Zihou Ng ([@stwind](https://observablehq.com/@stwind)) for a nice and fast implementation using WebGL.","pinned":false,"hidden":false,"mode":"md"},{"id":1619,"value":"$38","pinned":false,"hidden":false,"mode":"md"},{"id":2357,"value":"---\n\n#### ➡️ Solution:\n\nHere are a few examples of new field functions.","pinned":false,"hidden":false,"mode":"md"},{"id":75,"value":"additionalFields = new Map([\n [\"saddle\", (x, y) => [x - 0.5, -y + 0.5]],\n [\"attract\", (x, y) => [0.5 - x, 0.5 - y]],\n [\"swirl\", (x, y) => {\n x = (x - 0.5) * 4 * Math.PI;\n y = (y - 0.5) * 4 * Math.PI;\n return [Math.sin(x + y), Math.cos(x - y)];\n }],\n [\"hilly bowl\", (x, y) => {\n x = (x - 0.5) * 4 * Math.PI;\n y = (y - 0.5) * 4 * Math.PI;\n return [0.5, Math.sin(x * x + y * y)];\n }],\n [\"vortex\", (x, y) => {\n x = (x - 0.5) * 10;\n y = (y - 0.5) * 10;\n\n const radius = 100.0, pull = 0.05;\n let sqSum = Math.max(x * x + y * y, 0.00001);\n let divisor = !sqSum ? 1 : 1 / Math.sqrt(sqSum);\n let factor = Math.exp(-sqSum / radius);\n let u = y * factor * divisor - pull * x;\n let v = -x * factor * divisor - pull * y;\n return [u, v];\n }],\n])","pinned":true,"hidden":false,"mode":"ojs"},{"id":2361,"value":"We have to add these additional functions to the `fields` collection to make them uniformly accessible in the notebook cells.","pinned":false,"hidden":false,"mode":"md"},{"id":1653,"value":"additionalFields.forEach((value, key) => fields.set(key, value) );","pinned":true,"hidden":true,"mode":"ojs"},{"id":2366,"value":"The following visualization shows an overview of all field functions in our collection. If you look at them side by side, the different flow characteristics become clear.","pinned":false,"hidden":false,"mode":"md"},{"id":2178,"value":"duplicateCanvas(fieldTypesCanvas)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1751,"value":"---\n\nNext, let's try to combine a few of the functions in our collection and look at the results...","pinned":false,"hidden":false,"mode":"md"},{"id":2370,"value":"First, we combine the *circle* field and the *repel* field by simply adding their vectors.","pinned":false,"hidden":false,"mode":"md"},{"id":1929,"value":"combinedField0 = (x, y) => addVector(fields.get(\"circle\")(x, y), fields.get(\"repel\")(x, y))","pinned":true,"hidden":false,"mode":"ojs"},{"id":2378,"value":"Second, we combine the three fields *left to right*, *attract*, and *diagonal* by adding and scaling their vectors. Scaling is necessary to prevent the combined magnitudes from becoming too large.","pinned":false,"hidden":false,"mode":"md"},{"id":1926,"value":"combinedField1 = (x, y) => {\n const v0 = fields.get(\"left to right\")(x, y);\n const v1 = fields.get(\"attract\")(x, y);\n const v2 = fields.get(\"diagonal\")(x, y);\n\n return scaleVector(addVector(addVector(v0, v1), v2), 0.3);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":2380,"value":"Third, we combine the fields *left to right* and *swirl* by first scaling, adding, and then rescaling the vectors. This creates a nice transition between the fields.","pinned":false,"hidden":false,"mode":"md"},{"id":2181,"value":"combinedField2 = (x, y) => {\n const v0 = scaleVector(fields.get(\"left to right\")(x, y), 3);\n const v1 = fields.get(\"swirl\")(x, y);\n \n return scaleVector(addVector(v0, v1), 0.25);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":2382,"value":"Below you can see visualizations of the combined fields. The combinations create new flow characteristics, while the influence of the individual fields is still visible to some degree.","pinned":false,"hidden":false,"mode":"md"},{"id":1912,"value":"html` \n \n \n \n \n \n

${await drawFieldWithArrows(combinedField0, Math.floor(width / 3) - 5, Math.floor(width / 3) - 5)}circle + repel

${await drawFieldWithArrows(combinedField1, Math.floor(width / 3) - 5, Math.floor(width / 3) - 5)}left-to-right + attract + diagonal

${await drawFieldWithArrows(combinedField2, Math.floor(width / 3) - 5, Math.floor(width / 3) - 5)}scaled left-to-right + swirl

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1997,"value":"Finally, we can try to smoothly interpolate between the vectors of two fields in an animation loop. Note that unlike the previous drawing code, we need to create a new color image for each animation frame to see the effect of the interpolation. By looking at the changes in the colors and arrows, we can see how the flow changes over time. In the solution of the last exercise, we also add the particle simulation and we can specify in the user interface which fields are interpolated.","pinned":false,"hidden":false,"mode":"md"},{"id":2000,"value":"{\n await visibility();\n \n // Create a canvas.\n const size = Math.min(width, 350);\n const ctx = DOM.context2d(size, size);\n\n // Render properties.\n ctx.canvas.style.border = \"solid 1px black\";\n ctx.shadowColor = \"#fff\";\n ctx.shadowBlur = 5;\n\n // Animation loop.\n while (true) {\n // Calculate the interpolation factor as a function of time.\n const t = Math.sin(performance.now() / 1000);\n\n // Define a field function.\n const field = (x, y) => {\n const v0 = fields.get(\"circle\")(x, y);\n const v1 = fields.get(\"saddle\")(x, y);\n return interpolateVector(v0, v1, t);\n };\n \n // Get a field and create a background image.\n const image = await createImage(ctx, 0.5 * size, 0.5 * size, field);\n \n // Clear the canvas.\n ctx.clearRect(0, 0, size, size);\n \n // Draw the background image.\n ctx.drawImage(image, 0, 0, size, size);\n \n // Draw grid of arrows.\n drawArrowGrid(ctx, field, 10);\n \n // Return the canvas.\n yield ctx.canvas;\n } \n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1621,"value":"### E4. Put it all together\n\nTry to integrate all the techniques discussed into one visualization to see how they work together. Each technique also depends on parameters. It is a good idea to provide some of these parameters in a graphical user interface. This way you can customize your visualization to better understand the data! Use the following set of controls to figure out which parameters make sense to adjust and how.","pinned":false,"hidden":false,"mode":"md"},{"id":268,"value":"viewof fieldProps = Inputs.form({\n fieldA: Inputs.select(fields, {value: fields.get(\"circle\"), label: \"Field type #1\"}),\n fieldB: Inputs.select(fields, {value: fields.get(\"repel\"), label: \"Field type #2\"}),\n interpolate: Inputs.radio([\"yes\", \"no\"], {label: \"Interpolate fields\", value: \"yes\"}),\n alphaScale: Inputs.range([0, 1], {value: 0.9, step: 0.01, label: \"Field alpha scale\"})\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":280,"value":"viewof arrowProps = Inputs.form({\n gridSize: Inputs.range([0, 100], {value: 10, step: 1, label: \"Arrow grid size\"}),\n size: Inputs.range([0, 20], {value: 10, step: 1, label: \"Arrow size\"}),\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":294,"value":"viewof particleProps = Inputs.form({\n count: Inputs.range([1, 100], {value: 15, step: 1, label: \"Particle count\"}),\n size: Inputs.range([1, 10], {value: 3, step: 1, label: \"Particle size\"}),\n speed: Inputs.range([0.1, 4], {value: 1, step: 0.1, label: \"Particle speed\"}),\n fadeOut: Inputs.range([0, 4], {value: 1, step: 0.01, label: \"Particle fade out\"}),\n lifetime: Inputs.range([0.25, 60], {value: 20, step: 0.25, label: \"Particle lifetime (s)\"}),\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":176,"value":"viewof particleReset = Inputs.button(\"Reset particles\", {value: null, reduce: () => particles.forEach(resetParticle) })","pinned":false,"hidden":false,"mode":"ojs"},{"id":2318,"value":"---\n\n#### ➡️ Solution:\n\nFirst, we create an array of particles in its own cell so that it is accessible to the user interface controls and our visualization.","pinned":false,"hidden":false,"mode":"md"},{"id":2099,"value":"particles = createParticles(particleProps.count, particleProps.size, particleProps.lifetime)","pinned":true,"hidden":false,"mode":"ojs"},{"id":2320,"value":"Next, we can create our visualization by combining the code from the cells from the techniques discussed above. Try interpolating between different fields using the dropdown boxes and adjusting the particle parameters to see different effects.","pinned":false,"hidden":false,"mode":"md"},{"id":2046,"value":"$39","pinned":true,"hidden":false,"mode":"ojs"},{"id":378,"value":"## Helper functions","pinned":false,"hidden":false,"mode":"md"},{"id":383,"value":"Vector operations to compute and adjust vector properties.","pinned":false,"hidden":false,"mode":"md"},{"id":60,"value":"function getMagnitute(v) {\n return Math.sqrt(v[0] * v[0] + v[1] * v[1]);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":46,"value":"function getNormalized(v) {\n const len = getMagnitute(v);\n return [v[0] / len, v[1] / len];\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1835,"value":"function addVector(a, b) {\n return [ a[0] + b[0], a[1] + b[1] ];\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1854,"value":"function scaleVector(v, factor) {\n return [ v[0] * factor, v[1] * factor ];\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2008,"value":"function interpolateVector(a, b, t) {\n return [ lerp(a[0], b[0], t), lerp(a[1], b[1], t) ];\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2010,"value":"function lerp(x, y, t) {\n return x * (1 - t) + y * t;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2190,"value":"function negateVector(v) {\n return [ -v[0], -v[1] ];\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2291,"value":"Conversion of numbers to hexadecimal colors.","pinned":false,"hidden":false,"mode":"md"},{"id":697,"value":"function rgbToHex(rgb) {\n return \"#\" + numberToHex(rgb[0]) + numberToHex(rgb[1]) + numberToHex(rgb[2]);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":687,"value":"function numberToHex(c) {\n const hex = c.toString(16);\n return hex.length == 1 ? \"0\" + hex : hex;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2301,"value":"Drawing helper functions.","pinned":false,"hidden":false,"mode":"md"},{"id":1814,"value":"async function drawFieldWithArrows(fieldFn, width = 250, height = 250) {\n // Helper function to visualize vector field with color image and arrow grid.\n \n // Create a canvas.\n const ctx = DOM.context2d(width, height);\n\n // Render properties.\n ctx.canvas.style.border = \"solid 1px black\";\n ctx.shadowColor = \"#fff\";\n ctx.shadowBlur = 5;\n \n // Get a field and create a background image.\n const image = await createImage(ctx, width, height, fieldFn);\n \n // Clear the canvas.\n ctx.clearRect(0, 0, width, height);\n\n // Draw the background image.\n ctx.drawImage(image, 0, 0, image.width, image.height);\n\n // Draw grid of arrows.\n drawArrowGrid(ctx, fieldFn, 10);\n \n // Return the canvas.\n return ctx.canvas;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2111,"value":"function duplicateCanvas(canvas, width, height) {\n // Helper function to duplicate a canvas object (e.g., used to duplicate rendered output of another cell in the notebook).\n width = width || canvas.clientWidth;\n height = height || canvas.clientHeight;\n \n // Create a new canvas and 2D rendering context with the same dimensions as the input canvas.\n const ctx = DOM.context2d(width, height);\n // Draw the content of the input canvas onto the new canvas.\n ctx.drawImage(canvas, 0, 0, width, height);\n // Return the new canvas.\n return ctx.canvas;\n}","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W3a","stdlib":"1","titling":"auto"}