<html>

<head>
    <meta charset="utf-8">
    <title>亀</title>
    <script src="https://cdn.jsdelivr.net/npm/p5@0.8.0/lib/p5.js" type="text/javascript"></script>
    <script>
        const textToWrite = "Kamehameha Coder!";
        const SEGMENTS = 200;
        let centerX, centerY, fontSize, fontSize2, INNER_RADIUS, RADIUS_VARIATION, TEXT_VARIANT;
        const palette = ["#ff6347", "#ffd700", "#7cfc00", "#4682b4", "#dda0dd"];
        let lines = [];
        let linesNum = 60;
        const DIST = 10;
        let MAX;
        const GEN = 30;
        let stColor;

        function setup() {
            createCanvas(windowWidth, windowHeight);
            centerX = windowWidth / 2;
            centerY = windowHeight / 2;
            let scaleFactor = min(height, width) / 1000;
            fontSize = scaleFactor * 150;
            fontSize2 = scaleFactor * 20;
            INNER_RADIUS = scaleFactor * 200;
            RADIUS_VARIATION = scaleFactor * 200;
            TEXT_VARIANT = 0;
            MAX = width > height ? width : height;
            stColor = random(palette);
            for (let i = 0; i < 60; i++) {
                lines.push(new MyLine());
            }
        }

        function pointForIndex(index) {
            let angle = index * TWO_PI;
            let cosValue = cos(angle);
            let sinValue = sin(angle);
            let timeValue = frameCount / 100;
            let noiseValue = noise(1.5 * cosValue + 1.5, 1.5 * sinValue + 1.5, timeValue);
            let radius = INNER_RADIUS + RADIUS_VARIATION * noiseValue;
            return {
                'x': radius * cosValue + centerX,
                'y': radius * sinValue + centerY
            };
        }

        function draw() {
            background("#f5f5dc");
            noStroke();
            for (let i = 0; i < lines.length; i++) {
                push();
                translate(width / 2, height / 2);
                rotate(360 * i / lines.length);
                lines[i].display();
                pop();
            }
            fill("#ffe4e1");
            stroke(stColor);
            strokeWeight(10);
            circle(width / 2, height / 2, MAX * 0.2);
            noStroke();
            if (TEXT_VARIANT === 0) {
                fill("#8b0000");
            } else {
                fill("#32cd32");
            }
            noStroke();
            beginShape();
            for (let i = 0; i < 200; i++) {
                let p = pointForIndex(i / 200);
                vertex(p.x, p.y);
            }
            endShape(CLOSE);
            textFont('Helvetica');
            textAlign(LEFT, BASELINE);
            textSize(fontSize);
            if (TEXT_VARIANT === 1) {
                fill("#8b0000");
            } else {
                fill("#ff4500");
            }
            let angle = atan2(mouseY - centerY, mouseX - centerX) / TWO_PI;
            let step = 1 / ((INNER_RADIUS + RADIUS_VARIATION / 2) * TWO_PI);
            for (let i = 0; i < textToWrite.length; i++) {
                let charWidth = textWidth(textToWrite.charAt(i));
                angle += charWidth / 2 * step;
                let p1 = pointForIndex(angle - 0.01);
                let p2 = pointForIndex(angle + 0.01);
                let angle2 = atan2(p1.y - p2.y, p1.x - p2.x) + PI;
                push();
                let p = pointForIndex(angle);
                translate(p.x, p.y);
                rotate(angle2);
                translate(-p.x, -p.y);
                text(textToWrite.charAt(i), p.x - charWidth / 2, p.y);
                pop();
                angle += charWidth / 2 * step;
            }
            textFont('Helvetica');
            textSize(fontSize2);
            textAlign(CENTER, CENTER);
            fill(255, 255, 255);
            let infoText = "Passionate about web design,\n\ dabble in Android development,\n\ and explore GCP.";
            if (TEXT_VARIANT === 1) {
                infoText = "Contact me here:\n\codekamehameha@gmail.com";
            }
            text(infoText, centerX - INNER_RADIUS, centerY - INNER_RADIUS / 2, INNER_RADIUS * 2);
        }

        function mouseClicked() {
            if (TEXT_VARIANT === 0) {
                TEXT_VARIANT = 1;
            } else {
                TEXT_VARIANT = 0;
            }
        }

        class MyLine {
            constructor() {
                this.objs = [];
                this.speed = random(3, 6);
                this.height = random(2, 10);
            }

            display() {
                if (random(100) < 30) {
                    if (this.objs.length == 0 || this.objs.length > 0 && this.objs[this.objs.length - 1].hasDistance()) {
                        this.objs.push(new Obj(this.speed, this.height));
                    }
                }
                for (let i = 0; i < this.objs.length; i++) {
                    this.objs[i].move();
                    this.objs[i].display();
                }
                if (this.objs.length > 0 && this.objs[0].isFinished()) {
                    this.objs.splice(0, 1);
                }
            }
        }

        class Obj {
            constructor(speed, height) {
                this.x = 0;
                this.y = 0;
                this.speed = speed;
                this.width = random(10, 100);
                this.height = height;
                this.color = color(random(palette));
            }

            move() {
                this.x -= this.speed;
            }

            isFinished() {
                return this.x < -MAX * 0.6 - this.width;
            }

            hasDistance() {
                return this.x < -(this.width + 10);
            }

            display() {
                fill(this.color);
                rect(this.x, this.y, this.width, this.height, this.height / 2);
            }
        }
    </script>
</head>

<body>
</body>

</html>
