Ta aplikacja powinna wyświetlać ładne wzorki wewnątrz okręgu. Inspirowana była tym odcinkiem Mathologer'a: https://www.youtube.com/watch?v=qhbuKbxJsk8
Kod JavaScriptu działa poprawnie dla całkowitego mnożnika i chciałem go rozwijać ale ciężko się testuje gdy nie widać efektu :)
Problem polega na tym, że element <line> dodawany jest do wnętrza <svg> ale przeglądarka go nie pokazuje. Sposób na debugowanie jaki ja odkryłem to: W inspektorze strony w przeglądarce(Ctrl + Shift + i) wybieramy tag svg, klikamy prawym przyciskiem myszki i edytujemy go jako HTML, kopiujemy dowolny tag <line>, wklejamy go obok i klikamy poza tagiem <svg>. Strona powinna pokazać teraz wygenerowany efekt.
Nie mam pojęcia z czym to jest związane. Jeśli ma ktoś jakiś pomysł jak to rozwiązać, to proszę śmiało pisać. Jak nie to przynajmniej zobaczycie fajne wzorki :)
<!DOCTYPE html>
<html>
<head>
<title>Time Tables</title>
<meta charset="utf-8"/>
<link rel="stylesheet" href="style.css" type="text/css"/>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="app.js"></script>
</head>
<body>
<form action="#">
<label>
points on the circle:<br/>
<input id="points" type="number" value="10"/>
</label><br/>
<label>
times:<br/>
<input id="times" type="number" step="0.1" value="2.0"/>
</label><br/>
</form>
<svg>
<line x1="200" y1="0" x2="0" y2="200"/>
</svg>
</body>
</html>
body{
text-align: center;
}
svg{
margin-top: 10px;
width: 500px;
height: 500px;
}
line{
stroke: black;
stroke-width: 1px;
}
$(function(){
function Line(x1, y1, x2, y2){
var svg = $("svg");
var line = $('<line x1="'+ x1 +'" y1="'+ y1 +'" x2="'+ x2 +'" y2="'+ y2 +'"/>');
svg.append(line);
}
function pLine(P1, P2){
Line(P1.x, P1.y, P2.x, P2.y);
}
function P(x, y){
this.x = x;
this.y = y;
}
var S = new P(250, 250);
var radius = 200;
var points = 10;
var pointsElement = $("#points");
pointsElement.on("input", function(){
points = parseInt(this.value);
doThis();
});
var times = 2.0;
var timesElement = $("#times");
timesElement.on("input", function(){
times = parseFloat(this.value);
doThis();
});
function doThis(){
var svg = $("svg");
svg.children().each(function(index, element){
$(element).remove();
});
console.log(points, times);
var alpha = Math.PI * 2 / points ;
var circlePoints = [];
for(var i = 0; i < points; i++){
circlePoints.push(new P(
parseInt(S.x + radius * Math.cos(i * alpha)),
parseInt(S.y + radius * Math.sin(i * alpha))
));
}
for(var i = 0; i < points; i++){
pLine(
circlePoints[i],
circlePoints[(i * times) % points]
);
}
};
doThis();
});