├── README.md ├── font ├── Nova_Square │ ├── NovaSquare-Regular.ttf │ └── OFL.txt ├── nechao_sharp │ └── Nechao Sharp.ttf └── pcap_terminal │ ├── Font License.txt │ ├── PCap Terminal Bold Italic.otf │ ├── PCap Terminal Bold.otf │ ├── PCap Terminal Condensed Bold Italic.otf │ ├── PCap Terminal Condensed Bold.otf │ ├── PCap Terminal Condensed Italic.otf │ ├── PCap Terminal Condensed.otf │ ├── PCap Terminal Italic.otf │ └── PCap Terminal.otf ├── images └── readme.gif ├── index.html ├── js ├── index.js ├── renderDisplay.js └── wordsMove.js └── style └── style.css /README.md: -------------------------------------------------------------------------------- 1 | # JavaScript Matrix :sunglasses: 2 | 3 | 4 | 5 | ## Depois que vi o cmatrix no terminal, surgiu a ideia de fazer algo semelhante usando JavaScript. Nesse projeto de iniciativa pessoal, busquei desenvolver praticamente tudo usando JavaScript, utilizando métodos do window para calcular os tamanhos das fontes e a divisão da tela, sendo assim, a proporção mantem em qualquer display. 6 | ## Acesse a Página do Projeto 7 | 8 | 9 | 10 | 11 | ### Se gostou não se esqueça da :star: motivacional :grimacing: 12 | -------------------------------------------------------------------------------- /font/Nova_Square/NovaSquare-Regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Gonzagadavid/JavaScript-Matrix/64db496abf888f5d1fef8c198484553607f33fb3/font/Nova_Square/NovaSquare-Regular.ttf -------------------------------------------------------------------------------- /font/Nova_Square/OFL.txt: -------------------------------------------------------------------------------- 1 | Copyright (c) 2011, wmk69 (wmk69@o2.pl), 2 | with Reserved Font Name NovaSquare. 3 | 4 | This Font Software is licensed under the SIL Open Font License, Version 1.1. 5 | This license is copied below, and is also available with a FAQ at: 6 | http://scripts.sil.org/OFL 7 | 8 | 9 | ----------------------------------------------------------- 10 | SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007 11 | ----------------------------------------------------------- 12 | 13 | PREAMBLE 14 | The goals of the Open Font License (OFL) are to stimulate worldwide 15 | development of collaborative font projects, to support the font creation 16 | efforts of academic and linguistic communities, and to provide a free and 17 | open framework in which fonts may be shared and improved in partnership 18 | with others. 19 | 20 | The OFL allows the licensed fonts to be used, studied, modified and 21 | redistributed freely as long as they are not sold by themselves. The 22 | fonts, including any derivative works, can be bundled, embedded, 23 | redistributed and/or sold with any software provided that any reserved 24 | names are not used by derivative works. The fonts and derivatives, 25 | however, cannot be released under any other type of license. The 26 | requirement for fonts to remain under this license does not apply 27 | to any document created using the fonts or their derivatives. 28 | 29 | DEFINITIONS 30 | "Font Software" refers to the set of files released by the Copyright 31 | Holder(s) under this license and clearly marked as such. This may 32 | include source files, build scripts and documentation. 33 | 34 | "Reserved Font Name" refers to any names specified as such after the 35 | copyright statement(s). 36 | 37 | "Original Version" refers to the collection of Font Software components as 38 | distributed by the Copyright Holder(s). 39 | 40 | "Modified Version" refers to any derivative made by adding to, deleting, 41 | or substituting -- in part or in whole -- any of the components of the 42 | Original Version, by changing formats or by porting the Font Software to a 43 | new environment. 44 | 45 | "Author" refers to any designer, engineer, programmer, technical 46 | writer or other person who contributed to the Font Software. 47 | 48 | PERMISSION & CONDITIONS 49 | Permission is hereby granted, free of charge, to any person obtaining 50 | a copy of the Font Software, to use, study, copy, merge, embed, modify, 51 | redistribute, and sell modified and unmodified copies of the Font 52 | Software, subject to the following conditions: 53 | 54 | 1) Neither the Font Software nor any of its individual components, 55 | in Original or Modified Versions, may be sold by itself. 56 | 57 | 2) Original or Modified Versions of the Font Software may be bundled, 58 | redistributed and/or sold with any software, provided that each copy 59 | contains the above copyright notice and this license. These can be 60 | included either as stand-alone text files, human-readable headers or 61 | in the appropriate machine-readable metadata fields within text or 62 | binary files as long as those fields can be easily viewed by the user. 63 | 64 | 3) No Modified Version of the Font Software may use the Reserved Font 65 | Name(s) unless explicit written permission is granted by the corresponding 66 | Copyright Holder. This restriction only applies to the primary font name as 67 | presented to the users. 68 | 69 | 4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font 70 | Software shall not be used to promote, endorse or advertise any 71 | Modified Version, except to acknowledge the contribution(s) of the 72 | Copyright Holder(s) and the Author(s) or with their explicit written 73 | permission. 74 | 75 | 5) The Font Software, modified or unmodified, in part or in whole, 76 | must be distributed entirely under this license, and must not be 77 | distributed under any other license. The requirement for fonts to 78 | remain under this license does not apply to any document created 79 | using the Font Software. 80 | 81 | TERMINATION 82 | This license becomes null and void if any of the above conditions are 83 | not met. 84 | 85 | DISCLAIMER 86 | THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, 87 | EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF 88 | MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT 89 | OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE 90 | COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, 91 | INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL 92 | DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING 93 | FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM 94 | OTHER DEALINGS IN THE FONT SOFTWARE. 95 | -------------------------------------------------------------------------------- /font/nechao_sharp/Nechao Sharp.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Gonzagadavid/JavaScript-Matrix/64db496abf888f5d1fef8c198484553607f33fb3/font/nechao_sharp/Nechao Sharp.ttf -------------------------------------------------------------------------------- /font/pcap_terminal/Font License.txt: -------------------------------------------------------------------------------- 1 | Shareware/ Font License 2 | 3 | Pixel Sagas Freeware Fonts EULA (End User License Agreement) and Software Inclusion Agreement 4 | 5 | "Purchaser" and "User" may be used interchangeably in this agreement. 6 | 7 | "Pixel Sagas" and "Neale Davidson" may be used interchangeably in this agreement. These all refer to the intellectual and legal property of Neale Davidson. 8 | 9 | Usage 10 | 11 | Pixel Saga's Shareware Fonts are free to use for personal, non-commercial purposes. No payment is necessary to use Pixel Saga's Freeware Fonts for personal use, and there is no limit to the amount of prints, pages, or other medium to be produced using them. However, you cannot offer the font for commercial sale, or offer for direct download. The inclusion of the font name and/or site URL in the credits or documentation when it is used is appreciated, but this is not mandatory. 12 | 13 | Payment 14 | 15 | Payment is not required for the use of Pixel Saga's Shareware Fonts. Commercial use requires a modest fee which can be paid through the pixelsagas.com web site through Paypal.com's services. The transaction receipt for any shareware "commercial license" purchase will suffice as proof of license. 16 | 17 | Support 18 | 19 | Font installation help is available at http://www.pixelsagas.com. If you experience problems with any Pixel Saga's Freeware font (such as spacing issues or missing characters), please verify that you have the correct and current version of the fonts. In the case of Freeware fonts, downloading the font directly from the Pixel Sagas site will ensure that the font files have not been altered. 20 | 21 | Software Inclusion Agreement 22 | 23 | Pixel Saga's software products are protected by copyright laws and International copyright treaties, as well as other intellectual property laws and treaties. All Pixel Saga's software products are licensed, not sold. 24 | 25 | 1) GRANT OF LICENSE 26 | 27 | This document grants the user the following rights: 28 | 29 | Installation and Use. The user may install and use an unlimited number of copies of the software product. The user may not offer Pixel Sagas freeware fonts for direct download unless the user has received explicit, written permission from Neale Davidson. Otherwise please direct users to the http://www.pixelsagas.com website. Pixel Sagas freeware fonts may, however, be embedded for web, publication, or general software use. 30 | 31 | 2) WARRANTIES 32 | 33 | None 34 | 35 | Pixel Sagas expressly disclaims any warranty for the software product. The software product and any related documentation is provided "as is" without warranty of any kind, either express or implied, including, without limitation, the implied warranties or merchantability, fitness for a particular purpose, or non-infringement. The entire risk arising out of use or performance of the software product remains with the user. 36 | 37 | No Liability For Consequential Damages. 38 | 39 | In no event shall Neale Davidson or Pixel Sagas be liable for any damages whatsoever (including, without limitation, damages for loss of business profits, business interruption, loss of business information, or any other pecuniary loss) arising out of the use of or inability to use this product, even if Pixel Sagas has been advised of the possibility of such damages. 40 | 41 | 3) MISCELLANEOUS 42 | 43 | Should the user have any questions concerning this document or you desire to contact Neale Davidson for any reason, please email jaynz@pixelsagas.com . 44 | 45 | Governing Law 46 | 47 | This agreement is governed by and subject to the laws of the United States of America. 48 | -------------------------------------------------------------------------------- /font/pcap_terminal/PCap Terminal Bold Italic.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Gonzagadavid/JavaScript-Matrix/64db496abf888f5d1fef8c198484553607f33fb3/font/pcap_terminal/PCap Terminal Bold Italic.otf -------------------------------------------------------------------------------- /font/pcap_terminal/PCap Terminal Bold.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Gonzagadavid/JavaScript-Matrix/64db496abf888f5d1fef8c198484553607f33fb3/font/pcap_terminal/PCap Terminal Bold.otf -------------------------------------------------------------------------------- /font/pcap_terminal/PCap Terminal Condensed Bold Italic.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Gonzagadavid/JavaScript-Matrix/64db496abf888f5d1fef8c198484553607f33fb3/font/pcap_terminal/PCap Terminal Condensed Bold Italic.otf -------------------------------------------------------------------------------- /font/pcap_terminal/PCap Terminal Condensed Bold.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Gonzagadavid/JavaScript-Matrix/64db496abf888f5d1fef8c198484553607f33fb3/font/pcap_terminal/PCap Terminal Condensed Bold.otf -------------------------------------------------------------------------------- /font/pcap_terminal/PCap Terminal Condensed Italic.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Gonzagadavid/JavaScript-Matrix/64db496abf888f5d1fef8c198484553607f33fb3/font/pcap_terminal/PCap Terminal Condensed Italic.otf -------------------------------------------------------------------------------- /font/pcap_terminal/PCap Terminal Condensed.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Gonzagadavid/JavaScript-Matrix/64db496abf888f5d1fef8c198484553607f33fb3/font/pcap_terminal/PCap Terminal Condensed.otf -------------------------------------------------------------------------------- /font/pcap_terminal/PCap Terminal Italic.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Gonzagadavid/JavaScript-Matrix/64db496abf888f5d1fef8c198484553607f33fb3/font/pcap_terminal/PCap Terminal Italic.otf -------------------------------------------------------------------------------- /font/pcap_terminal/PCap Terminal.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Gonzagadavid/JavaScript-Matrix/64db496abf888f5d1fef8c198484553607f33fb3/font/pcap_terminal/PCap Terminal.otf -------------------------------------------------------------------------------- /images/readme.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Gonzagadavid/JavaScript-Matrix/64db496abf888f5d1fef8c198484553607f33fb3/images/readme.gif -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Matrix 8 | 9 | 10 | 11 | 12 |
13 |

