// んー。 // 平面でいいか // 高さだけいじる？法線は？んー。微分で。 // 山辺さんのhttps://qiita.com/masakiyamabe/items/9c190158ba308294240b // を参考にしています。 // で、このマップは@masakickさんの // このマップは10m四方で256x256なので // 大雑把にみて2560x2560x3776 // だから640に落とすには4で割ればいいわけね // つまり640x640のひとつひとつについて256のどこか取って取得して // 高さを4で割ればいい感じ // -320～320を255等分して間に254個の点を取ってサンプリング。 // -320+640*i/255でi=0,1,2,...,255とかする // z座標はgetで // んんー・・ // 10km // ということはおそらく25.6kmか。つまり25600m四方。 // だから640と25600, ???と3776の比を取って // 40で割る？ // 頂点の間が40mだから高さについても40で割る必要があるわけね // カメラ // 線については線のインデックス渡してメッシュの代わりにそれを // 使えばいいと思う // というか色情報？そのまま使う・・？ // 色工夫して雪降らせるとか // これと別にポイントスプライト用意する // 一番下まで行ったら上に戻る感じのを大量に // 用意すればいいわね // bgManager便利すぎる・・やべ・・ // 雪？？ // 白いスプライト落とす。64x64x64で初期化。で、10倍。 // 位置の初期値は-320～320のxyで0～160でいこう // 4つ目の座標で速度1次元で管理するといいね // ノイズで揺らせばGOOD!(( ﾟДﾟ)ﾊｧ?) // がんばります・・・・・・ // --------------------------------------------------------------- // // global. let _gl, gl; // カメラ変数 let posR = 480; let posTheta = Math.PI * 0.1; let posPhi = 0; let focusX = 0; let focusY = 0; let _node; // これが統括する。 let properFrameCount = 0; // カウントも必要 let hm; // 256x256. let btn; // ワイヤーフレームの切り替えですね let bg; // ボタン乗せるベース(3Dに2Dおくのはめんどくさいので) let config = {}; let performanceRatio = 0; let fb, fb2, fbFlip; const TEX_SIZE = 512; const POINTMOVE_SEED = 99999 * Math.random(); // --------------------------------------------------------------- // // simplex noise. const _SimplexNoise = // 各種定数 "const vec2 r_vec_20 = vec2(127.1, 311.7);" + "const vec2 r_vec_21 = vec2(269.5, 183.3);" + "const vec2 u_10 = vec2(1.0, 0.0);" + "const vec2 u_01 = vec2(0.0, 1.0);" + "const vec2 u_11 = vec2(1.0, 1.0);" + "const vec3 r_vec_30 = vec3(127.1, 311.7, 251.9);" + "const vec3 r_vec_31 = vec3(269.5, 183.3, 314.3);" + "const vec3 r_vec_32 = vec3(419.2, 371.9, 218.4);" + "const vec3 u_100 = vec3(1.0, 0.0, 0.0);" + "const vec3 u_010 = vec3(0.0, 1.0, 0.0);" + "const vec3 u_001 = vec3(0.0, 0.0, 1.0);" + "const vec3 u_110 = vec3(1.0, 1.0, 0.0);" + "const vec3 u_101 = vec3(1.0, 0.0, 1.0);" + "const vec3 u_011 = vec3(0.0, 1.0, 1.0);" + "const vec3 u_111 = vec3(1.0, 1.0, 1.0);" + "const float r_coeff = 43758.5453123;" + // 2Dランダムベクトル(-1.0～1.0) "vec2 random2(vec2 st){" + " vec2 v;" + " v.x = sin(dot(st, r_vec_20)) * r_coeff;" + " v.y = sin(dot(st, r_vec_21)) * r_coeff;" + " return -1.0 + 2.0 * fract(v);" + "}" + // 3Dランダムベクトル(-1.0～1.0) "vec3 random3(vec3 st){" + " vec3 v;" + " v.x = sin(dot(st, r_vec_30)) * r_coeff;" + " v.y = sin(dot(st, r_vec_31)) * r_coeff;" + " v.z = sin(dot(st, r_vec_32)) * r_coeff;" + " return -1.0 + 2.0 * fract(v);" + // -1.0～1.0に正規化 "}" + // シンプレックスノイズ(-1.0～1.0) "float snoise3(vec3 st){" + " vec3 p = st + (st.x + st.y + st.z) / 3.0;" + " vec3 f = fract(p);" + " vec3 i = floor(p);" + " vec3 g0, g1, g2, g3;" + " vec4 wt;" + " g0 = i;" + " g3 = i + u_111;" + " if(f.x >= f.y && f.x >= f.z){" + " g1 = i + u_100;" + " g2 = i + (f.y >= f.z ? u_110 : u_101);" + " wt = (f.y >= f.z ? vec4(1.0 - f.x, f.x - f.y, f.y - f.z, f.z) : vec4(1.0 - f.x, f.x - f.z, f.z - f.y, f.y));" + " }else if(f.y >= f.x && f.y >= f.z){" + " g1 = i + u_010;" + " g2 = i + (f.x >= f.z ? u_110 : u_011);" + " wt = (f.x >= f.z ? vec4(1.0 - f.y, f.y - f.x, f.x - f.z, f.z) : vec4(1.0 - f.y, f.y - f.z, f.z - f.x, f.x));" + " }else{" + " g1 = i + u_001;" + " g2 = i + (f.x >= f.y ? u_101 : u_011);" + " wt = (f.x >= f.y ? vec4(1.0 - f.z, f.z - f.x, f.x - f.y, f.y) : vec4(1.0 - f.z, f.z - f.y, f.y - f.x, f.x));" + " }" + " float value = 0.0;" + " wt = wt * wt * wt * (wt * (wt * 6.0 - 15.0) + 10.0);" + " value += wt.x * dot(p - g0, random3(g0));" + " value += wt.y * dot(p - g1, random3(g1));" + " value += wt.z * dot(p - g2, random3(g2));" + " value += wt.w * dot(p - g3, random3(g3));" + " return value;" + "}"; // --------------------------------------------------------------- // // shader. let lightVert= "precision mediump float;" + "attribute vec3 aPosition;" + "attribute vec4 aVertexColor;" + "attribute vec3 aNormal;" + "uniform vec3 uAmbientColor;" + "uniform mat4 uModelViewMatrix;" + "uniform mat4 uProjectionMatrix;" + "uniform mat3 uNormalMatrix;" + "varying vec4 vVertexColor;" + "varying vec3 vNormal;" + "varying vec3 vViewPosition;" + "varying vec3 vAmbientColor;" + "void main(void){" + // 場合によってはaPositionをいじる（頂点位置） // 場合によってはaNormalもここで計算するかもしれない " vec4 viewModelPosition = uModelViewMatrix * vec4(aPosition, 1.0);" + // Pass varyings to fragment shader " vViewPosition = viewModelPosition.xyz;" + " gl_Position = uProjectionMatrix * viewModelPosition;" + " vNormal = uNormalMatrix * aNormal;" + " vVertexColor = aVertexColor;" + " vAmbientColor = uAmbientColor;" + "}"; let lightFrag = "precision mediump float;" + "uniform mat4 uViewMatrix;" + // directionalLight関連 "uniform vec3 uLightingDirection;" + "uniform vec3 uDirectionalDiffuseColor;" + "uniform vec3 uPointLightLocation;" + "uniform vec3 uPointLightDiffuseColor;" + "uniform vec3 uAttenuation;" + // デフォルトは1,0,0. // pointLight関連 "uniform bool uUseDirectionalLight;" + // デフォルトはfalse. "uniform bool uUsePointLight;" + // デフォルトはfalse; "const float diffuseFactor = 0.73;" + "const int USE_VERTEX_COLOR = 0;" + "const int USE_MONO_COLOR = 1;" + // DirectionalLight項の計算。 "vec3 getDirectionalLightDiffuseColor(vec3 normal){" + " vec3 lightVector = (uViewMatrix * vec4(uLightingDirection, 0.0)).xyz;" + " vec3 lightDir = normalize(lightVector);" + " vec3 lightColor = uDirectionalDiffuseColor;" + " float diffuse = max(0.0, dot(-lightDir, normal));" + " return diffuse * lightColor;" + "}" + // PointLight項の計算。attenuationも考慮。 "vec3 getPointLightDiffuseColor(vec3 modelPosition, vec3 normal){" + " vec3 lightPosition = (uViewMatrix * vec4(uPointLightLocation, 1.0)).xyz;" + " vec3 lightVector = modelPosition - lightPosition;" + " vec3 lightDir = normalize(lightVector);" + " float lightDistance = length(lightVector); " + " float d = lightDistance;" + " float lightFallOff = 1.0 / dot(uAttenuation, vec3(1.0, d, d*d));" + " vec3 lightColor = lightFallOff * uPointLightDiffuseColor;" + " float diffuse = max(0.0, dot(-lightDir, normal));" + " return diffuse * lightColor;" + "}" + // _lightはこれで。 "vec3 totalLight(vec3 modelPosition, vec3 normal){" + " vec3 result = vec3(0.0);" + // 0.0で初期化 // directionalLightの影響を加味する " if(uUseDirectionalLight){" + " result += getDirectionalLightDiffuseColor(normal);" + " }" + // pointLightの影響を加味する " if(uUsePointLight){" + " result += getPointLightDiffuseColor(modelPosition, normal);" + " }" + " result *= diffuseFactor;" + " return result;" + "}" + // include lighting.glsl "uniform vec4 uMonoColor;" + "uniform int uUseColorFlag;" + // 0:vertex. 1:mono. // 単色にしたいときtrueにして有効化する感じ。 "varying vec4 vVertexColor;" + "varying vec3 vNormal;" + "varying vec3 vViewPosition;" + "varying vec3 vAmbientColor;" + // メインコード "void main(void){" + " vec3 diffuse = totalLight(vViewPosition, normalize(vNormal));" + " vec4 col = vec4(1.0);" + " if(uUseColorFlag == USE_MONO_COLOR) {" + " col = uMonoColor;" + // uMonoColor単色 " }" + " if(uUseColorFlag == USE_VERTEX_COLOR){" + " col = vVertexColor;" + // 頂点色 " }" + // diffuseの分にambient成分を足してrgbに掛けて色を出してspecular成分を足して完成みたいな（？？） " col.rgb *= (diffuse + vAmbientColor);" + " gl_FragColor = col;" + "}"; // 頂点色つけるだけの簡易シェーダ（ワイヤーフレーム用） let myVert= "precision mediump float;" + "attribute vec3 aPosition;" + "attribute vec4 aVertexColor;" + "varying vec4 vVertexColor;" + "uniform mat4 uModelViewMatrix;" + "uniform mat4 uProjectionMatrix;" + "void main(){" + " vec4 viewModelPosition = uModelViewMatrix * vec4(aPosition, 1.0);" + " gl_Position = uProjectionMatrix * viewModelPosition;" + " vVertexColor = aVertexColor;" + "}"; let myFrag= "precision mediump float;" + "varying vec4 vVertexColor;" + "void main(){" + " gl_FragColor = vVertexColor;" + "}"; // dataShader. 最初の位置と速度を設定するところ。 const dataVert= "precision mediump float;" + "attribute vec3 aPosition;" + // unique attribute. "void main(){" + " gl_Position = vec4(aPosition, 1.0);" + "}"; // xとyは-320～320でzは0～160でwはこれが速度ですが2～4でよろしく // ノイズをランダムで使う場合は大きくしてfractとるといい感じに // ばらけるよ const dataFrag= "precision mediump float;" + "uniform float uTexSize;" + "uniform float uSeed;" + // seedを渡してね！ _SimplexNoise + "void main(){" + " vec2 p = gl_FragCoord.xy / uTexSize;" + // 0.0～1.0に正規化 // 初期位置と初期速度を設定 " vec3 pos;" + " float s1 = snoise3(vec3(p.x, p.y, uSeed));" + " s1 = fract(s1 * 32.0) * 2.0 - 1.0;" + " pos.x = 400.0 * s1;" + " float s2 = snoise3(vec3(uSeed, p.x, p.y));" + " s2 = fract(s2 * 32.0) * 2.0 - 1.0;" + " pos.y = 400.0 * s2;" + " float s3 = snoise3(vec3(p.y, uSeed, p.x));" + " s3 = fract(s3 * 32.0);" + " pos.z = 1280.0 * s3;" + " float s4 = snoise3(vec3(p.x + 50.0, p.y + 50.0, uSeed + 50.0));" + " s4 = fract(s4 * 32.0);" + " float velocity = -4.0 + 3.0 * s4;" + " gl_FragColor = vec4(pos, velocity);" + "}"; // moveShader. 位置と速度の更新をオフスクリーンレンダリングで更新する。 const moveVert = "precision mediump float;" + "attribute vec3 aPosition;" + "void main(){" + " gl_Position = vec4(aPosition, 1.0);" + "}"; // z座標だけ更新する（xとyは更新しない） const moveFrag = "precision mediump float;" + "uniform sampler2D uTex;" + "uniform float uTexSize;" + "void main(){" + " vec2 p = gl_FragCoord.xy / uTexSize;" + // ピクセル位置そのまま " vec4 t = texture2D(uTex, p);" + " vec3 pos = t.xyz;" + " float velocity = t.w;" + // 更新処理 " pos.z += velocity;" + " if(pos.z < 0.0){ pos.z = 1280.0; }" + " gl_FragColor = vec4(pos, velocity);" + "}"; // pointShader. // 行列を使って変換する。uPointScaleは使わない。 const pointVert = "precision mediump float;" + "attribute float aIndex;" + "uniform sampler2D uTex;" + "uniform vec2 uResolution;" + // 解像度 "uniform float uTexSize;" + // テクスチャフェッチ用 "uniform float uSeed;" + // あっちとは別のseed "uniform mat4 uModelViewMatrix;" + "uniform mat4 uProjectionMatrix;" + _SimplexNoise + "void main() {" + // uTexSize * uTexSize個の点を配置 // 0.5を足しているのはきちんとマス目にアクセスするためです " float x = (mod(aIndex, uTexSize) + 0.5) / uTexSize;" + " float y = (floor(aIndex / uTexSize) + 0.5) / uTexSize;" + " vec4 t = texture2D(uTex, vec2(x, y));" + " vec3 pos = t.xyz;" + // これが、位置。 // ノイズで水平の位置をずらす " vec3 diff = vec3(snoise3(vec3(pos.x * 10.0, pos.y * 10.0, pos.z * 0.001)), snoise3(vec3(pos.x * 10.0, pos.y * 10.0, pos.z * 0.001)), 0.0);" + " diff = fract(diff * 32.0) * 2.0 - 1.0;" + // MVP変換 " vec4 viewModelPosition = uModelViewMatrix * vec4(pos + 2.0 * diff, 1.0);" + " gl_Position = uProjectionMatrix * viewModelPosition;" + " float r = snoise3(vec3(pos.x, pos.y, uSeed));" + " r = fract(r * 32.0) * 2.0 - 1.0;" + " gl_PointSize = 2.0 + 1.0 * r;" + "}"; // わからん！！！ const pointFrag = "precision mediump float;" + "void main(){" + " vec2 p = gl_PointCoord;" + " p = (p - 0.5) * 2.0;" + " if(length(p) > 1.0){ discard; }" + " float d = length(p) - 0.7;" + " float blt = exp(-d*32.0);" + " if(blt < 0.1){ discard; }" + " gl_FragColor = vec4(vec3(blt), 1.0);" + "}"; function preload(){ hm = loadImage("https://stat.neort.io/externalResource/c71kcqs3p9f3hsje8um0.png"); } function setup(){ _gl = createCanvas(windowWidth, windowHeight, WEBGL); pixelDensity(1); gl = _gl.GL; // レンダリングコンテキストの取得 textureFloatCheck(); Uint32ArrayCheck(); // nodeを用意 _node = new RenderNode(); // テライン関連 let _shader = createShader(lightVert, lightFrag); _node.registRenderSystem('light', _shader); // 頂点は256x256個ですね let _terra = getTerra(hm); // _terraにはいつものv,n,f // 高さのMAXを取得してそれに応じて色を付けましょう // 高いところほど赤くなるように colors = []; for(let i = 0; i < Math.floor(_terra.v.length / 3); i++){ // 色のRGBAをここでcolorsにpushする const _height = _terra.v[i * 3 + 2]; // 高さ let _sat = map(_height, _terra.hMin, _terra.hMax, 1.0, 0.0); let _col = {}; if(_sat < 0.3){ _col = _HSV(0.55, _sat*0.5, 1); } else{ _col = _HSV(0.55, _sat, 1); } colors.push(_col.r, _col.g, _col.b, 1); } _node.use('light', 'terra') .registAttributes({aPosition:{data:_terra.v, stride:3}, aVertexColor:{data:colors, stride:4}, aNormal:{data:_terra.n, stride:3}}) .registIndexBuffer(_terra.f, Uint32Array); // ワイヤーフレーム関連 _shader = createShader(myVert, myFrag); _node.registRenderSystem('my', _shader); colors = []; for(let i = 0; i < Math.floor(_terra.v.length / 3); i++){ // 色のRGBAをここでcolorsにpushする const _height = _terra.v[i * 3 + 2]; // 高さ let _sat = map(_height, _terra.hMin, _terra.hMax, 1.0, 0.0); let _col = {}; if(_sat < 0.3){ _col = _HSV(0.55, _sat*0.5, 1); } else{ _col = _HSV(0.55, _sat, 1); } colors.push(_col.r, _col.g, _col.b, 1); } _node.use('my', 'wire') .registAttributes({aPosition:{data:_terra.v, stride:3}, aVertexColor:{data:colors, stride:4}}) .registIndexBuffer(_terra.l, Uint32Array); // ここから雪関連 // dataShader:点の位置と速度の初期設定用 const dataShader = createShader(dataVert, dataFrag); _node.registRenderSystem('data', dataShader); _node.use('data', 'plane') .registAttribute('aPosition', [-1,1,0,-1,-1,0,1,1,0,1,-1,0], 3); // moveShader:点の位置と速度の更新用 const moveShader = createShader(moveVert, moveFrag); _node.registRenderSystem('move', moveShader); _node.use('move', 'plane') .registAttribute('aPosition', [-1,1,0,-1,-1,0,1,1,0,1,-1,0], 3) .registUniformLocation('uTex'); // pointShader:点描画用 // 点描画用のインデックスを格納する配列 let indices = []; // 0～TEX_SIZE*TEX_SIZE-1のindexを放り込む for(let i = 0; i < TEX_SIZE * TEX_SIZE; i++){ indices.push(i); } const pointShader = createShader(pointVert, pointFrag); _node.registRenderSystem('point', pointShader); _node.use('point', 'points') .registAttribute('aIndex', indices, 1) .registUniformLocation('uTex'); // フレームバッファ関連 fb = create_framebuffer(TEX_SIZE, TEX_SIZE, gl.FLOAT); fb2 = create_framebuffer(TEX_SIZE, TEX_SIZE, gl.FLOAT); fbFlip = fb; // 位置と速度の初期設定 defaultRendering(); // ボタンの準備 config.wire = false; let btnCol = _HSV(0.55, 1, 1); const btnHeight = height * 0.04; btn = new OnOffButton(config, "wire", 0, btnHeight * 3, btnHeight * 3, btnHeight, {r:btnCol.r * 255, g:btnCol.g * 255, b:btnCol.b * 255}); bg = new BackgroundManager(); bg.draw("fill", [255]) .draw("noStroke") .draw("textSize", [btnHeight * 0.66]) .draw("textAlign", [LEFT, TOP]); } function draw(){ const start = performance.now(); //background(0); bg.draw("background", [0]); // .draw("text", [performanceRatio.toFixed(3), 6, 42]); //btn.draw(bg.getLayer(0)); bg.display(); moveCamera(); camera(posR*cos(posTheta)*cos(posPhi) + focusX, posR*cos(posTheta)*sin(posPhi) + focusY, posR*sin(posTheta), focusX,focusY,0,0,0,-1); if(config.wire){ _node.use('my', 'wire') .setAttribute() .setMatrix() .bindIndexBuffer() .drawElements(gl.LINES) .flush() .clear(); // clearも忘れずに }else{ _node.useRenderSystem('light') .setDirectionalLight(_RGB(1), 0, 0, -1) .setAmbientLight(_RGB(0.25)); _node.useTopology('terra') .setAttribute() .setMatrix() .setVertexColor() .bindIndexBuffer() .drawElements(gl.TRIANGLES) .clear(); // clearも忘れずに } moveRendering(); // 点描画 _node.use('point', 'points') .setAttribute() .setMatrix() .setTexture('uTex', fb2.t, 0) .setUniform("uTexSize", TEX_SIZE) .setUniform("uResolution", [width, height]) .setUniform("uSeed", POINTMOVE_SEED) .drawArrays(gl.POINTS) .flush() .clear(); bg.draw("clear") .draw("text", [performanceRatio.toFixed(3), 6, windowHeight * 0.18]); btn.draw(bg.getLayer(0)); bg.display(); // swap. fbFlip = fb; fb = fb2; fb2 = fbFlip; const end = performance.now(); performanceRatio = (end - start) * 60 / 1000; } // --------------------------------------------------------------- // // offscreen rendering. // オフスクリーンレンダリングで初期の位置と速度を設定 function defaultRendering(){ // フレームバッファをbind gl.bindFramebuffer(gl.FRAMEBUFFER, fb.f); // ビューポートをサイズに合わせて設定 gl.viewport(0, 0, TEX_SIZE, TEX_SIZE); clear(); // このclearはオフスクリーンに対して適用される _node.use('data', 'plane') .setAttribute() .setUniform('uTexSize', TEX_SIZE) .setUniform('uSeed', 99999 * Math.random()) .drawArrays(gl.TRIANGLE_STRIP) .clear(); gl.viewport(0, 0, width, height); // viewportを戻す gl.bindFramebuffer(gl.FRAMEBUFFER, null); // bindしたものは常に解除 } // オフスクリーンレンダリングで位置と速度を更新 function moveRendering(){ // fbの内容をfb2が受け取って更新した結果を焼き付ける // draw内で最後にfbとfb2をswapさせることで逐次更新を実現する gl.bindFramebuffer(gl.FRAMEBUFFER, fb2.f); gl.viewport(0, 0, TEX_SIZE, TEX_SIZE); clear(); _node.use('move', 'plane') .setAttribute() .setTexture('uTex', fb.t, 0) .setUniform("uTexSize", TEX_SIZE) .drawArrays(gl.TRIANGLE_STRIP) .clear(); gl.viewport(0, 0, width, height); // viewportを戻す gl.bindFramebuffer(gl.FRAMEBUFFER, null); // bindしたものは常に解除 } // --------------------------------------------------------------- // // texture float usability check. // RenderNodeの処理にした方がいいかもです // texture floatが使えるかどうかチェック function textureFloatCheck(){ let ext; ext = gl.getExtension('OES_texture_float') || this._renderer.getExtension('OES_texture_half_float'); if(ext == null){ alert('float texture not supported'); return; } } // Uint32Arrayが使えるかどうかチェック function Uint32ArrayCheck(){ if (!gl.getExtension('OES_element_index_uint')) { throw new Error('Unable to render a 3d model with > 65535 triangles. Your web browser does not support the WebGL Extension OES_element_index_uint.'); } } // --------------------------------------------------------------- // // global functions. // framebuffer. // framebufferを生成するための関数 // attribute関連はstaticメソッドに移しました。 // RenderNodeの処理にする・・？ // フレームバッファをオブジェクトとして生成する関数 function create_framebuffer(w, h, format){ // フォーマットチェック let textureFormat = null; if(!format){ textureFormat = gl.UNSIGNED_BYTE; }else{ textureFormat = format; } // フレームバッファの生成 let frameBuffer = gl.createFramebuffer(); // フレームバッファをWebGLにバインド gl.bindFramebuffer(gl.FRAMEBUFFER, frameBuffer); // 深度バッファ用レンダーバッファの生成とバインド let depthRenderBuffer = gl.createRenderbuffer(); gl.bindRenderbuffer(gl.RENDERBUFFER, depthRenderBuffer); // レンダーバッファを深度バッファとして設定 gl.renderbufferStorage(gl.RENDERBUFFER, gl.DEPTH_COMPONENT16, w, h); // フレームバッファにレンダーバッファを関連付ける gl.framebufferRenderbuffer(gl.FRAMEBUFFER, gl.DEPTH_ATTACHMENT, gl.RENDERBUFFER, depthRenderBuffer); // フレームバッファ用テクスチャの生成 let fTexture = gl.createTexture(); // フレームバッファ用のテクスチャをバインド gl.bindTexture(gl.TEXTURE_2D, fTexture); // フレームバッファ用のテクスチャにカラー用のメモリ領域を確保 gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, w, h, 0, gl.RGBA, textureFormat, null); // テクスチャパラメータ gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE); // フレームバッファにテクスチャを関連付ける gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, fTexture, 0); // 各種オブジェクトのバインドを解除 gl.bindTexture(gl.TEXTURE_2D, null); gl.bindRenderbuffer(gl.RENDERBUFFER, null); gl.bindFramebuffer(gl.FRAMEBUFFER, null); // オブジェクトを返して終了 return {f : frameBuffer, d : depthRenderBuffer, t : fTexture}; } // vboの作成 function create_vbo(data){ // バッファオブジェクトの生成 let vbo = gl.createBuffer(); // バッファをバインドする gl.bindBuffer(gl.ARRAY_BUFFER, vbo); // バッファにデータをセット gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(data), gl.STATIC_DRAW); // バッファのバインドを無効化 gl.bindBuffer(gl.ARRAY_BUFFER, null); // 生成したVBOを返して終了 return vbo; } // attributeの登録 function set_attribute(attributes){ // 引数として受け取った配列を処理する for(let name of Object.keys(attributes)){ const attr = attributes[name]; // バッファをバインドする gl.bindBuffer(gl.ARRAY_BUFFER, attr.vbo); // attributeLocationを有効にする gl.enableVertexAttribArray(attr.location); // attributeLocationを通知し登録する gl.vertexAttribPointer(attr.location, attr.stride, gl.FLOAT, false, 0, 0); } } // iboの作成 function create_ibo(data, type){ // type:Uint16ArrayまたはUint32Array. // バッファオブジェクトの生成 let ibo = gl.createBuffer(); // バッファをバインドする gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, ibo); // バッファにデータをセット gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new (type)(data), gl.STATIC_DRAW); // バッファのバインドを無効化 gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, null); // 生成したIBOを返して終了 return ibo; } // --------------------------------------------------------------- // // utility. function _RGB(r, g, b){ if(arguments.length === 1){ g = r; b = r; } return {r:r, g:g, b:b}; } function _HSV(h, s, v){ h = constrain(h, 0, 1); s = constrain(s, 0, 1); v = constrain(v, 0, 1); let _r = constrain(abs(((6 * h) % 6) - 3) - 1, 0, 1); let _g = constrain(abs(((6 * h + 4) % 6) - 3) - 1, 0, 1); let _b = constrain(abs(((6 * h + 2) % 6) - 3) - 1, 0, 1); _r = _r * _r * (3 - 2 * _r); _g = _g * _g * (3 - 2 * _g); _b = _b * _b * (3 - 2 * _b); let result = {}; result.r = v * (1 - s + s * _r); result.g = v * (1 - s + s * _g); result.b = v * (1 - s + s * _b); return result; } // --------------------------------------------------------------- // // RenderSystem class. // shaderとprogramとtopologyのsetとあとテクスチャのロケーション // その組です // topologyはattribute群ですね // たとえば立方体やトーラスを登録するわけ（もちろん板ポリも） class RenderSystem{ constructor(name, _shader){ this.name = name; this.shader = _shader; shader(_shader); this.program = _shader._glProgram; this.topologies = {}; this.uniformLocations = {}; } getName(){ return this.name; } registTopology(topologyName){ if(this.topologies[topologyName] !== undefined){ return; } this.topologies[topologyName] = new Topology(topologyName); } getProgram(){ return this.program; } getShader(){ return this.shader; } getTopology(topologyName){ return this.topologies[topologyName]; } registUniformLocation(uniformName){ if(this.uniformLocations[uniformName] !== undefined){ return; } this.uniformLocations[uniformName] = gl.getUniformLocation(this.program, uniformName); } setTexture(uniformName, _texture, locationID){ gl.activeTexture(gl.TEXTURE0 + locationID); gl.bindTexture(gl.TEXTURE_2D, _texture); gl.uniform1i(this.uniformLocations[uniformName], locationID); } deleteTopology(topologyName){ delete this.topologies[topologyName]; } } // --------------------------------------------------------------- // // RenderNode class. // RenderSystemを登録して名前で切り替える感じ // こっちで統一しよう。で、トポロジー。 // 一つのプログラムに複数のトポロジーを登録できる // そして同じプログラムを使い回すことができる // 立方体やトーラスを切り替えて描画したりできるというわけ class RenderNode{ constructor(){ this.renderSystems = {}; this.currentRenderSystem = undefined; this.currentShader = undefined; this.currentTopology = undefined; this.useTextureFlag = false; this.tfMatrix = new p5.Matrix(); // デフォルト4x4行列 // uMVをここにコピーして使い回す感じ } registRenderSystem(renderSystemName, _shader){ if(this.renderSystems[renderSystemName] !== undefined){ return; } this.renderSystems[renderSystemName] = new RenderSystem(renderSystemName, _shader); } use(renderSystemName, topologyName){ // まとめてやれた方がいい場合もあるので if(this.renderSystems[renderSystemName] == undefined){ return; } this.useRenderSystem(renderSystemName); this.registTopology(topologyName); // 登録済みなら何もしない this.useTopology(topologyName); return this; } useRenderSystem(renderSystemName){ // 使うプログラムを決める this.currentRenderSystem = this.renderSystems[renderSystemName]; this.currentShader = this.currentRenderSystem.getShader(); this.currentShader.useProgram(); return this; } registTopology(topologyName){ // currentProgramに登録するので事前にuseが必要ですね this.currentRenderSystem.registTopology(topologyName); } useTopology(topologyName){ // たとえば複数のトポロジーを使い回す場合ここだけ切り替える感じ this.currentTopology = this.currentRenderSystem.getTopology(topologyName); return this; } registAttribute(attributeName, data, stride){ this.currentTopology.registAttribute(this.currentRenderSystem.getProgram(), attributeName, data, stride); return this; } registAttributes(attrData){ for(let attrName of Object.keys(attrData)){ const attr = attrData[attrName]; this.registAttribute(attrName, attr.data, attr.stride); } return this; } setAttribute(){ // その時のtopologyについて準備する感じ this.currentTopology.setAttribute(); return this; } registIndexBuffer(data, type){ // デフォルトはUint16Array. 多い場合はUint32Arrayを指定する。 if(type === undefined){ type = Uint16Array; } this.currentTopology.registIndexBuffer(data, type); } bindIndexBuffer(){ this.currentTopology.bindIndexBuffer(); return this; } registUniformLocation(uniformName){ this.currentRenderSystem.registUniformLocation(uniformName); } setTexture(uniformName, _texture, locationID){ this.currentRenderSystem.setTexture(uniformName, _texture, locationID); this.useTextureFlag = true; // 1回でも使った場合にtrue return this; } setUniform(uniformName, data){ this.currentShader.setUniform(uniformName, data); return this; } clear(){ // 描画の後処理 // topologyを切り替える場合にも描画後にこれを行なったりする感じ // 同じプログラム、トポロジーで点描画や線描画を行う場合などは // その限りではない（レアケースだけどね） this.currentTopology.clear(); // textureを使っている場合はbindを解除する if(this.useTextureFlag){ gl.bindTexture(gl.TEXTURE_2D, null); this.useTextureFlag = false; } } // delete系関数はそのときのtopologyに対して呼び出す deleteIBO(){ this.currentTopology.deleteIBO(); } deleteAttribute(attributeName){ this.currentTopology.deleteAttribute(attributeName); } deleteTopology(){ this.currentTopology.initialize(); this.currentRenderSystem.deleteTopology(this.currentTopology.getName()); } setMatrixStandard(uMV){ // uMVをuMVMatrixとして一通り通知する関数 const sh = this.currentShader; sh.setUniform('uProjectionMatrix', _gl.uPMatrix.mat4); sh.setUniform('uModelViewMatrix', uMV.mat4); sh.setUniform('uViewMatrix', _gl._curCamera.cameraMatrix.mat4); _gl.uNMatrix.inverseTranspose(uMV); sh.setUniform('uNormalMatrix', _gl.uNMatrix.mat3); } setMatrix(tf){ // uMVとuPとuViewとuNormalを登録(uNormalは使われないこともあるけど) let uMV = _gl.uMVMatrix.copy(); if(tf !== undefined){ this.transform(tf, uMV); // tfは配列。tr, rotX, rotY, rotZ, scale. // rotAxisも一応残しといて。 } this.setMatrixStandard(uMV); return this; } transform(tf, uMV){ // tfのコマンドに従っていろいろ。 for(let command of tf){ const name = Object.keys(command)[0]; const value = command[name]; switch(name){ case "tr": // 長さ1の配列の場合は同じ値にする感じで if(value.length === 1){ value.push(value[0], value[0]); } uMV.translate(value); break; // rotX～rotZはすべてスカラー値 case "rotX": uMV.rotateX(value); break; case "rotY": uMV.rotateY(value); break; case "rotZ": uMV.rotateZ(value); break; case "rotAxis": // 角度と、軸方向からなる長さ4の配列 uMV.rotate(...value); break; case "scale": // 長さ1の場合は同じ値にする。 if(value.length === 1){ value.push(value[0], value[0]); } uMV.scale(...value); break; } } } setVertexColor(){ const sh = this.currentShader; sh.setUniform('uUseColorFlag', 0); return this; } setMonoColor(col, a = 1){ const sh = this.currentShader; sh.setUniform('uUseColorFlag', 1); sh.setUniform('uMonoColor', [col.r, col.g, col.b, a]); return this; } setDirectionalLight(col, x, y, z){ const sh = this.currentShader; sh.setUniform('uUseDirectionalLight', true); sh.setUniform('uDirectionalDiffuseColor', [col.r, col.g, col.b]); sh.setUniform('uLightingDirection', [x, y, z]); return this; } setAmbientLight(col){ const sh = this.currentShader; sh.setUniform('uAmbientColor', [col.r, col.g, col.b]); return this; } setPointLight(col, x, y, z, att0 = 1, att1 = 0, att2 = 0){ // att0,att1,att2はattenuation（減衰） // たとえば0,0,1だと逆2乗の減衰になるわけ const sh = this.currentShader; sh.setUniform('uUsePointLight', true); sh.setUniform('uPointLightDiffuseColor', [col.r, col.g, col.b]); sh.setUniform('uPointLightLocation', [x, y, z]); sh.setUniform('uAttenuation', [att0, att1, att2]); return this; } drawArrays(mode, first, count){ // 引数はドローコール、スタートと終わりなんだけどね。んー。 // トポロジーがサイズ持ってるからそれ使って描画？ if(arguments.length == 1){ first = 0; count = this.currentTopology.getAttrSize(); } gl.drawArrays(mode, first, count); return this; } drawElements(mode, count){ // 大きい場合はgl.UNSIGNED_INTを指定 const _type = this.currentTopology.getIBOType(); const type = (_type === Uint16Array ? gl.UNSIGNED_SHORT : gl.UNSIGNED_INT); // 基本的にサイズをそのまま使うので if(count === undefined){ count = this.currentTopology.getIBOSize(); } gl.drawElements(mode, count, type, 0); return this; } flush(){ gl.flush(); return this; } } // --------------------------------------------------------------- // // Topology class. // topologyのsetを用意して、それで・・・うん。 // 同じ内容でもプログラムが違えば違うトポロジーになるので // 使い回しはできないですね・・・（ロケーション） class Topology{ constructor(name){ this.name = name; this.attributes = {}; // Object.keysでフェッチ。delete a[name]で削除。 this.attrSize = 0; this.ibo = undefined; this.iboType = undefined; this.iboSize = 0; } getName(){ return this.name; } getAttrSize(){ return this.attrSize; } getIBOType(){ return this.iboType; } getIBOSize(){ return this.iboSize; } registAttribute(program, attributeName, data, stride){ let attr = {}; attr.vbo = create_vbo(data); attr.location = gl.getAttribLocation(program, attributeName); attr.stride = stride; this.attrSize = Math.floor(data.length / stride); // attrの個数 this.attributes[attributeName] = attr; } setAttribute(){ set_attribute(this.attributes); } registIndexBuffer(data, type){ this.ibo = create_ibo(data, type); this.iboType = type; this.iboSize = data.length; // iboのサイズ } bindIndexBuffer(){ gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.ibo); } clear(){ // 描画が終わったらbindを解除する gl.bindBuffer(gl.ARRAY_BUFFER, null); if(this.ibo !== undefined){ gl.bindBuffer(gl.ELEMENT_BUFFER, null); } return this; } deleteIBO(){ if(this.ibo == undefined){ return; } gl.deleteBuffer(this.ibo); } deleteAttribute(attributeName){ if(this.attributes[attributeName] == undefined){ return; } gl.deleteBuffer(this.attributes[attributeName].vbo); delete this.attributes[attributeName]; } initialize(){ // バッファの解放 this.deleteIBO(); for(let name of Object.keys(this.attributes)){ this.deleteAttribute(name); } } } // ------------------------------------------------------------ // // computeNormals // verticesは3つずつ頂点座標が入ってて // indicesは3つずつ三角形の頂点のインデックスが入ってるわけね // indicesの3*i,3*i+1,3*i+2それぞれに対して // たとえばk=indices[3*i]に対して // verticesの3*k,3*k+1,3*k+2番目の成分を取り出してベクトルを作る // それを3つやる // 次にv0,v1,v2で作る三角形のそれぞれの内角の大きさを出す // なお外積とarcsinで出すのでそのまま正規化されてる // 向きについてはv0,v1,v2の順に時計回りであることが想定されてる // 得られた角度を法線ベクトル（大きさ1）にかけて // それぞれk番目のnormalsに加える // 終わったらnormalsをすべて正規化 // あとは成分ごとにばらして終了 function getNormals(vertices, indices){ let normals = []; for(let i = 0; i < Math.floor(vertices.length / 3); i++){ normals.push(createVector(0, 0, 0)); } let v0 = createVector(); let v1 = createVector(); let v2 = createVector(); for(let i = 0; i < Math.floor(indices.length / 3); i++){ const id = [indices[3*i], indices[3*i+1], indices[3*i+2]]; v0.set(vertices[3*id[0]], vertices[3*id[0]+1], vertices[3*id[0]+2]); v1.set(vertices[3*id[1]], vertices[3*id[1]+1], vertices[3*id[1]+2]); v2.set(vertices[3*id[2]], vertices[3*id[2]+1], vertices[3*id[2]+2]); const w0 = p5.Vector.sub(v1, v0); const w1 = p5.Vector.sub(v2, v0); const w2 = p5.Vector.sub(v2, v1); const u0 = p5.Vector.cross(w0, w1); const u1 = p5.Vector.cross(w0, w2); const u2 = p5.Vector.cross(w1, w2); const m0 = w0.mag(); const m1 = w1.mag(); const m2 = w2.mag(); const sin0 = u0.mag() / (m0 * m1); const sin1 = u1.mag() / (m0 * m2); const sin2 = u2.mag() / (m1 * m2); const angle0 = asin(sin0); const angle1 = asin(sin1); const angle2 = asin(sin2); const n = p5.Vector.normalize(u0); normals[id[0]].add(createVector(n.x*angle0, n.y*angle0, n.z*angle0)); normals[id[1]].add(createVector(n.x*angle1, n.y*angle1, n.z*angle1)); normals[id[2]].add(createVector(n.x*angle2, n.y*angle2, n.z*angle2)); } let result = []; for(let n of normals){ n.normalize(); result.push(...n.array()); } return result; } // --------------------------------------------------------------- // // getTerra. function getHeight(img, x, y){ const data = img.get(x, y); const h = 256*256*data[0] + 256*data[1] + data[2]; // hはだいたい377600までなので100で割ってメートルで返す感じ return h/100; } // ちょっとワイヤーのね function getTerra(img){ let v = []; let _x, _y, _z; let hMin = 99999; let hMax = -99999; for(let k = 0; k <= 255; k++){ for(let i = 0; i <= 255; i++){ _x = -320 + 640 * i / 255; _y = -320 + 640 * k / 255; //_z = (_x*_x + _y*_y) / 320; _z = getHeight(img, i, k) / 40; // これでいい v.push(_x, _y, _z); if(hMin > _z){ hMin = _z; } // 最低値 if(hMax < _z){ hMax = _z; } // 最高値 } } // 頂点が256x256個なので面は255x255個です let f = []; let l = []; // 線の情報ですね～～ let lu, ru, ld, rd; for(let k = 0; k < 255; k++){ for(let i = 0; i < 255; i++){ lu = i + (255 + 1) * k; ru = i + 1 + (255 + 1) * k; ld = lu + (255 + 1); rd = ru + (255 + 1); f.push(ru, rd, lu, lu, rd, ld); l.push(lu, ru, lu, ld); if(i == 254){ l.push(ru, rd); } if(k == 254){ l.push(ld, rd); } } } let n = getNormals(v, f); // 返す。 return {v:v, f:f, n:n, l:l, hMin:hMin, hMax:hMax}; } // --------------------------------------------------------------- // // OnOffButton. // colはr,g,bをもつオブジェクト // wは調整してください・・・ // ベースカラーは黒使わないでね class OnOffButton{ constructor(target, name, x, y, w, h, col, holdability = false){ this.target = target; this.name = name; this.position = createVector(x, y); // グローバルの位置 this.w = w; this.h = h; this.col = col; this.activeGraphic = createGraphics(h, h); this.inActiveGraphic = createGraphics(h, h); this.textGraphic = createGraphics(w - h * 1.2, h); this.baseGraphic = createGraphics(w, h * 1.2); this.flag = target[name]; this.createButtonGraphics(); this.holdability = holdability; this.holdOn = false; this.holdPositionOffset = createVector(0, 0); } registTarget(target, name){ this.target = target; this.name = name; this.createButtonTextGraphic() } changeColor(col){ this.col = col; this.createButtonActiveGraphic(); this.createButtonInActiveGraphic(); } setPosition(x, y){ this.position.set(x, y); // グローバルの位置 } getPosition(x, y){ return this.position; // グローバルの位置 } createButtonTextGraphic(){ this.textGraphic.clear(); this.textGraphic.textSize(this.h * 0.8); this.textGraphic.textAlign(LEFT, CENTER); this.textGraphic.fill(0); this.textGraphic.noStroke(); this.textGraphic.text(this.name, 0, this.h * 0.5); } createButtonActiveGraphic(){ let g = this.activeGraphic; g.clear(); g.stroke(0); g.strokeWeight(this.h * 0.01); g.fill(this.col.r, this.col.g, this.col.b); g.rect(0, 0, this.h, this.h, this.h * 0.1, this.h * 0.1); g.stroke(0); g.strokeWeight(this.h * 0.08); g.line(this.h * 0.25, this.h * 0.5, this.h * 0.5, this.h * 0.75); g.line(this.h * 0.5, this.h * 0.75, this.h * 0.75, this.h * 0.25); } createButtonInActiveGraphic(){ let g = this.inActiveGraphic; g.clear(); g.stroke(0, 64); g.strokeWeight(this.h * 0.01); g.fill(this.col.r, this.col.g, this.col.b, 64); g.rect(0, 0, this.h, this.h, this.h * 0.1, this.h * 0.1); g.stroke(0, 64); g.strokeWeight(this.h * 0.08); g.line(this.h * 0.25, this.h * 0.5, this.h * 0.5, this.h * 0.75); g.line(this.h * 0.5, this.h * 0.75, this.h * 0.75, this.h * 0.25); } createButtonGraphics(){ this.createButtonTextGraphic(); this.createButtonActiveGraphic(); this.createButtonInActiveGraphic(); this.baseGraphic.fill(255); this.baseGraphic.noStroke(); this.baseGraphic.rect(0, 0, this.w, this.h * 1.2, this.h * 0.05); } flip(){ const mx = mouseX - this.position.x; const my = mouseY - this.position.y; if(mx > this.h * 0.1 && mx < this.h * 1.1 && my > this.h * 0.1 && my < this.h * 1.1){ this.flag = !this.flag; this.target[this.name] = !this.target[this.name]; } } hold(){ // まずあれ if(!this.holdability){ return; } const mx = mouseX - this.position.x; const my = mouseY - this.position.y; if(!this.holdOn && mx > this.h * 1.2 && mx < this.w && my > 0 && my < this.h * 1.2){ this.holdOn = true; this.holdPositionOffset.set(mx, my); } } drag(){ if(mouseIsPressed && this.holdOn){ this.setPosition(mouseX - this.holdPositionOffset.x, mouseY - this.holdPositionOffset.y); } } release(){ this.holdOn = false; } draw(gr){ const {x, y} = this.position; gr.image(this.baseGraphic, x, y); gr.image(this.textGraphic, x + this.h * 1.2, y + this.h * 0.1); if(this.flag){ gr.image(this.activeGraphic, x + this.h * 0.1, y + this.h * 0.1); }else{ gr.image(this.inActiveGraphic, x + this.h * 0.1, y + this.h * 0.1); } } } // ------------------------------------------------------ // // BackgroundManager. // やりかたとしては・・ね、 // まずこれを作って、 // 使い方1:普通に2Dでなんか描いてそれずーっとうしろにおいておく // これはdrawでいろいろ描いたうえでdisplayしまくりだけ // 使い方2:2Dで以下略 class BackgroundManager{ constructor(){ const id = BackgroundManager.id++; this.name = "bgManager" + id; this.layers = []; this.layers.push(createGraphics(width, height)); this.currentLayerId = 0; // シェーダーとか用意して_node.use("bgShader", "bg")とでもして // もろもろ用意する感じですかね // 余裕があればポストエフェクト（・・・） let _shader = this.getBGShader(); _node.registRenderSystem(this.name, _shader); _node.use(this.name, 'plane') .registAttribute('aPosition', [-1,1,0,-1,-1,0,1,1,0,1,-1,0], 3) .registUniformLocation('uTex'); this.texture = new p5.Texture(_gl, this.layers[0]); } getBGShader(){ // bgShader. 背景を描画する。 const bgVert= "precision mediump float;" + "attribute vec3 aPosition;" + "void main(){" + " gl_Position = vec4(aPosition, 1.0);" + "}"; const bgFrag= "precision mediump float;" + "uniform sampler2D uTex;" + "uniform vec2 uResolution;" + "void main(){" + " vec2 p = gl_FragCoord.xy / uResolution.xy;" + " p.y = 1.0 - p.y;" + " vec4 tex = texture2D(uTex, p);" + " if(tex.a < 0.00001){ discard; }" + " gl_FragColor = tex;" + "}"; return createShader(bgVert, bgFrag); } addLayer(){ this.layers.push(createGraphics(width, height)); return this; } removeLayer(id){ if(id === 0){ return; } // 0番は特別なのでリムーブしないでください this.layers.splice(id, 1); } setLayer(id){ this.currentLayerId = id; return this; } getLayer(id){ // 柔軟性大事 return this.layers[id]; } draw(command, args = []){ this.layers[this.currentLayerId][command](...args); return this; } display(){ // 0おいて1おいて・・ gl.disable(gl.DEPTH_TEST); // uMVMatrixをいじる必要はないです // 「そういう」行列を渡せばいいだけの話なのでいじらないでくださいね // 0番に1,2,3,...を乗せていきます for(let i = 1; i < this.layers.length; i++){ this.layers[0].image(this.layers[i], 0, 0); } this.texture.update(); camera(0, 0, height * 0.5 * Math.sqrt(3), 0, 0, 0, 0, 1, 0); _node.use(this.name, 'plane') .setAttribute() .setTexture('uTex', this.texture.glTex, 0) // 0はbg用に予約。 .setUniform("uResolution", [width, height]) .drawArrays(gl.TRIANGLE_STRIP) .clear(); // clearも忘れずに gl.enable(gl.DEPTH_TEST); } } BackgroundManager.id = 0; // 識別子 // --------------------------------------------------------------- // // camera. function moveCamera(){ if(mouseIsPressed){ const dx = mouseX - pmouseX; const dy = mouseY - pmouseY; if(mouseButton == LEFT){ posPhi += dx * 0.01; posTheta = constrain(posTheta + dy * 0.01, 0, PI/2); } if(mouseButton == CENTER){ // 注視点を動かすと同時にカメラも動かす // 横移動と縦移動の仕様はこんな感じ focusX += -sin(posPhi) * dx - cos(posPhi) * dy; focusY += cos(posPhi) * dx - sin(posPhi) * dy; } } } // --------------------------------------------------------------- // // interaction. function mouseClicked(){ btn.flip(); } function mouseWheel(){ posR = constrain(posR + event.delta*0.5, 240, 1200); }