bon mardi: DSDN 142 | Book: Chapter 3 & 4

Drawing Order

I have changed the size of my screen so as to force me to think about the x, y coordinates again.

The first exercise is straightforward and shows us how the order of the code dictates the position of the object as demonstrated below (figs 1 & 2):

Figure 1 rectangle over ellipse

Figure 2 rectangle under ellipse

Shape Properties

Stroke weight and smoothing (AKA anti-aliasing) are both properties that can alter the stroke appearance.

Smoothing - the upper circle in the duo below has been smoothed with the smooth function which was turned off for the lower of the two:

Smooth vs. Non-smooth

Set stroke weight - the four circles below each have different stroke weights and the smooth function is in operation only for the top three - it was turned off for the lower one.

Various stroke weights

Set stroke attributes - the upper rectangle has bevelled corners, the line below it has squared ends, the rectangle below that has rounded corners, as do the ends of the line at the bottom.

Various stroke attributes

Also completed the tutorial about the coordinate system on Processing. This is the final example with a dash of colour.

coordinate system & shapes

Started with this:

Ended with this:

Chapter 4

Change values - if you set up a rule that defines one element (such at the point of the object on the y axis or the diameter of an ellipse) as one constant value - then you can avoid having to change the value multiple times. Below in Figure 1 the four ellipses are 100 pixels in diameter and this can be changed easily using the variable rule "int d = 100" - all you need to do is change the value of d (to 50 for example) and the changes observed in Figure 2 can be observed.

Fig. 1

Fig. 2

Processing Variables

Processing has some special variables. i.e the width and height of the window are stored in variables called width and height. These values are set by the
size() function. They can be used to draw elements relative to the size of the window, even if the size() line changes. Note changes in size of screen below (Figures 3 and 4) are handled by the 'width' and 'height' variables.

Fig. 3

Fig. 4

For Loop

OK - here we go - this is where it gets interesting. Having read the chapter in the text I then watched the explanation by Doug Easterly on Blackboard about 'for Loops' and basically copied the code he used so I can try to get a feel for it. He has shown us how to do a for Loop (Figure 5), then a nested for Loop (Figure 6) which basically is how you make a grid in coding.

Fig. 5

Fig. 6

Doug then revealed the following image (Figure 7) through his manipulation of the code which is closer to where we need to be for the first assignment. It is a little intimidating because although I have successfully copied it from the screen, I am not really sure how he got to the final step. All to be revealed in the fullness of time I guess.