Acrostic Machine


Acrostic was used very often to encrypt a message by hiding the first word or characters into seemingly unrelated passages. It can use in any language to encrypt a code. For example, we call it '藏头诗' in Chinese by organizing the information as a poem.

For my acrostic generator, I designed a way for people to generate an array of words when the first word could be combined and decrypt as the message. I turn this array of words to be something random/unrelated but only makes sense when reading them sequentially. Then use the button press to clear the message to destroy it after people got the word list.

Design Process

1.Calling api
2.Load Data and turn the data into p5 element
3.Use array and random function to set the position of text
4.Use Jquery to remove div content.


Firstly, I want to range the word sequentially on the P5 canvas. However, the words I later transferred into acrostics are a whole list and were hard to break down as a 2D array. I haven't got a solution to this arrangement.
Secondly, there is an issue of jquery to remove the element inside the div tag. It only removes the contents, but in p5js, the html() function will still read it as an element in the array. So there will be more and more rectangles left on the screen. I want to delete these blank div tags.
Also, the color I added to the project will make it more visually pleased.