Comp 101 Funmoji

Disclaimer: This problem is due on Wednesday 4/24 at 11:59pm. Late submissions will be accepted through 4/26 at 11:59pm, however, note that office hours will close for the semester on LDOC at 5pm.

In this problem set you will break down a step-by-step process into related functions to construct a graphical emoji. Hence the name, funmoji.

This problem set requires you to complete the implementation of one function, funmoji, and implement at least three "helper functions" that your funmoji will make use of. Those helper functions will be responsible for 

1) establishing a background shape for your emoji, 

2) producing an eye graphic at any x,y coordinate, and

 3) producing a mouth that uses any given parameter color.

A very simple Emoji can earn full credit for this assignment and is a good initial target. However, if you are feeling particularly creative and looking for a challenge, feel encouraged to go beyond these minimal requirements and make something awesome. Here are some of the best submissions from a semester prior:

Tip #0: Before writing any code, sketch your emoji on graph paper. Aim to work in a coordinate system with x and y axes ranging from -100 to +100.

Tip #1: Be sure you understand and have already worked through the exercises in Lecture 29 - Working with Objects and Shapes. This lecture demonstrates all of the concepts you'll need to know in order to  complete this assignment.

Tip #2: Explore the library's documentation to familiarize yourself with what shape classes and capabilities are available for you to work with. In particular, look at:

  1. Circle
  2. Ellipse
  3. Rectangle
  4. Text
  5. Line
  6. Path

Tip #3: Can't decide what red, green, and blue values to fill your color with? Go to this site that helps you pick a color, and use the RGB Normalized Decimal values as the arguments for your Color object. For example, let lilac: Color = new Color(0.874, 0.207, 0.913).

Getting Started

As with in lecture, begin by opening up VSCode, ensuring your project is still open, and then running the following two commands in the VSCode Integrated Terminal:

  1. npm run pull
  2. npm start

Setting up the App

The starting files you'll need for this app are automatically added to the folder ps08-funmoji upon running "npm run pull"

funmoji.ts - Your work will be in this file. This is where you will write your functions.

Other files - You will not need to modify any of these files.

  1. art-script.ts - You do not need to modify this file. This is the "runner" for the application. From this file, our starter code is importing your funmoji function and adding the Group of shapes it generates to the web page. This file is also adding a coordinate grid to help you in the design process.
  2. Grid.ts - a helper file to generate a coordinate Grid.
  3. funmoji.html - the HTML web page that loads our code and has a Scalable Vector Graphics area tag that your shapes are being added to
  4. style.css - Some simple styles to be sure our graphics fill the entire screen and some other helper styles.

Honor Code Header

All problem sets begin with an Honor Code pledge. Notice this header is contained within the block comment tags discussed in Lecture 1. You can copy/paste the pledge below and fill in your name and ONYEN. Be sure that this pledge is completed in the file funmoji.ts for PS08.

/**    
 * Author:    
 * ONYEN:    
 * UNC Honor Pledge: I certify that no unauthorized assistance has been received   
 * or given in the completion of this work. I certify that I understand and 
 * could now rewrite on my own, without assistance from course staff,  
 * the problem set code I am submitting.
 */

A. Background Shape Helper Function

In funmoji.ts, define and export a function named backgroundShape. It should have no parameters and return any type of Shape you'd like or a Group of Shape objects with at least one Shape of any type added to the group. This will represent the "face shape" of your Emoji if you are making a face.

For starters, we suggest choosing a simple Shape like a Circle or a Rectangle.

After you've defined your backgroundShape function, call it from the funmoji function and add its return value to the shapes group. For an example of this, please see lecture 28.

Once you've done so, save your work and refresh your browser. You should see your background shape showing on the grid. Once it is, continue to tweak it by doing things like changing its dimensions, coordinates, fill color, or any property, until you're pleased with it.

B. Eye Helper Function

In funmoji.ts, after the definition of your backgroundShape function, define and export a function named eye. This function must have two number parameters named x and y, accordingly. The purpose of these parameters is to be able to position the shapes the function produces. This way, you can call this same function twice to add two eyes to your emoji and provide different x, y coordinates for each eye you add.

Your eye function must return a Group object with at least one Shape added to it. At least one of the shapes must be a Circle object whose center X and center Y properties are assigned the function's x and y parameters. You are encouraged to add other shapes, too. If a circle is not a part of your design, be creative and "layer over" the required circle with another shape. See lecture 28's cloud function for some guidance on how to implement a helper function that returns a Group of shapes.

Once your eye function is defined, call it at least twice from the funmoji function and add the returned Groups to funmoji's shapes group to place the two eyes on your design. Once you've added these calls, save and refresh your browser to further refine your design.

C. Mouth Helper Function

In funmoji.ts, after the definition of your eye function, define and export a function named mouth. This function must have a parameter of type Color named color. The Color parameter will be used to assign a custom fill color to a mouth shape. As with the eye function, mouth must also return a Group of shape objects.

At least one shape in the Group of objects returned must have its fill property assigned to be the function's color parameter.

Once you've defined the mouth function, call it from funmoji function and add the returned Group to the funmoji's shapes group.

Hint: You will need to construct a new Color object in funmoji in order to call mouth. Why?

Once you're satisfied with your emoji, you can remove the gridlines by commenting out line 16 in art-script.ts. Congratulations, you've just made your very own emoji!!!

D. Publish and Grade

With your program running in your web browser, find the green "Publish App" button. If you are not still logged into introcs.com, you will be prompted to log in, and then your app will be bundled and published to the web!

Once the grader is available, to submit for grading, first publish your project. Then, go to My101 in the top-right right corner of this page and select "Submit" next to the assignment. From here you should see a button that allows you to submit for grading. Your work will be graded through an automated process. If you receive points off, please select the "Report" link to see which tests did not pass. You can resubmit as many times as you'd like without penalty up until the deadline. We want you to keep working toward full credit on problem sets!