30:T5b6,{ var canvas = null; if(d3.select("canvas#canvas-wind").empty()){ canvas = DOM.canvas(width, 800); d3.select(canvas).attr("id", "canvas-wind"); } else{ canvas = d3.select("canvas#canvas-wind").node(); } var context = canvas.getContext('2d'); context.translate(canvas.width / 2, canvas.height / 2); // 0 should be in the centre var modelSize = canvas.width / 4; var scale = modelSize; var angle = Math.PI / 6; // 30 degrees var a = Math.cos(angle) / 2; var b = Math.sin(angle) / 2; var fx = oblique.gx(scale, a); var fy = oblique.gy(scale, b); var particles = initPaticles(); while(true){ context.fillStyle = "rgba(0, 0, 0, 0.95)"; var prev = context.globalCompositeOperation; context.globalCompositeOperation = "destination-in"; context.fillRect(-canvas.width/2 , -canvas.height/2, canvas.width, canvas.height); context.globalCompositeOperation = prev; for(let i = 0; i < particles.length; i++){ let one = particles[i]; one.update(); } drawBottom(context, fx, fy); drawParticle(context, particles, -1, 200, "#b0b0b0", fx, fy); drawParticle(context, particles, 200, 300, "#909090", fx, fy); drawParticle(context, particles, 300, 1000, "#303030", fx, fy); drawParticle(context, particles, 1000, 10000, "#000000", fx, fy); yield canvas; } }31:Tbf2,class Particle3D { constructor(data) { this.data = data; this.xCnt = data[0].u.length; this.yCnt = data[0].v.length; this.zCnt = data.length; this.reset(); } random(min, max) { if (max == null) { max = min; min = 0; } return min + Math.floor(Math.random() * (max - min + 1)); } isCoordIdxValid(xIdx, yIdx, zIdx){ if(xIdx < 0 || xIdx >= this.xCnt){ // console.log("invalid xIdx ", xIdx); return false; } if(yIdx < 0 || yIdx >= this.yCnt){ // console.log("invalid yIdx ", yIdx); return false; } if(zIdx < 0 || zIdx >= this.zCnt){ // console.log("invalid yIdx ", yIdx); return false; } let data = this.data[zIdx]; let u = data.u[yIdx][xIdx]; let v = data.v[yIdx][xIdx]; return (u != undefined && u != null && Math.abs(u) > 0.01 && v != undefined && v != null && Math.abs(v) > 0.01); } reset(){ this.life = this.random(0, MAX_PARTICLE_LIFE); // this.life = MAX_PARTICLE_LIFE; let tryCnt = 0; this.x = 0; this.y = 0; this.z = 0; this.xt = null; this.yt = null; this.zt = null; do { let xIdx = this.random(0, this.xCnt-1); let yIdx = this.random(0, this.yCnt-1); let zIdx = this.random(0, this.zCnt-1); if (this.isCoordIdxValid(xIdx,yIdx, zIdx)){ this.x = xIdx / (this.xCnt-1); this.y = yIdx / (this.yCnt-1); this.z = zIdx / (this.zCnt-1); break; } }while(tryCnt++ < 30); } update(){ const SPEED_FACTOR = 0.0003; if(this.xt !== null){ this.x = this.xt; this.y = this.yt; this.z = this.zt; } let xIdx = Math.round(this.x * this.xCnt); let yIdx = Math.round(this.y * this.yCnt); let zIdx = Math.round(this.z * this.zCnt); if (this.life < 0 || !this.isCoordIdxValid(xIdx, yIdx, zIdx)){ this.reset(); } xIdx = Math.round(this.x * this.xCnt); yIdx = Math.round(this.y * this.yCnt); zIdx = Math.round(this.z * this.zCnt); xIdx = Math.min(this.xCnt-1, Math.max(0, xIdx)); yIdx = Math.min(this.yCnt-1, Math.max(0, yIdx)); zIdx = Math.min(this.zCnt-1, Math.max(0, zIdx)); let data = this.data[zIdx]; let u = data.u[yIdx][xIdx]; let v = data.v[yIdx][xIdx]; let w = data.w[yIdx][xIdx]; this.xt = this.x + u * SPEED_FACTOR; this.yt = this.y + v * SPEED_FACTOR; this.zt = this.z + w * SPEED_FACTOR; this.speed2 = u * u + v * v + w * w; this.life--; } getCurPos(){ var p = [this.x, this.y, this.z, this.xt, this.yt, this.zt]; p = p.map(function(d){ return (d-0.5)*2; }); return p; } }32:[{"id":"5774fbac22132e9582664e9b33f5603ce69bc184611f6651a94b9b7c969a91f0ba33e0277b2d6052bc34b50061e3649c4799977938d56b3f92da4ee29e7bd67f","href":"https://static.observableusercontent.com/files/5774fbac22132e9582664e9b33f5603ce69bc184611f6651a94b9b7c969a91f0ba33e0277b2d6052bc34b50061e3649c4799977938d56b3f92da4ee29e7bd67f","name":"megi.json","type":"application/json","lastModified":1652755304103.377,"size":10783913}] 2e:{"title":"3D Wind","cells":[{"id":0,"value":"# 3D Wind\n\n### 2010 Super Typhoon Megi","pinned":false,"hidden":false,"mode":"md"},{"id":173,"value":"MAX_PARTICLE_CNT = 30000","pinned":false,"hidden":false,"mode":"ojs"},{"id":168,"value":"MAX_PARTICLE_LIFE = 100","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":222,"value":"function drawParticle(context, particles, min, max, color, fx, fy){\n context.strokeStyle = color;\n context.beginPath();\n for(var i = 0; i < particles.length; i++){\n var one = particles[i];\n if(one.speed2 > min && one.speed2 <= max){\n var p = one.getCurPos();\n var v1 = new Vertex(p[0], p[2], p[1]);\n var v2 = new Vertex(p[3], p[5], p[4]);\n\n context.moveTo(fx(v1), -1 * fy(v1));\n context.lineTo(fx(v2), -1 * fy(v2));\n }\n }\n context.stroke();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":177,"value":"function initPaticles() {\n var p = [];\n for(let i = 0; i < MAX_PARTICLE_CNT; i++){\n p.push(new Particle3D(jsonData));\n }\n return p;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":150,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":109,"value":"function drawBottom(context, fx, fy) {\n var v1 = new Vertex(-1.0, -1.0, -1.0);\n var v2 = new Vertex(1.0, -1.0, -1.0);\n var v3 = new Vertex(1.0, -1.0, 1.0);\n var v4 = new Vertex(-1.0, -1.0, 1.0);\n\n context.strokeStyle = '#eeeeee';\n context.beginPath();\n context.moveTo(fx(v1), -1 * fy(v1));\n context.lineTo(fx(v2), -1 * fy(v2));\n context.lineTo(fx(v3), -1 * fy(v3));\n context.lineTo(fx(v4), -1 * fy(v4));\n context.lineTo(fx(v1), -1 * fy(v1));\n context.closePath();\n context.stroke();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"oblique = ({\n gx: (scale, zc) => (vertex) => (vertex.x + vertex.z * zc) * scale,\n gy: (scale, zc) => (vertex) => (vertex.y + vertex.z * zc) * scale,\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":19,"value":"function Vec3(elements) {\n\n\tif (elements.length !== 3) {\n\t\tthrow new Error('Vec3 must have 3 elements');\n\t}\n\n\tthis.element = function(i) {\n\n\t\tif (i < 0 || i > 2) {\n\t\t\tthrow new Error('i must be in the range 0 - 2');\n\t\t}\n\n\t\treturn elements[i];\n\t};\n\n\tthis.multiply = function(matrix) {\n\n\t\treturn matrix.multiply(this);\n\t}\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":17,"value":"class Vertex {\n constructor (x, y, z) {\n this.x = x;\n this.y = y;\n this.z = z;\n }\n \n static transform (vertex, matrix) {\n\treturn Vertex.fromVec3(\n\t\tmatrix.multiply(\n\t\t\tVertex.toVec3(vertex)\n\t\t)\n\t);\n }\n\n static toVec3 (vertex) {\n\treturn new Vec3([vertex.x, vertex.y, vertex.z]);\n }\n\n static fromVec3 (vector) {\n\treturn new Vertex(vector.element(0), vector.element(1), vector.element(2));\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":103,"value":"jsonData = await FileAttachment(\"megi.json\").json();","pinned":false,"hidden":false,"mode":"ojs"},{"id":105,"value":"d3 = require(\"d3@6\")","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}