├── out ├── .nojekyll ├── CNAME ├── bix.gif ├── bix.mp4 ├── favicon.png ├── _next │ └── static │ │ ├── webpack │ │ ├── 27a40c3d058b90e6cb1b.hot-update.json │ │ ├── 9eb93fec5e71f2aa0fcd.hot-update.json │ │ └── static │ │ │ └── development │ │ │ └── pages │ │ │ └── index.js.9eb93fec5e71f2aa0fcd.hot-update.js.map │ │ ├── chunks │ │ ├── 0.js.map │ │ └── 0.js │ │ ├── runtime │ │ ├── webpack-035ac2b14bde147cb4a8.js │ │ ├── main-119720d94d72ca6ef8b1.js │ │ └── webpack.js.map │ │ ├── hZLkpl9TvDWviW8eZjiS2 │ │ └── pages │ │ │ ├── _app.js │ │ │ ├── _error.js │ │ │ ├── index-ref.js │ │ │ └── index.js │ │ └── zKOKbyMJGefWWNQksxEy4 │ │ └── pages │ │ ├── _app.js │ │ ├── _error.js │ │ ├── index-ref.js │ │ └── index.js ├── bix-share.png ├── IBMPlexMono-Regular.woff ├── IBMPlexMono-Regular.woff2 ├── IBMPlexSans-Regular.woff ├── IBMPlexSans-Regular.woff2 ├── IBMPlexSerif-Regular.woff ├── IBMPlexSerif-Regular.woff2 ├── 404.html ├── index.html └── index-ref.html ├── public ├── bix.gif ├── bix.mp4 ├── favicon.png ├── bix-share.png ├── IBMPlexMono-Regular.woff ├── IBMPlexSans-Regular.woff ├── IBMPlexMono-Regular.woff2 ├── IBMPlexSans-Regular.woff2 ├── IBMPlexSerif-Regular.woff └── IBMPlexSerif-Regular.woff2 ├── README.md ├── .gitignore ├── package.json ├── components ├── keycap.js ├── utilities.js ├── constants.js └── info.js └── pages ├── _document.js ├── index-ref.js └── index.js /out/.nojekyll: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /out/CNAME: -------------------------------------------------------------------------------- 1 | bix.constraint.systems 2 | -------------------------------------------------------------------------------- /out/bix.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/constraint-systems/bix/master/out/bix.gif -------------------------------------------------------------------------------- /out/bix.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/constraint-systems/bix/master/out/bix.mp4 -------------------------------------------------------------------------------- /public/bix.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/constraint-systems/bix/master/public/bix.gif -------------------------------------------------------------------------------- /public/bix.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/constraint-systems/bix/master/public/bix.mp4 -------------------------------------------------------------------------------- /out/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/constraint-systems/bix/master/out/favicon.png -------------------------------------------------------------------------------- /out/_next/static/webpack/27a40c3d058b90e6cb1b.hot-update.json: -------------------------------------------------------------------------------- 1 | {"h":"9eb93fec5e71f2aa0fcd","c":{}} -------------------------------------------------------------------------------- /out/bix-share.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/constraint-systems/bix/master/out/bix-share.png -------------------------------------------------------------------------------- /public/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/constraint-systems/bix/master/public/favicon.png -------------------------------------------------------------------------------- /public/bix-share.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/constraint-systems/bix/master/public/bix-share.png -------------------------------------------------------------------------------- /out/IBMPlexMono-Regular.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/constraint-systems/bix/master/out/IBMPlexMono-Regular.woff -------------------------------------------------------------------------------- /out/IBMPlexMono-Regular.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/constraint-systems/bix/master/out/IBMPlexMono-Regular.woff2 -------------------------------------------------------------------------------- /out/IBMPlexSans-Regular.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/constraint-systems/bix/master/out/IBMPlexSans-Regular.woff -------------------------------------------------------------------------------- /out/IBMPlexSans-Regular.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/constraint-systems/bix/master/out/IBMPlexSans-Regular.woff2 -------------------------------------------------------------------------------- /out/IBMPlexSerif-Regular.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/constraint-systems/bix/master/out/IBMPlexSerif-Regular.woff -------------------------------------------------------------------------------- /out/IBMPlexSerif-Regular.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/constraint-systems/bix/master/out/IBMPlexSerif-Regular.woff2 -------------------------------------------------------------------------------- /public/IBMPlexMono-Regular.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/constraint-systems/bix/master/public/IBMPlexMono-Regular.woff -------------------------------------------------------------------------------- /public/IBMPlexSans-Regular.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/constraint-systems/bix/master/public/IBMPlexSans-Regular.woff -------------------------------------------------------------------------------- /public/IBMPlexMono-Regular.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/constraint-systems/bix/master/public/IBMPlexMono-Regular.woff2 -------------------------------------------------------------------------------- /public/IBMPlexSans-Regular.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/constraint-systems/bix/master/public/IBMPlexSans-Regular.woff2 -------------------------------------------------------------------------------- /public/IBMPlexSerif-Regular.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/constraint-systems/bix/master/public/IBMPlexSerif-Regular.woff -------------------------------------------------------------------------------- /public/IBMPlexSerif-Regular.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/constraint-systems/bix/master/public/IBMPlexSerif-Regular.woff2 -------------------------------------------------------------------------------- /out/_next/static/chunks/0.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"static/chunks/0.js","sources":[],"mappings":";;;;;;;;;;;;;;A","sourceRoot":""} -------------------------------------------------------------------------------- /out/_next/static/webpack/9eb93fec5e71f2aa0fcd.hot-update.json: -------------------------------------------------------------------------------- 1 | {"h":"3df618bae33b0beaa9cf","c":{"static/development/pages/index.js":true}} -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Bix 2 | 3 | Bix let's you draw on binary to glitch text. 4 | 5 | 8 | 9 | https://bix.constraint.systems/ 10 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # next.js 12 | /.next/ 13 | 14 | # production 15 | /build 16 | 17 | # misc 18 | .DS_Store 19 | .env* 20 | 21 | # debug 22 | npm-debug.log* 23 | yarn-debug.log* 24 | yarn-error.log* 25 | -------------------------------------------------------------------------------- /out/_next/static/chunks/0.js: -------------------------------------------------------------------------------- 1 | (window["webpackJsonp"] = window["webpackJsonp"] || []).push([[0],{ 2 | 3 | /***/ "./node_modules/next/dist/client/dev/noop.js": 4 | /*!***************************************************!*\ 5 | !*** ./node_modules/next/dist/client/dev/noop.js ***! 6 | \***************************************************/ 7 | /*! no static exports found */ 8 | /***/ (function(module, exports, __webpack_require__) { 9 | 10 | "use strict"; 11 | 12 | 13 | /***/ }) 14 | 15 | }]); 16 | //# sourceMappingURL=0.js.map -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Bix", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "dev": "next dev", 7 | "build": "next build", 8 | "export": "next export", 9 | "start": "next start", 10 | "deploy": "next build && next export && touch out/.nojekyll && touch out/CNAME && echo \"bix.constraint.systems\" >> out/CNAME && git add out/ && git commit -m \"Deploy to gh-pages\" && git subtree push --prefix out origin gh-pages" 11 | }, 12 | "dependencies": { 13 | "next": "9.1.2", 14 | "react": "16.11.0", 15 | "react-dom": "16.11.0" 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /components/keycap.js: -------------------------------------------------------------------------------- 1 | import React, { useState, useEffect, useRef, useCallback } from 'react'; 2 | 3 | let Keycap = ({ k, label, clickKey }) => { 4 | return ( 5 |
12 | {clickKey(k)}} 21 | > 22 | {k} 23 | {label !== '' ? {label} : ''} 24 |
25 | ); 26 | }; 27 | 28 | export default Keycap; 29 | -------------------------------------------------------------------------------- /components/utilities.js: -------------------------------------------------------------------------------- 1 | export function pInline(val) { 2 | return { paddingLeft: val, paddingRight: val }; 3 | } 4 | 5 | export function pBlock(val) { 6 | return { paddingTop: val, paddingBottom: val }; 7 | } 8 | 9 | export function reverseString(string) { 10 | let _s = string.split(''); 11 | _s = _s.reverse(); 12 | return _s.join(''); 13 | } 14 | 15 | export function convertCharToByte(char) { 16 | return reverseString( 17 | char 18 | .charCodeAt(0) 19 | .toString(2) 20 | .padStart(8, '0') 21 | ); 22 | } 23 | 24 | export function convertStringToBytes(string) { 25 | let chars = string.split(''); 26 | if (chars.length === 0) chars = [' ']; 27 | let binary = chars.map(char => convertCharToByte(char)); 28 | return binary; 29 | } 30 | 31 | export function convertByteToText(byte) { 32 | let rev_byte = reverseString(byte); 33 | return String.fromCharCode(parseInt(rev_byte, 2)); 34 | } 35 | 36 | export function convertBytesToText(bytes) { 37 | let char_array = bytes.map(byte => convertByteToText(byte)); 38 | return char_array.join(''); 39 | } 40 | -------------------------------------------------------------------------------- /pages/_document.js: -------------------------------------------------------------------------------- 1 | import Document, { Html, Head, Main, NextScript } from 'next/document'; 2 | 3 | class MyDocument extends Document { 4 | static async getInitialProps(ctx) { 5 | const initialProps = await Document.getInitialProps(ctx); 6 | return { ...initialProps }; 7 | } 8 | 9 | render() { 10 | let title = 'Bix'; 11 | let description = 'Draw on binary to glitch text.'; 12 | return ( 13 | 14 | 15 | 16 | 17 | 21 | 22 | {title} 23 | 24 | 25 | 26 | 30 | 31 | 32 | 33 | 34 |
35 | 36 | 37 | 38 | ); 39 | } 40 | } 41 | 42 | export default MyDocument; 43 | -------------------------------------------------------------------------------- /out/_next/static/runtime/webpack-035ac2b14bde147cb4a8.js: -------------------------------------------------------------------------------- 1 | !function(e){function r(r){for(var n,l,f=r[0],i=r[1],a=r[2],c=0,s=[];cBix

404

This page could not be found.

-------------------------------------------------------------------------------- /components/info.js: -------------------------------------------------------------------------------- 1 | let fs = 14; 2 | let lh = 1.5; 3 | let rlh = fs * lh; 4 | let ts = { 5 | textTransform: 'uppercase', 6 | }; 7 | let maxch = '74ch'; 8 | 9 | let Key = (item, clickKey) => { 10 | let [key, label] = item; 11 | return ( 12 |
{ 14 | clickKey(key); 15 | }} 16 | style={{ 17 | cursor: 'pointer', 18 | marginRight: label !== false ? '1ch' : 0, 19 | display: 'flex', 20 | marginBottom: label !== false ? rlh / 4 : 0, 21 | }} 22 | > 23 |
31 | {key} 32 |
33 | {label !== false ? ( 34 |
43 | {label} 44 |
45 | ) : null} 46 |
47 | ); 48 | }; 49 | 50 | let KeyList = ({ items, clickKey }) => { 51 | return ( 52 |
53 | {items.map(item => { 54 | return Key(item, clickKey); 55 | })} 56 |
57 | ); 58 | }; 59 | 60 | let Relevant = ({ mode, clickKey }) => { 61 | switch (mode) { 62 | case 'default': 63 | return ( 64 |
65 |
70 |
Width
71 | 75 | 79 |
80 | 81 |
86 |
Text
87 | 88 |
89 | 90 |
95 |
Image
96 |
To upload an image you can paste, drop or press
97 | 101 |
102 |
103 | ); 104 | break; 105 | case 'editing': 106 | return ( 107 |
108 |
113 |
Editing
114 | 118 |
119 |
120 | ); 121 | break; 122 | 123 | default: 124 | return null; 125 | } 126 | }; 127 | 128 | export default ({ rlh, mode, help, clickKey }) => { 129 | return ( 130 |
131 |
139 | {Key(['?', false], clickKey)} 140 |
141 | 142 |
164 |
165 | Pixel-reflow an image to match the dimensions of your text. Save the 166 | result as a diptych. 167 |
168 | 169 |
178 | 179 |
180 |
185 |
Special
186 | 190 |
191 | 196 |
197 |
198 | ); 199 | }; 200 | -------------------------------------------------------------------------------- /out/_next/static/hZLkpl9TvDWviW8eZjiS2/pages/_error.js: -------------------------------------------------------------------------------- 1 | (window.webpackJsonp=window.webpackJsonp||[]).push([[8],{"+iuc":function(e,t,n){n("wgeU"),n("FlQf"),n("bBy9"),n("B9jh"),n("dL40"),n("xvv9"),n("V+O7"),e.exports=n("WEpk").Set},"/0+H":function(e,t,n){"use strict";var r=n("hfKm"),a=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};r(t,"__esModule",{value:!0});var i=a(n("q1tI")),o=n("lwAK");function u(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},t=e.ampFirst,n=void 0!==t&&t,r=e.hybrid,a=void 0!==r&&r,i=e.hasQuery;return n||a&&(void 0!==i&&i)}t.isInAmpMode=u,t.useAmp=function(){return u(i.default.useContext(o.AmpStateContext))}},"/a9y":function(e,t,n){"use strict";var r=n("/HRN"),a=n("WaGi"),i=n("ZDA2"),o=n("/+P4"),u=n("N9n2"),l=n("KI45");t.__esModule=!0,t.default=void 0;var c=l(n("q1tI")),f=l(n("8Kt/")),d={400:"Bad Request",404:"This page could not be found",405:"Method Not Allowed",500:"Internal Server Error"},s=function(e){function t(){return r(this,t),i(this,o(t).apply(this,arguments))}return u(t,e),a(t,[{key:"render",value:function(){var e=this.props.statusCode,t=this.props.title||d[e]||"An unexpected error has occurred";return c.default.createElement("div",{style:p.error},c.default.createElement(f.default,null,c.default.createElement("title",null,e,": ",t)),c.default.createElement("div",null,c.default.createElement("style",{dangerouslySetInnerHTML:{__html:"body { margin: 0 }"}}),e?c.default.createElement("h1",{style:p.h1},e):null,c.default.createElement("div",{style:p.desc},c.default.createElement("h2",{style:p.h2},t,"."))))}}],[{key:"getInitialProps",value:function(e){var t=e.res,n=e.err;return{statusCode:t&&t.statusCode?t.statusCode:n?n.statusCode:404}}}]),t}(c.default.Component);t.default=s,s.displayName="ErrorPage";var p={error:{color:"#000",background:"#fff",fontFamily:'-apple-system, BlinkMacSystemFont, Roboto, "Segoe UI", "Fira Sans", Avenir, "Helvetica Neue", "Lucida Grande", sans-serif',height:"100vh",textAlign:"center",display:"flex",flexDirection:"column",alignItems:"center",justifyContent:"center"},desc:{display:"inline-block",textAlign:"left",lineHeight:"49px",height:"49px",verticalAlign:"middle"},h1:{display:"inline-block",borderRight:"1px solid rgba(0, 0, 0,.3)",margin:0,marginRight:"20px",padding:"10px 23px 10px 0",fontSize:"24px",fontWeight:500,verticalAlign:"top"},h2:{fontSize:"14px",fontWeight:"normal",lineHeight:"inherit",margin:0,padding:0}}},"04ac":function(e,t,n){(window.__NEXT_P=window.__NEXT_P||[]).push(["/_error",function(){return n("/a9y")}])},"0tVQ":function(e,t,n){n("FlQf"),n("VJsP"),e.exports=n("WEpk").Array.from},"2PDY":function(e,t){e.exports=function(){throw new TypeError("Invalid attempt to spread non-iterable instance")}},"8Kt/":function(e,t,n){"use strict";var r=n("ttDY"),a=n("hfKm"),i=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};a(t,"__esModule",{value:!0});var o=i(n("q1tI")),u=i(n("Xuae")),l=n("lwAK"),c=n("FYa8"),f=n("/0+H");function d(){var e=arguments.length>0&&void 0!==arguments[0]&&arguments[0],t=[o.default.createElement("meta",{key:"charSet",charSet:"utf-8"})];return e||t.push(o.default.createElement("meta",{key:"viewport",name:"viewport",content:"width=device-width,minimum-scale=1,initial-scale=1"})),t}function s(e,t){return"string"===typeof t||"number"===typeof t?e:t.type===o.default.Fragment?e.concat(o.default.Children.toArray(t.props.children).reduce(function(e,t){return"string"===typeof t||"number"===typeof t?e:e.concat(t)},[])):e.concat(t)}t.defaultHead=d;var p=["name","httpEquiv","charSet","itemProp"];function h(e,t){return e.reduce(function(e,t){var n=o.default.Children.toArray(t.props.children);return e.concat(n)},[]).reduce(s,[]).reverse().concat(d(t.inAmpMode)).filter(function(){var e=new r,t=new r,n=new r,a={};return function(i){if(i.key&&"number"!==typeof i.key&&0===i.key.indexOf(".$"))return!e.has(i.key)&&(e.add(i.key),!0);if(e.has(".$".concat(i.key)))return!1;switch(i.type){case"title":case"base":if(t.has(i.type))return!1;t.add(i.type);break;case"meta":for(var o=0,u=p.length;o0?arguments[0]:void 0)}},{add:function(e){return r.def(a(this,"Set"),e=0===e?0:e,e)}},r)},PQJW:function(e,t,n){var r=n("d04V"),a=n("yLu3");e.exports=function(e){if(a(Object(e))||"[object Arguments]"===Object.prototype.toString.call(e))return r(e)}},TbGu:function(e,t,n){var r=n("fGSI"),a=n("PQJW"),i=n("2PDY");e.exports=function(e){return r(e)||a(e)||i()}},"V+O7":function(e,t,n){n("aPfg")("Set")},VJsP:function(e,t,n){"use strict";var r=n("2GTP"),a=n("Y7ZC"),i=n("JB68"),o=n("sNwI"),u=n("NwJ3"),l=n("tEej"),c=n("IP1Z"),f=n("fNZA");a(a.S+a.F*!n("TuGD")(function(e){Array.from(e)}),"Array",{from:function(e){var t,n,a,d,s=i(e),p="function"==typeof this?this:Array,h=arguments.length,v=h>1?arguments[1]:void 0,m=void 0!==v,y=0,g=f(s);if(m&&(v=r(v,h>2?arguments[2]:void 0,2)),void 0==g||p==Array&&u(g))for(n=new p(t=l(s.length));t>y;y++)c(n,y,m?v(s[y],y):s[y]);else for(d=g.call(s),n=new p;!(a=d.next()).done;y++)c(n,y,m?o(d,v,[a.value,y],!0):a.value);return n.length=y,n}})},Xuae:function(e,t,n){"use strict";var r=n("/HRN"),a=n("ZDA2"),i=n("/+P4"),o=n("K47E"),u=n("WaGi"),l=n("N9n2"),c=n("TbGu"),f=n("ttDY");n("hfKm")(t,"__esModule",{value:!0});var d=n("q1tI"),s=!1;t.default=function(){var e,t=new f;function n(n){e=n.props.reduceComponentsToState(c(t),n.props),n.props.handleStateChange&&n.props.handleStateChange(e)}return function(c){function f(e){var u;return r(this,f),u=a(this,i(f).call(this,e)),s&&(t.add(o(u)),n(o(u))),u}return l(f,c),u(f,null,[{key:"rewind",value:function(){var n=e;return e=void 0,t.clear(),n}}]),u(f,[{key:"componentDidMount",value:function(){t.add(this),n(this)}},{key:"componentDidUpdate",value:function(){n(this)}},{key:"componentWillUnmount",value:function(){t.delete(this),n(this)}},{key:"render",value:function(){return null}}]),f}(d.Component)}},d04V:function(e,t,n){e.exports=n("0tVQ")},dL40:function(e,t,n){var r=n("Y7ZC");r(r.P+r.R,"Set",{toJSON:n("8iia")("Set")})},fGSI:function(e,t,n){var r=n("p0XB");e.exports=function(e){if(r(e)){for(var t=0,n=new Array(e.length);t0&&void 0!==arguments[0]?arguments[0]:{},t=e.ampFirst,n=void 0!==t&&t,r=e.hybrid,a=void 0!==r&&r,i=e.hasQuery;return n||a&&(void 0!==i&&i)}t.isInAmpMode=u,t.useAmp=function(){return u(i.default.useContext(o.AmpStateContext))}},"/a9y":function(e,t,n){"use strict";var r=n("/HRN"),a=n("WaGi"),i=n("ZDA2"),o=n("/+P4"),u=n("N9n2"),l=n("KI45");t.__esModule=!0,t.default=void 0;var c=l(n("q1tI")),f=l(n("8Kt/")),d={400:"Bad Request",404:"This page could not be found",405:"Method Not Allowed",500:"Internal Server Error"},s=function(e){function t(){return r(this,t),i(this,o(t).apply(this,arguments))}return u(t,e),a(t,[{key:"render",value:function(){var e=this.props.statusCode,t=this.props.title||d[e]||"An unexpected error has occurred";return c.default.createElement("div",{style:p.error},c.default.createElement(f.default,null,c.default.createElement("title",null,e,": ",t)),c.default.createElement("div",null,c.default.createElement("style",{dangerouslySetInnerHTML:{__html:"body { margin: 0 }"}}),e?c.default.createElement("h1",{style:p.h1},e):null,c.default.createElement("div",{style:p.desc},c.default.createElement("h2",{style:p.h2},t,"."))))}}],[{key:"getInitialProps",value:function(e){var t=e.res,n=e.err;return{statusCode:t&&t.statusCode?t.statusCode:n?n.statusCode:404}}}]),t}(c.default.Component);t.default=s,s.displayName="ErrorPage";var p={error:{color:"#000",background:"#fff",fontFamily:'-apple-system, BlinkMacSystemFont, Roboto, "Segoe UI", "Fira Sans", Avenir, "Helvetica Neue", "Lucida Grande", sans-serif',height:"100vh",textAlign:"center",display:"flex",flexDirection:"column",alignItems:"center",justifyContent:"center"},desc:{display:"inline-block",textAlign:"left",lineHeight:"49px",height:"49px",verticalAlign:"middle"},h1:{display:"inline-block",borderRight:"1px solid rgba(0, 0, 0,.3)",margin:0,marginRight:"20px",padding:"10px 23px 10px 0",fontSize:"24px",fontWeight:500,verticalAlign:"top"},h2:{fontSize:"14px",fontWeight:"normal",lineHeight:"inherit",margin:0,padding:0}}},"04ac":function(e,t,n){(window.__NEXT_P=window.__NEXT_P||[]).push(["/_error",function(){return n("/a9y")}])},"0tVQ":function(e,t,n){n("FlQf"),n("VJsP"),e.exports=n("WEpk").Array.from},"2PDY":function(e,t){e.exports=function(){throw new TypeError("Invalid attempt to spread non-iterable instance")}},"8Kt/":function(e,t,n){"use strict";var r=n("ttDY"),a=n("hfKm"),i=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};a(t,"__esModule",{value:!0});var o=i(n("q1tI")),u=i(n("Xuae")),l=n("lwAK"),c=n("FYa8"),f=n("/0+H");function d(){var e=arguments.length>0&&void 0!==arguments[0]&&arguments[0],t=[o.default.createElement("meta",{key:"charSet",charSet:"utf-8"})];return e||t.push(o.default.createElement("meta",{key:"viewport",name:"viewport",content:"width=device-width,minimum-scale=1,initial-scale=1"})),t}function s(e,t){return"string"===typeof t||"number"===typeof t?e:t.type===o.default.Fragment?e.concat(o.default.Children.toArray(t.props.children).reduce(function(e,t){return"string"===typeof t||"number"===typeof t?e:e.concat(t)},[])):e.concat(t)}t.defaultHead=d;var p=["name","httpEquiv","charSet","itemProp"];function h(e,t){return e.reduce(function(e,t){var n=o.default.Children.toArray(t.props.children);return e.concat(n)},[]).reduce(s,[]).reverse().concat(d(t.inAmpMode)).filter(function(){var e=new r,t=new r,n=new r,a={};return function(i){if(i.key&&"number"!==typeof i.key&&0===i.key.indexOf(".$"))return!e.has(i.key)&&(e.add(i.key),!0);if(e.has(".$".concat(i.key)))return!1;switch(i.type){case"title":case"base":if(t.has(i.type))return!1;t.add(i.type);break;case"meta":for(var o=0,u=p.length;o0?arguments[0]:void 0)}},{add:function(e){return r.def(a(this,"Set"),e=0===e?0:e,e)}},r)},PQJW:function(e,t,n){var r=n("d04V"),a=n("yLu3");e.exports=function(e){if(a(Object(e))||"[object Arguments]"===Object.prototype.toString.call(e))return r(e)}},TbGu:function(e,t,n){var r=n("fGSI"),a=n("PQJW"),i=n("2PDY");e.exports=function(e){return r(e)||a(e)||i()}},"V+O7":function(e,t,n){n("aPfg")("Set")},VJsP:function(e,t,n){"use strict";var r=n("2GTP"),a=n("Y7ZC"),i=n("JB68"),o=n("sNwI"),u=n("NwJ3"),l=n("tEej"),c=n("IP1Z"),f=n("fNZA");a(a.S+a.F*!n("TuGD")(function(e){Array.from(e)}),"Array",{from:function(e){var t,n,a,d,s=i(e),p="function"==typeof this?this:Array,h=arguments.length,v=h>1?arguments[1]:void 0,m=void 0!==v,y=0,g=f(s);if(m&&(v=r(v,h>2?arguments[2]:void 0,2)),void 0==g||p==Array&&u(g))for(n=new p(t=l(s.length));t>y;y++)c(n,y,m?v(s[y],y):s[y]);else for(d=g.call(s),n=new p;!(a=d.next()).done;y++)c(n,y,m?o(d,v,[a.value,y],!0):a.value);return n.length=y,n}})},Xuae:function(e,t,n){"use strict";var r=n("/HRN"),a=n("ZDA2"),i=n("/+P4"),o=n("K47E"),u=n("WaGi"),l=n("N9n2"),c=n("TbGu"),f=n("ttDY");n("hfKm")(t,"__esModule",{value:!0});var d=n("q1tI"),s=!1;t.default=function(){var e,t=new f;function n(n){e=n.props.reduceComponentsToState(c(t),n.props),n.props.handleStateChange&&n.props.handleStateChange(e)}return function(c){function f(e){var u;return r(this,f),u=a(this,i(f).call(this,e)),s&&(t.add(o(u)),n(o(u))),u}return l(f,c),u(f,null,[{key:"rewind",value:function(){var n=e;return e=void 0,t.clear(),n}}]),u(f,[{key:"componentDidMount",value:function(){t.add(this),n(this)}},{key:"componentDidUpdate",value:function(){n(this)}},{key:"componentWillUnmount",value:function(){t.delete(this),n(this)}},{key:"render",value:function(){return null}}]),f}(d.Component)}},d04V:function(e,t,n){e.exports=n("0tVQ")},dL40:function(e,t,n){var r=n("Y7ZC");r(r.P+r.R,"Set",{toJSON:n("8iia")("Set")})},fGSI:function(e,t,n){var r=n("p0XB");e.exports=function(e){if(r(e)){for(var t=0,n=new Array(e.length);tBix
CHAPTER 1. Loomings. 2 | 3 | Call me Ishmael. Some years ago - never mind how long precisely - having little or no money in my purse, and nothing particular to interest me on shore, I thought I would sail about a little and see the watery part of the world. It is a way I have of driving off the spleen and regulating the circulation.​
Bix lets you draw on binary to glitch text.
MOVE
h previous byte
j next bit
k previous bit
l next byte
EDIT BINARY
d draw
e erase
f flip
a add 1 to byte
s subtract 1 from byte
SIZE
u decrease width
i increase width
SPECIAL
t edit text
w save as txt
? toggle help
View source
-------------------------------------------------------------------------------- /out/index-ref.html: -------------------------------------------------------------------------------- 1 | Bix
-------------------------------------------------------------------------------- /out/_next/static/hZLkpl9TvDWviW8eZjiS2/pages/index-ref.js: -------------------------------------------------------------------------------- 1 | (window.webpackJsonp=window.webpackJsonp||[]).push([[9],{"84Ma":function(t,n,i){"use strict";i.r(n);var o=i("vYYK"),a=i("6BQ9"),r=i.n(a),l=i("MX0m"),c=i.n(l),s=i("q1tI"),d=i.n(s),h=i("p0XB"),u=i.n(h);var f=i("XXOK"),p=i.n(f),m=i("yLu3"),g=i.n(m);function y(e,t){return function(e){if(u()(e))return e}(e)||function(e,t){if(g()(Object(e))||"[object Arguments]"===Object.prototype.toString.call(e)){var n=[],i=!0,o=!1,a=void 0;try{for(var r,l=p()(e);!(i=(r=l.next()).done)&&(n.push(r.value),!t||n.length!==t);i=!0);}catch(c){o=!0,a=c}finally{try{i||null==l.return||l.return()}finally{if(o)throw a}}return n}}(e,t)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance")}()}var v=d.a.createElement,w={textTransform:"uppercase"},b=function(e,t){var n=y(e,2),i=n[0],o=n[1];return v("div",{onClick:function(){t(i)},style:{cursor:"pointer",marginRight:!1!==o?"1ch":0,display:"flex",marginBottom:!1!==o?5.25:0}},v("div",{style:{border:"solid 1px black",paddingLeft:"0.5ch",paddingRight:"0.5ch",background:"#fff"}},i),!1!==o?v("div",{style:{paddingLeft:"1ch",paddingRight:"1ch",borderTop:"solid 1px transparent",borderRight:"solid 1px transparent",borderBottom:"solid 1px transparent"}},o):null)},k=function(e){var t=e.items,n=e.clickKey;return v("div",{style:{display:"flex",flexWrap:"wrap"}},t.map(function(e){return b(e,n)}))},x=function(e){var t=e.mode,n=e.clickKey;switch(t){case"default":return v("div",null,v("div",{style:{marginBottom:5.25}},v("div",{style:w},"Width"),v(k,{items:[["h","narrower"],["l","wider"]],clickKey:n}),v(k,{clickKey:n,items:[["shift","hold to move by 1"]]})),v("div",{style:{marginBottom:5.25}},v("div",{style:w},"Text"),v(k,{items:[["e","edit text"]],clickKey:n})),v("div",{style:{marginBottom:5.25}},v("div",{style:w},"Image"),v("div",null,"To upload an image you can paste, drop or press"),v(k,{items:[["o","to open a file dialog"]],clickKey:n})));case"editing":return v("div",null,v("div",{style:{marginBottom:5.25}},v("div",{style:w},"Editing"),v(k,{items:[["escape","stop editing (or shift+enter)"]],clickKey:n})));default:return null}},j=function(e){var t,n=e.rlh,i=e.mode,a=e.help,r=e.clickKey;return v("div",null,v("div",{style:{position:"fixed",right:"2ch",bottom:n,display:a?"none":"block"}},b(["?",!1],r)),v("div",{className:"help",style:(t={paddingRight:"1ch",paddingLeft:"1ch",paddingTop:n/4,paddingBottom:n/4,position:"fixed",outline:"solid 1px black",width:"74ch",maxWidth:"calc(100% - 4ch)",background:"white"},Object(o.a)(t,"paddingLeft","2ch"),Object(o.a)(t,"paddingRight","2ch"),Object(o.a)(t,"paddingBottom",n/2),Object(o.a)(t,"paddingTop",n/2),Object(o.a)(t,"right","2ch"),Object(o.a)(t,"bottom",n),Object(o.a)(t,"overflowY","auto"),Object(o.a)(t,"display",a?"block":"none"),t)},v("div",{style:{marginBottom:n/4}},"Pixel-reflow an image to match the dimensions of your text. Save the result as a diptych."),v("div",{style:{background:"#efefef",marginLeft:"-2ch",marginRight:"-2ch",paddingLeft:"2ch",paddingRight:"2ch"}},v(x,{mode:i,clickKey:r})),v("div",{style:{marginBottom:n/4}},v("div",{style:w},"Special"),v(k,{clickKey:r,items:[["w","save diptych as png"],["?","toggle help"]]})),v("div",null,v("a",{href:"https://github.com/constraint-systems/diptych"},"View source"))))},R=d.a.createElement,O=24;var L=6;function I(e){return e.map(function(e){return function(e){return String.fromCharCode(r()(e,2))}(e)}).join("")}function S(e){return e.split("").map(function(e){return e.charCodeAt(0).toString(2).padStart(8,"0")})}n.default=function(t){var n,i=Object(s.useRef)(null),a=(Object(s.useRef)(null),Object(s.useRef)(null)),l=Object(s.useRef)(null),d=Object(s.useRef)(null),h=Object(s.useRef)({}),u=Object(s.useRef)(null),f=(Object(s.useRef)(null),Object(s.useRef)(null)),p=Object(s.useRef)([0,0]),m=Object(s.useRef)(null),g=Object(s.useState)("CHAPTER 1. Loomings.\n\nCall me Ishmael. Some years ago \u2014 never mind how long precisely \u2014 having little or no money in my purse, and nothing particular to interest me on shore, I thought I would sail about a little and see the watery part of the world. It is a way I have of driving off the spleen and regulating the circulation. Whenever I find myself growing grim about the mouth; whenever it is a damp, drizzly November in my soul; whenever I find myself involuntarily pausing before coffin warehouses, and bringing up the rear of every funeral I meet; and especially whenever my hypos get such an upper hand of me, that it requires a strong moral principle to prevent me from deliberately stepping into the street, and methodically knocking people\u2019s hats off \u2014 then, I account it high time to get to sea as soon as I can. This is my substitute for pistol and ball. With a philosophical flourish Cato throws himself upon his sword; I quietly take to the ship. There is nothing surprising in this. If they but knew it, almost all men in their degree, some time or other, cherish very nearly the same feelings towards the ocean with me.\n\nThere now is your insular city of the Manhattoes, belted round by wharves as Indian isles by coral reefs \u2014 commerce surrounds it with her surf. Right and left, the streets take you waterward. Its extreme downtown is the battery, where that noble mole is washed by waves, and cooled by breezes, which a few hours previous were out of sight of land. Look at the crowds of water-gazers there."),y=g[0],v=g[1],w=Object(s.useState)(!0),b=w[0],k=w[1],x=Object(s.useState)("default"),E=x[0],B=x[1],M=Object(s.useState)(!1),T=M[0],C=M[1];function K(e){var t=u.current.offsetWidth,n=(u.current.offsetHeight,4*L),i=Math.floor(t/n)*n,o=y.length,a=i/n,r=(Math.ceil(o/a),p.current),l=Math.floor(r[0]/(4*L)),c=Math.floor(r[1]/(2*L)),s=c*a+l,d=(r[0]-4*l*L)/L,h=(r[1]-2*c*L)/L*4+d,f=S(y),m=f[s].split("");m[h]=e.toString();var g=m.join("");f[s]=g;var w=I(f);v(w)}function N(){var e=u.current.offsetWidth,t=(u.current.offsetHeight,4*L),n=Math.floor(e/t)*t,o=y.length,l=n/t,c=Math.ceil(o/l),s=p.current,d=Math.floor(s[0]/(4*L)),h=Math.floor(s[1]/(2*L)),m=h*l+d,g=y.split("");g[m]=''.concat(g[m],"");var v=g.join("");u.current.innerHTML=v+"\u200b";var w=i.current;w.width=a.current,w.height=2*c*L+2*O;var b=w.getContext("2d");b.fillStyle="white",b.fillRect(0,0,w.width,w.height);var k=S(y);b.fillStyle="black";for(var x=0;x'.concat(g[m],"");var v=g.join("");u.current.innerHTML=v+"\u200b";var w=i.current;w.width=a.current,w.height=2*c*L+2*O;var b=w.getContext("2d");b.fillStyle="white",b.fillRect(0,0,w.width,w.height);var k=S(y);b.fillStyle="black";for(var x=0;xu;)void 0!==(n=l(a,t=s[u++]))&&c(f,t,n);return f}})},RNiq:function(e,t,n){"use strict";n.r(t);var a=n("hfKm"),r=n.n(a),i=n("2Eek"),o=n.n(i),c=n("XoMD"),l=n.n(c),s=n("Jo+v"),f=n.n(s),u=n("4mXO"),d=n.n(u),h=n("pLtp"),p=n.n(h),m=n("vYYK"),y=n("6BQ9"),g=n.n(y),v=n("MX0m"),b=n.n(v),w=n("q1tI"),k=n.n(w),x="CHAPTER 1. Loomings.\n\nCall me Ishmael. Some years ago - never mind how long precisely - having little or no money in my purse, and nothing particular to interest me on shore, I thought I would sail about a little and see the watery part of the world. It is a way I have of driving off the spleen and regulating the circulation.",S=k.a.createElement,j=function(e){var t=e.k,n=e.label,a=e.clickKey;return S("div",{style:{userSelect:"none",MozUserSelect:"none"}},S("span",{style:{outline:"solid 1px black",paddingLeft:"0.5ch",paddingRight:"0.5ch",background:"white",cursor:"default"},onClick:function(){a(t)}},t),""!==n?S("span",null," ",S("span",{style:{marginRight:"2ch"}},n)):"")};function M(e){return{paddingLeft:e,paddingRight:e}}function O(e){return{paddingTop:e,paddingBottom:e}}function E(e){var t=e.split("");return(t=t.reverse()).join("")}function R(e){var t=e.split("");return 0===t.length&&(t=[" "]),t.map(function(e){return E(e.charCodeAt(0).toString(2).padStart(8,"0"))})}function N(e){return e.map(function(e){return function(e){var t=E(e);return String.fromCharCode(g()(t,2))}(e)}).join("")}var K=k.a.createElement;function C(e,t){var n=p()(e);if(d.a){var a=d()(e);t&&(a=a.filter(function(t){return f()(e,t).enumerable})),n.push.apply(n,a)}return n}function I(e){for(var t=1;td&&(a=d),o[l]=E(a.toString(2));var p=N(o);n(p)}function q(){c.current;var e=u.current,n=h.current,a=p.current,r=m.current,o=R(t),l=s.current,f=l.getContext("2d"),d=a[0],g=a[1],v=n[0],b=n[1],w=v*T*W,k=b*D*W;l.width=w+2*d,l.height=k+2*g,f.clearRect(0,0,l.width,l.height),f.strokeStyle="#888",f.lineWidth=1;for(var x=0;xo.length-1){var C=o.length-1;S=C,j=C%n[0]*T*W,M=Math.floor(C/n[0])*D*W,e[0]=j+O*W,e[1]=M+N*W}f.strokeStyle=H,f.lineWidth=2,f.strokeRect(j-1+d,M-1+g,T*W+2,D*W+2),f.strokeStyle=A,f.lineWidth=2,f.strokeRect(e[0]-1+d,e[1]-1+g,W+2,W+2);var I=t.slice();0===I.length&&(I=" ");var P=I.split("");P[S]='')+P[S]+"";var B=P.join("");if(i(B),void 0!==o[S]){var L=E(o[S]).split("").map(function(e,t){return K===7-t?'').concat(e,""):e}).join("");L+=" width: ".concat(y.current),r.innerHTML="byte ".concat(S.toString().padStart(o.length.toString().length,"0"),": ").concat(L)}}function F(){var e=c.current,n=f.current,a=l.current;a.width=y.current;var r=a.getContext("2d");r.font="".concat(P,"px/").concat(B," customono");var i=r.measureText("w").width,o=2*i,s=L;p.current=[o,s];var u=R(t),d=T*W,m=Math.floor(e.offsetWidth/d),g=Math.ceil(u.length/m);h.current=[m,Math.max(1,g)];var v=m*T*W,b=g*D*W;a.width=v+4*i,a.height=b+2*L,b>e.offsetHeight?n.style.height=b+2*L+"px":(a.height=e.offsetHeight+2*L,n.style.height=e.offsetHeight+2*L+"px"),r.fillStyle="white",r.fillRect(0,0,a.width,a.height),r.fillStyle="black";for(var w=0;wf.length-1?(i[0]>g[0]&&(i[0]=g[0]),i[1]>g[1]&&(i[1]=g[1])):(i[0]+i[2]>s[0]*W&&void 0!==f[p+1]&&(i[0]=0,i[1]+=8*W),i[0]<0&&(0===p?i[0]=0:(i[0]=s[0]*T*W-i[2],i[1]-=8*W)),i[1]<0&&(i[1]=0));var v=!1;"f"===n&&!a||r.f&&"f"!==n?(v=!0,Z("f")):r.d?(v=!0,Z(1)):r.e&&(v=!0,Z(0));var b=10;if(e.shiftKey&&(b=1),"u"===n||"arrowleft"===n){var w=y.current-b;w<40&&(w=40),Y(w),F()}else"i"!==n&&"arrowright"!==n||(Y(y.current+b),F());if(r.a?(v=!0,X("add")):r.s&&(v=!0,X("subtract")),v||q(),"t"===n){o.current.focus();var k=o.current;k.selectionStart=k.selectionEnd=k.value.length}else if("w"===n){var x=document.createElement("a");x.setAttribute("href","data:text/plain;charset=utf-8,"+encodeURIComponent(t)),x.setAttribute("download","bix-width-".concat(y.current,"-").concat((new Date).toISOString().slice(0,-4).replace(/-/g,"").replace(/:/g,"").replace(/_/g,"").replace(/\./g,""),"Z.txt")),x.dispatchEvent(new MouseEvent("click",{bubbles:!0,cancelable:!0,view:window}))}else"?"===n&&S(function(e){return!e})}function G(e){var t=e.key.toLowerCase();d.current[t]=!0,U(e),"t"===t&&e.preventDefault()}function J(e){var t=e.key.toLowerCase();d.current[t]=!1}return Object(w.useEffect)(function(){F(),q()},[t]),Object(w.useEffect)(function(){console.log("keys used","hjklfdeastw?uiUI"),Y(window.innerWidth),F(),q()},[]),Object(w.useEffect)(function(){return window.addEventListener("keydown",G),window.addEventListener("keyup",J),function(){window.removeEventListener("keydown",G),window.removeEventListener("keyup",J)}},[t]),K("div",{className:b.a.dynamic([["2969947943",[P,B,L,2*L]]])},K("div",{ref:f,style:{background:"white"},className:b.a.dynamic([["2969947943",[P,B,L,2*L]]])},K("canvas",{style:{position:"absolute",left:0,top:0},ref:l,className:b.a.dynamic([["2969947943",[P,B,L,2*L]]])}),K("canvas",{style:{position:"absolute",left:0,top:0,pointerEvents:"none"},ref:s,className:b.a.dynamic([["2969947943",[P,B,L,2*L]]])}),K("div",{style:I({display:"grid"},M("2ch"),{},O(L),{gridTemplateColumns:"1fr 1fr",gridColumnGap:"2ch"}),className:b.a.dynamic([["2969947943",[P,B,L,2*L]]])},K("div",{className:b.a.dynamic([["2969947943",[P,B,L,2*L]]])}),K("div",{style:{position:"relative"},className:b.a.dynamic([["2969947943",[P,B,L,2*L]]])},K("div",{ref:c,style:{color:"transparent",background:"white",position:"relative",width:"100%",whiteSpace:"pre-wrap",wordBreak:"break-word",pointerEvents:"none"},dangerouslySetInnerHTML:{__html:r+"\u200b"},className:b.a.dynamic([["2969947943",[P,B,L,2*L]]])}),K("textarea",{onKeyDown:function(e){"Escape"===e.key&&e.target.blur(),e.shiftKey&&"Enter"===e.key&&e.target.blur(),e.stopPropagation()},onChange:function(e){var t;t=e.target.value,n(t)},ref:o,style:{position:"absolute",left:0,top:0,width:"100%",height:"100%",resize:"none",whiteSpace:"pre-wrap",wordBreak:"break-word"},spellCheck:"false",value:t,className:b.a.dynamic([["2969947943",[P,B,L,2*L]]])})))),K("div",{style:I({},M("2ch"),{},O(L/2),{whiteSpace:"pre-wrap",wordBreak:"break-word"}),ref:m,className:b.a.dynamic([["2969947943",[P,B,L,2*L]]])}),K("div",{style:{position:"fixed",right:"2ch",maxWidth:"calc(100% - 4ch)",bottom:L,background:"white",fontSize:15,lineHeight:1.5},className:b.a.dynamic([["2969947943",[P,B,L,2*L]]])},K("div",{style:{position:"fixed",right:"2ch",bottom:L,display:k?"none":"block"},className:b.a.dynamic([["2969947943",[P,B,L,2*L]]])},K(j,{clickKey:C,k:"?",label:""})),K("div",{style:I({},M("2ch"),{},O(L/2),{outline:"solid 1px black",display:k?"block":"none"}),className:b.a.dynamic([["2969947943",[P,B,L,2*L]]])},K("div",{style:{marginBottom:L/4},className:b.a.dynamic([["2969947943",[P,B,L,2*L]]])},"Bix lets you draw on binary to glitch text."),K("div",{className:b.a.dynamic([["2969947943",[P,B,L,2*L]]])},"MOVE"),K("div",{style:{display:"flex",flexWrap:"wrap",marginBottom:L/4},className:b.a.dynamic([["2969947943",[P,B,L,2*L]]])},K(j,{clickKey:C,k:"h",label:"previous byte"}),K(j,{clickKey:C,k:"j",label:"next bit"}),K(j,{clickKey:C,k:"k",label:"previous bit"}),K(j,{clickKey:C,k:"l",label:"next byte"})),K("div",{className:b.a.dynamic([["2969947943",[P,B,L,2*L]]])},"EDIT BINARY"),K("div",{style:{display:"flex",flexWrap:"wrap",marginBottom:L/4},className:b.a.dynamic([["2969947943",[P,B,L,2*L]]])},K(j,{clickKey:C,k:"d",label:"draw"}),K(j,{clickKey:C,k:"e",label:"erase"}),K(j,{clickKey:C,k:"f",label:"flip"}),K(j,{clickKey:C,k:"a",label:"add 1 to byte"}),K(j,{clickKey:C,k:"s",label:"subtract 1 from byte"})),K("div",{className:b.a.dynamic([["2969947943",[P,B,L,2*L]]])},"SIZE"),K("div",{style:{display:"flex",flexWrap:"wrap",marginBottom:L/4},className:b.a.dynamic([["2969947943",[P,B,L,2*L]]])},K(j,{clickKey:C,k:"u",label:"decrease width"}),K(j,{clickKey:C,k:"i",label:"increase width"})),K("div",{className:b.a.dynamic([["2969947943",[P,B,L,2*L]]])},"SPECIAL"),K("div",{style:{display:"flex",flexWrap:"wrap",marginBottom:L/4},className:b.a.dynamic([["2969947943",[P,B,L,2*L]]])},K(j,{clickKey:C,k:"t",label:"edit text"}),K(j,{clickKey:C,k:"w",label:"save as txt"}),K(j,{clickKey:C,k:"?",label:"toggle help"})),K("div",{className:b.a.dynamic([["2969947943",[P,B,L,2*L]]])},K("a",{href:"https://github.com/constraint-systems/bix",className:b.a.dynamic([["2969947943",[P,B,L,2*L]]])},"View source")))),K(b.a,{id:"2969947943",dynamic:[P,B,L,2*L]},["@font-face{font-family:'custom';src:url('/IBMPlexSans-Regular.woff2') format('woff2'), url('/IBMPlexSans-Regular.woff') format('woff');}","@font-face{font-family:'customono';src:url('/IBMPlexMono-Regular.woff2') format('woff2'), url('/IBMPlexMono-Regular.woff') format('woff');}","*{box-sizing:border-box;}","html{font-family:'customono',sans-serif;font-size:".concat(P,"px;line-height:").concat(B,";background:#ddd;}"),"body{margin:0;padding:0;}","canvas{display:block;}","h1,h2,h3,h4,h5,h6{margin:0;font-size:inherit;line-height:inherit;font-weight:normal;}","p{margin:0;margin-top:".concat(L,"px;}"),"img{display:block;width:100%;}","a{color:inherit;}","a:hover{opacity:0.8;}","textarea{border:none;margin:0;font-size:inherit;padding:0;line-height:inherit;font-weight:normal;font:inherit;background:transparent;}","textarea:focus{outline:none;background:rgba(0,0,0,0.125);}","@media (max-width:800px){.help{max-height:calc(50vh - ".concat(2*L,"px);}.diptych-container{padding-bottom:50vh;}}"),"#__next-prerender-indicator{display:none;}"]))}},W7oM:function(e,t,n){n("nZgG");var a=n("WEpk").Object;e.exports=function(e,t){return a.defineProperties(e,t)}},XoMD:function(e,t,n){e.exports=n("hYAz")},hYAz:function(e,t,n){n("7m0m"),e.exports=n("WEpk").Object.getOwnPropertyDescriptors},nZgG:function(e,t,n){var a=n("Y7ZC");a(a.S+a.F*!n("jmDH"),"Object",{defineProperties:n("fpC5")})},uplh:function(e,t,n){var a=n("ar/p"),r=n("mqlF"),i=n("5K7Z"),o=n("5T2Y").Reflect;e.exports=o&&o.ownKeys||function(e){var t=a.f(i(e)),n=r.f;return n?t.concat(n(e)):t}},vlRD:function(e,t,n){(window.__NEXT_P=window.__NEXT_P||[]).push(["/",function(){return n("RNiq")}])}},[["vlRD",1,0]]]); -------------------------------------------------------------------------------- /out/_next/static/zKOKbyMJGefWWNQksxEy4/pages/index.js: -------------------------------------------------------------------------------- 1 | (window.webpackJsonp=window.webpackJsonp||[]).push([[6],{"2Eek":function(e,t,n){e.exports=n("W7oM")},"4mXO":function(e,t,n){e.exports=n("7TPF")},"7TPF":function(e,t,n){n("AUvm"),e.exports=n("WEpk").Object.getOwnPropertySymbols},"7m0m":function(e,t,n){var a=n("Y7ZC"),r=n("uplh"),i=n("NsO/"),o=n("vwuL"),c=n("IP1Z");a(a.S,"Object",{getOwnPropertyDescriptors:function(e){for(var t,n,a=i(e),l=o.f,s=r(a),f={},u=0;s.length>u;)void 0!==(n=l(a,t=s[u++]))&&c(f,t,n);return f}})},RNiq:function(e,t,n){"use strict";n.r(t);var a=n("hfKm"),r=n.n(a),i=n("2Eek"),o=n.n(i),c=n("XoMD"),l=n.n(c),s=n("Jo+v"),f=n.n(s),u=n("4mXO"),d=n.n(u),h=n("pLtp"),p=n.n(h),m=n("vYYK"),y=n("6BQ9"),g=n.n(y),v=n("MX0m"),b=n.n(v),w=n("q1tI"),k=n.n(w),x="CHAPTER 1. Loomings.\n\nCall me Ishmael. Some years ago - never mind how long precisely - having little or no money in my purse, and nothing particular to interest me on shore, I thought I would sail about a little and see the watery part of the world. It is a way I have of driving off the spleen and regulating the circulation.",S=k.a.createElement,j=function(e){var t=e.k,n=e.label,a=e.clickKey;return S("div",{style:{userSelect:"none",MozUserSelect:"none"}},S("span",{style:{outline:"solid 1px black",paddingLeft:"0.5ch",paddingRight:"0.5ch",background:"white",cursor:"default"},onClick:function(){a(t)}},t),""!==n?S("span",null," ",S("span",{style:{marginRight:"2ch"}},n)):"")};function M(e){return{paddingLeft:e,paddingRight:e}}function O(e){return{paddingTop:e,paddingBottom:e}}function E(e){var t=e.split("");return(t=t.reverse()).join("")}function R(e){var t=e.split("");return 0===t.length&&(t=[" "]),t.map(function(e){return E(e.charCodeAt(0).toString(2).padStart(8,"0"))})}function N(e){return e.map(function(e){return function(e){var t=E(e);return String.fromCharCode(g()(t,2))}(e)}).join("")}var K=k.a.createElement;function C(e,t){var n=p()(e);if(d.a){var a=d()(e);t&&(a=a.filter(function(t){return f()(e,t).enumerable})),n.push.apply(n,a)}return n}function I(e){for(var t=1;td&&(a=d),o[l]=E(a.toString(2));var p=N(o);n(p)}function q(){c.current;var e=u.current,n=h.current,a=p.current,r=m.current,o=R(t),l=s.current,f=l.getContext("2d"),d=a[0],g=a[1],v=n[0],b=n[1],w=v*T*W,k=b*D*W;l.width=w+2*d,l.height=k+2*g,f.clearRect(0,0,l.width,l.height),f.strokeStyle="#888",f.lineWidth=1;for(var x=0;xo.length-1){var C=o.length-1;S=C,j=C%n[0]*T*W,M=Math.floor(C/n[0])*D*W,e[0]=j+O*W,e[1]=M+N*W}f.strokeStyle=H,f.lineWidth=2,f.strokeRect(j-1+d,M-1+g,T*W+2,D*W+2),f.strokeStyle=A,f.lineWidth=2,f.strokeRect(e[0]-1+d,e[1]-1+g,W+2,W+2);var I=t.slice();0===I.length&&(I=" ");var P=I.split("");P[S]='')+P[S]+"";var B=P.join("");if(i(B),void 0!==o[S]){var L=E(o[S]).split("").map(function(e,t){return K===7-t?'').concat(e,""):e}).join("");L+=" width: ".concat(y.current),r.innerHTML="byte ".concat(S.toString().padStart(o.length.toString().length,"0"),": ").concat(L)}}function F(){var e=c.current,n=f.current,a=l.current;a.width=y.current;var r=a.getContext("2d");r.font="".concat(P,"px/").concat(B," customono");var i=r.measureText("w").width,o=2*i,s=L;p.current=[o,s];var u=R(t),d=T*W,m=Math.floor(e.offsetWidth/d),g=Math.ceil(u.length/m);h.current=[m,Math.max(1,g)];var v=m*T*W,b=g*D*W;a.width=v+4*i,a.height=b+2*L,b>e.offsetHeight?n.style.height=b+2*L+"px":(a.height=e.offsetHeight+2*L,n.style.height=e.offsetHeight+2*L+"px"),r.fillStyle="white",r.fillRect(0,0,a.width,a.height),r.fillStyle="black";for(var w=0;wf.length-1?(i[0]>g[0]&&(i[0]=g[0]),i[1]>g[1]&&(i[1]=g[1])):(i[0]+i[2]>s[0]*W&&void 0!==f[p+1]&&(i[0]=0,i[1]+=8*W),i[0]<0&&(0===p?i[0]=0:(i[0]=s[0]*T*W-i[2],i[1]-=8*W)),i[1]<0&&(i[1]=0));var v=!1;"f"===n&&!a||r.f&&"f"!==n?(v=!0,Z("f")):r.d?(v=!0,Z(1)):r.e&&(v=!0,Z(0));var b=10;if(e.shiftKey&&(b=1),"u"===n||"arrowleft"===n){var w=y.current-b;w<40&&(w=40),Y(w),F()}else"i"!==n&&"arrowright"!==n||(Y(y.current+b),F());if(r.a?(v=!0,X("add")):r.s&&(v=!0,X("subtract")),v||q(),"t"===n){o.current.focus();var k=o.current;k.selectionStart=k.selectionEnd=k.value.length}else if("w"===n){var x=document.createElement("a");x.setAttribute("href","data:text/plain;charset=utf-8,"+encodeURIComponent(t)),x.setAttribute("download","bix-width-".concat(y.current,"-").concat((new Date).toISOString().slice(0,-4).replace(/-/g,"").replace(/:/g,"").replace(/_/g,"").replace(/\./g,""),"Z.txt")),x.dispatchEvent(new MouseEvent("click",{bubbles:!0,cancelable:!0,view:window}))}else"?"===n&&S(function(e){return!e})}function G(e){var t=e.key.toLowerCase();d.current[t]=!0,U(e),"t"===t&&e.preventDefault()}function J(e){var t=e.key.toLowerCase();d.current[t]=!1}return Object(w.useEffect)(function(){F(),q()},[t]),Object(w.useEffect)(function(){console.log("keys used","hjklfdeastw?uiUI"),Y(window.innerWidth),F(),q()},[]),Object(w.useEffect)(function(){return window.addEventListener("keydown",G),window.addEventListener("keyup",J),function(){window.removeEventListener("keydown",G),window.removeEventListener("keyup",J)}},[t]),K("div",{className:b.a.dynamic([["2969947943",[P,B,L,2*L]]])},K("div",{ref:f,style:{background:"white"},className:b.a.dynamic([["2969947943",[P,B,L,2*L]]])},K("canvas",{style:{position:"absolute",left:0,top:0},ref:l,className:b.a.dynamic([["2969947943",[P,B,L,2*L]]])}),K("canvas",{style:{position:"absolute",left:0,top:0,pointerEvents:"none"},ref:s,className:b.a.dynamic([["2969947943",[P,B,L,2*L]]])}),K("div",{style:I({display:"grid"},M("2ch"),{},O(L),{gridTemplateColumns:"1fr 1fr",gridColumnGap:"2ch"}),className:b.a.dynamic([["2969947943",[P,B,L,2*L]]])},K("div",{className:b.a.dynamic([["2969947943",[P,B,L,2*L]]])}),K("div",{style:{position:"relative"},className:b.a.dynamic([["2969947943",[P,B,L,2*L]]])},K("div",{ref:c,style:{color:"transparent",background:"white",position:"relative",width:"100%",whiteSpace:"pre-wrap",wordBreak:"break-word",pointerEvents:"none"},dangerouslySetInnerHTML:{__html:r+"\u200b"},className:b.a.dynamic([["2969947943",[P,B,L,2*L]]])}),K("textarea",{onKeyDown:function(e){"Escape"===e.key&&e.target.blur(),e.shiftKey&&"Enter"===e.key&&e.target.blur(),e.stopPropagation()},onChange:function(e){var t;t=e.target.value,n(t)},ref:o,style:{position:"absolute",left:0,top:0,width:"100%",height:"100%",resize:"none",whiteSpace:"pre-wrap",wordBreak:"break-word"},spellCheck:"false",value:t,className:b.a.dynamic([["2969947943",[P,B,L,2*L]]])})))),K("div",{style:I({},M("2ch"),{},O(L/2),{whiteSpace:"pre-wrap",wordBreak:"break-word"}),ref:m,className:b.a.dynamic([["2969947943",[P,B,L,2*L]]])}),K("div",{style:{position:"fixed",right:"2ch",maxWidth:"calc(100% - 4ch)",bottom:L,background:"white",fontSize:15,lineHeight:1.5},className:b.a.dynamic([["2969947943",[P,B,L,2*L]]])},K("div",{style:{position:"fixed",right:"2ch",bottom:L,display:k?"none":"block"},className:b.a.dynamic([["2969947943",[P,B,L,2*L]]])},K(j,{clickKey:C,k:"?",label:""})),K("div",{style:I({},M("2ch"),{},O(L/2),{outline:"solid 1px black",display:k?"block":"none"}),className:b.a.dynamic([["2969947943",[P,B,L,2*L]]])},K("div",{style:{marginBottom:L/4},className:b.a.dynamic([["2969947943",[P,B,L,2*L]]])},"Bix let's you draw on binary to glitch text."),K("div",{className:b.a.dynamic([["2969947943",[P,B,L,2*L]]])},"MOVE"),K("div",{style:{display:"flex",flexWrap:"wrap",marginBottom:L/4},className:b.a.dynamic([["2969947943",[P,B,L,2*L]]])},K(j,{clickKey:C,k:"h",label:"previous byte"}),K(j,{clickKey:C,k:"j",label:"next bit"}),K(j,{clickKey:C,k:"k",label:"previous bit"}),K(j,{clickKey:C,k:"l",label:"next byte"})),K("div",{className:b.a.dynamic([["2969947943",[P,B,L,2*L]]])},"EDIT BINARY"),K("div",{style:{display:"flex",flexWrap:"wrap",marginBottom:L/4},className:b.a.dynamic([["2969947943",[P,B,L,2*L]]])},K(j,{clickKey:C,k:"d",label:"draw"}),K(j,{clickKey:C,k:"e",label:"erase"}),K(j,{clickKey:C,k:"f",label:"flip"}),K(j,{clickKey:C,k:"a",label:"add 1 to byte"}),K(j,{clickKey:C,k:"s",label:"subtract 1 from byte"})),K("div",{className:b.a.dynamic([["2969947943",[P,B,L,2*L]]])},"SIZE"),K("div",{style:{display:"flex",flexWrap:"wrap",marginBottom:L/4},className:b.a.dynamic([["2969947943",[P,B,L,2*L]]])},K(j,{clickKey:C,k:"u",label:"decrease width"}),K(j,{clickKey:C,k:"i",label:"increase width"})),K("div",{className:b.a.dynamic([["2969947943",[P,B,L,2*L]]])},"SPECIAL"),K("div",{style:{display:"flex",flexWrap:"wrap",marginBottom:L/4},className:b.a.dynamic([["2969947943",[P,B,L,2*L]]])},K(j,{clickKey:C,k:"t",label:"edit text"}),K(j,{clickKey:C,k:"w",label:"save as txt"}),K(j,{clickKey:C,k:"?",label:"toggle help"})),K("div",{className:b.a.dynamic([["2969947943",[P,B,L,2*L]]])},K("a",{href:"https://github.com/constraint-systems/bix",className:b.a.dynamic([["2969947943",[P,B,L,2*L]]])},"View source")))),K(b.a,{id:"2969947943",dynamic:[P,B,L,2*L]},["@font-face{font-family:'custom';src:url('/IBMPlexSans-Regular.woff2') format('woff2'), url('/IBMPlexSans-Regular.woff') format('woff');}","@font-face{font-family:'customono';src:url('/IBMPlexMono-Regular.woff2') format('woff2'), url('/IBMPlexMono-Regular.woff') format('woff');}","*{box-sizing:border-box;}","html{font-family:'customono',sans-serif;font-size:".concat(P,"px;line-height:").concat(B,";background:#ddd;}"),"body{margin:0;padding:0;}","canvas{display:block;}","h1,h2,h3,h4,h5,h6{margin:0;font-size:inherit;line-height:inherit;font-weight:normal;}","p{margin:0;margin-top:".concat(L,"px;}"),"img{display:block;width:100%;}","a{color:inherit;}","a:hover{opacity:0.8;}","textarea{border:none;margin:0;font-size:inherit;padding:0;line-height:inherit;font-weight:normal;font:inherit;background:transparent;}","textarea:focus{outline:none;background:rgba(0,0,0,0.125);}","@media (max-width:800px){.help{max-height:calc(50vh - ".concat(2*L,"px);}.diptych-container{padding-bottom:50vh;}}"),"#__next-prerender-indicator{display:none;}"]))}},W7oM:function(e,t,n){n("nZgG");var a=n("WEpk").Object;e.exports=function(e,t){return a.defineProperties(e,t)}},XoMD:function(e,t,n){e.exports=n("hYAz")},hYAz:function(e,t,n){n("7m0m"),e.exports=n("WEpk").Object.getOwnPropertyDescriptors},nZgG:function(e,t,n){var a=n("Y7ZC");a(a.S+a.F*!n("jmDH"),"Object",{defineProperties:n("fpC5")})},uplh:function(e,t,n){var a=n("ar/p"),r=n("mqlF"),i=n("5K7Z"),o=n("5T2Y").Reflect;e.exports=o&&o.ownKeys||function(e){var t=a.f(i(e)),n=r.f;return n?t.concat(n(e)):t}},vlRD:function(e,t,n){(window.__NEXT_P=window.__NEXT_P||[]).push(["/",function(){return n("RNiq")}])}},[["vlRD",1,0]]]); -------------------------------------------------------------------------------- /pages/index-ref.js: -------------------------------------------------------------------------------- 1 | import React, { useState, useEffect, useRef, useCallback } from 'react'; 2 | import Info from '../components/info'; 3 | 4 | let fs = 16; 5 | let lh = 1.5; 6 | let rlh = fs * lh; 7 | // measured 8 | let cr = 8.4 / 21; 9 | let ch = cr * rlh; 10 | 11 | let mfs = 14; 12 | let mrlh = mfs * lh; 13 | 14 | function wrapText(context, text, x, y, maxWidth, lineHeight) { 15 | // from https://codepen.io/peterhry/pen/AGIEa 16 | // modified to respect line breaks 17 | let ogx = x; 18 | let ogy = y; 19 | let paragraphs = text.split('\n'); 20 | let height = 0; 21 | for (let p = 0; p < paragraphs.length; p++) { 22 | let text = paragraphs[p]; 23 | var words = text.split(' '), 24 | line = '', 25 | lineCount = 0, 26 | i, 27 | test, 28 | metrics; 29 | 30 | for (i = 0; i < words.length; i++) { 31 | test = words[i]; 32 | metrics = context.measureText(test); 33 | while (metrics.width >= maxWidth) { 34 | // Determine how much of the word will fit 35 | test = test.substring(0, test.length - 1); 36 | metrics = context.measureText(test); 37 | } 38 | if (words[i] != test) { 39 | words.splice(i + 1, 0, words[i].substr(test.length)); 40 | words[i] = test; 41 | } 42 | 43 | test = line + words[i] + ' '; 44 | metrics = context.measureText(test); 45 | 46 | if (metrics.width >= maxWidth && i > 0) { 47 | context.fillText(line, x, y); 48 | line = words[i] + ' '; 49 | y += lineHeight; 50 | lineCount++; 51 | } else { 52 | line = test; 53 | } 54 | } 55 | context.fillText(line, x, y); 56 | y += lineHeight; 57 | height += lineHeight; 58 | } 59 | // context.fillStyle = 'red'; 60 | // context.fillRect(ogx, ogy, maxWidth, height); 61 | return height; 62 | } 63 | 64 | let plain_text = `CHAPTER 1. Loomings. 65 | 66 | Call me Ishmael. Some years ago — never mind how long precisely — having little or no money in my purse, and nothing particular to interest me on shore, I thought I would sail about a little and see the watery part of the world. It is a way I have of driving off the spleen and regulating the circulation. Whenever I find myself growing grim about the mouth; whenever it is a damp, drizzly November in my soul; whenever I find myself involuntarily pausing before coffin warehouses, and bringing up the rear of every funeral I meet; and especially whenever my hypos get such an upper hand of me, that it requires a strong moral principle to prevent me from deliberately stepping into the street, and methodically knocking people’s hats off — then, I account it high time to get to sea as soon as I can. This is my substitute for pistol and ball. With a philosophical flourish Cato throws himself upon his sword; I quietly take to the ship. There is nothing surprising in this. If they but knew it, almost all men in their degree, some time or other, cherish very nearly the same feelings towards the ocean with me. 67 | 68 | There now is your insular city of the Manhattoes, belted round by wharves as Indian isles by coral reefs — commerce surrounds it with her surf. Right and left, the streets take you waterward. Its extreme downtown is the battery, where that noble mole is washed by waves, and cooled by breezes, which a few hours previous were out of sight of land. Look at the crowds of water-gazers there.`; 69 | 70 | let short_text = `CHAPTER 1. Loomings. 71 | 72 | Call me Ishmael. Some years ago — never mind how long precisely — having little or no money in my purse, and nothing particular to interest me on shore, I thought I would sail about a little and see the watery part of the world. It is a way I have of driving off the spleen and regulating the circulation.`; 73 | 74 | let ps = 6; 75 | 76 | function convertChar(char) { 77 | return char 78 | .charCodeAt(0) 79 | .toString(2) 80 | .padStart(8, '0'); 81 | } 82 | 83 | function convertBinary(bstring) { 84 | return String.fromCharCode(parseInt(bstring, 2)); 85 | } 86 | 87 | function convertToText(binary) { 88 | let char_array = binary.map(bstring => convertBinary(bstring)); 89 | return char_array.join(''); 90 | } 91 | 92 | function convert(string) { 93 | let chars = string.split(''); 94 | let binary = chars.map(char => convertChar(char)); 95 | return binary; 96 | } 97 | 98 | const Home = img => { 99 | let rref = useRef(null); 100 | let targetref = useRef(null); 101 | let wwref = useRef(null); 102 | let containerref = useRef(null); 103 | let readoutref = useRef(null); 104 | let keymap = useRef({}); 105 | let tref = useRef(null); 106 | let imgref = useRef(null); 107 | let dref = useRef(null); 108 | let cursorref = useRef([0, 0]); 109 | let textarearef = useRef(null); 110 | let [text, setText] = useState(plain_text); 111 | let [help, setHelp] = useState(true); 112 | let [mode, setMode] = useState('default'); 113 | let [kickoff, setKickoff] = useState(false); 114 | 115 | function changeBit(val) { 116 | let tw = tref.current.offsetWidth; 117 | let th = tref.current.offsetHeight; 118 | 119 | let bcols = 4; 120 | let brows = 2; 121 | let byte_width = ps * bcols; 122 | let bi_width = Math.floor(tw / byte_width) * byte_width; 123 | 124 | let byte_length = text.length; 125 | 126 | let bc = bi_width / byte_width; 127 | let br = Math.ceil(byte_length / bc); 128 | 129 | let cursor = cursorref.current; 130 | 131 | let byte_x = Math.floor(cursor[0] / (bcols * ps)); 132 | let byte_y = Math.floor(cursor[1] / (brows * ps)); 133 | 134 | let byte_index = byte_y * bc + byte_x; 135 | 136 | let bit_x = (cursor[0] - byte_x * bcols * ps) / ps; 137 | let bit_y = (cursor[1] - byte_y * brows * ps) / ps; 138 | 139 | let bit_index = bit_y * bcols + bit_x; 140 | 141 | let binary = convert(text); 142 | 143 | let bexpand = binary[byte_index].split(''); 144 | bexpand[bit_index] = val.toString(); 145 | let bcontract = bexpand.join(''); 146 | 147 | binary[byte_index] = bcontract; 148 | 149 | let new_text = convertToText(binary); 150 | setText(new_text); 151 | } 152 | 153 | function respond() { 154 | let tw = tref.current.offsetWidth; 155 | let th = tref.current.offsetHeight; 156 | 157 | let bcols = 4; 158 | let brows = 2; 159 | let byte_width = ps * bcols; 160 | let bi_width = Math.floor(tw / byte_width) * byte_width; 161 | 162 | let byte_length = text.length; 163 | 164 | let bc = bi_width / byte_width; 165 | let br = Math.ceil(byte_length / bc); 166 | 167 | let cursor = cursorref.current; 168 | 169 | let byte_x = Math.floor(cursor[0] / (bcols * ps)); 170 | let byte_y = Math.floor(cursor[1] / (brows * ps)); 171 | 172 | let byte_index = byte_y * bc + byte_x; 173 | 174 | let text_split = text.split(''); 175 | 176 | text_split[byte_index] = `${ 177 | text_split[byte_index] 178 | }`; 179 | 180 | let text_join = text_split.join(''); 181 | 182 | tref.current.innerHTML = text_join + '​'; 183 | 184 | let r = rref.current; 185 | 186 | r.width = wwref.current; 187 | r.height = br * brows * ps + rlh * 2; 188 | 189 | let rtx = r.getContext('2d'); 190 | 191 | rtx.fillStyle = 'white'; 192 | rtx.fillRect(0, 0, r.width, r.height); 193 | 194 | let binary = convert(text); 195 | 196 | rtx.fillStyle = 'black'; 197 | for (let brc = 0; brc < br; brc++) { 198 | for (let bcc = 0; bcc < bc; bcc++) { 199 | let byte = binary[brc * bc + bcc]; 200 | if (byte !== undefined) { 201 | for (let r = 0; r < brows; r++) { 202 | for (let c = 0; c < bcols; c++) { 203 | let bit = byte[r * bcols + c]; 204 | if (parseInt(bit) === 1) { 205 | let x = rlh + bcc * byte_width + c * ps; 206 | let y = rlh + brc * brows * ps + r * ps; 207 | rtx.fillRect(x, y, ps, ps); 208 | } 209 | } 210 | } 211 | } 212 | } 213 | } 214 | 215 | let d = dref.current; 216 | 217 | d.width = bc * bcols * ps + rlh * 2; 218 | d.height = br * brows * ps + rlh * 2; 219 | 220 | let dtx = d.getContext('2d'); 221 | 222 | dtx.lineWidth = 2; 223 | dtx.strokeStyle = 'cyan'; 224 | dtx.strokeRect( 225 | rlh + byte_x * bcols * ps, 226 | rlh + byte_y * brows * ps, 227 | bcols * ps, 228 | brows * ps 229 | ); 230 | 231 | dtx.strokeStyle = 'magenta'; 232 | dtx.strokeRect(rlh + cursor[0] - 1, rlh + cursor[1] - 1, ps + 2, ps + 2); 233 | 234 | // let area = aw * ah; 235 | // let img = imgref.current; 236 | // let iw = img.width; 237 | // let ih = img.height; 238 | // let ratio = iw / ih; 239 | // let sw = Math.floor(Math.sqrt(area * ratio)); 240 | // let sh = Math.floor(area / sw); 241 | // let source = document.createElement('canvas'); 242 | // source.width = sw; 243 | // source.height = sh; 244 | // let stx = source.getContext('2d'); 245 | // stx.drawImage(img, 0, 0, sw, sh); 246 | // let pixels = stx.getImageData(0, 0, sw, sh); 247 | // let r = rref.current; 248 | // let rtx = r.getContext('2d'); 249 | // let new_pixels = rtx.createImageData(aw, ah); 250 | // new_pixels.data.set(pixels.data); 251 | // r.width = wwref.current; 252 | // r.height = ah + rlh * 2; 253 | // rtx.fillStyle = 'white'; 254 | // rtx.fillRect(0, 0, r.width, r.height); 255 | // rtx.putImageData(new_pixels, ch * 2, rlh); 256 | // // rtx.imageSmoothingEnabled = false; 257 | // rtx.font = `${fs}px/${lh} custom`; 258 | // rtx.textBaseline = 'middle'; 259 | // rtx.fillStyle = 'black'; 260 | // let height = wrapText( 261 | // rtx, 262 | // text, 263 | // r.width - ch * 2 - aw, 264 | // rlh + rlh / 2 + 2, 265 | // aw + ch / 2, 266 | // fs * lh 267 | // ); 268 | // readoutref.current.innerHTML = `width: ${ 269 | // wwref.current 270 | // } image: ${iw}x${ih} (${Math.round((iw / ih) * 1000) / 271 | // 1000}) source: ${sw}x${sh} target: ${aw}x${ah} (${Math.round( 272 | // (aw / ah) * 1000 273 | // ) / 1000})`; 274 | } 275 | 276 | useEffect(() => { 277 | setSize(window.innerWidth); 278 | respond(); 279 | }, [kickoff]); 280 | 281 | useEffect(() => { 282 | if (window.innerWidth < 600) { 283 | setText(short_text); 284 | } 285 | setTimeout(() => { 286 | setKickoff(true); 287 | }, 0); 288 | }, []); 289 | 290 | useEffect(() => { 291 | respond(); 292 | }, [text]); 293 | 294 | function keyAction(key, repeat) { 295 | let km = keymap.current; 296 | let cursor = cursorref.current; 297 | let inc = ps; 298 | if (km['shift']) inc = ps * 2; 299 | 300 | if (km['j']) cursor[1] += inc; 301 | if (km['k']) cursor[1] -= inc; 302 | if (km['h']) cursor[0] -= inc; 303 | if (km['l']) cursor[0] += inc; 304 | 305 | if (km['d']) changeBit(1); 306 | if (km['e']) changeBit(0); 307 | 308 | respond(); 309 | 310 | if (key === 'w') { 311 | let link = document.createElement('a'); 312 | 313 | var revokeURL = function() { 314 | let me = this; 315 | requestAnimationFrame(function() { 316 | URL.revokeObjectURL(me.href); 317 | me.href = null; 318 | }); 319 | this.removeEventListener('click', revokeURL); 320 | }; 321 | 322 | rref.current.toBlob(function(blob) { 323 | link.setAttribute( 324 | 'download', 325 | `diptych-${new Date() 326 | .toISOString() 327 | .slice(0, -4) 328 | .replace(/-/g, '') 329 | .replace(/:/g, '') 330 | .replace(/_/g, '') 331 | .replace(/\./g, '')}Z.png` 332 | ); 333 | link.setAttribute('href', URL.createObjectURL(blob)); 334 | link.addEventListener('click', revokeURL); 335 | link.dispatchEvent( 336 | new MouseEvent(`click`, { 337 | bubbles: true, 338 | cancelable: true, 339 | view: window, 340 | }) 341 | ); 342 | }); 343 | } else if (key === 'i') { 344 | textarearef.current.focus(); 345 | let t = textarearef.current; 346 | t.selectionStart = t.selectionEnd = t.value.length; 347 | e.preventDefault(); 348 | } else if (key === '?') { 349 | setHelp(prevState => { 350 | return !prevState; 351 | }); 352 | } 353 | } 354 | 355 | function clickKey(key) { 356 | keyAction({ key: key }); 357 | } 358 | 359 | function setSize(width) { 360 | wwref.current = width; 361 | containerref.current.style.width = width + 'px'; 362 | } 363 | 364 | function downHandler(e) { 365 | let key = e.key.toLowerCase(); 366 | keymap.current[key] = true; 367 | keyAction(key, e.repeat); 368 | } 369 | 370 | function upHandler(e) { 371 | let key = e.key.toLowerCase(); 372 | keymap.current[key] = false; 373 | } 374 | 375 | useEffect(() => { 376 | window.addEventListener('keydown', downHandler); 377 | window.addEventListener('keyup', upHandler); 378 | return () => { 379 | window.removeEventListener('keydown', downHandler); 380 | window.removeEventListener('keyup', upHandler); 381 | }; 382 | }, [text]); 383 | 384 | return ( 385 |
386 |
402 | 411 | 419 | 420 |
421 |
422 |