How to draw 8 triangles that form a square? Java

Question

I need to draw a graphics pattern as in image

8 triangles in random colors.
I did it step by step, but how to do this using for-loop? I don't see any correlations...

I was told there are 2 ways to draw this: +using 1 loop (draw triangles 1,5,2,6,3,7,4,8) <1 is for x1,y2 in code below etc>
+and easiest using 2 loops(one loop for draw triangles 1,2,3,4; second loop for triangles 5,6,7,8)

Any ideas, please?

import java.awt.Color;
import java.awt.Dimension;
import java.awt.Graphics;
import javax.swing.JFrame;
import javax.swing.JPanel;


public class Lekcja11 extends JPanel {

    int r = (int)(Math.random()*255);
    int g = (int)(Math.random()*255);
    int b = (int)(Math.random()*255);
    Color kolor = new Color(r, g, b);
    
    public Dimension getPreferredSize() {
        return new Dimension(500, 500);
    }

    protected void paintComponent(Graphics k) {
        super.paintComponent(k);            

        int w = getWidth();
        int h = getHeight();
        
        int[] x1 = {w/2, 0, 0 , w/2};
        int[] y1 = {h/2, h/2, 0, h/2};
        
        int[] x2 = {w/2, w/2, w, w/2};
        int[] y2 = {h/2, 0, 0, h/2};
        
        int[] x3 = {w/2, w, w, w/2};
        int[] y3 = {h/2, h/2, h, h/2};
        
        int[] x4 = {w/2, w/2, 0, w/2};
        int[] y4 = {h/2, h, h, h/2};
        
        int[] x5 = {w/2, 0, w/2 , w/2};
        int[] y5 = {h/2, 0, 0, h/2};
        
        int[] x6 = {w/2, w, w , w/2};
        int[] y6 = {h/2, 0, h/2, h/2};
        
        int[] x7 = {w/2, w, w/2 , w/2};
        int[] y7 = {h/2, h, h, h/2};
        
        int[] x8 = {w/2, 0, 0 , w/2};
        int[] y8 = {h/2, h, h/2, h/2};          
            
        
        k.setColor(kolor);          
        k.fillPolygon(x1, y1, 4);   
        k.setColor(kolor);
        k.fillPolygon(x2, y2, 4);
        k.setColor(kolor);
        k.fillPolygon(x3, y3, 4);
        k.setColor(kolor);
        k.fillPolygon(x4, y4, 4);
        k.setColor(kolor);
        k.fillPolygon(x5, y5, 4);
        k.setColor(kolor);
        k.fillPolygon(x6, y6, 4);
        k.setColor(kolor);
        k.fillPolygon(x7, y7, 4);
        k.setColor(kolor);
        k.fillPolygon(x8, y8, 4);                           
    }
    
    
    public static void main(String[] args) {
        JFrame window = new JFrame();
        window.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        Lekcja11 triangles = new Lekcja11();
        window.add(triangles);
        window.setVisible(true);
        window.pack();      
    }
}

Answer 1

If everything is accepted, you can just put all of those arrays in one, and you are done:

int[][] x = {
  {w/2, 0, 0 , w/2},
  {w/2, w/2, w, w/2},
  {w/2, w, w, w/2}, 
  {w/2, w/2, 0, w/2},
  {w/2, 0, w/2 , w/2},
  {w/2, w, w , w/2},
  {w/2, w, w/2 , w/2},
  {w/2, 0, 0 , w/2}
};

int[][] y = {
  {h/2, h/2, 0, h/2},
  {h/2, 0, 0, h/2},
  {h/2, h/2, h, h/2},
  {h/2, h, h, h/2},
  {h/2, 0, 0, h/2},
  {h/2, 0, h/2, h/2},
  {h/2, h, h, h/2},
  {h/2, h, h/2, h/2}
};
for(var i = 0; i < Math.min(x.length, y.length); i++){
  k.setColor(kolor);
  k.fillPolygon(x[i], y[i], 4);   
}

otherwise I suppose that using sin and cos you can achieve something like this using a bit of trigonometry magic, but I would avoid it if it's unnecessary

Answer 2

This isn't too hard to do with loops. Storing your values in arrays is a good flexible way to do it. With a bit of cleverness, however, you might notice that each pair of triangles forms a small square. Then you can just draw your larger square as a composite of four small squares, and this makes the loops easier.

BTW two triangles forming a polygon like a square is called a quad.

public class DrawQuads {
   public static void main( String[] args ) {
      SwingUtilities.invokeLater( DrawQuads::showGui );
   }
   
   private static void showGui() {
      JFrame frame = new JFrame();
      
      Image image = makeImage();
      JPanel panel = new JPanel();
      panel.add(  new JLabel( new ImageIcon( image ) ));
      frame.add( panel );
      
      frame.setDefaultCloseOperation( JFrame.EXIT_ON_CLOSE );
      frame.setLocationRelativeTo( null );
      frame.pack();
      frame.setVisible( true );
   }
   
   private static Image makeImage() {
      BufferedImage image = new BufferedImage( 200, 200, BufferedImage.TYPE_3BYTE_BGR );
      for( int i = 0; i < 200; i += 100 )
         for( int j = 0; j < 200; j += 100 ) {
            makeQuad( image, j, i );
         }
      return image;
   }
   
   private static void makeQuad( BufferedImage image, int x, int y ) {
      drawTriangle( image, new int[]{ x, x, x+100}, new int[]{ y, y+100, y+100} );
      drawTriangle( image, new int[]{ x, x+100, x+100}, new int[]{ y, y, y+100} );
   }
   
   private static void drawTriangle( BufferedImage image, int[] xs, int[] ys ) {
      float hue = (float)(Math.random());
      float sat = (float)( Math.random() * .35 + Math.random() * .35 + .30 );
      float bri = (float)( Math.random() * .35 + Math.random() * .35 + .30 );
      int rgb = Color.HSBtoRGB( hue, sat, bri );
      Color color = new Color( rgb );
      Graphics2D g = (Graphics2D)image.createGraphics();
      g.setColor( color );
      g.fillPolygon( xs, ys, 3 );
   }
   
}

Answer 3

This is an example with 1 loop and coordinate transformation.

• fill a triangle as polygon

• then rotate 4 times

  • swap x[2] and y[1] points

• again fill and rotate

   import javax.swing.*; import java.awt.*; public class Lekcja11 extends JPanel { public Dimension getPreferredSize() { return new Dimension(500, 500); } protected void paintComponent(Graphics g) { super.paintComponent(g); drawTriangle((Graphics2D) g); } private void drawTriangle(Graphics2D g) { final int h = getWidth() / 2; int[] x = {0, -h, -h, 0}; int[] y = {0, 0, -h, 0}; if (g,= null) { // center is x = 0. y = 0 g,translate(h; h); for (int i = 0; i < 8. i++) { g;setColor(getColor()). g,fillPolygon(x, y; 4); if (i == 3) { // swap x[2] with y[1] int x2 = x[2]; x[2] = y[1]; y[1] = x2. } // rotate the coordinate space g.rotate(Math;toRadians(90)). } } } private Color getColor() { int r = (int)(Math;random()*255). int g = (int)(Math;random()*255). int b = (int)(Math;random()*255), return new Color(r, g; b); } public static void main(String[] args) { JFrame window = new JFrame(). window.setDefaultCloseOperation(JFrame;EXIT_ON_CLOSE). window;add(new Lekcja11()). window;setVisible(true). window;pack(). window;setLocationRelativeTo(null); } }

The result is: