// 変数の定義 --------------------------------------------------------------- let font; let backLayer; let textLayer; let noiseTexture; let projector; let backShader; let projectionShader; let noiseShader; let x = 0; // シェーダー --------------------------------------------------------------- const backVert = ` precision highp float; attribute vec3 aPosition; uniform mat4 uModelViewMatrix; uniform mat4 uProjectionMatrix; void main(void) { vec4 positionVec4 = vec4(aPosition, 1.0); gl_Position = uProjectionMatrix * uModelViewMatrix * positionVec4; } `; const backFrag = ` precision highp float; #define PI 3.141592653589793 uniform float uTime; uniform float uRate; uniform vec2 uResolution; void main(void) { vec2 pos = gl_FragCoord.xy / uResolution.x - vec2(0.5, 0.2 * uRate * uResolution.y / uResolution.x); float len = length(pos); if (len < 0.1) { gl_FragColor = vec4(0.8 * uRate, 0.0, 0.0, 1.0); } else { float theta = atan(pos.y, pos.x) + uTime; if (floor(mod(theta / PI * 15.0, 2.0)) == 0.0) { gl_FragColor = vec4(0.8 * uRate, 0.0, 0.0, 1.0); } else { gl_FragColor = vec4(vec3(uRate), 1.0); } } } `; const projectionVert = ` attribute vec3 aPosition; attribute vec3 aNormal; uniform mat4 uModelViewMatrix; uniform mat4 uProjectionMatrix; uniform mat3 uNormalMatrix; uniform mat4 uModelMatrix; uniform mat4 uTexVMatrix; uniform mat4 uTexPMatrix; uniform vec3 uLightingDirection[5]; uniform vec3 uDirectionalDiffuseColors[5]; uniform vec3 uAmbientColor[5]; varying vec2 vTexCoord; varying vec3 vDiffuseColor; void main(void) { vec4 positionVec4 = vec4(aPosition, 1.0); vec4 viewModelPosition = uModelViewMatrix * positionVec4; gl_Position = uProjectionMatrix * viewModelPosition; vec4 texPosition = uTexPMatrix * uTexVMatrix * uModelMatrix * positionVec4; vTexCoord = texPosition.xy / texPosition.w * vec2(0.5, -0.5) + 0.5; // ? : zで割るのかwで割るのか vec3 vertexNormal = normalize(uNormalMatrix * aNormal); vec3 lightDirection = normalize(-uLightingDirection[0]); float intensity = max(0.0, dot(lightDirection, vertexNormal)); vDiffuseColor = uDirectionalDiffuseColors[0] * intensity; vDiffuseColor += uAmbientColor[0]; } `; const projectionFrag = ` precision highp float; uniform vec4 uMaterialColor; uniform sampler2D uTexture; varying vec2 vTexCoord; varying vec3 vDiffuseColor; void main(void) { if (min(vTexCoord.x, vTexCoord.y) > 0.0 && max(vTexCoord.x, vTexCoord.y) < 1.0) { gl_FragColor = texture2D(uTexture, vTexCoord); } else { gl_FragColor = uMaterialColor; } gl_FragColor.rgb *= vDiffuseColor; } `; const noiseVert = ` precision highp float; attribute vec3 aPosition; uniform mat4 uModelViewMatrix; uniform mat4 uProjectionMatrix; void main(void) { vec4 positionVec4 = vec4(aPosition, 1.0); gl_Position = uProjectionMatrix * uModelViewMatrix * positionVec4; } `; const noiseFrag = ` precision highp float; #define PI 3.141592653589793 uniform float uSeed; uniform float uTime; float rand2D(vec2 _p) { return fract(sin(dot(_p.xy ,vec2(12.9898,78.233))) * uSeed); } float grad(vec2 _p1, vec2 _p2) { float theta = 2.0 * PI * rand2D(_p1); vec2 v1 = vec2(cos(theta), sin(theta)) / sqrt(2.0); vec2 v2 = _p2 - _p1; return dot(v1, v2); } float perlin(vec2 _p, float _size) { vec2 uv = _p / _size; float xf = smoothstep(0.0, 1.0, fract(uv.x)); float yf = smoothstep(0.0, 1.0, fract(uv.y)); float x0 = floor(uv.x); float x1 = floor(uv.x) + 1.0; float y0 = floor(uv.y); float y1 = floor(uv.y) + 1.0; float n1 = mix(grad(vec2(x0, y0), uv), grad(vec2(x1, y0), uv), xf); float n2 = mix(grad(vec2(x0, y1), uv), grad(vec2(x1, y1), uv), xf); return (mix(n1, n2, yf) + 1.0) / 2.0; } float octavePerlin(vec2 _p, float _size, float persistence) { float total = 0.0; float max = 0.0; float size = _size; float amplitude = 1.0; const int octaves = 10; for (int i=0; i 0.5) { gl_FragColor = vec4(vec3(1.0), 1.0); } else { gl_FragColor = vec4(vec3(0.0), 1.0); } } `; // メインのコード ------------------------------------------------------------ function preload() { font = loadFont('https://stat.neort.io/externalResource/bvncrqs3p9f30ks568u0.otf'); } function setup() { createCanvas(windowWidth, windowHeight); noStroke(); pixelDensity(1); backLayer = createGraphics(width, height, WEBGL); backShader = backLayer.createShader(backVert, backFrag); backLayer.shader(backShader); backShader.setUniform('uResolution', [width, height]); textLayer = createGraphics(width, height, WEBGL); projector = new p5.Camera(textLayer._renderer); projector.camera(0, 0, (height/4.0) / tan(PI*30.0 / 180.0), 0, 0, 0, 0, 1, 0); projector.perspective(PI*2/3, 1.0, 0.1, 100); projectionShader = textLayer.createShader(projectionVert, projectionFrag); textLayer.shader(projectionShader); projectionShader.setUniform('uTexPMatrix', projector.projMatrix.mat4); projectionShader.setUniform('uTexVMatrix', projector.cameraMatrix.mat4); noiseTexture = createGraphics(width, height, WEBGL); noiseShader = noiseTexture.createShader(noiseVert, noiseFrag); noiseTexture.shader(noiseShader); noiseShader.setUniform('uSeed', random(10000, 100000)); } function draw() { background(255); x += (mouseX - x) * 0.1; const rate = map(constrain(x / width, 0.2, 0.8), 0.2, 0.8, 0.0, 1.0); // 背景 -------------------------------------------------------------------- backShader.setUniform('uTime', millis()/10000.0); backShader.setUniform('uRate', rate); backLayer.rect(-width/2, -height/2, width, height); image(backLayer, 0, 0); // 地面 -------------------------------------------------------------------- fill(120, 180, 100); rect(0, height * 0.8, width, height * 0.2); // 牛模様 ------------------------------------------------------------------ noiseShader.setUniform('uTime', millis()/10.0); noiseTexture.rect(-width/2, -height/2, width, height); projectionShader.setUniform('uTexture', noiseTexture); // 文字を出す -------------------------------------------------------------- const y = map(rate, 0.0, 1.0, -height, -height/6); textLayer.clear(); textLayer.noStroke(); textLayer.directionalLight(155, 155, 155, 0.0, 0.0, -1.0); textLayer.ambientLight(100); mMatrix = new p5.Matrix(); mMatrix.translate([0, y, 0]); mMatrix.scale(200, 200, 50); projectionShader.setUniform('uModelMatrix', mMatrix.mat4); textLayer.push(); textLayer.translate(0, y, 0); text3D(font, '謹賀新年', 200, 50, 10); textLayer.pop(); mMatrix = new p5.Matrix(); mMatrix.translate([0, y + 150, 0]); mMatrix.scale(100, 100, 50); projectionShader.setUniform('uModelMatrix', mMatrix.mat4); textLayer.push(); textLayer.translate(0, y + 150, 0); text3D(font, '２０２１', 100, 50, 10); textLayer.pop(); image(textLayer, 0, 0); } // 文字を描画する関数 --------------------------------------------------------- function text3D(font, text, size, depth, divisions, horizontal_align, vertical_align) { if (typeof text !== 'string') { text = str(text); } if (typeof horizontal_align === 'undefined') { horizontal_align = CENTER; } if (typeof vertical_align === 'undefined') { vertical_align = CENTER; } const gId = `${font}|${text}|${divisions}`; function textToVertices(font, text, size, divisions, horizontal_align, vertical_align) { const bounds = font.textBounds(text, 0, 0, size); let x, y; switch (horizontal_align) { case RIGHT: x = -bounds.x - bounds.w; break; case CENTER: x = -bounds.x - bounds.w / 2; break; case LEFT: x = -bounds.x; break; } switch (vertical_align) { case TOP: y = -bounds.y - bounds.h; break; case CENTER: y = -bounds.y - bounds.h / 2; break; case BOTTOM: y = -bounds.y; break; } const pdata = font.font.getPath(text, x, y, size).commands; let all_vertices = []; let vertices = []; let current_pos = new p5.Vector(); for (const cmd of pdata) { if (cmd.type === 'M') { vertices = []; current_pos.set(cmd.x, cmd.y, 0.0); vertices.push(current_pos.copy()); } else if (cmd.type === 'L') { if (current_pos.x == cmd.x && current_pos.y == cmd.y) continue; current_pos.set(cmd.x, cmd.y, 0.0); vertices.push(current_pos.copy()); } else if (cmd.type === 'C') { for (let i = 1; i < divisions; i++) { const x = bezierPoint(current_pos.x, cmd.x1, cmd.x2, cmd.x, i / divisions); const y = bezierPoint(current_pos.y, cmd.y1, cmd.y2, cmd.y, i / divisions); vertices.push(new p5.Vector(x, y, 0.0)); } current_pos.set(cmd.x, cmd.y, 0.0); vertices.push(current_pos.copy()); } else if (cmd.type === 'Q') { for (let i = 1; i < divisions; i++) { const x = bezierPoint(current_pos.x, cmd.x1, cmd.x1, cmd.x, i / divisions); const y = bezierPoint(current_pos.y, cmd.y1, cmd.y1, cmd.y, i / divisions); vertices.push(new p5.Vector(x, y, 0.0)); } current_pos.set(cmd.x, cmd.y, 0.0); vertices.push(current_pos.copy()); } else if (cmd.type === 'Z') { if (current_pos.x == vertices[0].x && current_pos.y == vertices[0].y) { vertices.pop(); } all_vertices.push(vertices); } } return all_vertices; } function verticesToArray(vertices) { let all_array = []; for (let vers of vertices) { let array = []; for (let ver of vers) { array = array.concat(ver.x, ver.y, ver.z); } all_array.push(array); } return all_array; } function arrayToVertices(array) { let vertices = []; for (let i = 0; i < array.length; i += 3) { vertices.push(new p5.Vector(array[i], array[i + 1], array[i + 2])); } return vertices; } function verticesFilter(vertices) { let filtered = []; for (let i = 0; i < vertices.length; i += 3) { let ba = p5.Vector.sub(vertices[i + 1], vertices[i]); let bc = p5.Vector.sub(vertices[i + 1], vertices[i + 2]); let cross = p5.Vector.cross(ba, bc); if (p5.Vector.mag(cross) != 0) { filtered.push(vertices[i], vertices[i + 1], vertices[i + 2]); } } return filtered; } if (!textLayer._renderer.geometryInHash(gId)) { const textGeom = new p5.Geometry(); const vertices = textToVertices(font, text, 1, divisions, horizontal_align, vertical_align); const z1 = new p5.Vector(0, 0, 0.5); const z2 = new p5.Vector(0, 0, -0.5); let id = 0; // 表面・裏面 let tesselateVertices = textLayer._renderer._triangulate(verticesToArray(vertices)); tesselateVertices = arrayToVertices(tesselateVertices); tesselateVertices = verticesFilter(tesselateVertices); for (let i = 0; i < tesselateVertices.length; i++) { textGeom.vertices.push(p5.Vector.add(tesselateVertices[i], z1)); } for (let i = 0; i < tesselateVertices.length; i++) { textGeom.vertices.push(p5.Vector.add(tesselateVertices[tesselateVertices.length - (i + 1)], z2)); } for (let i = 0; i < tesselateVertices.length * 2; i += 3) { textGeom.faces.push([i, i + 1, i + 2]); } id = tesselateVertices.length * 2; // 側面 for (const vers of vertices) { for (const ver of vers) { textGeom.vertices.push(p5.Vector.add(ver, z1)); textGeom.vertices.push(p5.Vector.add(ver, z2)); } let len = vers.length * 2; for (let i = 0; i < len; i += 2) { textGeom.faces.push([id + i, id + i + 1, id + (i + 2) % len]); textGeom.faces.push([id + (i + 3) % len, id + (i + 2) % len, id + i + 1]); } id += len; } // 法線・辺計算 textGeom.computeNormals(); textGeom._makeTriangleEdges()._edgesToVertices(); // バッファ作成 textLayer._renderer.createBuffers(gId, textGeom); } // 描画 textLayer._renderer.drawBuffersScaled(gId, size, size, depth); }

謹賀新年2021