DEV Community 👩‍💻👨‍💻

Cover image for Flame Effect in Text Mode
artydev
artydev

Posted on

Flame Effect in Text Mode

Hy all,

Just for fun. I wanted to test how fast was SinousJS

I end up with this nice demo, hope you enjoy FlameDemo

Here is the code :

// sinuous all
!function(n,r){"object"==typeof exports&&"undefined"!=typeof module?r(exports):"function"==typeof define&&define.amd?define(["exports"],r):r((n=n||self).window=n.window||{})}(this,(function(n){function r(){return(r=Object.assign||function(n){for(var r=1;r<arguments.length;r++){var t=arguments[r];for(var e in t)Object.prototype.hasOwnProperty.call(t,e)&&(n[e]=t[e])}return n}).apply(this,arguments)}var t=function n(t,e,u,o){for(var f={},i=function(i){var a=e[i],l="number"==typeof a?u[a]:a,s=e[++i];if(1===s)o[0]=l;else if(3===s)o[1]=r(o[1]||{},l);else if(5===s)(o[1]=o[1]||{})[e[++i]]=l;else if(6===s){var v=e[++i],p=(o[1]=o[1]||{})[v],y=f[v];y||"function"!=typeof l&&"function"!=typeof p||(y=p&&[p]||[],o[1][v]=function(){for(var n="",r=0;r<y.length;r++)n+="function"==typeof y[r]?y[r].call(this):y[r];return c=i,n}),y?y.push(l):o[1][v]+=l+""}else if(s){var d=function(){return t.apply(null,n(t,l,u,["",null]))};o.push("function"==typeof o[0]?d:d())}else o.push(l);c=i},c=1;c<e.length;c++)i(c);return o},e=function(n){for(var r,t,e=1,u="",o="",f=[0],i=function(n){1===e&&(n||(u=u.replace(/^\s*\n\s*|\s*\n\s*$/g,"")))?f.push(n||u,0):3===e&&(n||u)?(f.push(n||u,1),e=2):2===e&&"..."===u&&n?f.push(n,3):2===e&&u&&!n?f.push(!0,5,u):e>=5&&((u||!n&&5===e)&&(f.push(u,e,t),e=6),n&&(f.push(n,e,t),e=6)),u=""},c=0;c<n.length;c++){c&&(1===e&&i(),i(c));for(var a=0;a<n[c].length;a++)r=n[c][a],1===e?"<"===r?(i(),f=[f],e=3):u+=r:4===e?"--"===u&&">"===r?(e=1,u=""):u=r+u[0]:o?r===o?o="":u+=r:'"'===r||"'"===r?o=r:">"===r?(i(),e=1):e&&("="===r?(e=5,t=u,u=""):"/"===r&&(e<5||">"===n[c][a+1])?(i(),3===e&&(f=f[0]),e=f,(f=f[0]).push(e,2),e=0):" "===r||"\t"===r||"\n"===r||"\r"===r?(i(),e=2):u+=r),3===e&&"!--"===u&&(e=4,f=f[0])}return i(),f},u=new Map,o=function(n){var r=u.get(this);return r||(r=new Map,u.set(this,r)),(r=t(this,r.get(n)||(r.set(n,r=e(n)),r),arguments,[])).length>1?r:r[0]},f=function(){var n=o.apply(this,arguments);if(n)return Array.isArray(n)?this(n):"object"==typeof n?n:this([n])};function i(){var n=f.bind(this);return(this.wrap||n).apply(n,arguments)}var c,a,l=[];function s(n){var r=c,t=function(){};c=t,_(t);var e=n((function(){b(t),c=void 0}));return c=r,e}function v(n){var r=c;c=void 0;var t=n();return c=r,t}function p(n){function r(t){if(0===arguments.length)return c&&!r.__o.has(c)&&(r.__o.add(c),c.u.push(r)),n;if(a)return r.t===l&&a.push(r),r.t=t,t;n=t;var e=c;return c=void 0,r.o=new Set(r.__o),r.o.forEach((function(n){return n.i=!1})),r.o.forEach((function(n){n.i||n()})),c=e,n}return r.$o=1,r.__o=new Set,r.t=l,r}function y(n,r){function t(){var e=c;c&&c.__c.push(t);var u=t.__c;return b(t),t.i=!0,c=t,r=n(r),u.forEach((function(n){-1===t.__c.indexOf(n)&&(n.i=!0)})),function n(r){return r.reduce((function(r,t){return r.concat(t,n(t.__c))}),[])}(t.__c).forEach(d),c=e,r}function e(){return t.i?t.u.forEach((function(n){return n()})):r=t(),r}return n.s=t,_(t),t(),e.$o=1,e}function d(n){n.i&&n.u.forEach((function(r){r.o&&r.o.delete(n)}))}function h(n){return c&&c.l.push(n),n}function w(n){return y(n),function(){return b(n.s)}}function b(n){n.__c.forEach(b),n.u.forEach((function(r){r.__o.delete(n),r.o&&r.o.delete(n)})),n.l.forEach((function(n){return n()})),_(n)}function _(n){n.u=[],n.__c=[],n.l=[]}var m={},A=[];function g(n){return this.t&&this.t[n.type](n)}m.h=function(){var r=Array.from(arguments);var e,u=function n(t){if(null==t);else if("string"==typeof t)e?m.add(e,t):e=m.s?document.createElementNS("http://www.w3.org/2000/svg",t):document.createElement(t);else if(Array.isArray(t))e||(e=document.createDocumentFragment()),t.forEach(n);else if(t instanceof Node)e?m.add(e,t):e=t;else if("object"==typeof t)m.property(e,t,null,m.s);else if("function"==typeof t)if(e){var u=m.add(e,"");m.insert(e,t,u)}else e=t.apply(null,r.splice(1));else m.add(e,""+t)};return r.forEach(u),e},m.insert=function(n,r,t,e,u){return n=t&&t.parentNode||n,u=u||e instanceof Node&&e,r===e||(e&&"string"!=typeof e||!("string"==typeof r||"number"==typeof r&&(r+=""))?"function"==typeof r?m.subscribe((function(){e=m.insert(n,r.call({el:n,endMark:t}),t,e,u)})):(t?e&&(u||(u=e.o&&e.o.nextSibling||t.previousSibling),m.rm(n,u,t)):n.textContent="",e=null,r&&!0!==r&&(e=m.add(n,r,t))):(null!=e&&n.firstChild?t?(t.previousSibling||n.lastChild).data=r:n.firstChild.data=r:t?m.add(n,r,t):n.textContent=r,e=r)),e},m.property=function(n,r,t,e,u){if(null!=r)if(!t||"attrs"===t&&(e=!0))for(t in r)m.property(n,r[t],t,e,u);else"o"!==t[0]||"n"!==t[1]||r.$o?"function"==typeof r?m.subscribe((function(){m.property(n,r.call({el:n,name:t}),t,e,u)})):u?n.style.setProperty(t,r):e||"data-"===t.slice(0,5)||"aria-"===t.slice(0,5)?n.setAttribute(t,r):"style"===t?"string"==typeof r?n.style.cssText=r:m.property(n,r,null,e,!0):("class"===t&&(t+="Name"),n[t]=r):function(n,r,t){r=r.slice(2).toLowerCase(),t?n.addEventListener(r,g):n.removeEventListener(r,g),(n.t||(n.t={}))[r]=t}(n,t,r)},m.add=function(n,r,t){var e=function(n){var r=n.childNodes;if(r&&11===n.nodeType)return r.length<2?r[0]:{o:m.add(n,"",r[0])}}(r=function(n){return"string"==typeof n?document.createTextNode(n):n instanceof Node?n:m.h(A,n)}(r))||r;return n.insertBefore(r,t&&t.parentNode&&t),e},m.rm=function(n,r,t){for(;r&&r!==t;){var e=r.nextSibling;n===r.parentNode&&n.removeChild(r),r=e}},m.subscribe=w,m.cleanup=h,m.root=s,m.sample=v,m.hs=function(){var n=m.s;m.s=!0;var r=M.apply(void 0,arguments);return m.s=n,r};var j,M=function(){return m.h.apply(m.h,arguments)},N=function(){return m.hs.apply(m.hs,arguments)},x={};function F(n){return function(){if(j)return(n?N:M).apply(null,arguments);var r;function t(u){null==u||(u===x||"function"==typeof u?r?e(r,u):r={type:u,__c:[]}:Array.isArray(u)?(r=r||{__c:[]},u.forEach(t)):"object"==typeof u?u.__c?e(r,u):r.__p=u:r?e(r,{type:null,__p:u}):r={type:u,__c:[]}),n&&(r.t=n)}function e(n,r){n.__c.push(r),r.o=n}return Array.from(arguments).forEach(t),r}}function S(n){return Array.from(n.childNodes).filter((function(n){return 3!==n.nodeType||n.data.trim()||n.i}))}var O=F(),$=F(!0),k={__proto__:null,v:x,d:O,dhtml:function(){return i.apply(O,arguments)},ds:$,dsvg:function(){return i.apply($,arguments)},hydrate:function n(r,t){if(r){"function"==typeof r.type&&(r=r.type.apply(null,[r.__p].concat(r.__c)));var e,u,o=void 0===r.type;return t||(t=document.querySelector(function n(r){var t,u="";if(r.__p&&(t=r.__p.id))u="#";else if(r.__p&&(t=r.__p.class))u=".";else if(!(t=r.type))return e=!0,r.__c&&n(r.__c[0]());return u+("function"==typeof t?t():t).split(" ").map((function(n){return n.replace(/([^\x80-\uFFFF\w-])/g,"\\$1")})).join(".")}(r))),[t,r.__p,r.__c||r].forEach((function t(f){if(f instanceof Node)(u=f).u=u.u||0;else if(Array.isArray(f))f.forEach(t);else if(u){var i,c,a,l,s,v=S(u)[u.u],p=function(n){u.u++,v.data.trim()!==n.trim()&&(f.o.__c.length!==S(u).length&&(v.splitText(v.data.indexOf(n)+n.length),i&&(c=i.match(/^\s*/)[0])),v.data.trim()!==n.trim()&&(v.data=n))};v&&(f===x?u.u++:"object"==typeof f&&(null===f.type&&3===v.nodeType?(v.i=!0,p(f.__p)):f.type&&(n(f,v),u.u++))),"function"==typeof f?(i=v?v.data:void 0,c="",m.subscribe((function(){j=a;var r=f();r&&r.__c&&(r=r.type?r:r.__c);var t="string"==typeof r||"number"==typeof r;r=t?c+r:r,a||!v&&!o?i=m.insert(u,r,l,i,s):(t?p(r):(Array.isArray(r)&&(s=v,v=u),e&&(v=u),n(r,v),i=[]),l=!e&&v?m.add(u,"",S(u)[u.u]):m.add(u.parentNode,"",u.nextSibling)),j=!1,a=!0}))):"object"==typeof f&&(f.__c||m.property(u,f,null,r.t))}})),u}}},C=self.S,L={__proto__:null,hydrate:k,noConflict:function(){return self.S=C,self.sinuous},html:function(){return i.apply(M,arguments)},svg:function(){return i.apply(N,arguments)},h:M,hs:N,api:m,map:function(n,r,t){var e=m.root,u=m.subscribe,o=m.sample,f=m.cleanup;null==t&&(t=!r.$t);var i=m.h([]),c=m.add(i,""),a=new Map,l=new Map,s=new Set;function v(n,u){if(null!=n){var o=l.get(n);return 1===u?(s.delete(n),o||(11===(o=t?e((function(t){return a.set(n,t),r(n.$v||n)})):r(n.$v||n)).nodeType&&(o=function(n){var r=n.childNodes,t=r.length;if(t<2)return r[0];var e=Array.from(r);return{nodeType:111,t:e[0],o:e[t-1],l:function(){if(r.length!==t)for(var u=0;u<t;)n.appendChild(e[u++]);return n}}}(o)||o),l.set(n,o))):-1===u&&s.add(n),function(n,r){return 111===n.nodeType?1/r<0?r?m.rm(n.t.parentNode,n.t.nextSibling,n.o.nextSibling)||n.t:n.o:r?n.l():n.t:n}(o,u)}}function p(n){var r=a.get(n);r&&(r(),a.delete(n)),l.delete(n)}return f(u((function(r){var t=n();return o((function(){s.clear();var n=Array.from(function(n,r,t,e,u){var o,f,i=new Map,c=new Map;for(o=0;o<r.length;o++)i.set(r[o],o);for(o=0;o<t.length;o++)c.set(t[o],o);for(o=f=0;o!==r.length||f!==t.length;){var a=r[o],l=t[f];if(null===a)o++;else if(t.length<=f)n.removeChild(e(r[o],-1)),o++;else if(r.length<=o)n.insertBefore(e(l,1),e(r[o],0)||u),f++;else if(a===l)o++,f++;else{var s=c.get(a),v=i.get(l);void 0===s?(n.removeChild(e(r[o],-1)),o++):void 0===v?(n.insertBefore(e(l,1),e(r[o],0)||u),f++):(n.insertBefore(e(r[v],1),e(r[o],0)||u),r[v]=null,v>o+1&&o++,f++)}}return t}(c.parentNode,r||[],t,v,c));return s.forEach(p),n}))}))),f((function(){a.forEach((function(n){return n()})),a.clear(),l.clear(),s.clear()})),i},S:y,cleanup:h,computed:y,isListening:function(){return!!c},o:p,observable:p,on:function(n,r,t,e){return n=[].concat(n),y((function(t){n.forEach((function(n){return n()}));var u=t;return e||(u=v((function(){return r(t)}))),e=!1,u}),t)},root:s,sample:v,subscribe:w,transaction:function(n){var r=a;a=[];var t=n(),e=a;return a=r,e.forEach((function(n){if(n.t!==l){var r=n.t;n.t=l,n(r)}})),t},unsubscribe:function(n){b(n.s)}};n.S=L,n.sinuous=L}));

