https://github.com/dimorphic/chappie-brain

Chappie Brain / Consciousness in HTML, CSS & JS (React, Angular 1, Angular 2, Canvas "flavors")
https://github.com/dimorphic/chappie-brain

angular benchmark canvas chappie insane javascript react

Last synced: 11 months ago
JSON representation

Chappie Brain / Consciousness in HTML, CSS & JS (React, Angular 1, Angular 2, Canvas "flavors")

• Host: GitHub
• URL: https://github.com/dimorphic/chappie-brain
• Owner: dimorphic
• License: gpl-3.0
• Created: 2015-10-24T17:36:48.000Z (over 10 years ago)
• Default Branch: master
• Last Pushed: 2021-11-27T10:09:17.000Z (over 4 years ago)
• Last Synced: 2025-03-30T05:31:43.973Z (about 1 year ago)
• Topics: angular, benchmark, canvas, chappie, insane, javascript, react
• Homepage: https://codepen.io/NyX/pen/xOgovR
• Size: 99.6 KB
• Stars: 9
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# Chappie Brain

[Chappie](http://www.imdb.com/title/tt1823672) inspired Brain / Consciousness animation recreated in HTML, CSS & JavaScript, available in multiple flavors: React, Angular 1, Angular 2 (RC1), Vue.js 2 and Canvas.

This was used as reference for my 'insane' test case presentation @ [Angular-vs-React](http://bit.ly/angular-vs-react).

This test is focused on a specific case, update items that is, and it's scores should be taken as is, and not as an overall score of one framework vs another. There are other libs out there that handle animations better. Do not do this at home! :)

#### Available branches (so far!):

1. [React demo](https://dimorphic.github.io/chappie-brain/react/) (branch brain-react) `~0.13.3`

2. Angular

  - [Angular 1 demo](https://dimorphic.github.io/chappie-brain/angular-1/) (branch brain-angular) `1.4.7`

  - [Angular 2 (RC1) demo](https://dimorphic.github.io/chappie-brain/angular-2/) (branch brain-angular-2) `2.0.0-rc.1`

3. Canvas

  - [ES5 demo](https://dimorphic.github.io/chappie-brain/canvas-es5/) (branch brain-canvas)

  - [ES6 demo](http://dimorphic.github.io/chappie-brain/canvas-es6/) (branch brain-canvas-es6)

4. [Vue.js 2 demo](https://dimorphic.github.io/chappie-brain/vue/) (branch brain-vue) `^2.0.3`

#### Preview

![brain-preview-demo](http://i.imgur.com/U0zdZkh.jpg)

### Some stats:

#### Sample size: 1120 cells (half retina screen @ 1440 x 1800 px)

![stats-half-screen-1120](https://user-images.githubusercontent.com/3442665/143621386-5b934609-9754-4a5c-81a5-b6804c96117e.png)

#### Sample size: 2240 cells (full retina screen @ 2880 x 1800 px)

![stats-full-screen-2240](https://user-images.githubusercontent.com/3442665/143621429-d002ec1a-029e-4621-bca7-b068c8b34dbe.png)

### Getting started

1. Clone the repo of desired flavor (brain-react, brain-angular or brain-canvas):

  

  `$ git clone -b brain-FLAVOR https://github.com/dimorphic/chappie-brain`

2. Get in there

  `$ cd chappie-brain`

  

3. Install dev & app depedencies:

  `$ npm install`

  

  `$ bower install` (not on ES6 branches, going npm all the way!)

  

4. Start it up:

  `$ npm start`

### Todo:

- [ ] Fix funky Angular 1 bug rendering only strings on initial load? (hit refresh!)

- [ ] test more libs/frameworks?

- [ ] TBA

### Contribution:

I've tried to keep things simple and make'em as fast as possible with each method/framework used.

I'm looking forward to any contributions or even other 'flavor' branches and tests. Go fork, go hacking! :)

### Credits:

* @Chappie creators: Thanks for the awesome movie!

* @James Whayman: Thanks for the color ranges! Sharing is caring <3