Braille

Developer
Thepheer
Size
5,670 Kb
Views
6,072
  1. Braille Previews
  2. Braille HTML Codes
  3. Braille CSS Codes
  4. Braille JS Codes

How do I make an braille?

Has technology gone too far? 👽https://en.wikipedia.org/wiki/Braille_Patterns. What is a braille? How do you make a braille? This script and codes were developed by Thepheer on 19 January 2023, Thursday.

Braille Previews
IQ Test

Braille - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Braille</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <!-- sorry for compiled templates

Braille - Script Codes CSS Codes

@import url("//be5invis.github.io/Iosevka/fonts.css");
.center { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
}
body { background: #002b36; color: #eee8d5;
}
.App__braille { width: 100%; height: 100%; max-width: 56em; max-height: 56em; font: 11px/12px 'IosevkaWEB', monospace; font-weight: 900; white-space: pre;
}
.Braille__viewport { overflow: hidden;
}
.Braille__hidden { visibility: hidden; position: absolute;
}

Braille - Script Codes JS Codes

'use strict';
(function (window, Vue, SimplexNoise) { 'use strict'; var LUT = [[1, 8], [2, 16], [4, 32], [64, 128]]; var char = function char(code) { return String.fromCharCode(code); }; var line = function line(_line) { return _line.map(char).join(''); }; var Braille$1 = function Braille$1(width, height) { var buffer = Array.from(Array(height >> 2), function () { return Array(width >> 1).fill(0x2800); }); return { set: function set(x, y) { return buffer[y >> 2][x >> 1] |= LUT[y & 3][x & 1]; }, unset: function unset(x, y) { return buffer[y >> 2][x >> 1] &= ~LUT[y & 3][x & 1]; }, toggle: function toggle(x, y) { return buffer[y >> 2][x >> 1] ^= LUT[y & 3][x & 1]; }, render: function render() { return buffer.map(line).join('\n'); } }; }; var bayer$1 = function bayer$1(x, y, order) { var z = 0; while (order--) { z = (x & 1 ^ y & 1 | z << 1) << 1 | y & 1, x >>= 1, y >>= 1; }return z + 0.5; }; var Bayer = function Bayer(order) { var size = 1 << order, area = size * size; var LUT = new Float32Array(area); for (var y = 0; y < size; y++) { for (var x = 0; x < size; x++) { LUT[x + y * size] = bayer$1(x, y, order) / area; } }return function (x, y) { return LUT[x % size + y % size * size]; }; }; var bayer = Bayer(4); var simplex = new SimplexNoise(); var fractal = function fractal(octaves, freq, x, y, z) { var out = 0, max = 0, amp = 1; while (octaves--) { out += amp * simplex.noise3D(x * freq, y * freq, z * freq), max += amp, amp /= 2, freq *= 2; }return out / max; }; var _render = function _render(mode, viewport, font) { var width = viewport.width / font.width << 1; var height = viewport.height / font.height << 2; var aspect = width / height; var pixels = Braille$1(width, height); var buffer = new Float32Array(width * height); var z = Date.now() * 1e-4; var f = function f(x, y, z) { return g(aspect * (x / width * 2 - 1), y / height * 2 - 1, z); }; var g = function g(x, y, z) { return (0.25 + 9.75 * Math.abs(fractal(10, 1 / 25, x, y, z))) % 1; }; switch (mode % 3) { case 0: for (var y = 0; y < height; y++) { for (var x = 0; x < width; x++) { buffer[x + y * width] = f(x, y, z) >= 0.5; } }break; case 1: for (var y = 0; y < height; y++) { for (var x = 0; x < width; x++) { buffer[x + y * width] = f(x, y, z) + bayer(x, y) >= 1; } }break; case 2: for (var y = 0; y < height; y++) { var dy = height - y; var b1px = dy > 1; var b2px = dy > 2; for (var x = 0; x < width; x++) { var dx = width - x; var l1px = x > 0; var r1px = dx > 1; var l2px = x > 1; var r2px = dx > 2; var i = x + y * width; var input = buffer[i] + f(x, y, z); var output = buffer[i] = input >= 0.5; var err1 = (input - output) / 48; var err3 = err1 * 3; var err5 = err1 * 5; var err7 = err1 * 7; if (r1px) buffer[i + 1] += err7; if (r2px) buffer[i + 2] += err5; if (b1px) { i += width; if (l2px) buffer[i - 2] += err3; if (l1px) buffer[i - 1] += err5; buffer[i] += err7; if (r1px) buffer[i + 1] += err5; if (r2px) buffer[i + 2] += err3; if (b2px) { i += width; if (l2px) buffer[i - 2] += err1; if (l1px) buffer[i - 1] += err3; buffer[i] += err5; if (r1px) buffer[i + 1] += err3; if (r2px) buffer[i + 2] += err1; } } } } break; } for (var y = 0; y < height; y++) { for (var x = 0; x < width; x++) { buffer[x + y * width] && pixels.set(x, y); } }return pixels.render(); }; var WIDTH = 1 << 7; var HEIGHT = 1 << 6; var HIDDEN = '.'.repeat(WIDTH) + '\n.'.repeat(HEIGHT - 1); var Braille = { render: function render() { var _vm = this;var _h = _vm.$createElement;var _c = _vm._self._c || _h;return _c('div', { ref: "viewport", staticClass: "Braille__viewport", on: { "click": function click($event) { _vm.mode++; } } }, [_c('span', { ref: "hidden", staticClass: "Braille__hidden" }, [_vm._v(_vm._s(_vm.hidden))]), _c('span', { staticClass: "center" }, [_vm._v(_vm._s(_vm.rendered))])]); }, staticRenderFns: [], cssModules: { "viewport": "Braille__viewport", "hidden": "Braille__hidden" }, data: function data() { return { mode: 1, rendered: '' }; }, computed: { hidden: function hidden() { return HIDDEN; } }, methods: { viewport: function viewport() { var _$refs$viewport = this.$refs.viewport; var offsetWidth = _$refs$viewport.offsetWidth; var offsetHeight = _$refs$viewport.offsetHeight; return { width: offsetWidth, height: offsetHeight }; }, font: function font() { var _$refs$hidden = this.$refs.hidden; var offsetWidth = _$refs$hidden.offsetWidth; var offsetHeight = _$refs$hidden.offsetHeight; var width = offsetWidth / WIDTH; var height = offsetHeight / HEIGHT; return { width: width, height: height, aspect: width / height }; }, render: function render() { this.rendered = _render(this.mode, this.viewport(), this.font()); } }, mounted: function mounted() { var _this = this; var tick = function tick() { _this.render(); _this.af = requestAnimationFrame(tick); }; tick(); }, destroyed: function destroyed() { cancelAnimationFrame(this.af); } }; var App = { render: function render() { var _vm = this;var _h = _vm.$createElement;var _c = _vm._self._c || _h;return _c('Braille', { staticClass: "center App__braille" }); }, staticRenderFns: [], cssModules: { "braille": "App__braille" }, components: { Braille: Braille } }; window.addEventListener('load', function () { document.body.appendChild(new Vue(App).$mount().$el); });
})(window, Vue, SimplexNoise);
Braille - Script Codes
Braille - Script Codes
Home Page Home
Developer Thepheer
Username thepheer
Uploaded January 19, 2023
Rating 4.5
Size 5,670 Kb
Views 6,072
Do you need developer help for Braille?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Thepheer (thepheer) Script Codes
Name
Fluid Cube
Filters
Emoji Clock
Flight Control
Audio Visualiser
Magnetic Field
100 000 particles
Cylinder
Color Wheel
A Pen by thepheer
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!