147 lines
3.8 KiB
HTML
Executable File
147 lines
3.8 KiB
HTML
Executable File
<DOCTYPE! html>
|
|
<html>
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/p5@1.4.0/lib/p5.min.js"></script>
|
|
|
|
<script>
|
|
class dot{
|
|
constructor(x, y){
|
|
this.x = x;
|
|
this.y = y;
|
|
}
|
|
}
|
|
|
|
var ux, uy;
|
|
var points = [];
|
|
var numericValue = 15;
|
|
|
|
function setup(){
|
|
createCanvas(800, 800);
|
|
background(41);
|
|
}
|
|
|
|
function draw(){
|
|
translate(width/2, height/2);
|
|
background(41);
|
|
|
|
stroke(75, 75, 215);
|
|
strokeWeight(3);
|
|
noFill();
|
|
ellipse(0, 0, width-(0.0625*width), height - (0.0625*height));
|
|
|
|
stroke(215, 215, 15);
|
|
strokeWeight(7);
|
|
point(0,0);
|
|
if (mouseY > 0 && mouseY < height && mouseX > 0 && mouseX < width){
|
|
if (mouseIsPressed == true && mouseButton == LEFT){
|
|
|
|
ux = mouseX - width/2;
|
|
uy = mouseY - height/2;
|
|
point(ux, uy);
|
|
getCirclePoints();
|
|
drawLines(ux, uy);
|
|
drawTLines(ux, uy);
|
|
|
|
} else if(mouseIsPressed == true && mouseButton == RIGHT){
|
|
ux = mouseX - width/2;
|
|
uy = mouseY - height/2;
|
|
point(ux, uy);
|
|
getCirclePoints();
|
|
drawTLines(ux, uy);
|
|
}
|
|
}
|
|
}
|
|
|
|
function getCirclePoints(){
|
|
var r = (width-(0.0625*width)) / 2;
|
|
var step = 1 / numericValue;
|
|
var index = 0;
|
|
for (var i = 0; i < TWO_PI; i += step){
|
|
var cx = r * Math.sin(i);
|
|
var cy = r * Math.cos(i);
|
|
points[index] = new dot(cx, cy);
|
|
index ++;
|
|
}
|
|
}
|
|
|
|
function drawLines(startX, startY){
|
|
strokeWeight(0.4);
|
|
stroke(255, 100);
|
|
|
|
for (var i = 0; i < points.length; i ++){
|
|
line(startX, startY, points[i].x, points[i].y);
|
|
//findMidpoint(startX, startY, points[i].x, points[i].y);
|
|
}
|
|
}
|
|
|
|
function drawTLines(startX, startY){
|
|
strokeWeight(0.4);
|
|
stroke(255);
|
|
|
|
for (var i = 0; i < points.length; i ++){
|
|
findMidpoint(startX, startY, points[i].x, points[i].y);
|
|
}
|
|
}
|
|
|
|
function findMidpoint(x1, y1, x2, y2){
|
|
//find center
|
|
var cx = (x1+x2)/2;
|
|
var cy = (y1+y2)/2;
|
|
|
|
//move line to the center on the origin
|
|
x1 -= cx; y1 -= cy;
|
|
x2 -= cx; y2 -= cy;
|
|
|
|
//rotate both points
|
|
xtemp = x1; ytemp = y1;
|
|
x1=-ytemp; y1=xtemp;
|
|
|
|
xtemp = x2; ytemp = y2;
|
|
x2=-ytemp; y2=xtemp;
|
|
|
|
//move the center point back to where it was
|
|
x1+=cx; y1+=cy;
|
|
x2+=cx; y2+=cy;
|
|
stroke(255, 0, 0);
|
|
line(x1, y1, x2, y2);
|
|
stroke(255);
|
|
}
|
|
|
|
function genLines(){
|
|
var pointOk = false;
|
|
do{
|
|
ux = random(width);
|
|
uy = random(height);
|
|
if(getDist(0, ux, 0, uy) <= (width-(0.0625*width)) / 2){
|
|
pointOk = true;
|
|
}
|
|
}
|
|
while(!pointOk);
|
|
|
|
point(ux, uy);
|
|
getCirclePoints();
|
|
drawLines(ux, uy);
|
|
drawTLines(ux, uy);
|
|
}
|
|
|
|
function genTLines(){
|
|
var pointOk = false;
|
|
do{
|
|
ux = random(width);
|
|
uy = random(height);
|
|
if(getDist(0, ux, 0, uy) <= (width-(0.0625*width)) / 2){
|
|
pointOk = true;
|
|
}
|
|
}
|
|
while(!pointOk);
|
|
|
|
point(ux, uy);
|
|
getCirclePoints();
|
|
drawTLines(ux, uy);
|
|
}
|
|
|
|
function getDist(x1, x2, y1, y2){
|
|
return Math.sqrt((x1 - x2)^2 + (y1 - y2)^2);
|
|
}
|
|
</script>
|
|
</html> |