const o = sinuous.o;
const html = sinuous.html; 
const msg  = o([]); 

let count  = o(0)
const MAXLIG = 150;
const SEED = 20000000

function updateList (m) {
  count(count() + 1)
  count() > MAXLIG 
    ? msg([...msg().slice(1), m]) 
    : msg([...msg(), m].reverse())
  requestAnimationFrame(() => updateList(Math.random() * SEED))
}
  function getLiItem (m,index) { 
    return html`
    <li style="
        font-weight:bold;
        font-size:120px;
        line-height:2px;
        letter-spacing:0;
        transform: scaleX(0.5825);

        color:rgba(${Math.min(255, index * 254)},${Math.min(255, index*1.3)}, 0  ,1);
        opacity:${0.3 * index/MAXLIG} ;
      ">
      ${m + " " }
    </li>`; 
}


function Title() {
  return html`
    <h1 id="T" style="
        opacity:0.7;
        color:white;
        text-align:center;
        position:relative;top:${
          () => 250 + (5 * Math.random() * count() ) % 5}px;
        z-index:1;
        font-size:100px"
      >
      Flame effect 
    </h1>
  `
}

function View () {
  return html`
    ${Title()}
    <ul style="
      list-style-type: none;
      margin:0;
      padding:0;
      position:relative;
      top:-30px;
      left:40px;
    "> 
      ${() => msg().map(getLiItem)}
    </ul>`
}

document.body.append(View());

updateList()

Enter fullscreen mode Exit fullscreen mode

Latest comments (0)

Classic DEV Post from 2020:

js visualized

🚀⚙️ JavaScript Visualized: the JavaScript Engine

As JavaScript devs, we usually don't have to deal with compilers ourselves. However, it's definitely good to know the basics of the JavaScript engine and see how it handles our human-friendly JS code, and turns it into something machines understand! 🥳

Happy coding!