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 @amyjko 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.

Fading out: 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.

Line limit: 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 or style 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.

Type: To align with Wordplay’s goal of supporting all global languages, this typewriter adopts modern keyboard rules instead of the traditional typewriter format. Users can type using their computer keyboard.

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.

Font: This visualization will default to font color black (hex code #000000), background color white (hexcode #FFFFFF), and font size of 12 point/16 pixel for web accessibility. Users can switch text color between red and black by pressing the "Esc" button. 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, delete 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). the rules of functional keys follows the layout of a typical PC keyboard.

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

Starting view (no text entered):

Light theme:

Dark theme:

With random "fade out" effect:

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.

[iamvivian03]

Hi @amyjko @joonpiter @thesmolcoder, I just updated the design proposal, with the main changes in the Design Specification and Visualization Examples sections.

[amyjko]

Nice update! Overall, it seems like a fun experience. A few thoughts:

• Wordplay doesn't support and isn't designed for creating graphics. But the design involves many graphics. (Paper, button chrome, etc). If you haven't yet, learn the platform and it's limitations before finalizing your design, so you're sure it's possible to create.
• Why have an on screen keyboard? This limits the characters that can be typed on the keyboard and imposes accessibility challenges on anyone that cannot use a pointing device, slowing text entry. Perhaps your rationale was to closely mimic a keyboard for English? Since the goal of Wordplay is to support all of the world's languages (and making an on screen keyboard for all languages would be wayyyyy to much work), and another goal is accessibility, these design choices seem in conflict with the goals of the platform. Why not just rely on the operating system for text entry, using whatever input device it supports?

[iamvivian03]

Hello @amyjko, I've updated the revised design, fixing the issue from before. The design looks complete unless there are any functional issues.

[amyjko]

@iamvivian03 That's great! Will you also be implementing this example?

[iamvivian03]

@iamvivian03 That's great! Will you also be implementing this example?

Status: Open issue(design completed, need implementing) I won’t be continuing with this next quarter. I'll unassign myself to make it available for others to assign.