Week 4 – Displaying text

Week 4 – Displaying Text

For this project, I wanted to make something fun, so I created a random law generator. The goal was to create absurd but still convincing-sounding fake laws that feel like they could exist in some strange town. The program works by randomly generating a town name, a weird law, and an exception. When the user clicks on the canvas, a new random law appears. As for the visual aspect, the law is displayed on a lined piece of paper with a pencil next to it. I added a brown background to make it look like the paper is resting on a wooden table.

One of the main parts of the project is how the laws are randomly generated and displayed:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
function generateLaw() {
let town = random(towns);
let action = random(illegalActions);
let exception = random(exceptions);
randomLaw = `In the town of ${town}, it is illegal to ${action} ${exception}.`;
}
function generateLaw() { let town = random(towns); let action = random(illegalActions); let exception = random(exceptions); randomLaw = `In the town of ${town}, it is illegal to ${action} ${exception}.`; }
function generateLaw() {
  let town = random(towns);
  let action = random(illegalActions);
  let exception = random(exceptions);

  randomLaw = `In the town of ${town}, it is illegal to ${action} ${exception}.`;
}

This selects a random town name from the towns array and picks a random illegal action from illegalActions. Then it selects a random exception from exceptions and combines them into an absurd law.

I faced a few challenges I had to overcome, including correctly aligning the pencil. At first, the pencil eraser and tip didn’t align properly with the body, so I had to adjust the x and y positions carefully to ensure the pencil remained vertical. Additionally, the lines on the paper were too bold, which made it feel unrealistic so I had to adjust the stroke colour and spacing.

Overall, I am satisfied with the way this turned out as it was a fun way to practice generative text output in p5.js. I learned how randomization in programming can create entertaining and unexpected results. Additionally, I had another chance to explore loops, which were useful for drawing repetitive elements like notebook lines. However, there are a few things I could improve on next time like including a hand holding the pencil or making the paper slightly curved for a more realistic effect. I also thought of an interesting element I could add, where I may add a “law history” section that can keep track of the previous laws.

Leave a Reply