Chapter 12 // Exercise 13 - Principles & Practice Using C++

In this exercise I am using Visual Studio 2017 and the graphics files found here:
https://github.com/l-paz91/principles-practice/tree/master/Graphics%20Files

Chapter 12 // Exercise 13

Find a way to add color to the lines from the previous exercise. Make some lines one color and other lines another color or other colors.

Github: https://github.com/l-paz91/principles-practice/blob/master/Chapter%2012/Exercise%2013

A closed polyline is basically just a sequence of lines so in theory we should be able to set each line colour...in theory. The problem is that Shape only has 1 colour member that it uses for the entire object. Therefore we need to change the closed polyline to just lines so we can individually set each lines colour. It ended up a little hacky looking but it works.

Chapter 12 // Exercise 12 - Principles & Practice Using C++

In this exercise I am using Visual Studio 2017 and the graphics files found here:
https://github.com/l-paz91/principles-practice/tree/master/Graphics%20Files

Chapter 12 // Exercise 12

A superellipse is a two-dimensional shape defined by the equation

Look up superellipse on the web to get a better idea of what such shapes look like. Write a program that draws "starlike" patters by connecting points on a superellipse. Take a, b, m, n, and N as arguments. Select N points on the superellipse defined by a, b, m, and, n. Make the points equally spaced for some definition of 'equal'. Connect each of those points to one or more other points (if you like you can make the number of points to which to connect a point another argument or just use N-1, i.e., all the other points).

Github: https://github.com/l-paz91/principles-practice/blob/master/Chapter%2012/Exercise%2012/Exercise%2012%20-%20Complete

Eurgh; another mind blower. I was upset as well because there is nothing on super ellipses on Maths is Fun. After searching and failing to understand code examples dotted across the internet; I ended up watching this video which was extremely helpful:
https://youtu.be/z86cx2A4_3E

He does code in javascript but it's easy enough to adapt. Whilst trying to draw points in a circle I realised that we really need a way to add doubles to the mix as values were getting narrowed left right and centre (pun intended). I changed Point to use doubles instead and then had to change a couple other constructors in order for it to build. There will be many, many warnings though. Through following the video I managed to draw a circle using a Polyline:

The + 300 on each line is just to change the default centre from 0,0 to wherever you want it. From there he then showed that the formula we care about to make a super ellipse is this one from wikipedia:

I'm really glad he pointed this out and took the time to explain it as I think I understand now. Using these formulas we can easily write a function to create super ellipses given a, b and n.

The full code for this mini program can be found here:
https://github.com/l-paz91/principles-practice/blob/master/Chapter%2012/Exercise%2012/SuperEllipseProgram

Now for what doesn't really seem like the hard part anymore. The closed_polyline contains a vector of points. We can just choose to select every N points or so and add those points to another polyline.

This one took me a good 3+ hours but once I got into it I think it was one of the most enjoyable. As much as I love the command window it's so nice to be drawing things and doing cool shit with maths. I'm really sad.

Chapter 12 // Exercise 11 - Principles & Practice Using C++

In this exercise I am using Visual Studio 2017 and the graphics files found here:
https://github.com/l-paz91/principles-practice/tree/master/Graphics%20Files

Chapter 12 // Exercise 11

Draw a series of regular polygons, one inside the other. The innermost should be an equliateral triangle, enclosed by a square, enclosed by a pentagon, etc. For the mathematically adept only: let all the points of each N-polygon touch sides of the (N+1)-polygon.Hint: The trigonometric functions are found in <cmath> (Section 24.8, Appendix B.9.2)

Github: https://github.com/l-paz91/principles-practice/blob/master/Chapter%2012/Exercise%2011/Exercise%2011%20-%20Complete

This exercise reminded me of when I first read some of the exercises in Chapter 4 way back in 2016; I was scared and convinced I couldn't do it. I'm also mathematically inept so the second portion of the exercise really threw me off. This was one of those exercises that really threw me out of my comfort zone and I had to go off and do some research to figure out what he was talking about.

I once again turned to Maths Is Fun to figure out what the hell I had to do.
https://www.mathsisfun.com/geometry/regular-polygons.html

