Concept

For my final project, I made a radio that changes FM channels according to what value range you turn the potentiometer dial to. I inputted song files that play according to their designated serial monitor value and an array of different songs for each channel.

This includes:

• 51-240 (Hip Hop), which is designated the variable RED on p5
• 241-429 (History), variable YELLOW on p5
• 430-619 (Classic Rock), variable GREEN on p5
• 620-814 (Classical), variable TEAL on p5
• 815-1023 (Khaleeji), variable BLUE on p5

For 0-50 Radio is switched off (variable OFF on p5)

Implementation and Interaction

So, whenever you turn the dial to 267, for example, an audio file from the History channel will start to play, and the yellow LED will simultaneously light up to indicate the change in channels.

The interactive element comes from you turning the dial to change the channel, and being able to control the output according to what value you stop on.

Arduino Code

int potPin = A5; // potentiometer
int bluePin = 2;
int tealPin = 3;
int greenPin = 4;
int yellowPin = 5;
int redPin = 6;
int currentColor = 0; // current color
int OFF = 0;
int RED = 6;
int YELLOW = 5;
int GREEN = 4;
int TEAL = 3;
int BLUE = 2;

void setup() {
  pinMode (potPin, INPUT);
  pinMode (bluePin, OUTPUT);
  pinMode (tealPin, OUTPUT);
  pinMode (greenPin, OUTPUT);
  pinMode (yellowPin, OUTPUT);
  pinMode (redPin, OUTPUT);
  Serial.begin (9600); // serial monitor count
}

void loop() {

  // x == y (x is equal to y)
  // x != y (x is not equal to y)
  // x <  y (x is less than y)
  // x >  y (x is greater than y)
  // x <= y (x is less than or equal to y)
  // x >= y (x is greater than or equal to y)

  delay(100);
  int potMeasure = analogRead (A5);
  int mappedPot = map(potMeasure, 0, 1023, 0, 255);
  Serial.println(currentColor);

  if ((potMeasure > 0) && (potMeasure <= 50)) {
    currentColor = 0; 
    digitalWrite (redPin, LOW);
    digitalWrite (yellowPin, LOW);
    digitalWrite (greenPin, LOW);
    digitalWrite (tealPin, LOW);
    digitalWrite (bluePin, LOW);
    int OFF = 0;
  }
  else if ((potMeasure > 50) && (potMeasure <= 240)) {
    currentColor = 6;
    digitalWrite (redPin, HIGH);
    digitalWrite (yellowPin, LOW);
    digitalWrite (greenPin, LOW);
    digitalWrite (tealPin, LOW);
    digitalWrite (bluePin, LOW);
    int RED = 1;
  }
  else if ((potMeasure > 240) && (potMeasure < 430)) {
    currentColor = 5;
    digitalWrite (yellowPin, HIGH);
    digitalWrite (redPin, LOW);
    digitalWrite (greenPin, LOW);
    digitalWrite (tealPin, LOW);
    digitalWrite (bluePin, LOW);
    int YELLOW = 2;
  }
  else if ((potMeasure >= 430) && (potMeasure < 620)) {
    currentColor = 4;
    digitalWrite (greenPin, HIGH);
    digitalWrite (redPin, LOW);
    digitalWrite (yellowPin, LOW);
    digitalWrite (tealPin, LOW);
    digitalWrite (bluePin, LOW);
    int GREEN = 3;
  }
  else if ((potMeasure >= 620) && (potMeasure < 815)) {
    currentColor = 3;
    digitalWrite (tealPin, HIGH);
    digitalWrite (redPin, LOW);
    digitalWrite (yellowPin, LOW);
    digitalWrite (greenPin, LOW);
    digitalWrite (bluePin, LOW);
    int TEAL = 4;
  }

  else if ((potMeasure >= 815) && (potMeasure <= 1023)) {
    currentColor = 2;
    digitalWrite (bluePin, HIGH);
    digitalWrite (redPin, LOW);
    digitalWrite (yellowPin, LOW);
    digitalWrite (greenPin, LOW);
    digitalWrite (tealPin, LOW);
    int BLUE = 5;
  }
}

