Comp 110 Dank Memes

PS0 - hello, world

In this problem set, you'll write code to construct a new MemePhoto object and give it some commands to set the image and add text to it. This problem set is primarily an exercise in ensuring your Java and Eclipse programs are properly installed, familiarize you with how we distribute starter code for problem sets, and take you through the on-line submission process.


Part A. Install the Java 8 JDK and Eclipse

Hopefully you've done this already! If not, go ahead and follow the instructions found here.

Part B. Install the Starter Code for PS0

To get started, follow these steps to install the "Starter Code" for PS0.

  1. Start Eclipse
  2. Select and copy the following link to your clipboard: https://github.com/comp110/17S-PS00-DankMemes.git
  3. Click the File menu
  4. Select "Import"
  5. Double click "Git" to expand the folder
  6. Double click "Projects from Git"
  7. Double click "Clone URI". (For Macs, you may also have to "Install Command Line Tools".)
  8. The "URI" field should already have the URI you copied in Step 2 in it. If it does not, paste the URI from step 2 in it. Click next.
  9. Ensure there's a check beside of "master". Click next.
  10. In the "Directory" field, click "Browse". Navigate to your documents folder and select the COMP110 folder. Click next.
  11. Ensure "Import existing Eclipse projects" is selected. Click next.
  12. Ensure the 17S-PS00-DankMemes folder is checked. Click finish.

Part C. Write your first lines of code!

1. On the left-hand side of Eclipse you should see a folder titled "17S-PS0-DankMemes" located in the "Package Explorer" tab. Expand the folder.

2. Expand the 'src' folder. "SRC" is short for "Source [code]". This is the folder where your project code will be written.

3. Expand the 'comp110' package. We will discuss packages in more depth later on. Essentially, though, they're just like folders for organizing your code.

4. Double click the file "DankMemeApp.java" to open it up. This is where you'll begin writing your code!

You will notice there are a lot of words, weird characters, and special colors in this file and it can look intimidating. Don't worry, you'll understand all of this soon enough. For now you just need to find two places in your code to edit.

1. The "Header" is a special piece of text toward the top of the file where you need to fill in your name and ONYEN in order to get credit for the assignment. This also acts as a digital signature confirming you did not collaborate with anyone other than UTAs on this assignment. You will need to be sure to do this for all problem sets moving forward.

2. Find the code comments that begins with "Your code will go below this line." A code comment is English text in a program that we write for ourselves or other humans to read. The Java programming language completely ignores comments. To the computer, when you run your program, it's as if these lines don't even exist. We will cover how to add your own comments in class.

3. Go ahead and type in these three lines below the code comment (and before the first closing curly brace):

MemePhoto meme = new MemePhoto();
meme.setImageUrl("http://i.imgur.com/8zHc4GP.jpg");
meme.setTopText("hello, world");

Be careful that you get each character, punctuation mark, and capitalization completely correct. You should not see any red underlines in your code.

Now try running your code by pressing the green circular button with the white play triangle inside of it in Eclipse's top toolbar. You should see the start of a meme appear. Congrats, you've written your first lines of code!

The lines you just wrote cover some concepts we'll talk about in class soon: variable declaration, initialization, instantiation, method calling, Strings, and arguments. Don't worry, you're not supposed to know what these words mean yet! For now, hopefully you can get a sense that the word "meme" is an object that we can send messages to by giving it commands like "setImageUrl" and "setTopText".

Part D. Craft your own meme

You are encouraged to change the image and text in this problem set to craft a dank meme.

To change the image, do a Google Image search, click the image you want to meme, click the "View Image" button, and then copy the image's URL by right clicking on the image and selecting "copy image address". You'll then want to replace the URL in your code:

meme.setImageUrl("<paste your image URL between the quotes>");

The only hard requirements for this problem set are that you must construct a meme that has an image and phrases for its top and bottom text. You wrote one line of code to tell the meme object what top text to use. Try changing that and running again. Note that each time you run your program, if you make changes in code you need to close the window and re-run your program.

Here's the instruction you can use to add bottom text:

meme.setBottomText("<insert another phrase here>");

Try running again. Boom! Great work! Think... type... magic happens. Once you've got an extremely dank meme with both top and bottom text, you've completed this problem set.

Part E. Submit your Problem Set Solution

Submit your problem set by navigating to the My110 page in the top right corner. You'll need to follow these instructions to correctly export your code. Be sure you've filled in your name and ONYEN in the header of your program as per Part C.

Part F. #comp110 Meme Contest on Twitter

Show off your comical genius and be immortalized on a COMP110 slide deck this Spring by participating in the meme contest. Make some great memes in Java, save them, and post them publicly to Twitter with a #comp110 hashtag. The COMP110 UTA team will pick some favs and I'll share the best in class.