After about an hour of reading and re-reading I managed to grasp that a regular polygon means everything is equal (I know, it's big brain time). The sides will always be the same length as all the others. With this in mind I started off by writing a little program that given the end points of a line, an angle and a length; it will draw the next line:

I was very happy when this worked. I'm terrible at this kind of stuff. You can find the code for this here:
https://github.com/l-paz91/principles-practice/blob/master/Chapter%2012/Exercise%2011/11.1

This is tedious though and error prone. Maths is Fun state how each point on a regular polygon can be found on the circumference of a circle. Therefore, given a centre point, radius and the number of sides, we can effectively work out each point in the polygon. These points can then be added to the Polygon type to draw one for us instead of using lines.

The code for this example can be found here:
https://github.com/l-paz91/principles-practice/blob/master/Chapter%2012/Exercise%2011/11.2

The important part is dividing the current side number by the overall number of sides each time to determine the next point. I am terrible at maths; I'm still not 100% sure how this is working. I eventually ended up adapting code from here to get this to work:
https://stackoverflow.com/questions/7198144/how-to-draw-a-n-sided-regular-polygon-in-cartesian-coordinates

The last part was then putting this in a loop and drawing as many polygons as we can! What's interesting to note though is that at a certain point, you will have a pretty solid circle and will become difficult to pick out all the individual polygons:

10 Polygons:

20 Polygons:

After all that, this exercise took me a good 5 hours in total but I'm glad I finished it as this stuff is actually extremely useful for game development.

Another tip. You can change the rotation of the polygons by adding an angle to the new x an y co-ordinates in makePolygon(). Remember, the C++ standard library uses radians not degrees.

EDIT 29/03/2020: After letting my brain decompress, I realised that I still haven't actually done what he asked for in either scenarios. I hadn't placed polygons inside one another nor does each point touch the sides of the n+1 polygon. 

So, to draw polygons inside each other I modified the code slightly to increase the radius each time:

And to make it so all the points touch the sides of the outer polygon, then the radius of the inside polygon must match the radius of the apothem of the outer polygon...damn this makes me sound smart.

We know for sure the radius of the polygon so we can use this formula to find the apothem:

All the points can't actually touch the sides of the outer polygon otherwise they would no longer be regular polygons but now each polygon is perfectly sized to fit within the incircle circumference of the outer polygon:

Chapter 12 // Exercise 10 - Principles & Practice Using C++

In this exercise I am using Visual Studio 2017 and the graphics files found here:
https://github.com/l-paz91/principles-practice/tree/master/Graphics%20Files

Chapter 12 // Exercise 10

Draw the file diagram from section 12.8.

Github: https://github.com/l-paz91/principles-practice/blob/master/Chapter%2012/Exercise%2010

I really hate this man...why? Just why? This could be used as a form of torture. This took me an entire hour, not because it was hard but it was just painful. I haven't created little triangles at the end of each arrow because I just couldn't take it anymore.

Chapter 12 // Exercise 9 - Principles & Practice Using C++

In this exercise I am using Visual Studio 2017 and the graphics files found here:
https://github.com/l-paz91/principles-practice/tree/master/Graphics%20Files

Chapter 12 // Exercise 9

Display an image in the screen, e.g., a photo of a friend. Label the image both with a title on the window and with a caption in the window.

Github: https://github.com/l-paz91/principles-practice/blob/master/Chapter%2012/Exercise%209

.

Chapter 12 // Exercise 8 - Principles & Practice Using C++

In this exercise I am using Visual Studio 2017 and the graphics files found here:
https://github.com/l-paz91/principles-practice/tree/master/Graphics%20Files

Chapter 12 // Exercise 8

Draw the Olympic five rings. If you can't remember the colours, look them up.

Github: https://github.com/l-paz91/principles-practice/blob/master/Chapter%2012/Exercise%208

Oh man, since I got PNG images working in the last exercise, the temptation to just download a png of them and display it was so strong but it's not the point of the exercises so I did it the "right way". This exercise is pretty easy; the only thing that annoys me is that you can't get the rings to only overlap once to give it that "interlocked effect".

Chapter 12 // Exercise 7 - Principles & Practice Using C++

In this exercise I am using Visual Studio 2017 and the graphics files found here:
https://github.com/l-paz91/principles-practice/tree/master/Graphics%20Files

Chapter 12 // Exercise 7

Draw a two-dimensional house seen from the front, the way a child would: with a door, two windows, and a roof with a chimney. Feel free to add details; maybe have "smoke come out of the chimney.

Github: https://github.com/l-paz91/principles-practice/blob/master/Chapter%2012/Exercise%207

I wanted to add some clouds and grass to this and thought it would be easy however I got an error when drawing saying "PNG images are unsupported". FLTK does actually support png however we are using Bjarne's "version" of fltk and if you go to Graph.cpp (line 378) you'll see that he's only supported the use of two file formats; jpg and gif. So, I decided to add png.

First add #include <Fl/Fl_PNG_Image.H>  to fltk.h. Then in Graph.h add another enum type to Suffix::Encoding called png. In init_suffix_map() in Graph.cpp, add two more entries for png.

In Graph.cpp, in the Image constructor, add another case for png (basically copy pasta but change the name).

And then last, go to the project properties->linker->input->additional dependencies. Click edit and add fltkpngd.lib and fltkzlibd.lib

Png images now work with Bjarne's Image class! Once that was working; I got lazy....super lazy. And so I made the house in Photoshop, saved it as png and then loaded it.

Looks legit right? I could've just done the entire thing in photoshop...then loaded it as a normal png but I don't think that was the point of the exercise, or was it?

Chapter 12 // Exercise 6 - Principles & Practice Using C++

In this exercise I am using Visual Studio 2017 and the graphics files found here:
https://github.com/l-paz91/principles-practice/tree/master/Graphics%20Files

Chapter 12 // Exercise 6

What happens when you draw a Shape that doesn't fit inside its window? What happens when you a Window that doesn't fit on your screen? Write two programs that illustrate these two phenomena.

Github: https://github.com/l-paz91/principles-practice/blob/master/Chapter%2012/Exercise%206

The window draws at 0,0 and then continues on. You won't be able to see the window label though. As I have two monitors, the window extended onto the second one.

The shape will be cut off wherever it hits the edges of the window.

Chapter 12 // Exercise 5 - Principles & Practice Using C++

In this exercise I am using Visual Studio 2017 and the graphics files found here:
https://github.com/l-paz91/principles-practice/tree/master/Graphics%20Files

Chapter 12 // Exercise 5

Draw a red 1/4-inch frame around a rectangle that is three-quarters the height of your screen and two-thirds the width. 

Github: https://github.com/l-paz91/principles-practice/blob/master/Chapter%2012/Exercise%205

Eurgh, I had to get the calculator out for this one. I hate doing percentages.

Chapter 12 // Exercise 4 - Principles & Practice Using C++

In this exercise I am using Visual Studio 2017 and the graphics files found here:
https://github.com/l-paz91/principles-practice/tree/master/Graphics%20Files

Chapter 12 // Exercise 4

Draw a 3-by-3 tic-tac-toe board of alternating white and red squares.

Github: https://github.com/l-paz91/principles-practice/blob/master/Chapter%2012/Exercise%204

I got confused on this just because I started over-complicating it. I started thinking of creating it as 8 lines that intersect but pondered about how to colour the parts in-between. Instead I decided to create a function that creates and fills a rectangle with just the top left co-ordinate given. 

I also don't like how set_color() means set the line colour. To me it's quite ambiguous and alludes to the fill colour more.

Another thing, you can't return any object that is a type of Shape as its copy constructor has been explicitly deleted. MSDN says people do this to prevent behaviour that they don't want but in this case I can't see why creating a rectangle and then returning it would be so heinous. Clearly it was done for a reason, however, I decided to be naughty and commented out the line in Shape (in my files it's lines 176 and 177).

