Typewriter example

[amyjko]

What's the problem?

There aren't very many writing related examples in the galleries at the moment; it seems like a missing genre that might resonate with youth who want to create more writing-oriented applications. One fun idea might be a typewriter like application, for writing messages in typewriter style.

@joonpiter @thesmolcoder our design proposal has been updated!

What's the design idea?

The essence of the idea would be to have a blank canvas and a cursor and that keystrokes would be typed onto the screen, with enter keys creating new lines and backspace deleting characters. There could be fun animations to simulate the head hitting paper.

This typewriter will behave “naughty” and will produce unexpected behavior such as jamming on keys and messing up a user’s sentence with random characters, fonts, and colors!

Design specification

Basic typewriter design

This design aims to create a new visualization in galleries that will represent an on screen typewriter that can be recreated within Wordplay’s coding workspace.

This visualization will be an imitation of a traditional typewriter, where as a user types a key on their keyboard, the corresponding letter will appear on screen as fresh ink slightly “fading out” utilizing an opacity animation.

For an actual typewriter, pressing harder results in darker text. However, it’s hard to track how hard the user presses in Wordplay. Thus, in this design, we propose incorporating a random fadeout effect on the text. This effect will not be animated but will occur immediately after the user types.

An example of the word “Typewriter” fading out.

As the user begins to type, the location of the next character will be to the right of the previous character. Once a line limit has been reached, depending upon font size, the location of the following character will begin on the next line so as to imitate the carriage of a typewriter beginning on the next line.

Specific Algorithms and Rule for implementation:

• We decided on this typewriter rule that users are not allowed to change the font size when they start working on one paper, which means the font size for one single paper is fixed.
• For the code logic, we could first set a fixed line length. Then, we can use the algorithm to keep track of the total number of letters being pressed on one single line and use that total number of letters to time the width of the current font size to determine whether the line limit has been reached.

The end of a line, at the border of the page.

User’s will also have the option to backspace, however, this will follow the behavior of traditional typewriter’s, where the character will be printed atop of the backspace location. An example of a user backspacing and typing over a character with another.

