​

​

//List of variable names

​

let BackgroundPage1;

let BackgroundPage2;

let BackgroundSound;

let font,

  fontsize = 30;

let input;

let submitButton;

let resetButton;

let startButton;

let startRandomButton;

let musicButton;

let greeting;

​

​

// Color Pattern Arrays that change on the home page, upon a mouse pressed action, programmed with a button.

​

let colors1 = ["#ffbe0b","#fb5607","#ff006e", "#8338ec", "#3a86ff"

];

let colors2 = ["#ef476f", "#ffd166", "#06d6a0", "#118ab2","#073b4c"];

​

// Size Increment Arrays, that change on the home page, upon a mouse pressed action, programmed with a button. 

​

let VerticalAxisTop = [100,120,100,80];

​

let VerticalAxisTop2 = [100,130,100,70];

​

let HorizontalAxisBottom = [300,330,600,680];

​

let HorizontalAxisBottom2 = [300,330,300,270];

​

//preloaded images, fonts and sounds

​

function preload() {

  // is loaded before setup() and draw() are called

  font = loadFont('Agbalumo-Regular.ttf');

  BackgroundPage1 =loadImage('BackgroundPage1.png')

  BackgroundPage2 =loadImage('BackgroundPage2.png')

  BackgroundSound= loadSound("190628__blimp66__sad-and-silly-vocal-tune.mp3");

}

​

// The function setup runs the background sound and generates the front cover art. I put the front cover art in its own function to ensure that it dissappears once the user presses "start" and proceeds to the Digtial MadLib Generator. 

function setup() {

    createCanvas(600, 800);

    background('lightgreen');

    BackgroundSound.play();

    generateFrontCoverArt();

// This button allows users to play with different color combinations on the cover art. 

  startRandomButton = createButton('PLAY WITH ME');

  startRandomButton.position(150, 750);

  startRandomButton.mousePressed(generateFrontCoverArt);

//this button allows users to start the MadLib, by essentially swithcing pages, to where the MadLib function is located.

  startButton = createButton('START');

  startButton.position(400, 750);

  startButton.mousePressed(madlibSection);

//these buttons are within the setup, because I realized putting them in the function generateFrontCoverArt, resulted in a loop upon pressing each button. But I talk more about this in my paper, within the challenges section.  

}

​

​

// I repurposed Assignment 1.1.4 switched it up by putting various shapes all around the canvas in various sizes. I then programmed four for loop statments that would assign a random location value (between Vertical and Horizatonal Axis Arrays). Programing the function within these for loops, and to a button,(Play with Me) stops the animation and creates a fun 'illusion' of mutiple shapes in one general location, when code wise their is only one. I also set fill for each shape to a random value of color themes (between Color Array 1&2). 

​

function generateFrontCoverArt(){

  background("black");

  for (i = 0; i < random(1000, 10000); i++){

      fill(random(colors1));

      square(400,600,500);

      fill(random(colors2));

      square(200,random(VerticalAxisTop),50);

  }

  for (i = 0; i < random(1000, 10000); i++){

      fill(random(colors2));

      circle(150,550,200);

      fill(random(colors1));

      square(random(VerticalAxisTop2),300,100);

  }

  for (i = 0; i < random(1000, 10000); i++){

      fill(random(colors1));

      square(400,250,190);

      fill(random(colors2));

      square(300,random(HorizontalAxisBottom),100);

  }

  for (i = 0; i < random(100, 10000); i++){

      fill(random(colors2));

      square(15,30,100);

      fill(random(colors1));

      circle(random(HorizontalAxisBottom2),240,150);

  }

​

// Front Page logo

  image(BackgroundPage2,150,300,330,330);

}

​

// This function allows music to play while the user is inputting madlibs. It is later programmed to a button, as I wanted to give the user a choice as music on a loop can be annoying at times. 

​

function PlayMusic(){

BackgroundSound.play();

}

​

// This is section is where the madlib function is hosted, programmed to the SUBMIT button. I created this so that the madlib function and home page of the game would not be altered by the press of any buttons, as I did not want to accidentally create a loop upon button presses. Here lies, the section greeting/instructions,created using a 'create element', in addtion to a image background, and text and button settings.

​

function madlibSection() {

​

// I deleted the start button and play with me buttons here

  startButton.remove();

  startRandomButton.remove();

    createCanvas(600, 800);

    background('lightgreen');

    rectMode(CENTER);

    image(BackgroundPage1,0,0,600,800)

    textFont(font)

    textAlign(LEFT);

    textSize(30);

    textWrap(WORD);

    fill("white");

    input = createInput();

    input.position(20, 100);

    input.size(500)

​

    resetButton =createButton('RESET'); 

    resetButton.position(input.x + input.width +5, 125);

    resetButton.mousePressed(resetMadLibGenerator);

    submitButton = createButton('SUBMIT');

    submitButton.position(input.x + input.width+5, 100);

    submitButton.mousePressed(madlib);

    musicButton = createButton('MUSIC');

    musicButton.position(input.x + input.width+5, 150);

    musicButton.mousePressed(PlayMusic);

​

    greeting = createElement('h3', 'Please enter your name, 1 color, preferred pronoun, 1 animal, 1 adverb,<br> 1 -ing verb, 1 book title, 1 postive adjective and 1 challenging hobby, all <br> seperated by spaces ONLY. If a book title or hobby is longer than one word, <br> seperate them by dashes.');

    greeting.style('color', 'white');

    greeting.style('font-family', 'Tahoma')

    greeting.style('font-size', '14px')

    greeting.position(20, 5);

}

