Assignment 3: Interactive Artist NPC with Generative Grammars

Objectives

Learn how to implement parsers for generative grammars and to explore the potential of grammars as a generative method.

Description

Generative Grammars can be used to generate a variety of structured sequences of symbols that are part of a vocabulary. The meaning of these symbols depends on the generative context (e.g. characters, words, colors, musical notes, video game levels, movement instructions, etc). In this assignment, you will  use nondeterministic grammars to implement an interactive NPC that can generate either drawings, stories or music.  Your p5.js sketch will represent a NPC as a (2D or 3D) geometry (e.g. square, circle, cube, etc) on the screen. It will also have a player character represented as a (2D or 3D) geometry. As a player, you should be able to move towards the NPC and if you are close enough you should be able to  press a key to interact with it.  When you interact with a NPC, a dialog box should appear. Through this dialog box, the NPC should introduce itself with a message and offer to generate a little piece of art. You will use a grammar to generate a short piece  of art or your choice ( among drawing, story or music). To accomplish this assignment:

1. Create a new Processing (P5.js) sketch in a directory called "asg3" with at least four five: "index.html",  "sketch.js", "parser.js", "dialog.js" and "npc.js".
2. Write (in parser.js) a GenerativeGrammar class with the necessary properties and methods to expand a given axiom with a given set of symbols and production rules for a given amount of generations.
   • This grammar has to be nondeterministic. In other words, it has to support multiple production rules  for the same nonterminal symbol. 
   • The production rules and their probabilities should be given as an argument to the constructor of the GenerativeGrammar class.
3. Write (in dialog.js) a DialogBox class  with the necessary properties and methods to draw an interactive dialog box on the screen with text and/or shapes within the boundaries of the box.
   • This class should support affirmative sentences as well as questions with yes/no answers.  To answer a question, the player should press "y" or "n".
   • All the text and/or shapes drawn are assumed to fit on this dialog box, so you don't have  to implement scrolling or paging.
4. Write (in npc.js) a NPC with the necessary properties and methods to generate a short piece of art of your choice given a axiom as input.
   • Use your GenerativeGrammar class to expand this axiom. Implement a method to interpret the expanded string as either drawing, story or music.
   • Use your DialogBox class to display the generated content.
5. Instantiate (in sketch.js) an NPC and implement the necessary functions to handle the player interaction.
   • Player character should move with arrow keys.
   • When player is near (e.g. 10 pixels) the NPC, press "space" to display a dialog box.
   • The first message that appears is a greeting message directly followed by a question (e.g. "Hi, my name is Ana!" Do you want me to tell you a story?)
   • Player should be able to press "y" or "n" to accepted or reject. If "y", generate a new piece of art and display the content on the dialog box. Then, ask if the player wants a new piece. If "n", close the dialog box.  Every new generated piece should be different given that your grammar is nondeterministic.

Resources

• Synthesize notes in p5.js Links to an external site.

Submission

Host your source code on Github and upload the following on Canvas:

1. A zip file with the final version of your code.
2. A link (as a comment to your submission) to this assignment's github page. This page should have examples (.png or .gif) of outputs of your world generator with a brief explanation (1 paragraph) of what (and how) the grammar was used to generate the art pieces.