This visualization will default to font color black (hex code #000000), background color light sand (hexcode #EEE7D7), and font size of 12 point/16 pixel for web accessibility. Random color changes supported will include those that are visablly accessible against the background color. Font size changes will always be equal to or larger than 12 point/16 pixel.

Wordplay’s typewriter behavior

Because traditional typewriters only contain letters, numbers, symbols, and the space bar as a part of their keyboard, users will be restricted to these, with nothing happening if any other key is pressed (such as function or tab).

Wordplay’s typewriter will be difficult to worth with, exhibiting behavior like “jamming” on a key by refusing to type a character on screen unless it is typed multiple times. This amount of times a character must be pressed in order to appear will be random, ranging anywhere from 2 to 10 times.

Normally, typewriters “jam” when too many keys are pressed at the same time. However, for simplicity of code, we decided that 2 to 6 presses will be required instead, with the amount of presses required to print the character being chosen randomly. The jamming behavior should only occur after 15 characters have been typed, in order for the user to get used to typing. After the first 15 characters have been typed, any character from then on may get jammed. However, the amount of times this occurs is selected randomly, anywhere from 0 to 15 times on any random character. Since it is random, there is a possibility that a character will have the jamming behavior right after another just did.

It’ll randomly insert characters within the middle of typing or change font colors to create chaos around the final result. The character insertions will occur at a frequency of 1-2 out of 10 characters. The total number of random characters that can be inserted is based on the lines users have typed. For color change, there will be a consistent set of colors that follows the WCAG to be picked from randomly. The purpose of this typewriter is to be “naughty” or “defective” and refuse to follow the expected behavior of a traditional typewriter.

Visualization Examples

Paper Design

Ink Indicator

Type Writer Full Screen

Research on types of typewriters

• Typewriters are not as old and slow as we thought! The IBM Electric Typewriter surprised me. The typewriter 40 years ago used a letter ball instead of the typebar, which is easy to get stuck on. It even supports backspace by erasing the letter that you already typed.
• Differences between modern computer keyboards and typewriter keyboards: The keyboard on a typewriter only has letters, numbers, symbols, and space. There is no function keys like the modern computer (e.g., alt, shift). A lot of the typewriters do not have the deletion (“backspace”) key because it does not allow deletion. Yet, some electric typewriters do.
• Different colors on a typewriter: The standard ink color for typewriters is typically black. However, many typewriters also use a two-color ribbon, commonly black and red, allowing the user to switch between colors. Later on, more color ribbons are introduced, so people can replace color ribbons and type out green and blue letters.
• Font size: Standard font size is 12 points.

[velazjoc]

Hi @amyjko this seems interesting to start, is there any way I could get assigned to this?

[amyjko]

Assigned!

[ericazqyy]

Hi @amyjko, I am also pretty interested in this issue. Can I collaborate with @velazjoc?

[amyjko]

You should ask @velazjoc! You're welcome to collaborate together if you're both agreeable to it.

[joonpiter]

Hey! @velazjoc and @ericazqyy I would like to start working on this issue as well with yall

[ericazqyy]

Hi Isabel,

Welcome! We were wondering if you are in section today, so we can work on it together!

Best, Erica Zhang

On Mon, May 6, 2024 at 5:31 PM Isabel Amaya @.***> wrote:

Hey! @velazjoc https://urldefense.com/v3/__https://github.com/velazjoc__;!!K-Hz7m0Vt54!iuC2dxnTenCsdcbNLlojhbLZQ2fhM19LXgK2lWUbPQ-pVQlHypJiBZHVGV-O4vkvaVmNJawQkZjBGYyRX391MgQ$ and @ericazqyy https://urldefense.com/v3/__https://github.com/ericazqyy__;!!K-Hz7m0Vt54!iuC2dxnTenCsdcbNLlojhbLZQ2fhM19LXgK2lWUbPQ-pVQlHypJiBZHVGV-O4vkvaVmNJawQkZjBGYyRXxgXaus$ I would like to start working on this issue as well with yall

— Reply to this email directly, view it on GitHub https://urldefense.com/v3/__https://github.com/wordplaydev/wordplay/issues/432*issuecomment-2097145981__;Iw!!K-Hz7m0Vt54!iuC2dxnTenCsdcbNLlojhbLZQ2fhM19LXgK2lWUbPQ-pVQlHypJiBZHVGV-O4vkvaVmNJawQkZjBGYyRWeInxlg$, or unsubscribe https://urldefense.com/v3/__https://github.com/notifications/unsubscribe-auth/A3M7W4AYCLWNJQD2NZ57FWDZBAOGPAVCNFSM6AAAAABFPXDY4WVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDAOJXGE2DKOJYGE__;!!K-Hz7m0Vt54!iuC2dxnTenCsdcbNLlojhbLZQ2fhM19LXgK2lWUbPQ-pVQlHypJiBZHVGV-O4vkvaVmNJawQkZjBGYyRZi6lT5k$ . You are receiving this because you were mentioned.Message ID: @.***>

[velazjoc]

Hey! @velazjoc and @ericazqyy I would like to start working on this issue as well with yall

@joonpiter Hi! We're in section today towards the front, but if you aren't here today just give us your discord username so we can add you to the groupchat!

[joonpiter]

Hi, for some reason I didnt get a notification for your comments, ill just work on reviewing your design for now!

[joonpiter]

• The proposal mentions that letters will "fade out" using an opacity animation. How long will this animation take, and will it affect the readability of longer texts if they start fading too quickly?
• You state that new lines will begin once a line limit is reached based on font size. Is there a specific algorithm or rule for determining this limit? What happens if the font size changes mid-line due to the typewriter's "naughty" behavior?
• Jamming will occur randomly, requiring 2 to 10 presses for a character to appear. How frequently should this jamming behavior occur to balance frustration and fun?
• The typewriter will randomly insert characters and change font sizes/colors. How frequently will these random insertions occur? Is there a cap on how many random characters can be inserted in a single sentence or document?
• Finally, the proposal outlines random color and size changes. Will a consistent set of colors and sizes exist, or will these be entirely random? How will accessibility be maintained if the colors contrast poorly with the background?

[iamvivian03]

• The proposal mentions that letters will "fade out" using an opacity animation. How long will this animation take, and will it affect the readability of longer texts if they start fading too quickly?
• You state that new lines will begin once a line limit is reached based on font size. Is there a specific algorithm or rule for determining this limit? What happens if the font size changes mid-line due to the typewriter's "naughty" behavior?
• Jamming will occur randomly, requiring 2 to 10 presses for a character to appear. How frequently should this jamming behavior occur to balance frustration and fun?
• The typewriter will randomly insert characters and change font sizes/colors. How frequently will these random insertions occur? Is there a cap on how many random characters can be inserted in a single sentence or document?
• Finally, the proposal outlines random color and size changes. Will a consistent set of colors and sizes exist, or will these be entirely random? How will accessibility be maintained if the colors contrast poorly with the background?

Hi @joonpiter! Here's our brainstorming Ideas for these questions:

• The proposal mentions that letters will "fade out" using an opacity animation. How long will this animation take, and will it affect the readability of longer texts if they start fading too quickly?

• For an actual typewriter, pressing harder results in darker text. However, it’s hard to track how hard the user presses. Thus, in this design, we propose incorporating a random fadeout effect on the text. This effect will not be animated but will occur immediately after the user types.

• You state that new lines will begin once a line limit is reached based on font size. Is there a specific algorithm or rule for determining this limit? What happens if the font size changes mid-line due to the typewriter's "naughty" behavior?

• We decided on this typewriter rule that users are not allowed to change the font size when they start working on one paper, which means the font size for one single paper is fixed.
• For the code logic, we could first set a fixed line length. Then, we can use the algorithm to keep track of the total number of letters being pressed on one single line and use that total number of letters to time the width of the current font size to determine whether the line limit has been reached.

• Jamming will occur randomly, requiring 2 to 10 presses for a character to appear. How frequently should this jamming behavior occur to balance frustration and fun?

• Normally, typewriters “jam” when too many keys are pressed at the same time. However, for simplicity of code, we decided that 2 to 6 presses will be required instead, with the amount of presses required to print the character being chosen randomly. The jamming behavior should only occur after 15 characters have been typed, in order for the user to get used to typing.
• After the first 15 characters have been typed, any character from then on may get jammed. However, the amount of times this occurs is selected randomly, anywhere from 0 to 15 times on any random character. Since it is random, there is a possibility that a character will have the jamming behavior right after another just did.

• The typewriter will randomly insert characters and change font sizes/colors. How frequently will these random insertions occur? Is there a cap on how many random characters can be inserted in a single sentence or document?

• We have decided the frequency to be 1~2/10. So, the total number of random characters that can be inserted is based on the lines users have typed.

• Finally, the proposal outlines random color and size changes. Will a consistent set of colors and sizes exist, or will these be entirely random? How will accessibility be maintained if the colors contrast poorly with the background?
• After consideration, we have decided to stick to random color changes, and the size will remain consistent throughout the page.
• There will be a consistent set of colors that follows the WCAG to be picked from randomly.

[joonpiter]

@iamvivian03, thanks for the response. Would you edit your proposal to reflect your current decisions, and then we can revise from there?

[ericazqyy]

@iamvivian03, thanks for the response. Would you edit your proposal to reflect your current decisions, and then we can revise from there?

Yes, I have updated the proposal with our current decisions along with some visualization examples!

[velazjoc]

Status: Open issue Work Completed: We began the basic design requirements and initial proposal of a writing-oriented typewriter gallery example. Our research consisted of understanding what vintage and modern typewriter's looked and behaved like in order to build up the basic typewriter visualization. Our visualization examples showcase what it could look like. Furthermore, we outlined the behavior of a fun and silly "Wordplay" typewriter that misbehaves by refusing to act like a normal typewriter. Our proposal is only the start of an idea and can be modified to become more feasible. Materials: Research and figma designs have been included as text and photos in the main body issue, as well as the specific design requirements to create the typewriter. Contributers: @ericazqyy @iamvivian03 @yishiz2 @velazjoc

[amyjko]

@velazjoc @ericazqyy @iamvivian03 @yishiz2, thank you for the update. Are you continuing your work on this? If not, please unassign yourselves, so everyone knows.