const vert = ` attribute vec3 aPosition; attribute vec3 aPosition2; attribute vec3 aNormal; attribute vec3 aNormal2; attribute vec2 aTexCoord; uniform mat4 uModelViewMatrix; uniform mat4 uProjectionMatrix; uniform mat3 uNormalMatrix; uniform vec3 uAmbientColor[5]; uniform int uDirectionalLightCount; uniform vec3 uLightingDirection[5]; uniform vec3 uDirectionalDiffuseColors[5]; uniform float uMorphRate; varying highp vec2 vVertTexCoord; varying vec3 vDiffuseColor; void main(void) { float morph = smoothstep(0.0, 0.1, fract(uMorphRate)) - smoothstep(0.5, 0.6, fract(uMorphRate)); vec3 position = mix(aPosition, aPosition2, morph); //vec3 position = aPosition2; vec4 viewModelPosition = uModelViewMatrix * vec4(position, 1.0); gl_Position = uProjectionMatrix * viewModelPosition; vec3 normal = mix(aNormal, aNormal2, morph); //vec3 normal = aNormal2; normal = normalize(uNormalMatrix * normal); vDiffuseColor = uAmbientColor[0]; for (int i = 0; i < 5; i++) { if (i < uDirectionalLightCount) { vDiffuseColor += max(0.0, dot(normal, -uLightingDirection[i])) * uDirectionalDiffuseColors[i]; } } vDiffuseColor *= 0.73; vVertTexCoord = aTexCoord; } `; const frag = ` precision highp float; uniform vec4 uMaterialColor; uniform sampler2D uSampler; uniform bool isTexture; varying highp vec2 vVertTexCoord; varying vec3 vDiffuseColor; void main(void) { if(!isTexture) { gl_FragColor = uMaterialColor; } else { gl_FragColor = texture2D(uSampler, vVertTexCoord); } gl_FragColor.rgb = gl_FragColor.rgb * vDiffuseColor; } `; const margin = 0.1; const tileNum = 6; const seed = Math.random() * 1000; let drawingArea; let myShader; let tex; function setup() { createCanvas(windowWidth, windowHeight, WEBGL); drawingArea = min(width, height) * (1 - margin); // reference : https://openprocessing.org/sketch/1336931 by mathfoxlab this._renderer.retainedMode.buffers.fill.push(new p5.RenderBuffer(3, 'vertices2', 'vertexBuffer2', 'aPosition2', this._renderer, this._renderer._vToNArray)); this._renderer.retainedMode.buffers.fill.push(new p5.RenderBuffer(3, 'vertexNormals2', 'normalBuffer2', 'aNormal2', this._renderer, this._renderer._vToNArray)); myShader = createShader(vert, frag); shader(myShader); tex = createGraphics(600, 600); tex.background(255); tex.stroke(200); tex.strokeWeight(5); tex.drawingContext.setLineDash([10, 20]); tex.line(0, 0, 600, 600); tex.line(0, 300, 300, 600); tex.line(300, 0, 600, 300); tex.line(0, 600, 600, 0); tex.line(300, 600, 600, 300); tex.line(0, 300, 300, 0); } function draw() { randomSeed(seed); background(color(`hsb(${int(random(36000)) % 360}, 30%, 70%)`)); //pointLight(150, 150, 150, 0, 0, 600); ambientLight(80); directionalLight(150, 150, 150, 1, 0.8, -2); directionalLight(150, 150, 150, 0.2, -0.5, -2); //fill(250); texture(tex); for (let i = -tileNum / 2; i < tileNum / 2; i++) { for (let j = -tileNum / 2; j < tileNum / 2; j++) { push(); translate((i + 0.5) * drawingArea / tileNum, (j + 0.5) * drawingArea / tileNum, 0); // rotateZ(HALF_PI * int(random(2))); myShader.setUniform("uMorphRate", random() + millis() / 50000.0); tile(drawingArea / tileNum, 200, 200); pop(); } } } function mousePressed() { save(); } function tile(size, detailX, detailY) { const gId = `tile|${detailX}|${detailY}`; if (!this._renderer.geometryInHash(gId)) { const geom = new p5.Geometry(detailX, detailY); geom.vertices2 = []; geom.vertexNormals2 = []; for (let i = 0; i <= detailX; i++) { const u = i / detailX; for (let j = 0; j <= detailY; j++) { const v = j / detailY; //const z = 0.05 * (cos(constrain(dist(0, 0, u, v) - 0.5, -0.2, 0.2) * 5 * PI) + cos(constrain(dist(1, 1, u, v) - 0.5, -0.2, 0.2) * 5 * PI)) const z1 = 0.5 * abs(abs(v - u) - 0.5); const z2 = 0.5 * abs(abs(v + u - 1.0) - 0.5); const p1 = new p5.Vector(u - 0.5, 0.5 - v, z1); const p2 = new p5.Vector(u - 0.5, 0.5 - v, z2); geom.vertices.push(p1); geom.vertices2.push(p2); geom.uvs.push(u, v); } } geom.computeFaces(); geom.computeNormals(); let iv; // initialize the vertexNormals array with empty vectors for (iv = 0; iv < geom.vertices2.length; ++iv) { geom.vertexNormals2.push(new p5.Vector()); } // loop through all the faces adding its normal to the normal // of each of its vertices for (let f = 0; f < geom.faces.length; ++f) { const face = geom.faces[f]; const vA = geom.vertices2[face[0]]; const vB = geom.vertices2[face[1]]; const vC = geom.vertices2[face[2]]; const ab = p5.Vector.sub(vB, vA); const ac = p5.Vector.sub(vC, vA); const n = p5.Vector.cross(ab, ac); const ln = p5.Vector.mag(n); let sinAlpha = ln / (p5.Vector.mag(ab) * p5.Vector.mag(ac)); if (sinAlpha === 0 || isNaN(sinAlpha)) { console.warn( 'face has colinear sides or a repeated vertex' ); return n; } if (sinAlpha > 1) sinAlpha = 1; // handle float rounding error const faceNormal = n.mult(Math.asin(sinAlpha) / ln); // all three vertices get the normal added for (let fv = 0; fv < 3; ++fv) { const vertexIndex = face[fv]; geom.vertexNormals2[vertexIndex].add(faceNormal); } } // normalize the normals for (iv = 0; iv < geom.vertices2.length; ++iv) { geom.vertexNormals2[iv].normalize(); } this._renderer.createBuffers(gId, geom); } this._renderer.drawBuffersScaled(gId, size, size, size); }

10 PRINT PAPER