Loading

Brain Boot Sequence

How would it look if we could see our brain boot up? Thought it would be cool to make some kind of boot sequence based on the brain and its many regions and subsystems.

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>Brain Boot Sequence</title>
  <link href="https://fonts.googleapis.com/css?family=Playfair+Display:700,900" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

  <link rel='stylesheet prefetch' href='https://unpkg.com/ace-css/css/ace.min.css'>
<link rel='stylesheet prefetch' href='css/f79f913aca5d5798e0e424c0a.css'>

      <style>
      /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */
      #app {
  width: 500px;
}

.invisible {
  opacity: 0;
}

.min-width-05 {
  min-width: 5px;
}

.pre {
  white-space: pre;
}

.mb05 {
  margin-bottom: .125rem;
}

.transition-140ms {
  transition-duration: 140ms;
}

.transition-280ms {
  transition-duration: 280ms;
}

.transition-all {
  transition-property: all;
}

    </style>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>

</head>

<body>
  <main class="flex flex-column justify-start items-center">
  <div class="my3" id="app">
    <h2 class="ff-serif">
      Brain Boot Sequence
    </h2>
    <startup-sequence :systems="systems"></startup-sequence>
  </div>
</main>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.4/vue.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.0/anime.min.js'></script>
<script src='https://wzrd.in/standalone/charming@latest'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.min.js'></script>

    <script  src="js/index.js"></script>

</body>
</html>
/* Downloaded from https://ahoj.co.uk/ */
#app {
  width: 500px;
}

.invisible {
  opacity: 0;
}

.min-width-05 {
  min-width: 5px;
}

.pre {
  white-space: pre;
}

.mb05 {
  margin-bottom: .125rem;
}

.transition-140ms {
  transition-duration: 140ms;
}

.transition-280ms {
  transition-duration: 280ms;
}

.transition-all {
  transition-property: all;
}
/* Downloaded from https://ahoj.co.uk/ */
'use strict';

var StatusCodes = [{
  code: 2000,
  message: 'Operational'
}, {
  code: 5001,
  message: 'Decoupling failed'
}];

var checkStatusCodeRange = function checkStatusCodeRange(statusCode) {
  if (_.inRange(statusCode, 5000, 6000)) return 'error';
  if (_.inRange(statusCode, 4000, 5000)) return 'warning';
  if (_.inRange(statusCode, 2000, 3000)) return 'ok';
  return 'error';
};

var Icon = Vue.component('icon', {
  name: 'icon',
  props: {
    icon: {
      type: String,
      default: 'radio_button_unchecked'
    },
    size: {
      type: Number,
      default: 20
    }
  },
  template: '<i :class="classes.default" :style="styles.default" v-text="icon"></i>',
  computed: {
    styles: function styles() {
      return {
        default: {
          fontSize: this.size + 'px'
        }
      };
    },
    classes: function classes() {
      return {
        default: 'material-icons'
      };
    }
  }
});

var SystemsCheckItem = Vue.component('systems-check-item', {
  name: 'systems-check-item',
  props: {
    name: {
      type: String,
      default: 'Undefined'
    },
    statusCode: {
      type: Number,
      default: 5000
    },
    itemLabelClasses: {
      type: String,
      default: ''
    },
    iconSize: {
      type: Number,
      default: 20
    },
    itemContainerClasses: {
      type: String,
      default: ''
    },
    ready: {
      type: Boolean,
      default: false
    }
  },
  template: '\n    <li :class="classes.item">\n      <div :class="classes.container">\n        <div>\n          <span ref="itemLabel" :class="classes.itemLabel" v-text="name"></span>\n        </div>\n        <div class="flex items-center">\n          <span v-text="ready ? getTypeLabel(statusCode) : \'Checking...\'" class="h5 gray"></span>\n          <icon :class="classes.statusIcon" :icon="ready ? itemIcon : \'radio_button_unchecked\'" :size="iconSize"></icon>\n        </div>\n      </div>\n      <slot></slot>\n    </li>',
  computed: {
    classes: function classes() {
      return {
        item: '',
        itemLabel: '' + this.itemLabelClasses,
        container: 'flex items-center justify-between ' + this.itemContainerClasses,
        statusIcon: (this.ready ? this.getStatusColor(this.statusCode) : 'silver') + ' h2 ml2 transition-280ms transition-all'
      };
    },
    itemLabel: function itemLabel() {
      return this.$refs.itemLabel;
    },
    itemLabelCharacters: function itemLabelCharacters() {
      return this.itemLabel.getElementsByTagName('span');
    },
    itemIcon: function itemIcon() {
      if (_.eq(checkStatusCodeRange(this.statusCode), 'error')) return 'highlight_off';
      if (_.eq(checkStatusCodeRange(this.statusCode), 'warning')) return 'info_outline';
      return 'radio_button_unchecked';
    }
  },
  methods: {
    charm: function charm(target) {
      return Promise.resolve(charming(target, {
        classPrefix: 'inline-block invisible pre char'
      }));
    },
    animateItemLabel: function animateItemLabel() {
      return anime({
        targets: this.itemLabelCharacters,
        opacity: [0, 1],
        translateX: [3, 0],
        delay: function delay(el, i) {
          return 50 * i;
        }
      });
    },
    getStatusColor: function getStatusColor(statusCode) {
      if (_.eq(checkStatusCodeRange(this.statusCode), 'ok')) return 'green';
      if (_.eq(checkStatusCodeRange(this.statusCode), 'error')) return 'red';
      if (_.eq(checkStatusCodeRange(this.statusCode), 'warning')) return 'orange';
      return 'silver';
    },
    getTypeLabel: function getTypeLabel(statusCode) {
      var whereCodeEqualsStatusCode = function whereCodeEqualsStatusCode(c) {
        return _.eq(c.code, statusCode);
      };
      var code = StatusCodes.find(whereCodeEqualsStatusCode);
      if (!_.isUndefined(code)) return code.message;
      return 'Unknown problem detected';
    },
    check: function check() {
      var _this = this;

      setTimeout(function () {
        _this.ready = true;
      }, _.random(100, 8000));
    }
  },
  mounted: function mounted() {
    this.charm(this.itemLabel).then(this.animateItemLabel).then(this.check);
  },

  components: {
    Icon: Icon
  }
});

