CSCI 261 - Programming Concepts (C++)

Spring 2017 - C-Lab 09

Quick Links: Blackboard | Canvas | CS @ Mines | Cloud9 | Piazza | zyBooks

|   Home |  Contact |  Syllabus |  Assignments |  Schedule |  Resources   |
This lab is due by April 03, 2016 11:59pm.

Concepts


For this assignment, you have the opportunity to play with the power that SFML (a special framework called Simple and Fast Multimedia Library) offers.

SFML


SFML is a multimedia Application Programming Interface (API) written in C++ with bindings for various programming languages, including Java, Python, and Ruby. SFML provides an easy way to write code that requires graphics and/or sound effects. SFML is the chosen platform for many cool games, including the Atom Zombie Smasher. You can check out everything SFML has to offer by reading the SFML documentation.

Before you Begin


For this specific lab you should download this install file that when run will install and setup all the tools you need to run SFML through Cloud9. This file should work with Cloud9 as is. If you are not using Cloud9 (e.g. CodeBlocks, XCode, Eclipse, Visual Studio, etc.), then it is your responsibility to install SFML for your chosen IDE. We will be grading these SFML assignments against Cloud9 so be sure your code works with the template provided on the Cloud9.

Once you have downloaded the file to your computer, upload it to the root folder of your workspace. Open a terminal (Window > New Terminal) and type the following command:

chmod +x setupSFML.sh
sudo ./setupSFML.sh

You will see red text telling you what's going on. A couple of steps will ask you to enter " Y " to confirm that you want to install the corresponding package. When asked if you want to set a password, type " no ". Once you see the message

[100%] Done!

Then you are ready to continue.

Open and Run the Project


Download the SFML Cloud9 template and upload it to your workspace. Right click on the zip file and select " Open Terminal Here ". In the terminal that appears, type the following command.

unzip SFML-2_4-template-C9.zip

That will create a new folder by the same name. Rename it to Lab09. You will notice there is a Makefile inside the folder. When you run your project, be sure to select " C++ (Makefile) " as your run option. Go ahead right now, open main.cpp and run it. You WILL get an error message that says

bash: line 12: 646995 Segmentation fault $file.o $args

THIS IS OK! We can safely ignore that message. Why? Well, Cloud9 is trying to run your program in the tab you have open right now. But SFML wants to open a new window to display the graphics. Cloud9 cannot open a second window on its own. But you can! Part of the magic setup process that you did at the beginning added another runner to your Cloud9 workspace. Go to " Run > Run With > C9vnc ". This will pop open a little window in your workspace with information that looks like the following: 

Your GUI is running at https://class-examples-jpaone.c9users.io/vnc.html.

VNC client running at https://class-examples-jpaone.c9users.io/vnc.html
2017-03-20 02:30:40,315 INFO supervisord started with pid 635120
2017-03-20 02:30:41,318 INFO spawned: 'novnc' with pid 635125
2017-03-20 02:30:41,320 INFO spawned: 'xvfb' with pid 635126
2017-03-20 02:30:41,322 INFO spawned: 'x11vnc' with pid 635127
2017-03-20 02:30:41,325 INFO spawned: 'fluxbox' with pid 635128
2017-03-20 02:30:42,417 INFO success: novnc entered RUNNING state, process has stayed 
up for > than 1 seconds (startsecs)
2017-03-20 02:30:42,419 INFO success: xvfb entered RUNNING state, process has stayed 
up for > than 1 seconds (startsecs)
2017-03-20 02:30:42,419 INFO success: x11vnc entered RUNNING state, process has stayed 
up for > than 1 seconds (startsecs)
2017-03-20 02:30:42,420 INFO success: fluxbox entered RUNNING state, process has stayed 
up for > than 1 seconds (startsecs)

That first line is the most important one. It is telling you that your GUI is running at another website. Open that URL in a new tab. You will see a window like below:

C9vnc

Right click on the background and select "Applications > Shells > Bash".

C9vnc

This will open a terminal window just like in the Cloud9 environment. We will enter all of our commands here to run our program.

C9vnc

Remember all those commands you were copying in before? Well, they are Linux commands (congrats! you've been working with Linux this whole time). What you need to do is to change your directory (folder) to where your Lab09 is. If you have been following our naming scheme, then it Lab09 should be located inside of a folder called Week09. You can change to this folder by typing

cd Week09/Lab09

If you type the command " ls " you should see a list of all the files. One of them will colored green with a * next to it. This should be main.cpp.o , the executable for your program! You can run your program by typing the following command:

./main.cpp.o

You might see a message that says "Failed to use XRandR extension". Once again, it's ok. Ignore it. More importantly, you should now see a new window that has popped up containing your SFML program! How cool!

Instructions


First, take a look at the main.cpp file provided in the SFML template. In class, we discussed each of the commands shown (e.g., creation of the window object and the polling for events); ask questions if there is any confusion.

Second, we also saw the development of a smiley face in class today. The complete code is available here. A few key lines of code covered follow:

// Draw a circle object called star and color it yellow
CircleShape star;
star.setPosition( 15, 15 );
star.setRadius( 300 );
star.setFillColor( Color::Yellow );
window.draw( star );

// Draw a rectangle object called rect and color it blue
RectangleShape rect;
rect.setSize( Vector2f( 45, 150 ) );
rect.setPosition( 200, 150 );
rect.setFillColor( Color(0, 0, 255) );
window.draw( rect );

// Draw a text object called label
Font myFont;
if( !myFont.loadFromFile( "data/arial.ttf" ) )
     return -1;
Text label;
label.setFont( myFont );
label.setString( "Hello World!" );
label.setPosition( 250, 520 );
label.setColor( Color::Black );
window.draw( label );

Your job is to draw something in SFML. What you draw can be anything you want EXCEPT a smiley face (e.g., a tree, a bike, a dog, a word using rectangles/circles, etc.). For full credit, you must draw at least five shapes. Be creative and have fun!

Possible Extra Credit


You can earn 2 points of extra credit if the item you draw actually moves (yes, is animated - awesome!). Animation in SFML is actually easier than you might think. As you know, you add all your draw commands in the window loop:

while (window.isOpen()) {

     // ADD SEVERAL DRAW COMMANDS HERE

     // Apply all the draws to the screen
     window.display();
}

To create an animation, you only need to change the draw commands a small amount that are executed on a given loop. Try it!

Lab Submission


You will submit your solution to this lab with the rest of Week09. Detailed instructions for doing this are posted in Assignment 09.

Remember your smiley face solution for Assignment 01? You've sure come a long way since then! Do you recall how we had a prize for the best smiley face submitted in all sections (a Free HW)? That was cool. Let's do this again for Lab09. That is, we'll have a prize for the best Lab09 submitted in all sections. Good luck!


This lab is due by April 03, 2016 11:59pm.
Last Updated: 01/01/70 00:00


Valid HTML 4.01 Strict Valid CSS! Level Triple-A conformance, W3C WAI Web Content Accessibility Guidelines 2.0