For my Arduino code, I essentially made it so that whenever the integer potMeasure (potentiometer value) is between a range of values, it would trigger the designated pin to light up.

For example, this segment of code here shows that whenever the potMeasure value is between or equivalent to 817 and 1023, all other pins but the bluePin are on LOW (to indicate them being switched off), and the bluePin is on HIGH (to indicate it being switched on). Each colored pin stands for each colored LED on the board.

else if ((potMeasure >= 817) && (potMeasure <= 1023)) { 
currentColor = 2; 
digitalWrite (bluePin, HIGH); 
digitalWrite (redPin, LOW); 
digitalWrite (yellowPin, LOW); 
digitalWrite (greenPin, LOW); 
digitalWrite (tealPin, LOW); 
int BLUE = 5; 
}

The currentColor integer encompasses each of the potMeasure ranges for each LED to light up, hence why if the serial monitor is between or equivalent to 815 and 1023, the value 2 would pop up as it is the designated value for the blue LED.

int potMeasure = analogRead (A5); 
int mappedPot = map(potMeasure, 0, 1023, 0, 255); 
Serial.println(currentColor);

p5 Code

For p5, I first uploaded all the audio files for each channel to function preload and designated each channel an array of audio files that p5 can randomly choose from.

soundFormats("mp3");
 // BLUE (KHALEEJI)
blueSong1 = loadSound ("MEHAD.mp3");
blueSong2 = loadSound ("UMY KM AHWAHA.mp3")
blueSounds = [blueSong1, blueSong2] // etc

I then designated a new variable called oldData in function draw, which holds the previous value of inData (serial monitor value/ potMeasure on Arduino).  This was done so that whenever the user changes the channel, p5 would stop the song from playing so as to not interrupt the next song.

// oldData holds the *previous* value of inData