​

// The following is the madlib fucntion. I made variables for user input and split string. By setting userinput to equal input value, and then splitString to equal the user inputs, I was able to  incorporate the user's selections into string statements, on screen.Essentially, the input strings where split into a array. 

​

// I made a function for madlib options, attached to an array of four different madlibs. I then made several variables, that represent different madlib user prompts, such as "name" or "pronoun".These variables will be upper cased upon entry, within the selected Madlib, on screen, to help the user see what parts of the story they influenced. Lastly, I set the selection of madlib options to random, to ensure, the user gets a randomized tale everytime. 

​

function madlib(){

  let userinput = input.value();

  let splitString = split(userinput, ' ');

  madlib_options = ['A', 'B','C','D'];

  let selection = random(madlib_options).toUpperCase();

  let madlib_name = splitString[0].replaceAll('-', ' ').toUpperCase();

  let madlib_color = splitString[1].toUpperCase();

  let madlib_pronoun = splitString[2].toUpperCase();

  let madlib_animal = splitString[3].toUpperCase();

  let madlib_adverb = splitString[4].toUpperCase();

  let madlib_verb_ing = splitString[5].toUpperCase();

// here longer inputs as a book titles or hobbies will be seperated by "-" to be more readable

  let madlib_book = splitString[6].replaceAll('-', ' ').toUpperCase();

  let madlib_emo = splitString[7].toUpperCase();

  let madlib_hobby = splitString[8].replaceAll('-', ' ').toUpperCase();

// This is a if else statment that links madlip pronoun to madlip possessive, to help keep grammer intact throughout the stories. This code also keeps me as the coder, from asking the user for another input, amongst a fairly long list. 

  let madlib_poss = '';

  if (madlib_pronoun=='HE'){

    madlib_poss = 'HIS';

  }

  if (madlib_pronoun=='SHE'){

    madlib_poss = 'HER';

  }

  if (madlib_pronoun=='THEY'){

    madlib_poss = 'THEIR';

  }

// This is a if else statement, tied to the varaible of madlib options. If the selection is A for example, the program will run string/ or story A and so forth.  

  if (selection == 'A') {

    string = `Out amongst the stars ${madlib_name} was traveling in ${madlib_poss} spaceship. That day, ${madlib_name} was headed towards Planet ${madlib_color} when suddenly ${madlib_pronoun}  noticed something peculiar in the distance. Upon inquiry, ${madlib_pronoun} realized that an intergalactic ${madlib_animal} happened to be ${madlib_adverb} ${madlib_verb_ing} whilst reading ${madlib_book}. The creature was so ${madlib_emo} ${madlib_name} felt inspired to embrace the randomness of life and finally decided to pick up ${madlib_hobby}.`

    textSize(20)

    text(string, 175, 150, 300)

  }

  if (selection == 'B') {

    string = `Once upon a time ${madlib_name} was walking in a forest. That evening ${madlib_name} happened to see ${madlib_color} rays of shimmering light , in the distance. Like magic, ${madlib_pronoun} suddenly bumped into a ${madlib_animal}  who happened to be ${madlib_adverb}  ${madlib_verb_ing} nearby. The two settled down by a campfire and decided to read ${madlib_book}  as the embers crackled. “What a ${madlib_emo} yet bizarre day..,I can tell we are going to be great friends” said ${madlib_name}.The creature nodded in agreement and said “Tomorrow, lets try ${madlib_hobby}!”`

    textSize(20)

    text(string, 175, 150, 300)  

  }

     if (selection == 'C') {

      string = `One morning, whilst brushing ${madlib_poss} teeth ${madlib_name}  noticed a rather large cavity in ${madlib_poss} tooth. ${madlib_pronoun}  decided to go to the dentist, for an emergency filling. The dentist arrived and began examining the issue. “Owww!” said ${madlib_name}. Suddenly, to the floor fell a ${madlib_color}  shell. ${madlib_pronoun} looked in awe as a tiny ${madlib_animal} hatched out and immediately began ${madlib_verb_ing}  ${madlib_adverb} around the procedure room. The dentist began reading ${madlib_book} and ${madlib_poss} ${madlib_emo} voice lulled the creature to sleep. Now a parent, ${madlib_name} was scared but grateful to be alive and decided to go back to school for ${madlib_hobby} something ${madlib_pronoun} had previously feared.`

      textSize(20)

      text(string, 175, 150, 300) }

  if (selection == 'D') {

      string = `One evening whilst ${madlib_name} was hiking across a local trail, ${madlib_pronoun} noticed someone up ahead handing out lemonade. As ${madlib_name} got closer, ${madlib_pronoun} became more and more confused, as the closer ${madlib_pronoun} got, the more the stranger looked like them…Upon meeting, the two gasped. Not only did they look just alike, but they were both wearing ${madlib_color}!  In fact, after chatting they also realized they both also had the same name ${madlib_name} and same pet ${madlib_animal}.  A few days later when their pets met the two started ${madlib_adverb} ${madlib_verb_ing} in complete unison. Though freaked out, each ${madlib_name} knew they were certainly a ${madlib_emo} pair for the ages!`

      textSize(20)

      text(string, 175, 150, 300) }

}

// This function is connected to a reset button, within the madlib section. It allows the user to restart the program, and clears the previous madlib, without going back to the setup page, (which in my case would be the front cover art)

​

function resetMadLibGenerator(){

    createCanvas(600,800)

    background("#6761A8")

    image(BackgroundPage1,0,0,600,800)

}

​

​

​

​