Historic Tale Construction Kit - Bayeux
Craft thy own Bayeux Tapestry
Slay mischievous beasts
Rule the kingdom
Two German students originally wrote the Historic Tale Construction Kit, with Flash. Sadly, their work isn't available anymore, only remembered. This new application is a tribute, but also an attempt to revive the old medieval meme, with code and availability that won't get lost.
This brand new Historic Tale Construction Kit allows you to
- Drag, drop, scale, rotate any item from the Bayeux image bank
- Do the same with text with different fonts and colors
- Bring elements to the front/back of the scene (this is life changing)
- Work on several images (pages) at once
- Export those pages as PNG or as GIF
- Save a working copy of your tapestry to your disk, to finish it later
- Use brushes to quickly add crowds, birds, or battlefield
- Use keyboard shortcuts for almost all of the above
- Download a standalone version to use it anywhere without any server
This kit is based on the Bayeux Tapestry, a 70-meters long piece of art telling the story of the Battle of Hastings. However, every Bayeux-related pictures, fonts and settings are stored in a single folder, that can be easily swapped with, say, Japanese Prints, Cave Painting, whatever your heart desires.
Feel free to fork this project and create your own Historic Tale Construction Kit with anything that comes to mind :)
To do so, put your content to the
content folder and index it in the config.js file.
This kit is written mostly using RaphaelJS and AngularJS, but it also uses a bunch of really cool libraries, such as angular-hotkeys, canvg, FileSaver.js, Raphael.FreeTransform, Raphael.json, gifshot, Canvas-to-Blob. They helped us build an app that works everywhere, client-side without the need for any back-end. Huge thanks to them.
If you want to work on the Historic Tale Construction Kit by yourself, you can use the vagrant box by launching
vagrant up. Attention, you will need to have admin rights if you want to run it on windows. Or set up a development environnement.
Setting up a development environnement
If you do not want to use vagrant, you will need to install the following globally
sudo apt-get install nodejs sudo npm install npm -g sudo npm install -g bower sudo npm install -g grunt-cli
Then either way go to the
htck folder and install dependencies using
npm install bower install
You can then run a development server using the command
If you experienced a bug, we're sorry! If you can fix it, we gladly accept pull requests. If you can't, you can still open an issue here on GitHub and we will try to address it shortly.
This project is MIT-licensed and any open source contribution is welcome!