// if user changes station, p5 checks that oldData has changed into inData
// then prints the change
if (inData != oldData) {
  // The station changed
   console.log("changed from " + oldData + " to " + inData);
  
  // stops all songs if inData (new station value) is not equal to oldData (old station value)
  redSong1.stop();
  redSong2.stop();
  yellowSong1.stop();
  yellowSong2.stop();
  greenSong1.stop();
  tealSong1.stop();
  blueSong1.stop();
  blueSong2.stop();

I then created an if statement for each inData value (BLUE in this context is the Khaleeji channel. Within each statement, there would be a new variable initializing the random selection of songs from the designated array, which it would then play.

if (inData == BLUE){
  khaleejiChannel = random(blueSounds)
  khaleejiChannel.play()
}

I then added more if statements further below within function draw, which consisted of the font and text to be displayed on the screen every time a channel is changed.

else if (inData == BLUE) { // KHALEEJI
    
    // CHANNEL NAME TEXT
    noStroke();
    fill (128,172,57); // text color
    textFont(radioFont, 45); // (font name, font size)
    text("KHALEEJI", 178, 148); // (text, x, y)
    glow(color(128,172,57), 19); // (color, intensity) calls glow function
    
  }

The glow variable refers to the glow function further below, which makes the text look like it’s lit up.

Audiovisual Communication between Arduino and p5

Arduino and p5 input:

• Potentiometer values

Arduino output (visual):

• LEDs lighting up

p5 output (audio):

• Songs being played

p5 Screen Design

Arduino Board

Video Demonstration

Click here to watch video demonstration

Highlights

• I’m proud of the fact that I was able to make an array for each channel without the program lagging.
• Figuring out the C++ coding for Arduino was challenging, but now I understand it enough to be able to modify it to include any last-minute changes.
• The p5 screen design (which I made on procreate).
• The glow function, which I was able to apply using this video tutorial:

Click here

Improvement

• Some other visual demonstration that indicates what channel you’re on. I would have liked for the background to possibly show the sound waves of the song playing and in the color of the designated channel.
• I also wanted to do something more for the physical presentation of the Arduino board, though I was able to customize it just a little using some card paper.

Concept Recap

For my final project, I decided to make a radio that changes FM values according to what number you turn the potentiometer dial to (I will input song files that play according to their designated serial monitor value).

Each range of values will take you to a different channel.

This includes:

• 4-204 (Hip Hop), which is designated the variable RED on p5
• 205-408 (Historic Events), variable YELLOW on p5
• 409-612 (Classic Rock/ Oldies), variable GREEN on p5
• 613-816 (Classical), variable TEAL on p5
• 817-1023 (Khaleeji), variable BLUE on p5

For 0-3 Radio is switched off (variable OFF on p5)

Design and Circuit

Still kind of stuck on what more to add to the bottom half of the p5 design, so it’s still subject to change!

Arduino circuit is done, but still trying to see if I can fit making a cardboard/ wood covering in time. 

Note:

I need to lengthen the potentiometer diodes as they aren’t as tall as the LEDs’ diodes (I want to make a simple cardboard covering that hides everything but the potentiometer and the LEDs– basically anything that isn’t going to be used by the user).

Updates

I added variables that would encompass the ranges on both Arduino and p5, so instead of the designated range numbers from 0-1023 popping up, the numbers 0-6 would pop up for each input in the serial monitor on p5/ Arduino.

• In p5, this is written in if statements:

else if (inData == GREEN) {

greenSongs(); // calls function that plays songs
// replace with randomized array?

noStroke();
fill (128,172,57); // text color
textFont(radioFont, 45); // (font name, font size)
text("CLASSIC ROCK", 142, 148); // (text, x, y)
glow(color(128,172,57), 19); // calls glow function

}

• In Arduino, this is done by simply adding the integer currentColor which would equal each value from 0-6 depending on what the potentiometer value is. For example:

else if ((potMeasure >= 409) && (potMeasure < 613)) {
  currentColor = 4;
  digitalWrite (greenPin, HIGH);
  digitalWrite (redPin, LOW);
  digitalWrite (yellowPin, LOW);
  digitalWrite (tealPin, LOW);
  digitalWrite (bluePin, LOW);
  int GREEN = 3;
}

Finalized concept

For my final project (I’m doing it solo), I decided to make a radio that changes FM values according to what number you turn the potentiometer dial to (I will input song files that play according to their designated serial monitor value).

Each range of values will take you to a different channel.

This includes:

• 4-204 (Hip Hop)
• 205-408 (Historic Events)
• 409-612 (Classic Rock/ Oldies)
• 613-816 (Classical)
• 817-1023 (Khaleeji)

For 0-3 Radio is switched off.

Assembly

To assemble the circuit, I connected 5 different color LEDs to a digital pin on the anode ends, and to each cathode, I connected a resistor. I then connected a potentiometer dial to an analog pin (along with 5V and GND).

Arduino Code

So far, my Arduino code works separately from p5. I’m having trouble connecting both, as I’m trying to convert the 1023 ASCII serial monitor values to p5 without having to change it to 255.

My code generally consists of if statements designating each range of potentiometer values to each LED.

Example:

if ((potMeasure > 3) && (potMeasure <= 204)) {
  digitalWrite (redPin, HIGH);
  digitalWrite (yellowPin, LOW);
  digitalWrite (greenPin, LOW);
  digitalWrite (tealPin, LOW);
  digitalWrite (bluePin, LOW);
}
else if ((potMeasure > 204) && (potMeasure < 409)) {
  digitalWrite (yellowPin, HIGH);
  digitalWrite (redPin, LOW);
  digitalWrite (greenPin, LOW);
  digitalWrite (tealPin, LOW);
  digitalWrite (bluePin, LOW);
}

The inputs are the LEDs, and the output is the single potentiometer.

p5 Code

I have the p5 code for the serial monitor that picks up values from 0-255, but I’m not sure how to change it so that it can pick up values from 0-1023.

I’m trying to make it so that when inData is between the designated range of values for each channel, it would display the channel name and also play a random song from the designated array of mp3 files.

p5 Screen Design

This is the design I made so far, but it of course could be subject to change later on!

Concept

I came up with two potential concepts so far:

1. A flappy bird-like game where a character goes up and down according to either:

• Value of photoresistor (how dark the area around it is determines whether the character goes up or down)
• Value of potentiometer (how the number you get from turning the dial determines whether the character goes up or down)
• Volume of voice
• Force Sensing Resistor

to avoid the protruding obstacles.

2. A radio that changes FM and AM values according to what number you turn the potentiometer dial to (I will input song files that play according to their designated potentiometer value).

• Each value will take you to a different era of music

Components

 Flappy Bird:

• p5, Arduino UNO, and breadboard
• Photoresistor OR potentiometer OR Force Sensing Resistor
• Wires
• LED?

Radio:

• p5, Arduino UNO, and breadboard
• Potentiometer(s) – possibly one for AM and one for FM?
• Wires

The circuits for both are relatively simple, I will use the serial monitor values to input into p5.

p5 Design Elements

Flappy Bird:

• Character
• Protruding obstacles
• Background
• Play and Game Over screens?

Radio:

• Vintage radio screen
• Dials design (AM/ FM dials on the screen move according to which potentiometer you move?)
• Serial monitor value displayed (with digital clock font) that change accordingly

Last week’s class exercise

Potentiometer and p5 Video

Daniel, Aayat, and I made it so that whenever you turn the potentiometer dial, the circle would either go up or down according to the serial value.

We did this by replacing the y coordinate of the ellipse to inData in p5 (which displays the serial value in numerical terms).

ref. to function draw () {}

p5 Code

// variable to hold an instance of the p5.webserial library:
const serial = new p5.WebSerial();
 
// HTML button object:
let portButton;
let inData;
// for incoming serial data
let outByte = 0;              // for outgoing data
 
function setup() {
  createCanvas(400, 300);          // make the canvas
  // check to see if serial is available:
  if (!navigator.serial) {
    alert("WebSerial is not supported in this browser. Try Chrome or MS Edge.");
  }
  // if serial is available, add connect/disconnect listeners:
  navigator.serial.addEventListener("connect", portConnect);
  navigator.serial.addEventListener("disconnect", portDisconnect);
  // check for any ports that are available:
  serial.getPorts();
  // if there's no port chosen, choose one:
  serial.on("noport", makePortButton);
  // open whatever port is available:
  serial.on("portavailable", openPort);
  // handle serial errors:
  serial.on("requesterror", portError);
  // handle any incoming serial data:
  serial.on("data", serialEvent);
  serial.on("close", makePortButton);
}
 
function draw() {
  
   background(0);
   fill(255);
   text("sensor value: " + inData, 30, 50);
  ellipse (200, inData, 50, 50)
  
}

// if there's no port selected, 
// make a port select button appear:
function makePortButton() {
  // create and position a port chooser button:
  portButton = createButton("choose port");
  portButton.position(10, 10);
  // give the port button a mousepressed handler:
  portButton.mousePressed(choosePort);
}
 
// make the port selector window appear:
function choosePort() {
  if (portButton) portButton.show();
  serial.requestPort();
}
 
// open the selected port, and make the port 
// button invisible:
function openPort() {
  // wait for the serial.open promise to return,
  // then call the initiateSerial function
  serial.open().then(initiateSerial);
 
  // once the port opens, let the user know:
  function initiateSerial() {
    console.log("port open");
  }
  // hide the port button once a port is chosen:
  if (portButton) portButton.hide();
}
 
// pop up an alert if there's a port error:
function portError(err) {
  alert("Serial port error: " + err);
}
// read any incoming data as a string
// (assumes a newline at the end of it):
function serialEvent() {
  inData = Number(serial.read());
  console.log();
  
}
 
// try to connect if a new serial port 
// gets added (i.e. plugged in via USB):
function portConnect() {
  console.log("port connected");
  serial.getPorts();
}
 
// if a port is disconnected:
function portDisconnect() {
  serial.close();
  console.log("port disconnected");
}
 
function closePort() {
  serial.close();
}

Arduino Code

void setup() {
  Serial.begin(9600); // initialize serial communications
}
 
void loop() {
  // read the input pin:
  int potentiometer = analogRead(A0);            
  // remap the pot value to fit in 1 byte:
  int mappedPot = map(potentiometer, 0, 1023, 0, 255); 
  // print it out the serial port:
  Serial.write(mappedPot); 

    // slight delay to stabilize the ADC:
  delay(1);                                                          
                                      
  
  // Delay so we only send 10 times per second and don't
  // flood the serial connection
  delay(100);
}

Concept

For this week’s assignment, Daniel and I constructed a musical instrument that measures the distance between the ultrasonic sensor and anything placed in front of it (i.e., your hand). Depending on how far you place your hand/ an object from the sensor, the piezo buzzer will play one of 8 different notes we inputted into the code.

To do this, we used a force-sensing resistor that you had to press on whenever you wanted the ultrasonic sensor to detect your hand and a piezo buzzer that would play the sound as output.

Inspiration:

https://www.youtube.com/watch?v=J8XNTHETgxU&list=PL9sNGWKp-dXUYcIGeJQFZ2mal6_zI-p5h&index=1&t=123s

Schematic

Code

int trig = 10; // digital 10
int echo = 11; // digital 11
long duration;
long distance;
int force;
 
 
void setup() {
 // runs once
 pinMode(echo, INPUT); // digital 11 
 pinMode(trig, OUTPUT); // digital 10
 Serial.begin(9600); // open serial monitor to track
}
 
void loop() {
 // runs repeatedly
 digitalWrite(trig, LOW);
 delayMicroseconds(2);
 digitalWrite(trig, HIGH);
 delayMicroseconds(10);
 digitalWrite(trig, LOW);
 duration = pulseIn(echo, HIGH);
 distance = (duration / 2 * 0.0344);
 
 int notes[7] = {233, 261, 293, 311, 349, 392, 440};
 //              Bb    C   D     Eb    F   G   A    
 
 force = analogRead(A0); // analog 0
 
 if (distance < 0 || distance > 50 || force < 100){
   noTone(12);
 
 } else if (force > 100){
   int sound = map (distance, 0, 50, 0, 7);
   tone(12, notes[sound]);
  
 }
}

The seven notes we inputted are:

• Do (233)
• Re (261)
• Mi (293)
• Fa (311)
• So (349)
• La (392)
• Ti (440)

Video

Daniel is shown playing Twinkle, Twinkle, Little Star using the instrument.

Link to video

Reflection and Improvements

• The ultrasonic sensor was very sensitive to movement very close to it, but the farthest note (Ti), was very hard to detect just because it was so far away from the sensor. This made the sound laggy when it came out of the piezo buzzer, which made the song sound very untuned and the note inconsistent.

Concept

I TRIED to make a circuit in which an LED could be powered on or off by a switch (button) and a photoresistor (light sensor). When you press the button, you can switch the LED on or off. When the LED is off, however, you can either switch it on by clicking the button, or by waving your hand or any other object on top of the photoresistor to cover it. This is because when the photoresistor is not exposed to much light, it can trigger the LED to switch on.

I followed a tutorial by Electronic Explorer on YouTube in order to figure out the photoresistor’s circuit configuration as well as the coding required to go with it.

To add the button to the circuit, I placed two green wires on either side that connected the button to the rest of the circuit.

• The problem with this, however, was that when I connected the button to the circuit, the photoresistor could no longer control the LED. The only way it could switch it on is by clicking the button.

I came up with another way to fix this, but I had to completely remove the button and keep the two wire ends that were connected to it exposed. This way, I could switch on the LED by either:

• Waving my hands over the photoresistor

OR

• Connecting the two exposed wires to each other to close the circuit

Video

Here’s a video of my brother showing you how to use it:

Code

int LDR = 0;
void setup() {
  pinMode(13, OUTPUT);
  pinMode(A0, INPUT);
  Serial.begin(9600);
}

void loop() {
  LDR = analogRead(A0);
  Serial.println(LDR);
  if(LDR < 512)
  {
    digitalWrite(13, 1);
  }
  else
  {
    digitalWrite(13, 0);
  }

}

Reflection and Improvements:

• I couldn’t figure out how to embed coding for the button (switch) so that the LED could either turn on from the button being pressed or the photoresistor being covered.
• I want to learn how to code proficiently on Arduino because I didn’t know how to resolve any of the problems I had when trying to adjust something in the circuit.
• I also wish I could’ve implemented more creativity overall (especially for the button which I couldn’t figure out how to connect).

Concept

For this week, I created a switch that turns the LED light on in my circuit every time you close the door. I attached aluminum foil balls on either end of both the red wire and black wire so that when they make contact, they would close the circuit.

Method

To do this, I scrunched up some aluminum foil that I could poke the wires into and then proceeded to stick them on. I stuck one wire on the door, and the other on the door frame. This way, whenever the two pieces of foil would touch each other, the current would flow through them to switch on the LED.

Result

It’s fairly simple, but that’s to be expected since it’s my first time using Arduino.

Reflection and Improvements:

• The aluminum foil balls kept falling off the wires and reattaching them every few minutes got pretty annoying.
• Couldn’t really open the door all the way just because the circuit was so small, I think expanding the circuit or even taping more wires together to lengthen them would’ve made my door switch better.

My concept (recap):

For my midterm, I made a Where’s Waldo? game where the player has to search for the Waldo character on the canvas and click on him to win. Waldo is randomly generated on the canvas every time you play, and he’s in a crowded background that you have to navigate through and look closely in order to find him. It’s relatively simple; a digital version of one of my favorite picture books from childhood.

Code highlight:

// splash sound (ocean) --> rect(0, 20, 512, 70)
if (mouseX > 0 && mouseX < 0 + 512 && mouseY > 20 && mouseY < 20 + 70) {
  if (!splash.isPlaying()) {
    splash.play();
  }
}

// boing sound (ball) --> rect (250, 307, 19, 19)
if (mouseX > 250 && mouseX < 250 + 19 && mouseY > 307 && mouseY < 307 + 19) {
  if (!boing.isPlaying()) {
    boing.play();
  }
}

// laughter sound (children running) --> rect (360, 125, 30, 30)
if (mouseX > 360 && mouseX < 360 + 30 && mouseY > 125 && mouseY < 125 + 30) {
  if (!laughter.isPlaying()) {
    laughter.play();
  }
}

// snore sound (people laying down) --> rect (153, 225, 47, 23)
if (mouseX > 153 && mouseX < 153 + 47 && mouseY > 225 && mouseY < 225 + 23) {
  if (!snore.isPlaying()) {
    snore.play();
  }
}

// ouch sound (man walking) --> rect (333, 207, 20, 32)
if (mouseX > 333 && mouseX < 333 + 20 && mouseY > 207 && mouseY < 207 + 32) {
  if (!ouch.isPlaying()) {
    ouch.play();
  }
}

I added sound effects that play whenever you hover over specific things or people on the canvas, which I thought added another fun dimension to my game.

• For example, if you hover your cursor over the ocean part of the scene, you can hear a water splash sound effect, or if you hover your cursor over the crowd of children running, you can hear a laughter sound effect.

Embedded sketch:

My game has 5 screens: the title screen, instruction screen, gameplay screen, win screen and lose screen. They are navigated via the draw function, which keeps track of the game’s state and calls functions whenever you insert the game state somewhere.

Full-screen version: https://editor.p5js.org/sara_almulla/full/SQwTp8Mj9

Reflection and improvements:

• I think adding more rounds would have definitely improved my game, but it took me a while to figure out how to sort everything out and debug my code– so much so that I didn’t have enough time to figure out how to embed another round into my sketch (and trust me, I tried).
• I also would have liked the game to be more interactive in terms of key pressing and mouse clicking as a form of navigation. My game is fairly simple, as all you need to do is click on Waldo to win.
• Keeping track of everything was a nightmare until the professor helped me out with the game states in function draw, and this made it easier for me to trigger certain functions without having to continuously navigate through the code and jumble things up.
• Advice from my peers also really helped me configure the game as well!

Concept

For my midterm, I’m planning on making a Where’s Waldo? game where the player has to search for the Waldo character on the canvas and click on him to win. Waldo is randomly generated on the canvas every time you play, and he’s in a crowded background that you have to navigate through and look closely in order to find him. It’s relatively simple; a digital version of one of my favorite books from childhood.

A highlight of some code that you’re particularly proud of

function setup() {
  createCanvas(512, 384);
  background(title);

  let red1 = color(237, 39, 36);
  startButton = createButton("START");
  startButton.mousePressed(drawInstructions);
  startButton.position(207, 299);
  startButton.style("font-family", "Optima bold");
  startButton.style("font-size", "30px");
  startButton.style("background-color", red1);
  
}

function drawInstructions() {
  background(237, 39, 36);
  startButton.remove();

This took way too long for me to figure out because I didn’t know how to use the remove syntax for startButton while also making sure it was a global variable that I could refer to in drawInstructions. Nevertheless, I’m glad I was able to eventually format it to do what I wanted in the end!

Embedded sketch

I have two separate sketches so far: one that contains the game itself and the win screen, and another that contains both the start screen and the instructions menu.

Try them out!

p.s. I haven’t yet inputted the reset sketch option, so you have to reset the program for it to work again.

Reflection and improvements

• Trying to get the start button to not be displayed on the screen when function drawInstructions is called. Took me a hot second to figure it out, as I realized I was either formatting something wrong or not implementing a global variable when I needed to.
• Possibly adding more characters to be found other than Waldo.
• Still trying to figure out how to make it so that when your mouse is within the image of Waldo and you click on him, it takes you to the win screen. For now, it’s just when your mouse is pressed anywhere on the screen, you win.
• I still have to embed the title screen and instructions into my game file, as well as a way to reset the game without having to restart p5js.

Concept

F0r my piece this week, I designed a generative text output sort of like madlibs. I made 3 strings of text files: adjectives, nouns, verbs, and one array: settings. Each of these strings/ arrays contained words I would refer to in function draw to randomly construct a sentence based on the formula I arranged.

The sentence structure was as follows:

• the ‘adjective’ ‘noun’ ‘verb’ ‘setting’

For example:

• the nutty professor danced into the night

Code highlight

function preload() {
  helveticaFont = loadFont("Helvetica-Bold-Font.ttf"); // downloaded font from online

  // loads text files as strings
  adjectives = loadStrings("english-adjectives.txt");
  nouns = loadStrings("english-nouns.txt");
  verbs = loadStrings("english-verbs.txt");

  // background i uploaded
  gradient1 = loadImage("gradient1.png");
}

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(gradient1);

  // loop to generate random stars on the bottom portion of canvas
  for (let i = 55; i < 250; i++) {
    fill(200, 150); // color of stars and transparency
    noStroke();
    circle(random(400), random(251, 400), random(1, 2));
  }

Finally kinda figured out loops, also surprised I knew how to use loadStrings… lol. 

Embedded sketch

Click on the canvas to randomly generate sentences.

It’s fun, trust me! My personal favorite is:

• the fat frog breakdanced into the metaverse

Reflection and improvements

• Would have liked to have made it so that when a specific setting would pop up, I would be able to generate a design that correlates with it. For example, if the setting “into the snow” gets generated, a snowfall design would pop up to go with it.
• The ‘settings’ string that referred to the text file I created would sometimes generate blanks, so I had to replace it with an array.
• Some sort of visual representation of the sentence constructed instead of just displaying the text.
• I’m still not fully competent using p5js, but I am getting more comfortable!