31:T475,md`# Understanding Visual Systems with Vector Fields This project is a set of interactive experiments for exploring vector fields. A vector field is a a visual representation of forces acting on a set of pixels(or points.) This narrative is driven in two parts: Drawn to the point (visualizing one force vector fields) and Image Color Vector Fields (extracting and visualizing color data from images/art to better our understanding of the use of color.) This observable notebook serves as a introductory and advanced exploration of vector fields. Awesome streamline builder from https://github.com/anvaka/streamlines for visualizing vector fields. This is a experiment to use these streamline library to give us better insights into representing images as formations of different attributes. These attributes are seen to us as a whole but skilled practicitoners (such as artists and designers) can recognize the components of a piece.Majority of code is from @anvaka wonderful libraries and web experiments. Much of the code used in this experiment is from https://github.com/anvaka/wind-lines. *Work in progress / my own exploration*` 32:T1655, function drawField(result) { console.log(result,"result"); const canvas = DOM.canvas(result.width,result.height); canvas.width = result.width; canvas.height = result.height; const ctx = canvas.getContext("2d"); ctx.fillStyle = 'white'; ctx.lineWidth = '5px'; ctx.fillRect(0, 0, result.width, result.height); let colorChannel = channel; var uMax = 15.7396; var uMin = -0.9104; var vMax = 12.3119; var vMin = -6.0981; var maxVelocity = Math.sqrt(uMax * uMax + vMax * vMax); var workingSet = []; var animationQueue = []; var maxAnimations = 20, pointsPerAnimation = 242; var gradient = makeGradient(gradient_stops); var boundingBox = { left: 0, top: 0, width: result.width, height: result.height }; requestAnimationFrame(frame); // Read more about this api here: https://github.com/anvaka/streamlines streamlines({ dSep: 1.4, dTest: .05, boundingBox: boundingBox, vectorField: vectorField, timeStep: 2.9, stepsPerIteration: 4, onStreamlineAdded: onStreamlineAdded }).run(); // This is the main function that extracts velocity vector from the wind texture. function vectorField(p) { // We will be using interpolation, as described by https://blog.mapbox.com/how-i-built-a-wind-map-with-webgl-b63022b5537f var lx = Math.floor(p.x); var ly = Math.floor(p.y); var ux = Math.ceil(p.x); var uy = Math.ceil(p.y); if (lx < 0) lx = ux; if (ux >= result.width) ux = lx; if (ly < 0) ly = uy; if (uy > result.height) uy = ly; if (outside(lx, ly) || outside(ux, uy)) return; var tl = getXY(lx, ly); var tr = getXY(lx+1, ly); var bl = getXY(lx, ly + 1); var br = getXY(lx + 1, ly + 1); if (!tl || !tr || !bl || !br) return; // use interpolation to get better details in the mid points. var res = mix(mix(tl, tr, p.x - lx), mix(bl, br, p.x - lx), 1 - p.y + ly); return { // I don't really know why we need minus. This way it matches the original wind map by Vladimir Agafonkin x: -((res.x) * (uMax - uMin) + uMin), y: res.y * (vMax - vMin) + vMin, } }; // Given vector field coordinates - read value from the wind texture. function getXY(x, y) { if (outside(x, y)) return; var idx = (x + y * result.width) * 4; return { x: (result.pixels[idx + (+colorChannel)] / 255), // y: (result.pixels[idx+1] / 255), //By switching y to 0 I am merely checking for the presence // y: 0 y: (result.pixels[idx + (+colorChannel)] / 255) } } // Checks if a point is outside of the visible area. function outside(x, y) { return x < 0 || x >= result.width || y < 0 || y >= result.height; } // Linear interpolation between two points function mix(a, b, ratio) { return { x: a.x * ratio + (1 - ratio) * b.x, y: a.y * ratio + (1 - ratio) * b.y } } function onStreamlineAdded(points) { // We do not want to plot all points at once - the result will look jagged. Instead - queue // the streamline in the animation queue, and let requestAnimationFrame handle it. animationQueue.push({points, idx: 0}); } // This function slowly and steadily picks lines from animation queue, and animates their appearance. function frame() { requestAnimationFrame(frame); // We maintain two arrays - one is working array of the lines that are being animated, and the other // one is just an animation queue. for (var i = 0; i < workingSet.length; ++i) { var line = workingSet[i]; var lineDone = animate(line); if (lineDone && i < workingSet.length) { // When line is completed we pop it out of the working array. We could have used splice() // But I feel like `pop()` should be faster (didn't test it, just a feel) // So, move the finished line to the end, var t = workingSet[workingSet.length - 1]; workingSet[workingSet.length - 1] = line; workingSet[i] = t; workingSet.pop(); // and pop it. } } // If we have enough room in the working set, and enough animations in the queue, extend the working set. while (workingSet.length < maxAnimations && animationQueue.length > 0) { // Just a bit of randomness - make animation look slightly more organic. var line = Math.random() < 0.5 ? animationQueue.shift() : animationQueue.pop(); workingSet.push(line); } } function animate(line) { var from = line.idx var to = line.idx + Math.random() * pointsPerAnimation + pointsPerAnimation/2; for (var i = from + 1; i < to; ++i) { if (i >= line.points.length) return true; // We are done. line.idx = i; drawSegment(line.points[i - 1], line.points[i]); } } // Draws a segment between two points. function drawSegment(a, b) { ctx.beginPath(); // get color in the middle of the vector. ctx.strokeStyle = getColor((a.x + b.x)* 0.5, (a.y + b.y) * 0.5); a = transform(a); b = transform(b); ctx.moveTo(a.x, a.y); ctx.lineTo(b.x, b.y); ctx.stroke(); ctx.closePath(); } // Turns vector field point into canvas point. function transform(pt) { var tx = (pt.x - boundingBox.left)/boundingBox.width; var ty = (pt.y - boundingBox.top)/boundingBox.height; return { x: tx * width, y: ty * height } } function getColor(x, y) { var p = vectorField({x, y}); if (!p) return 'rgba(0, 0, 0, 1.)' var gray = Math.sqrt(p.x * p.x + p.y * p.y)/maxVelocity; var c = gradient(gray); return 'rgba(' + c.r +', ' + c.g + ',' + c.b + ', ' + (0.2 + gray * .5) +')'; } // addVectorClick(canvas,vectorField); return canvas; } 33:T590,function renderTo(canvas) { if (!canvas) throw new Error('Canvas is required'); var ctx = canvas.getContext('2d'); var width = canvas.width; var height = canvas.height; ctx.lineWidth = 2; ctx.lineJoin = ctx.lineCap = 'round'; // ctx.strokeStyle = '#578'; ctx.strokeStyle = 'whitesmoke'; let pa,pb; let prevSlope = 0; return onPointAdded; function onPointAdded(a, b, config) { ctx.beginPath(); //The stronger the curve from point a -> b should dictate the color. More intensity for a stronger curve // let n = perlin.noise( Math.abs(a.x - b.x) * period, Math.abs(a.y - b.y) * period); // let n = (Math.abs(a.y - b.y) * period) / (Math.abs(a.x - b.x) * period); // var n = Math.atan2(a.y - b.y, a.x - b.x) * 180 / Math.PI; // ctx.strokeStyle = `hsl(${-310 + n * 600}, 100%, ${300 * n * n * n}%)`; // ctx.strokeStyle = 'red'; a = transform(a, config.boundingBox); b = transform(b, config.boundingBox); ctx.moveTo(a.x, a.y); // ctx.lineTo(b.x, b.y); ctx.lineTo(b.x,b.y); ctx.stroke(); ctx.closePath(); //Previous point coordinates pa = a; pb = b; } function transform(pt, boundingBox) { var tx = (pt.x - boundingBox.left)/boundingBox.width; var ty = (pt.y - boundingBox.top)/boundingBox.height; return { x: tx * width, y: (1 - ty) * height } } }34:Ta4b,animatePoint = (context, velocityFunction,origin) => { // pixels / second //Animate particles inside vector field var boundingBox = { left: 0, top: 0, width: length, height: height }; console.log(origin, "Origin"); // c.clearRect(0, 0, width, height); let p = { x: origin.x, y: origin.y, vec: null } let t = transform(origin.x,origin.y); console.log("Transformed Origin", t); var direction = velocityFunction(t); p.vec = new Vector(direction.x,direction.y); console.log(p.vec, "p.VECc"); console.log(direction, "Direction"); context.fillStyle = '#6af7dd'; context.beginPath(); context.arc(p.x, p.y, 4, 0, 2 * Math.PI); context.fill(); let time = 0; requestAnimationFrame(frame); function frame() { time++; t = transform(p.x,p.y); direction = velocityFunction(t); //These two commands are essentially equal p.vec.add(direction.x, direction.y); // p.vec = new Vector(direction.x,direction.y); let velocity = p.vec.length(); p.vec.mulScalar(.1); //This is not the correct // console.log(p , "P before new pos"); p.x += (p.vec.x) * ((direction.x - p.vec.x)/500) * PARTICLE_SPEED; let newYpos = (p.vec.y) * ((direction.y - p.vec.y)/500) * PARTICLE_SPEED; p.y += newYpos; // console.log(p , "P after new pos"); // return; // p.vec.mulScalar(0); if(p.x > length || p.x < 0 || p.y > height || p.y < 0) return; // Need untransform right here t = untransform(p); context.beginPath(); context.arc(p.x , p.y , 3, 0, 2 * Math.PI); context.fill(); // p.vec.normalize(); //Recurrent loop requestAnimationFrame(frame); } function transform(x, y) { var tx = x - boundingBox.width/2; var ty = boundingBox.height/2 - y; return {x: tx , y: ty} } function getQuadrant(pt) { if(pt.x > length/2 && pt.y > height/2) return 4; if(pt.x < length/2 && pt.y > height/2) return 3; if(pt.x < length/2 && pt.y < height/2) return 2; return 1; } function untransform(pt){ var lx = Math.floor(p.x); var ly = Math.floor(p.y); var ux = Math.ceil(p.x); var uy = Math.ceil(p.y); if (lx < 0) lx = ux; if (ux >= length) ux = lx; if (ly < 0) ly = uy; if (uy > height) uy = ly; return {x: pt.x + boundingBox.length/2, y: boundingBox.height/2 - pt.y} } }35:[] 2f:{"title":"Understanding Visual Systems with Vector Fields","cells":[{"id":0,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":807,"value":"md `## Chapter1: Drawn to the point(s), a Visual Intro to 2d Vector Fields`","pinned":false,"hidden":false,"mode":"ojs"},{"id":295,"value":"md `A vector field can be thought of as a function from Real Numbers to Real Numbers where the domain consists of points in space and the range consists of resultant vectors from those points.\n\nBelow is one of the most basic vector fields: A rotational field.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":813,"value":"tex`f(x,y) = f(-y,x)` ","pinned":false,"hidden":false,"mode":"ojs"},{"id":830,"value":"md` This equation in english states that for finding the force on point x,y draw a direction and veclocity towards -y,x`","pinned":false,"hidden":false,"mode":"ojs"},{"id":772,"value":"{\n \n //TODO alow for drag to see single velocity vector.\n \n function getVelocity(p) {\n // var l = Math.sqrt(p.x * p.x + p.y * p.y);\n return {\n x: p.y,\n y: -p.x\n };\n }\n \tlet canvas = generateVisual(getVelocity);\n \n \t\n \n \n\treturn canvas;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":853,"value":"md `Edit the factor that is multipled by the x or y to increase or decrease the vector force. If both factors are the same, the vector is drawn to the center of the image (ie., the point 2,2 will be pulled to 2,2`","pinned":false,"hidden":false,"mode":"ojs"},{"id":330,"value":"viewof x_force =html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":405,"value":"viewof y_force = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":298,"value":"{ \t \n function getVelocity(p) {\n var l = Math.sqrt(p.x * p.x + p.y * p.y);\n return {\n x: ( x_force/100)*p.x,\n // x: Math.cos(l),\n // y: Math.log(Math.abs(p.x))\n y: ( y_force/100)*p.y\n };\n } \n\treturn generateVisual(getVelocity);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":904,"value":"md `Give it a go! Click to see where a point is being drawn to. The streamlines are then drawn through the set of closest points. For the algorithm behind how a streamline is drawn, check it out [here](http://web.cs.ucdavis.edu/~ma/SIGGRAPH02/course23/notes/papers/Jobard.pdf)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1207,"value":"viewof PARTICLE_SPEED = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":860,"value":"{ \t \n function getVelocity(p) {\n var l = Math.sqrt(p.x * p.x + p.y * p.y);\n return {\n x: p.x,\n y: p.y\n };\n }\n// function getVelocity(p) {\n// var l = Math.sqrt(p.x * p.x + p.y * p.y);\n// return {\n// x: Math.cos(l),\n// y: Math.log(Math.abs(p.x))\n// };\n// }\n\n \tconst canvas = generateVisual(getVelocity);\n \n \tconst ctx = canvas.getContext('2d')\n // ctx.translate(100,100);\n \t// ctx.scale(.25,.25);\n \n addVectorClick(canvas, getVelocity);\n\t\n \n\treturn canvas;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":208,"value":"md `## Chapter2: Interactive Vector Field Playground. \nThis is a playground for extracting single visual attributes in a image. The implementation currently analyzes a single color channel, but more attributes to be added soon.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":849,"value":"md `Select an image from your computer and analyze a color channel!`","pinned":false,"hidden":false,"mode":"ojs"},{"id":994,"value":"viewof channel = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":1514,"value":"viewof i = file({\n title: \"Images\",\n description: \"Only .jpg files are allowed in this example. Choose some images, then view in the cell below.\",\n accept: \".png\",\n multiple: true,\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1534,"value":"md`The function will draw streamlines through a vector field that only detects one channel of the RGB color model.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":451,"value":"{\n \n // let src = 'https://upload.wikimedia.org/wikipedia/commons/thumb/4/47/PNG_transparency_demonstration_1.png/560px-\tPNG_transparency_demonstration_1.png';\n \n //Replace the R value with the average of all r values around it.\n // let src = img.src; \n const mes = md`Please select a image with the input above`;\n mes.style.fontSize = '1.4em';\n\n if(i.length)\n \treturn Files.url(i[0]).then(loadPixelMap).then(drawField);\n else\n return mes; \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":566,"value":"{\n const div = html`

`;\n div.style.width = \"800px\"; \n div.style.height = \"800px\";\n for (var j = 0; j < i.length; j++) {\n let file = i[j];\n let img = html``\n img.src = await Files.url(i[j]);\n // if(!img.src) return md`No image selected`;\n div.append(img);\n }\n return div;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":477,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":963,"value":"md `TODO: Take calculated streamlines and transition to a distribution viz`","pinned":false,"hidden":false,"mode":"ojs"},{"id":732,"value":"streamlines = require('https://cdn.rawgit.com/anvaka/streamlines/master/dist/streamlines.min.js')","pinned":false,"hidden":false,"mode":"ojs"},{"id":785,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":792,"value":"function generateVisual(vectorField){\n \n \n \tconst canvas = DOM.canvas(length,height);\n canvas.width = length;\n \tcanvas.height = height;\n \n \tconst context = canvas.getContext(\"2d\");\n context.fillStyle = '#0A1936';\n \tcontext.fillRect(0, 0, width, height);\n\n \n \tstreamlines({\n // As usual, define your vector field:\n // vectorField(p) { return {x: Math.sin(p.y), y: Math.cos(p.x *p.x)}; },\n vectorField: vectorField,\n // And print the output to this canvas:\n \t dSep: .5,\n onPointAdded:\n // called when new point is added to a line\n // console.log('point created', from, to);\n renderTo(canvas),\n onStreamlineAdded(points) {\n // Points is just a sequence of points with `x, y` coordinates through which\n // the streamline goes.\n // console.log('stream line created. Number of points: ', points.length)\n // console.log(points);\n }\n\n }).run();\n \n \n return canvas;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":796,"value":"import {file} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":800,"value":"height = 700","pinned":false,"hidden":false,"mode":"ojs"},{"id":804,"value":"length = 700","pinned":false,"hidden":false,"mode":"ojs"},{"id":839,"value":"function loadPixelMap(src) {\n // the windmap is encoded by https://github.com/mapbox/webgl-wind/blob/master/data/prepare.js\n // Only two channels are used (r and g).\n var image = new Image();\n image.crossOrigin = '';\n\n var resolve;\n \tconsole.log(Files.url(i[0]));\n \n return new Promise((r, reject) => {\n resolve = r;\n image.onload = imageLoaded;\n image.onerror = reject;\n\t image.src = src;\n });\n\n function imageLoaded() {\n var cnv = document.createElement('canvas');\n console.log(image.height,\"Image\")\n var width = cnv.width = image.width, height = cnv.height = image.height;\n var ctx = cnv.getContext('2d');\n ctx.drawImage(image, 0, 0, image.width, image.height); \n\n var pixels = ctx.getImageData(0, 0, width, height).data;\n resolve({\n width: width, \n height: height, \n pixels: pixels\n });\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":843,"value":"/**\n * Creates a linear gradient function from array of stops.\n */\nfunction makeGradient(stops) {\n return getColor;\n\n function getColor(t) {\n if (t <= 0) return stops[0];\n if (t >= 1) return stops[stops.length - 1];\n\n var from = stops[0];\n\n // the array of stops is small. No need to be fancy - plain iteration is good enough\n for (var i = 1; i < stops.length; ++i) {\n var to = stops[i];\n if (from.stop <= t && t < to.stop) {\n // how far are we between these two stops?\n var dist = (t - from.stop)/(to.stop - from.stop);\n return mix(from, to, dist);\n } else {\n // Keep looking\n from = to;\n }\n }\n\n throw new Error('This should not be possible!');\n }\n\n // linear interpolation between r, g, and b components of a color\n function mix(a, b, t) {\n return {\n r: Math.round(a.r * t + (1 - t) * b.r),\n g: Math.round(a.g * t + (1 - t) * b.g),\n b: Math.round(a.b * t + (1 - t) * b.b),\n }\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":906,"value":" function canvas_arrow(context, fromx, fromy, tox, toy){\n var headlen = 10; // length of head in pixels\n var angle = Math.atan2(toy-fromy,tox-fromx);\n\n \n \t\n context.moveTo(fromx, fromy);\n context.lineTo(tox, toy);\n \n \n context.lineTo(tox-headlen*Math.cos(angle-Math.PI/6),toy-headlen*Math.sin(angle-Math.PI/6));\n context.moveTo(tox, toy);\n context.lineTo(tox-headlen*Math.cos(angle+Math.PI/6),toy-headlen*Math.sin(angle+Math.PI/6));\n }","pinned":false,"hidden":false,"mode":"ojs"},{"id":926,"value":"translateToFourCoor = p => {\n\t\n \n p.x = p.x/2 + width/2;\n p.y = p.y/2 + height/2;\n\n return p;\n}\n\n\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":949,"value":"function addVectorClick(canvas, velocityFunction) {\n \tcanvas.onmousedown = event =>{ \n const context = canvas.getContext('2d');\n const rect = canvas.getBoundingClientRect();\n \n let x = event.clientX - rect.left,\n y = event.clientY - rect.top;\n\n let origin = {x: x, y:y};\n\n let p = velocityFunction(origin);\n\n animatePoint(context, velocityFunction, origin);\n\n context.strokeStyle = 'red';\n context.lineWidth = '3';\n context.beginPath();\n canvas_arrow(context, origin.x, origin.y, p.x,p.y);\n context.stroke() \n\n context.strokeStyle = 'yellow';\n context.beginPath();\n canvas_arrow(context, origin.x, origin.y, origin.x, p.y);\n context.stroke() \n \n \t}\n\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1030,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":1216,"value":"class Vector {\n constructor(x, y) {\n this.x = x;\n this.y = y;\n // this.bind(this.length)\n }\n\n equals(other) {\n return this.x === other.x && this.y === other.y;\n }\n\n add(x2, y2) {\n // console.log(x2,y2, \"other in add\");\n // console.log(this, \"This in add\");\n this.x += x2; \n this.y += y2;\n }\n\n mulScalar(scalar) {\n // return new Vector(this.x * scalar, this.y * scalar);\n this.x *= scalar;\n this.y *= scalar;\n }\n\n length() {\n return Math.sqrt(this.x * this.x + this.y * this.y);\n }\n\n normalize() {\n var l = this.length();\n this.x /= l;\n this.y /= l;\n }\n\n distanceTo(other) {\n var dx = other.x - this.x;\n var dy = other.y - this.y;\n\n return Math.sqrt(dx * dx + dy * dy);\n }\n\n}\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":1505,"value":"//TODO : Change to HSL scale, refactor rederer\n\ngradient_stops = { return [\n// {stop: 0.0, r: 0x32, g: 0x88, b: 0xbd},\n// {stop: 0.1, r: 0x66, g: 0xc2, b: 0xa5},\n// {stop: 0.2, r: 0xab, g: 0xdd, b: 0xa4},\n// {stop: 0.3, r: 0xe6, g: 0xf5, b: 0x98},\n// {stop: 0.4, r: 0xfe, g: 0xe0, b: 0x8b},\n// {stop: 0.5, r: 0xfd, g: 0xae, b: 0x61},\n// {stop: 1.0, r: 0xf4, g: 0x6d, b: 0x43},\n \n \t {stop: 0.0, r: 255, g: 255, b: 255},\n // {stop: 5.0, r: 0, g: 0, b: 0},\n \t // {stop: 1.0, r: 244, g: 66, b: 66},\n \t{stop: 1.0, r: 0, g: 0, b: 255},\n \n ]}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1508,"value":"{\n const canvas = DOM.canvas(500,100);\n canvas.width = 500;\n canvas.height = 100;\n\n const ctx = canvas.getContext(\"2d\");\n ctx.fillStyle = 'white';\n ctx.fillRect(0, 0, 500, 100);\n \n \n gradient_stops.forEach(function(d,i){\n \tctx.fillStyle = 'rgba(' + d.r +', ' + d.g + ',' + d.b + ', ' + (1) +')';\n \t\tctx.fillRect(i*50 ,30, 50 * (1),50) \n })\n \n \n \n return canvas\n\n}","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W35","stdlib":"1","titling":"auto"}