From 0d3273c8e972d17c7d09ce423fb8c5b0e97f775c Mon Sep 17 00:00:00 2001 From: GonlyK Date: Thu, 7 Jan 2021 23:20:56 +0800 Subject: [PATCH 1/3] =?UTF-8?q?=E6=8F=90=E4=BA=A4=E4=BB=A3=E7=A0=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- clickme.html | 34 ++++++++++++++++++++++++++++++++++ codes/code_gonlyk.js | 24 ++++++++++++++++++++++++ main.js | 21 ++++++++++++++++++--- shader.frag | 22 ++++++++++++++++++++++ 4 files changed, 98 insertions(+), 3 deletions(-) create mode 100644 clickme.html create mode 100644 codes/code_gonlyk.js create mode 100644 shader.frag diff --git a/clickme.html b/clickme.html new file mode 100644 index 0000000..9b47846 --- /dev/null +++ b/clickme.html @@ -0,0 +1,34 @@ + + + + + + + + + + + + \ No newline at end of file diff --git a/codes/code_gonlyk.js b/codes/code_gonlyk.js new file mode 100644 index 0000000..91a572e --- /dev/null +++ b/codes/code_gonlyk.js @@ -0,0 +1,24 @@ +var code = {} + +code.red = function (x, y) { + const [dx, dy] = [2 * x / 1024 - 1, 2 * y / 1024 - 1] + const r = Math.abs(Math.atan2(dy, dx)) + return Math.sin(r) * 255 +} + +code.blue = function (x, y) { + const [dx, dy] = [2 * x / 1024 - 1, 2 * y / 1024 - 1] + const l = Math.sqrt(dx * dx + dy * dy) + return Math.cos((Math.ceil(l) - l) * 3) * 255 +} + +code.green = function (x, y) { + const [dx, dy] = [2 * x / 1024 - 1, 2 * y / 1024 - 1] + return Math.cos(dx + 1 - dy) * 255 +} + +code.author = { + id: 'gonlyk', + githubId: 'your github gonlyk', + description: '燕宝 燕宝 撒鼻息' +} diff --git a/main.js b/main.js index 41d9eee..6e1192e 100644 --- a/main.js +++ b/main.js @@ -1,23 +1,38 @@ var code = {} code.red = function (x, y) { - + const [dx, dy] = [2 * x / 1024 - 1, 2 * y / 1024 - 1] + const r = Math.abs(Math.atan2(dy, dx)) + return Math.sin(r) * 255 } code.blue = function (x, y) { - + const [dx, dy] = [2 * x / 1024 - 1, 2 * y / 1024 - 1] + const l = Math.sqrt(dx * dx + dy * dy) + return Math.cos((Math.ceil(l) - l) * 3) * 255 } code.green = function (x, y) { - + const [dx, dy] = [2 * x / 1024 - 1, 2 * y / 1024 - 1] + return Math.cos(dx + 1 - dy) * 255 } let canvas = document.getElementById('canvas') let ctx = canvas.getContext('2d') let size = 1024 +window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame; + +// 1024*1024循环 性能爆炸 +// function step(timestamp) { for (let x = 0; x < size; x++) { for (let y = 0; y < size; y++) { ctx.fillStyle = 'rgb(' + code.red(x, y) + ',' + code.green(x, y) + ',' + code.blue(x, y) + ')' ctx.fillRect(x, y, 1, 1) } } + // setTimeout(() => { + // requestAnimationFrame(step); + // }, 16) +// } +// requestAnimationFrame(step); + diff --git a/shader.frag b/shader.frag new file mode 100644 index 0000000..82b939a --- /dev/null +++ b/shader.frag @@ -0,0 +1,22 @@ +#ifdef GL_ES +precision mediump float; +#endif + +uniform vec2 u_resolution; +uniform float u_time; + +vec3 colorA = vec3(0.149,0.141,0.912); +vec3 colorB = vec3(1.000,0.833,0.224); + +void main() { + vec3 color = vec3(0.0); + + float pct = abs(sin(u_time)); + + + // Mix uses pct (a value from 0-1) to + // mix the two colors + color = mix(colorA, colorB, pct); + + gl_FragColor = vec4(color,1.0); +} \ No newline at end of file From 87a27513a1581c3f864620b567185ed5f41571d7 Mon Sep 17 00:00:00 2001 From: GonlyK Date: Fri, 8 Jan 2021 01:42:24 +0800 Subject: [PATCH 2/3] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E7=87=95=E5=AD=90?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- main.js | 48 ++++++++++++++++++++++++++++++++++++------------ 1 file changed, 36 insertions(+), 12 deletions(-) diff --git a/main.js b/main.js index 6e1192e..85f83b7 100644 --- a/main.js +++ b/main.js @@ -1,20 +1,52 @@ var code = {} +const tsubame = function (x, y) { + const [tx1, ty1] = [x / 1024 - 0.8, y / 1024 - 0.2] + const [tx2, ty2] = [x / 1024 - 0.95, y / 1024 - 0.2] + const r1 = Math.atan2(ty1, tx1) + const l1 = Math.sqrt(tx1 * tx1 + ty1 * ty1) + const r2 = Math.atan2(ty2, tx2) + const l2 = Math.sqrt(tx2 * tx2 + ty2 * ty2) + if ((l1 > 0.07 && l1 < 0.08 && r1 > -Math.PI / 2 && r1 < 0) || + (l2 > 0.07 && l2 < 0.08 && r2 > -Math.PI && r2 < -Math.PI / 2)) + return 1 + + return 0 +} code.red = function (x, y) { const [dx, dy] = [2 * x / 1024 - 1, 2 * y / 1024 - 1] - const r = Math.abs(Math.atan2(dy, dx)) - return Math.sin(r) * 255 + const r = -(Math.atan2(dy, dx)) + const l = Math.sqrt(dx * dx + dy * dy) + + const background = Math.sin(r) + const sun = (l > 0.3 ? 0 : 1) + + const tbm = tsubame(x, y) + if (l < 0.3) { + return (0.2 * background + 0.8 * sun) * 255 + } else { + return (tbm === 1 ? tbm : background) * 255 + } } code.blue = function (x, y) { const [dx, dy] = [2 * x / 1024 - 1, 2 * y / 1024 - 1] const l = Math.sqrt(dx * dx + dy * dy) - return Math.cos((Math.ceil(l) - l) * 3) * 255 + const background = Math.cos((Math.ceil(l) - l) * 3) + const sun = (l > 0.3 ? 0 : 0.3) + const tbm = tsubame(x, y) + if (l < 0.3) { + return (0.2 * background + 0.8 * sun) * 255 + } else { + return (tbm === 1 ? tbm : background) * 255 + } } code.green = function (x, y) { const [dx, dy] = [2 * x / 1024 - 1, 2 * y / 1024 - 1] - return Math.cos(dx + 1 - dy) * 255 + const background = Math.cos(dx + 1 - dy) + const tbm = tsubame(x, y) + return (tbm === 1 ? tbm : background) * 255 } let canvas = document.getElementById('canvas') @@ -22,17 +54,9 @@ let ctx = canvas.getContext('2d') let size = 1024 window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame; -// 1024*1024循环 性能爆炸 -// function step(timestamp) { for (let x = 0; x < size; x++) { for (let y = 0; y < size; y++) { ctx.fillStyle = 'rgb(' + code.red(x, y) + ',' + code.green(x, y) + ',' + code.blue(x, y) + ')' ctx.fillRect(x, y, 1, 1) } } - // setTimeout(() => { - // requestAnimationFrame(step); - // }, 16) -// } -// requestAnimationFrame(step); - From c3e428332670579c8c238559ab018fc887b28c84 Mon Sep 17 00:00:00 2001 From: GonlyK Date: Fri, 8 Jan 2021 13:08:19 +0800 Subject: [PATCH 3/3] =?UTF-8?q?=E5=8A=A0=E7=82=B9=E9=A2=9C=E8=89=B2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- main.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/main.js b/main.js index 85f83b7..a5838f0 100644 --- a/main.js +++ b/main.js @@ -25,7 +25,7 @@ code.red = function (x, y) { if (l < 0.3) { return (0.2 * background + 0.8 * sun) * 255 } else { - return (tbm === 1 ? tbm : background) * 255 + return (tbm === 1 ? 1 - background : background) * 255 } } @@ -38,7 +38,7 @@ code.blue = function (x, y) { if (l < 0.3) { return (0.2 * background + 0.8 * sun) * 255 } else { - return (tbm === 1 ? tbm : background) * 255 + return (tbm === 1 ? 1 - background : background) * 255 } } @@ -46,7 +46,7 @@ code.green = function (x, y) { const [dx, dy] = [2 * x / 1024 - 1, 2 * y / 1024 - 1] const background = Math.cos(dx + 1 - dy) const tbm = tsubame(x, y) - return (tbm === 1 ? tbm : background) * 255 + return (tbm === 1 ? 1 - background : background) * 255 } let canvas = document.getElementById('canvas')