<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!",SEGMENTS=200;let centerX,centerY,fontSize,fontSize2,INNER_RADIUS,RADIUS_VARIATION,TEXT_VARIANT;const palette=["#ff6347","#ffd700","#7cfc00","#4682b4","#dda0dd"];let lines=[],linesNum=60;const DIST=10;let MAX;const GEN=30;let stColor;function setup(){createCanvas(windowWidth,windowHeight),centerX=windowWidth/2,centerY=windowHeight/2;let t=min(height,width)/1e3;fontSize=150*t,fontSize2=20*t,INNER_RADIUS=200*t,RADIUS_VARIATION=200*t,TEXT_VARIANT=0,MAX=width>height?width:height,stColor=random(palette);for(let e=0;e<60;e++)lines.push(new MyLine)}function pointForIndex(t){let e=t*TWO_PI,i=cos(e),s=sin(e),n=INNER_RADIUS+RADIUS_VARIATION*noise(1.5*i+1.5,1.5*s+1.5,frameCount/100);return{x:n*i+centerX,y:n*s+centerY}}function draw(){background("#f5f5dc"),noStroke();for(let t=0;t<lines.length;t++)push(),translate(width/2,height/2),rotate(360*t/lines.length),lines[t].display(),pop();fill("#ffe4e1"),stroke(stColor),strokeWeight(10),circle(width/2,height/2,.2*MAX),noStroke(),0===TEXT_VARIANT?fill("#8b0000"):fill("#32cd32"),noStroke(),beginShape();for(let e=0;e<200;e++){let i=pointForIndex(e/200);vertex(i.x,i.y)}endShape(CLOSE),textFont("Helvetica"),textAlign(LEFT,BASELINE),textSize(fontSize),1===TEXT_VARIANT?fill("#8b0000"):fill("#ff4500");let s=atan2(mouseY-centerY,mouseX-centerX)/TWO_PI,n=1/((INNER_RADIUS+RADIUS_VARIATION/2)*TWO_PI);for(let o=0;o<textToWrite.length;o++){let h=textWidth(textToWrite.charAt(o)),$=pointForIndex((s+=h/2*n)-.01),l=pointForIndex(s+.01),r=atan2($.y-l.y,$.x-l.x)+PI;push();let c=pointForIndex(s);translate(c.x,c.y),rotate(r),translate(-c.x,-c.y),text(textToWrite.charAt(o),c.x-h/2,c.y),pop(),s+=h/2*n}textFont("Helvetica"),textSize(fontSize2),textAlign(CENTER,CENTER),fill(255,255,255);let A="Passionate about web design,\n dabble in Android development,\n and explore GCP.";1===TEXT_VARIANT&&(A="Contact me here:\ncodekamehameha@gmail.com"),text(A,centerX-INNER_RADIUS,centerY-INNER_RADIUS/2,2*INNER_RADIUS)}function mouseClicked(){TEXT_VARIANT=0===TEXT_VARIANT?1:0}class MyLine{constructor(){this.objs=[],this.speed=random(3,6),this.height=random(2,10)}display(){30>random(100)&&(0==this.objs.length||this.objs.length>0&&this.objs[this.objs.length-1].hasDistance())&&this.objs.push(new Obj(this.speed,this.height));for(let t=0;t<this.objs.length;t++)this.objs[t].move(),this.objs[t].display();this.objs.length>0&&this.objs[0].isFinished()&&this.objs.splice(0,1)}}class Obj{constructor(t,e){this.x=0,this.y=0,this.speed=t,this.width=random(10,100),this.height=e,this.color=color(random(palette))}move(){this.x-=this.speed}isFinished(){return this.x<-(.6*MAX)-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>