var SystemsCheck = Vue.component('systems-check', {
  name: 'systems-check',
  props: {
    systems: {
      type: Array,
      default: function _default() {
        return [];
      }
    }
  },
  template: '\n    <ul class="list-reset">\n      <systems-check-item \n       v-for="(system, systemIndex) of systems" \n       :key="systemIndex" \n       :name="system.name" \n       :status-code="system.status"\n       item-label-classes="bold"\n       item-container-classes="mt2">\n         <systems-check-item \n          v-if="system.subsystems" \n          v-for="(subsystem, subsystemIndex) of system.subsystems" \n          :key="subsystemIndex"\n          :name="subsystem.name"\n          :status-code="subsystem.status"\n          item-container-classes="h5 pl1 mb05"></systems-check-item>\n      </systems-check-item>\n    </ul>',
  components: {
    SystemsCheckItem: SystemsCheckItem
  }
});

var StartupSequence = Vue.component('startup-sequence', {
  name: 'startup-sequence',
  props: {
    systems: {
      type: Array,
      default: function _default() {
        return [];
      }
    }
  },
  template: '\n    <div>\n      <systems-check :systems="systems"></systems-check>\n    </div>',
  components: {
    SystemsCheck: SystemsCheck
  }
});

new Vue({
  el: '#app',
  data: function data() {
    return {
      systems: [{
        name: 'Rhombencephalon',
        status: 2000,
        subsystems: [{ name: 'Myelencephalon', status: 2000 }, { name: 'Metencephalon', status: 2000 }]
      }, {
        name: 'Mesencephalon',
        status: 4000,
        subsystems: [{ name: 'Tectum', status: 2000 }, { name: 'Pretectum', status: 5001 }, { name: 'Tegmentum', status: 2000 }, { name: 'Cerebral peduncle', status: 2000 }, { name: 'Mesencephalic cranial nerve nuclei', status: 2000 }, { name: 'Mesencephalic duct', status: 2000 }]
      }, {
        name: 'Prosencephalon',
        status: 2000,
        subsystems: [{ name: 'Diencephalon', status: 2000 }, { name: 'Epithalamus', status: 2000 }, { name: 'Third ventricle', status: 2000 }, { name: 'Thalamus', status: 2000 }, { name: 'Hypothalamus', status: 2000 }, { name: 'Subthalamus', status: 4001 }, { name: 'Pituitary gland', status: 2000 }, { name: 'Telencephalon', status: 2000 }, { name: 'White matter', status: 4000 }, { name: 'Subcortical', status: 2000 }, { name: 'Rhinencephalon', status: 5000 }, { name: 'Cerebral cortex', status: 2000 }]
      }, {
        name: 'Neural Pathways',
        status: 2000,
        subsystems: [{ name: 'Superior longitudinal fasciculus', status: 2000 }, { name: 'Motor Systems', status: 2000 }, { name: 'Somatosensory system', status: 2000 }, { name: 'Visual system', status: 5001 }, { name: 'Auditory system', status: 2000 }, { name: 'Nerves', status: 2000 }]
      }, {
        name: 'Neuro Endocrine Systems',
        status: 2000,
        subsystems: [{ name: 'Hypothalamic-pituitary hormones', status: 2000 }, { name: 'Hypothalamic–neurohypophyseal system', status: 2000 }]
      }, {
        name: 'Neuro Vascular Systems',
        status: 2000
      }, {
        name: 'Dural Meningeal System',
        status: 2000
      }]
    };
  },

  components: {
    StartupSequence: StartupSequence
  }
});

This awesome code is write by Anders Schmidt Hansen, you can se more from this user in the personal repository