After a frustrating 20 minutes of nothing appearing I was ready to just give up and do it the long way, however, when stepping through the code, the rectangles were being created and attached to the window in the for loop, but, on the last rectangle all the values got cleared in the window and therefore nothing was drawn. For some reason a range-based for loop 'resets' the window's shapes. I think it has something to do with Shape's default destructor being called as r will only be in scope during the loop. Anyway, a standard for loop works fine and we don't have to repeat rectangle code constantly.

(16/08/2021 - Note from future me...it didn't work because you allowed it to use the copy constructor which had been deleted...creating a copy that goes out of scope.....)

(This is very umbrella looking.....)

Chapter 12 // Exercise 3 - Principles & Practice Using C++

In this exercise I am using Visual Studio 2017 and the graphics files found here:
https://github.com/l-paz91/principles-practice/tree/master/Graphics%20Files

Chapter 12 // Exercise 3

Draw your initials 150 pixels high. Use a thick line. Draw each initial in a different colour.

Github: https://github.com/l-paz91/principles-practice/blob/master/Chapter%2012/Exercise%203

I found how to change the width of the line by looking up the type in Graph.h. One of the constructors for Line_style takes a Line_style_type and an integer for the width.

Chapter 12 // Exercise 2 - Principles & Practice Using C++

In this exercise I am using Visual Studio 2017 and the graphics files found here:
https://github.com/l-paz91/principles-practice/tree/master/Graphics%20Files

Chapter 12 // Exercise 2

Draw a 100-by-30 Rectangle and place the text "Howdy!" inside it.

Github: https://github.com/l-paz91/principles-practice/blob/master/Chapter%2012/Exercise%202

This uses just a bit of trickery; as looking at the code; there doesn't appear to be a way to "attach" the text to the Rectangle..yet. I'm sure that is something he'll have us implementing.

Chapter 12 // Exercise 1 - Principles & Practice Using C++

In this exercise I am using Visual Studio 2017 and the graphics files found here:
https://github.com/l-paz91/principles-practice/tree/master/Graphics%20Files

Chapter 12 // Exercise 1

Draw a rectangle as a Rectangle and as a Polygon. Make the lines of the Polygon red and the lines of the Rectangle blue.

Github: https://github.com/l-paz91/principles-practice/blob/master/Chapter%2012/Exercise%201

It's weird to think that tediously defining each line of a polgon was the standard in games programming 25 years ago.