Details: Homework 1F
Using any drawing tool that you want, neatly draw a flowchart to plan out your program that draws a small city. You do not have to flowchart the “starter code” that we are giving you (so you can skip flowcharting events), but you do need to flowchart everything that you are writing.
To do this, you should read over the details for Homework 1G, think about them, and look at the starter code that we have given you, so that you can see what you have to add. Then think about what you’ve learned about loops and conditionals and plan out your logic.
Remember that you do not have to draw every line of code in your flowchart. In fact, your flowchart will get a lower grade if you create a box for every line of code instead of summarizing. For example, we would rather see ONE box labelled “draw a window at position x,y” than TEN boxes that say “draw a rectangle at x,y”, “draw another rectangle at x+5, y+5”, etc. The reason for this is that your flowcharts should focus on the flow of your program – i.e., where it has to branch or loop or jump to a subroutine – and not on the implementation details (i.e., not on how to draw every darned shape!)
Your flowchart must be on one page. The page can be any size (though you should make an effort to not make the file size too big; Adobe Acrobat can shrink it with “reduce file size” at the end, if needed) but IT MUST BE ALL ONE PAGE. Most drawing programs will let you define a canvas size, and some (like OmniGraffle, Jay’s favorite) let you create a “flexible” canvas that automatically scales to keep everything on the page.
We will be grading your flowcharts on screen, so please make an effort to make them as readable as possible. Put text neatly in the boxes and in the diamonds, and be sure to label every True and False branching arrow!
We strongly recommend that you use vector drawing software (Illustrator, OmniGraffle, or the free online Google Drawings) to do this project. A bitmap program like Photoshop will likely create something that is too large or too unreadable. If you really can’t handle drawing with software, you may draw your flowchart on paper, but please take the time to clean it up and to scan it so that we have a “clean” image of just the flowchart. We should NOT see the edges of your desk, the shadow of your phone, etc. We will take points off if it’s difficult to grade your flowchart online, so check how it looks
after you’ve uploaded it, and revise if needed!
Details: Homework 1G
This week, the starter code only handles the forms for you. We have provided all of the HTML that you need, but we have not provided the line that creates the actual SVG for you. We have once again written the event handlers so that some global variables are updated to reflect the current form values, but we have not provided any drawing code or logic.
This is because we want to prepare you for the midterm by getting you as close as possible to writing your own programs 100% from (almost) nothing.
Your “city” and its “buildings” do not have to be terribly complicated, but we will reward creativity and complexity (remember, 10% of the homework grade is “level of difficulty attempted and success”). So maybe your city is entirely made up of rectangles, but you might spend time adding some details to the windows and doors and buildings so that they look more intricate.
Everything that we have provided you in earlier homework starters can help you to figure out this problem, but here is a BIG HINT: the focus for this assignment is LOOPING code. You should NOT create giant “if…else if…else” statements to draw a totally different object for each selection on the form. You should create loops that will enable you to draw a range of items! You will need to write a couple of simple “if” statements, but nothing crazy.
NOTE: For the math-phobic, you MAY write conditional logic WITHIN your loops to figure out how to resize/reposition parts as needed. But you are STRONGLY encouraged to spend some time figuring out the math to position the parts on your building!
You might want to write some other conditional logic in order to enhance your city (such as logic that checks how tall a building is to ensure some roof decoration goes in the right spot, or even logic that randomly adds variation to your doors and windows!), but that is secondary to the looping code.
However, successful implementation of such logic will increase your overall homework score, and particularly good implementations that use conditional logic to go well beyond the minimum requirements may receive up to 2 bonus points (in 1/10th point increments)
The minimum requirements for this project are:
- Draw 0 to 5 buildings (yes, 0 must be an option!)
- Draw 1 to 5 floors in each building (0 not a valid choice here)
- Draw 1 door in the middle of the ground floor of each building
- IF the building has 2 or more floors, draw 1 to 5 windows on each floor EXCEPT the ground floor, which should have NO windows (HINT: Loops do not have to start at 0 or 1!)
o IF the building only has 1 floor, then always draw EXACTLY 2 windows, with one on each side of the door.
- Draw a roof on the top of each building
Your code must be THOROUGHLY commented, and your variables must be MEANINGFULLY named. You are encouraged to write functions with parameters to draw each complex shape and to make your code more readable. All indenting, whitespace, and commenting standards from previous homework assignments must be applied to this one (including using my function documentation template and
explaining in plain English what your conditional logic does). Additionally, you must additionally write a comment above any LOOPING code that explains in plain English what the loop does.
After you complete the minimum requirements, consider these (optional) enhancements:
- Vary the roof depending on how tall each building is
- Draw buildings of different widths and fit the windows, doors, roofs, etc. to match
- Add random decorations by choosing a number with random() and writing conditions that express how often the decoration should appear (e.g., “There is a 25% chance that a bird will appear on this window”)
Additionally, feel free to make up your own. For this assignment, you can use any code/structures that you have learned so far in this class, as well as any part of SVG.js (even if it’s something we have not taught you in class yet, as long as you can explain it to us in a code comment!)
The only thing that we recommend avoiding this week is adding other interactivity to the building using events. You may do this, but combining events and loops tends to cause confusion for beginning programmers, so please do not add other interactivity unless you are confident that you know what you are doing!
IMPORTANT: Any enhancements to the project that go beyond the minimum requirements must also be present in your flowchart and must also have good commenting, variable naming, etc. We will award NO POINTS to enhancements that are not treated equally with the rest of the assignment. We suggest that you FIRST flowchart the basic assignment and implement it. Then, if you have time, go back and add your enhancements to the flowchart (to plan what you’re doing) and then implement the plan! This may seem silly, but please trust us – learning to flowchart BEFORE you write the code will help you on the
rm, and beyond!
*I have attached a link below with my previous assignments to give you a general idea of what I have learned so far.
http://digitalmedia.neu.edu/6108guzh/
The link below is for the files needed for doing homework 1G
https://drive.google.com/drive/folders/1_xgwBH1CZ8jrU8NKySAoJX8z5p_1CMMB?usp=sharing