Ocorreu um Erro: O arquivo JavaScript nao pode ser carregado

14 |
15 |
16 | 17 | 18 | 19 |

by David Gonzaga

20 |
21 | 22 | 23 | -------------------------------------------------------------------------------- /js/index.js: -------------------------------------------------------------------------------- 1 | import { calculationWidth } from './renderDisplay.js'; 2 | import { moveWord } from './wordsMove.js'; 3 | 4 | const container = document.getElementById('container'); 5 | container.innerHTML = ''; 6 | const containerWidth = +window 7 | .getComputedStyle(container) 8 | .width.replace(/px/g, ''); 9 | 10 | function matrixRender(string) { 11 | const arrayBig = document.querySelectorAll('.big'); 12 | const arrayMedium = document.querySelectorAll('.medium'); 13 | const arraySmall = document.querySelectorAll('.small'); 14 | const arrayElemnts = [...arrayBig, ...arrayMedium, ...arraySmall]; 15 | moveWord(string, arrayElemnts); 16 | } 17 | 18 | function matrixInit(e) { 19 | if (e.key === 'Enter') { 20 | const div = document.querySelector('.div-input'); 21 | div.style.display = 'none'; 22 | calculationWidth(containerWidth); 23 | matrixRender(e.target.value); 24 | } 25 | e.target.removeEventListener('keypress', (e) => matrixInit(e)); 26 | } 27 | 28 | const div = document.createElement('div'); 29 | div.className = 'div-input'; 30 | const input = document.createElement('input'); 31 | input.className = 'input-text'; 32 | input.spellcheck = false; 33 | input.style.fontSize = `${containerWidth * 0.045}px`; 34 | input.addEventListener('keypress', (e) => matrixInit(e)); 35 | div.appendChild(input); 36 | container.appendChild(div); 37 | input.focus(); 38 | -------------------------------------------------------------------------------- /js/renderDisplay.js: -------------------------------------------------------------------------------- 1 | const container = document.getElementById('container'); 2 | 3 | function createDiv(size, width) { 4 | const div = document.createElement('div'); 5 | div.style.width = `${width}px`; 6 | div.className = size; 7 | return div; 8 | } 9 | 10 | function createDisplay(containerWidth, bigSize, mediumSize, smallSize) { 11 | let limitSize = 0; 12 | 13 | while (limitSize < containerWidth) { 14 | container.appendChild(createDiv('small', smallSize)); 15 | limitSize += smallSize; 16 | container.appendChild(createDiv('medium', mediumSize)); 17 | limitSize += mediumSize; 18 | container.appendChild(createDiv('big', bigSize)); 19 | limitSize += bigSize; 20 | container.appendChild(createDiv('medium', mediumSize)); 21 | limitSize += mediumSize; 22 | } 23 | } 24 | 25 | function formatFont(array, size) { 26 | const sizeFont = parseInt(size - size * 0.5); 27 | for (let index = 0; index < array.length; index += 1) { 28 | array[index].style.fontSize = `${sizeFont}px`; 29 | } 30 | } 31 | 32 | function insertFormatFont(bigSize, mediumSize, smallSize) { 33 | const arrayBig = document.getElementsByClassName('big'); 34 | const arrayMedium = document.getElementsByClassName('medium'); 35 | const arraySmall = document.getElementsByClassName('small'); 36 | formatFont(arrayBig, bigSize); 37 | formatFont(arrayMedium, mediumSize); 38 | formatFont(arraySmall, smallSize); 39 | } 40 | 41 | function calculationWidth(containerWidth) { 42 | const bigSize = containerWidth * 0.06; 43 | const mediumSize = containerWidth * 0.04; 44 | const smallSize = containerWidth * 0.02; 45 | createDisplay(containerWidth, bigSize, mediumSize, smallSize); 46 | insertFormatFont(bigSize, mediumSize, smallSize); 47 | } 48 | 49 | export { calculationWidth }; 50 | -------------------------------------------------------------------------------- /js/wordsMove.js: -------------------------------------------------------------------------------- 1 | function randomIndex(size) { 2 | const arrayIndex = []; 3 | while (arrayIndex.length <= size) { 4 | const randomNumber = Math.round(Math.random() * size); 5 | if (!arrayIndex.includes(randomNumber)) arrayIndex.push(randomNumber); 6 | } 7 | return arrayIndex; 8 | } 9 | 10 | function createDiv(size, indice) { 11 | const div = document.createElement('div'); 12 | div.className = 'letter-green'; 13 | if (indice === 0) div.className = 'letter-white'; 14 | div.style.height = size + 'px'; 15 | return div; 16 | } 17 | 18 | function incrementAtributes(stringArray, objCont, size) { 19 | const div = createDiv(size, objCont.indice); 20 | if (objCont.indice < stringArray.length) { 21 | div.innerHTML = stringArray[objCont.indice]; 22 | } else { 23 | objCont.clearCont++; 24 | } 25 | objCont.indice += 1; 26 | objCont.cont += 1; 27 | return { objCont, div }; 28 | } 29 | 30 | function removeLast(cont, limit, element) { 31 | if (cont > limit) { 32 | element.removeChild(element.lastElementChild); 33 | } 34 | } 35 | 36 | function checkLimit(objCont, limit, element) { 37 | if (objCont.clearCont > limit) { 38 | element.innerHTML = ''; 39 | objCont = { indice: 0, clearCont: 0, cont: 0 }; 40 | } 41 | return { element, objCont }; 42 | } 43 | 44 | function addLetter(stringArray, arrObj, height) { 45 | const element = arrObj.element; 46 | const size = +element.style.fontSize.replace(/px/g, ''); 47 | const limit = Math.floor(height / size); 48 | let { objCont, div } = incrementAtributes(stringArray, arrObj.objCont, size); 49 | 50 | removeLast(objCont.cont, limit, element); 51 | element.insertAdjacentElement('afterbegin', div); 52 | return checkLimit(objCont, limit, element); 53 | } 54 | 55 | function intervalProgressive(arrayObj, stringArray, randomArray, height) { 56 | let limit = 0; 57 | const interval = setInterval((_) => { 58 | for (let index = 0; index < limit; index += 1) { 59 | let indice = randomArray[index]; 60 | arrayObj[indice] = addLetter(stringArray, arrayObj[indice], height); 61 | } 62 | if (limit < randomArray.length) { 63 | limit++; 64 | } 65 | }, 100); 66 | } 67 | 68 | function moveWord(string, arrayElemnts) { 69 | const height = +window.getComputedStyle(container).height.replace(/px/g, ''); 70 | const stringArray = string.split('').reverse(); 71 | const randomArray = randomIndex(arrayElemnts.length - 1); 72 | let arrayObj = arrayElemnts.map((el) => ({ 73 | element: el, 74 | objCont: { indice: 0, clearCont: 0, cont: 0 }, 75 | })); 76 | intervalProgressive(arrayObj, stringArray, randomArray, height); 77 | } 78 | 79 | export { moveWord }; 80 | -------------------------------------------------------------------------------- /style/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | } 4 | 5 | #container { 6 | display: flex; 7 | justify-content: center; 8 | width: 100vw; 9 | height: 100vh; 10 | background-color: black; 11 | font-family: nechao, monospace; 12 | color: rgb(4, 197, 4); 13 | } 14 | 15 | .div-input { 16 | display: flex; 17 | justify-content: center; 18 | align-items: center; 19 | width: 100vw; 20 | height: 100vh; 21 | 22 | } 23 | 24 | .input-text { 25 | width: 100%; 26 | word-break: break-all ; 27 | font-family: novaSquare, monospace; 28 | color: rgb(23, 243, 23); 29 | text-align: center; 30 | border: none; 31 | font-weight: lighter; 32 | background-color: black; 33 | } 34 | 35 | .input-text:focus { 36 | outline: none; 37 | } 38 | 39 | .small, .medium, .big { 40 | display: flex; 41 | align-items: center; 42 | flex-direction: column; 43 | height: 100vh; 44 | } 45 | 46 | .letter-green { 47 | color: rgb(153, 240, 119); 48 | text-shadow: 0px -10px 10px rgb(105, 247, 49); 49 | font-weight: 100; 50 | } 51 | 52 | .letter-white { 53 | color: rgb(255, 255, 255); 54 | text-shadow: 0px -10px 10px rgb(253, 255, 253); 55 | } 56 | 57 | .foot { 58 | background-color: rgb(00,00,00); 59 | display: flex; 60 | justify-content: center; 61 | align-items: center; 62 | font-size: 25px; 63 | opacity: 70%; 64 | height: 8%; 65 | position: absolute; 66 | bottom: 0; 67 | width: 100%; 68 | color: rgb(23, 243, 23); 69 | 70 | } 71 | 72 | .foot i { 73 | color: rgb(23, 243, 23); 74 | margin-right: 20px; 75 | font-size: 30px; 76 | } 77 | 78 | 79 | @font-face { 80 | font-family: novaSquare; 81 | src: url('./../font/Nova_Square/NovaSquare-Regular.ttf'); 82 | } 83 | 84 | @font-face { 85 | font-family: nechao; 86 | src: url('../font/nechao_sharp/Nechao\ Sharp.ttf'); 87 | } --------------------------------------------------------------------------------