Difference between revisions of "Flags with Repeats Tutorial"

From Progzoo
Jump to: navigation, search
(India)
 
(33 intermediate revisions by 8 users not shown)
Line 7: Line 7:
 
==Bahrain==
 
==Bahrain==
 
<question height="155" width="250" imgOut="flag.png" className="Raster" title="Bahrain" rows='16'>
 
<question height="155" width="250" imgOut="flag.png" className="Raster" title="Bahrain" rows='16'>
The flag of Bahrain has a five irregular pentagons on a red background..
+
The flag of Bahrain has a five irregular pentagons on a red background.
 
   
 
   
 
Each pentagon can be represented by five points such as (0,0), (64,0)
 
Each pentagon can be represented by five points such as (0,0), (64,0)
(100,15) (64,31) and (0,31)..
+
(100,15) (64,31) and (0,31).
 
[[Image:flagbahrain.png|left|frame|Flag of Bahrain]]
 
[[Image:flagbahrain.png|left|frame|Flag of Bahrain]]
 
    
 
    
<prog lang="java">
+
<prog lang="java">static void drawFlag(Graphics2D g)
static void drawFlag(Graphics2D g){
+
{
 
   //Flag of Bahrain
 
   //Flag of Bahrain
 
   //Define a pillar as a polygon
 
   //Define a pillar as a polygon
Line 24: Line 24:
 
   g.fillRect(0,0,250,155);
 
   g.fillRect(0,0,250,155);
 
   g.setColor(Color.white);
 
   g.setColor(Color.white);
   for (int i=0;i&lt;2;i++){
+
   for (int i=0;i&lt;2;i++)
     //Draw the pillar
+
  {
 +
     //Draw the pillar  
 
     g.fillPolygon(pillar);
 
     g.fillPolygon(pillar);
 
     g.translate(0,31);
 
     g.translate(0,31);
Line 32: Line 33:
 
</prog>
 
</prog>
 
<answer lang="java">
 
<answer lang="java">
static void drawFlag(Graphics2D g){
+
static void drawFlag(Graphics2D g)
 +
{
 
   //Flag of Bahrain
 
   //Flag of Bahrain
 
   //Define a pillar as a polygon
 
   //Define a pillar as a polygon
Line 38: Line 40:
 
   new int[]{0,64,100,64, 0},
 
   new int[]{0,64,100,64, 0},
 
   new int[]{0, 0, 15,31,31}, 5);
 
   new int[]{0, 0, 15,31,31}, 5);
   //Do the background
+
   // Do the background
 
   g.setColor(Color.red);
 
   g.setColor(Color.red);
 
   g.fillRect(0,0,250,155);
 
   g.fillRect(0,0,250,155);
Line 63: Line 65:
 
</p>
 
</p>
  
<prog lang="java">
+
<prog lang="java">static void drawFlag(Graphics2D g)
static void drawFlag(Graphics2D g){
+
{
 
   g.setColor(new Color(128,0,0));
 
   g.setColor(new Color(128,0,0));
 
   g.fillRect(0,0,300,153);
 
   g.fillRect(0,0,300,153);
Line 70: Line 72:
 
</prog>
 
</prog>
 
<answer lang="java">
 
<answer lang="java">
static void drawFlag(Graphics2D g){
+
static void drawFlag(Graphics2D g)
 +
{
 
   Polygon pillar = new Polygon(
 
   Polygon pillar = new Polygon(
 
   new int[]{0,84,125,84, 0},
 
   new int[]{0,84,125,84, 0},
Line 88: Line 91:
 
<question height="204" width="306" imgOut="flag.png" className="Raster" title="India" rows='25'>
 
<question height="204" width="306" imgOut="flag.png" className="Raster" title="India" rows='25'>
 
<p>The flag of India is 306 by 204. The orange, white and green stripes
 
<p>The flag of India is 306 by 204. The orange, white and green stripes
are 306 by 67. The wheel has radius 30.
+
are 306 by 68. The wheel has radius 30.
 
</p>
 
</p>
 
<p>
 
<p>
Line 102: Line 105:
 
</p>
 
</p>
 
[[Image:flagindia.png|frame|Flag of India]]
 
[[Image:flagindia.png|frame|Flag of India]]
<prog lang="java">
+
<prog lang="java">static void drawFlag(Graphics2D g)
static void drawFlag(Graphics2D g){
+
{
 
   g.setRenderingHint(
 
   g.setRenderingHint(
 
     RenderingHints.KEY_ANTIALIASING,
 
     RenderingHints.KEY_ANTIALIASING,
 
     RenderingHints.VALUE_ANTIALIAS_ON);
 
     RenderingHints.VALUE_ANTIALIAS_ON);
 
   g.setColor(Color.orange);
 
   g.setColor(Color.orange);
   g.fillRect(0,0,306,67);
+
   g.fillRect(0, 0,306,68);
 
   g.setColor(Color.green);
 
   g.setColor(Color.green);
 
   g.fillRect(0,134,306,68);
 
   g.fillRect(0,134,306,68);
Line 115: Line 118:
 
   g.drawOval(123,72,60,60);
 
   g.drawOval(123,72,60,60);
 
   g.translate(153,102);
 
   g.translate(153,102);
 +
 
   g.rotate(2*Math.PI/24);
 
   g.rotate(2*Math.PI/24);
 
   g.drawLine(0,0,0,30);
 
   g.drawLine(0,0,0,30);
 +
 
   g.rotate(2*Math.PI/24);
 
   g.rotate(2*Math.PI/24);
 
   g.drawLine(0,0,0,30);
 
   g.drawLine(0,0,0,30);
 +
 
   g.rotate(2*Math.PI/24);
 
   g.rotate(2*Math.PI/24);
 
   g.drawLine(0,0,0,30);
 
   g.drawLine(0,0,0,30);
Line 124: Line 130:
 
</prog>
 
</prog>
 
<answer lang="java">
 
<answer lang="java">
static void drawFlag(Graphics2D g){
+
static void drawFlag(Graphics2D g)
 +
{
 
   g.setRenderingHint(
 
   g.setRenderingHint(
 
     RenderingHints.KEY_ANTIALIASING,
 
     RenderingHints.KEY_ANTIALIASING,
 
     RenderingHints.VALUE_ANTIALIAS_ON);
 
     RenderingHints.VALUE_ANTIALIAS_ON);
 
   g.setColor(Color.orange);
 
   g.setColor(Color.orange);
   g.fillRect(0,0,306,68);
+
   g.fillRect(0, 0,306,68);
 
   g.setColor(Color.white);
 
   g.setColor(Color.white);
   g.fillRect(0,67,306,68);
+
   g.fillRect(0,68,306,68);
 
   g.setColor(Color.green);
 
   g.setColor(Color.green);
   g.fillRect(0,134,306,68);
+
   g.fillRect(0,136,306,68);
 
   g.setColor(Color.blue);
 
   g.setColor(Color.blue);
 
   g.setStroke(new BasicStroke(2,0,0));
 
   g.setStroke(new BasicStroke(2,0,0));
 
   g.drawOval(123,72,60,60);
 
   g.drawOval(123,72,60,60);
 
   g.translate(153,102);
 
   g.translate(153,102);
   for (int i=0;i&lt;24;i++){
+
   for (int i=0;i&lt;24;i++)
 +
  {  
 
     g.rotate(2*Math.PI/24);
 
     g.rotate(2*Math.PI/24);
 
     g.drawLine(0,0,0,30);
 
     g.drawLine(0,0,0,30);
Line 165: Line 173:
 
[[Image:flagnamibia.png|frame|Flag of Namibia]]
 
[[Image:flagnamibia.png|frame|Flag of Namibia]]
  
<prog lang="java">
+
<prog lang="java">static void drawFlag(Graphics2D g)
static void drawFlag(Graphics2D g){
+
{
 
   g.setRenderingHint(
 
   g.setRenderingHint(
 
     RenderingHints.KEY_ANTIALIASING,
 
     RenderingHints.KEY_ANTIALIASING,
Line 192: Line 200:
 
</prog>
 
</prog>
 
<answer lang="java">
 
<answer lang="java">
static void drawFlag(Graphics2D g){
+
static void drawFlag(Graphics2D g)
 +
{
 
   g.setRenderingHint(
 
   g.setRenderingHint(
 
     RenderingHints.KEY_ANTIALIASING,
 
     RenderingHints.KEY_ANTIALIASING,
 
     RenderingHints.VALUE_ANTIALIAS_ON);
 
     RenderingHints.VALUE_ANTIALIAS_ON);
   Polygon tri = new Polygon(
+
   Polygon tri = new Polygon(  
 
   new int[]{19,29,19},
 
   new int[]{19,29,19},
 
   new int[]{ 5, 0,-5},3);
 
   new int[]{ 5, 0,-5},3);
Line 230: Line 239:
 
[[Image:flageurope.png|frame|Flag of European Union]]
 
[[Image:flageurope.png|frame|Flag of European Union]]
 
We need the trigonometry functions cos and sin to draw flags
 
We need the trigonometry functions cos and sin to draw flags
in a circle.
+
in a circle.
 +
*There are 12 stars
 
*The flag is 250 by 180
 
*The flag is 250 by 180
 
*The stars centers are 64 from the center
 
*The stars centers are 64 from the center
 
*The coordinates at 30<sup>o</sup> from the x-axis (East) are 64*cos(30), 64*sin(30).
 
*The coordinates at 30<sup>o</sup> from the x-axis (East) are 64*cos(30), 64*sin(30).
 
*Each star has radius 12.5
 
*Each star has radius 12.5
 +
<hint tease="Help with Stars">
 +
Look at the original program
 +
  g.setColor(Color.yellow);
 +
  for (int i=0;i&lt;9;i++){
 +
    double a = Math.PI*2*i/9;
 +
    g.translate( 100*Math.cos(a), 100*Math.sin(a));
 +
    g.fillPolygon(star);
 +
    g.translate(-100*Math.cos(a),-100*Math.sin(a));
 +
  }
 +
*The circle of stars is currently centered at the origin.
 +
**You can move this by adding a '''translate''' call after the setColor line
 +
g.translate(100,100);
 +
*The number of stars filled is 9; you want 12
 +
**Change this number in the '''for''' line
 +
**Change this number in the calculation of the angle '''a'''
 +
*The radius of the circle of stars is 100; you want it to be 64
 +
**The number 100 shows up in the translate methods four times
 +
 +
</hint>
 
<hint tease="Radians">
 
<hint tease="Radians">
 
The sin and cos functions in Java are called <code>Math.sin</code> and <code>Math.cos</code>. They
 
The sin and cos functions in Java are called <code>Math.sin</code> and <code>Math.cos</code>. They
Line 240: Line 269:
 
<code>2*Math.PI</code> in radians.
 
<code>2*Math.PI</code> in radians.
 
</hint>
 
</hint>
<prog lang="java">
+
<prog lang="java">static void drawFlag(Graphics2D g)
static void drawFlag(Graphics2D g){
+
{
 
   Polygon star = new Polygon(
 
   Polygon star = new Polygon(
   new int[]{0,22,95,36,59,0,-59,-36,-95,-22},
+
   new int[]{0 ,3 ,12,5 ,8,0,-8,-5,-12,-3},
   new int[]{-100,-31,-31,12,81,38,81,12,-31,-31},10);
+
   new int[]{-13,-4,-4,2 ,11,5,11,2,-4,-4},10);
 
   g.setColor(Color.blue);
 
   g.setColor(Color.blue);
 
   g.fillRect(0,0,500,350);
 
   g.fillRect(0,0,500,350);
 
   g.setColor(Color.yellow);
 
   g.setColor(Color.yellow);
   for (int i=0;i&lt;9;i++){
+
   for (int i=0;i&lt;9;i++)
 +
  {
 
     double a = Math.PI*2*i/9;
 
     double a = Math.PI*2*i/9;
     g.translate(125*Math.cos(a),125*Math.sin(a));
+
     g.translate( 100*Math.cos(a), 100*Math.sin(a));
 
     g.fillPolygon(star);
 
     g.fillPolygon(star);
     g.translate(-125*Math.cos(a),-125*Math.sin(a));
+
     g.translate(-100*Math.cos(a),-100*Math.sin(a));
 
   }
 
   }
 
}
 
}
 
</prog>
 
</prog>
<answer lang="java">
+
<answer lang="java"><![CDATA[
static void drawFlag(Graphics2D g){
+
static void drawFlag(Graphics2D g)
 +
{
 
   g.setRenderingHint(
 
   g.setRenderingHint(
 
     RenderingHints.KEY_ANTIALIASING,
 
     RenderingHints.KEY_ANTIALIASING,
     RenderingHints.VALUE_ANTIALIAS_ON);
+
     RenderingHints.VALUE_ANTIALIAS_ON);  
 
   Polygon star = new Polygon(
 
   Polygon star = new Polygon(
   new int[]{0,22,95,36,59,0,-59,-36,-95,-22},
+
   new int[]{0 ,3 ,12,5 ,8,0,-8,-5,-12,-3},
   new int[]{-100,-31,-31,12,81,38,81,12,-31,-31},10);
+
   new int[]{-13,-4,-4,2 ,11,5,11,2,-4,-4},10);
 
   g.setColor(Color.blue);
 
   g.setColor(Color.blue);
   g.fillRect(0,0,250,180);
+
   g.fillRect(0,0,500,350);
 
   g.setColor(Color.yellow);
 
   g.setColor(Color.yellow);
 
   g.translate(125,90);
 
   g.translate(125,90);
  int r = 64;
+
   for (int i=0;i<12;i++)
   for (int i=0;i&lt;12;i++){
+
  {
     double th = Math.PI*2*i/12;
+
     double a = Math.PI*2*i/12;
     g.translate(r*Math.cos(th),
+
     g.translate(64*Math.cos(a),64*Math.sin(a));
                r*Math.sin(th));
 
    g.scale(.125,.125);
 
 
     g.fillPolygon(star);
 
     g.fillPolygon(star);
    g.scale(8,8);
+
     g.translate(-64*Math.cos(a),-64*Math.sin(a));
     g.translate(-r*Math.cos(th),
 
                -r*Math.sin(th));
 
 
   }
 
   }
 
}
 
}
</answer>
+
]]></answer>
 
</question>
 
</question>
 +
{{Flags Tutorial}}
 
[[Category:Tutorial]]
 
[[Category:Tutorial]]
 
[[Category:Graphics]]
 
[[Category:Graphics]]

Latest revision as of 14:58, 26 September 2014

We can repeat a statement or block of statements with a for loop. The simplest for loops take the following form:

The control variable i takes every value 0,1,2..9 in turn. We can use the value of i inside the loop if required.

Bahrain

The flag of Bahrain has a five irregular pentagons on a red background.

Each pentagon can be represented by five points such as (0,0), (64,0) (100,15) (64,31) and (0,31).

Flag of Bahrain



[Font] [Default] [Show] [Resize] [History] [Profile]

Qatar

Consider the neighbouring state Qatar.

  • 9 pillars, each pillar is 17 pixels below the previous.
  • The five coordinates of the top pillar are (0,0) (84,0) (125,9) (84,17), (0,17)
  • Use RGB(128,0,0) for the less jaunty red.

Flag of Qatar

The need for a loop becomes even more obvious for this flag.



[Font] [Default] [Show] [Resize] [History] [Profile]

India

The flag of India is 306 by 204. The orange, white and green stripes are 306 by 68. The wheel has radius 30.

The flag of India includes a wheel with 24 spokes, the spokes are 2*pi/24 radians apart.

The code given draws only three of the spokes - we could copy and paste - but it would be much better to use a loop.

We have not really done India justice here - the actual flag is much more elegant, the spokes taper and the rim includes decoration. Nevertheless - we apologize to the sub-continent and move on.

Flag of India


[Font] [Default] [Show] [Resize] [History] [Profile]

Namibia

Each the rightmost triangle has coordinates (19,5) (29,0) (19,-5) relative to the centre of the star burst - which is at (60,60).

Notice that only two of the 12 triangles are drawn by the example code. Also note that the colors are mixed up.

We can use the method g.rotate(Math.PI/6) to repeat the triangles of the star-burst for Namibia.

  • The yellow circle has radius 16
  • The triangles are partially covered by a blue circle of radius 20
  • The whole flag is 300 by 200
  • You must set the white part of the flag white
Flag of Namibia



[Font] [Default] [Show] [Resize] [History] [Profile]

European Union

Flag of European Union

We need the trigonometry functions cos and sin to draw flags in a circle.

  • There are 12 stars
  • The flag is 250 by 180
  • The stars centers are 64 from the center
  • The coordinates at 30o from the x-axis (East) are 64*cos(30), 64*sin(30).
  • Each star has radius 12.5


[Font] [Default] [Show] [Resize] [History] [Profile]