Kaleidoscope project

[S Connor]

Hi,

I want to make a project that will draw a kaleidoscope. I would need to draw some shapes inside a triangle and then reflect that triangle in six directions to make a hexagonal display.

I don't know how to draw shapes within a triangle so that any part of the shape that extends beyond the boundary is not drawn and I don't know how to reflect the shapes to make a hexagon.

Can you give me any tips please?

[Piet Souris]

If you have a Graphics2D (for instance from a BufferedImage) you can give it a clip (see the api) and that clip can be any shape, like a triangle. Anyrhing you draw in that G2D will be clipped inside that shape.

[S Connor]

Thanks.  Do you know how I could rotate or reflect the image somehow?

[Tim Holloway]

S Connor wrote:Thanks.  Do you know how I could rotate or reflect the image somehow?

Graphics2d has a translation function. I think that's what you use in such cases. Also for scaling.

[Piet Souris]

Well, my first thoughts would be:

1) determine the size of your equilateral triangle, say W and H.

2) create the triangle as a Path2D.Double, with coordinates (W/2, 0), (0, H), (W, H) and close it.

3) create a BufferedImage buf, type INT_ARGB, with width W and height H

4) get its g2d, set the triangle as clip and draw all the colours and shapes to it that you want.

5) create the main BufferedImage mainBuf, with height 2*H, and sufficient width. We now draw 6 times buf to its g2d, the first one at (0, H), then rotate mainBuf PI/3 around its center (as Tim said, there are methods in the g2d that make this possible) and draw buf again, at (), H). By doing this six times, mainBuf has now 6 copies of the triangle, all neatly rotated around mainBuf's center.

6) draw mainBuf in your JPanel

7) global health warning: I typed this out of my head, and therefore there are no guarantees! If it doesn't work like I had in mind, let us know what problem you emcountered.

[Piet Souris]

Here is an example of what I described. It is a very rough version, though

import java.awt.Color;
import java.awt.Dimension;
import java.awt.Graphics;
import java.awt.Graphics2D;
import java.awt.geom.Ellipse2D;
import java.awt.geom.Path2D;
import java.awt.image.BufferedImage;
import java.util.Random;
import javax.swing.JFrame;
import javax.swing.JPanel;

import static java.lang.Math.PI;
import static java.lang.Math.sin;

/**
 *
 * @author Piet
 */
public class Kaleidoscope {
    
    public Kaleidoscope() {}
    
    public static void main(String... args) {
        var width = 200D;
        var height = width * sin(PI / 3);
        var buf = create(width);
        var panel = new JPanel() {
            @Override
            public Dimension getPreferredSize() {
                return new Dimension(2 * (int) width, 2 * (int) height);
            }
            @Override
            public void paintComponent(Graphics g) {
                super.paintComponent(g);
                g.setColor(Color.red);
                g.drawRect(0, 0, this.getWidth() - 1, this.getHeight() - 1);
                g.drawImage(buf, 0, 0, null);
            }
            @Override
            public Color getBackground() {
                return new Color(200, 255, 200);
            }
        };
        var f = new JFrame();
        f.setContentPane(panel);
        f.pack();
        f.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        f.setLocationRelativeTo(null);
        f.setVisible(true);
    }
    
    // calculates the BufferedImage with the Kaleidoscope and returns it
    public static BufferedImage create(double width) {
        double height = width * sin(PI / 3);
        // create the triangle shape
        var triangle = new Path2D.Double();
        triangle.moveTo(width / 2, 0);
        triangle.lineTo(0, height);
        triangle.lineTo(width, height);
        triangle.lineTo(width / 2, 0);
        triangle.closePath();
        
        // create the BufferedImage that contains the somewhat filled triangle
        var buf = new BufferedImage((int) width, (int) height, BufferedImage.TYPE_INT_ARGB);
        var g2d = (Graphics2D) buf.getGraphics();
        // draw a red circumference of the triagle, to see where it is
        g2d.setColor(Color.red);
        g2d.draw(triangle);
        // set the clip
        g2d.clip(triangle);
        // and fill the BufferedImage with random circles
        // because of the clip you see only the part inside the triangle
        var random = new Random();
        for (int i = 1; i <= 50; i++) {
            var diam = random.nextInt(50);
            var col = new Color(random.nextInt(256), random.nextInt(256), random.nextInt(256));
            var ellipse = new Ellipse2D.Double(random.nextInt((int)width), random.nextInt((int)height), diam, diam);
            g2d.setColor(col);
            g2d.fill(ellipse);
        }
        
        // and now the mainBuf, that will contain 6 rotated versions of the
        // bufferedimage created above
        var mainBuf = new BufferedImage((int) (2 * width), (int) (2 * height), BufferedImage.TYPE_INT_ARGB);
        g2d = (Graphics2D) mainBuf.getGraphics();
        var centerX = mainBuf.getWidth() / 2;
        var centerY = mainBuf.getHeight() / 2;
        for (int i = 0; i < 6; i++) {
            g2d.rotate(PI / 3, centerX, centerY);
            g2d.drawImage(buf, null, mainBuf.getWidth() / 4, mainBuf.getHeight() / 2);
        }
        g2d.dispose();
        return mainBuf;
    }
}