JavaScript 및 HTML5를 사용하여 파팅 트리 인코딩
25558 단어 htmlfractalsbeginnersjavascript
무엇이 분형수입니까?
물론 분형 트리를 정의하려면 먼저 분형의 정의를 알아야 한다.
분형은 반복 수학 방정식을 통해 만들어진 끝없는 모델로 어떤 비례, 어떤 축소 단계에서도 대체적으로 같아 보인다.다시 말하면 기하학적 물체의 기본 구조는 거칠거나 지리멸렬하며 서로 다른 척도에서 자신을 반복한다.
따라서 만약에 우리가 분형을 분할한다면 우리는 전체적인 축소 복사본을 볼 수 있을 것이다.
Benoit Mandelbrot는 1975년에 분형이라는 단어를 만들었습니다.
A Fractal is a shape made of parts similar to the whole in some way.
잘 아시죠?
다음은 몇 가지 예입니다.
펑-코흐 곡선
셀빈스키 카펫
지금, 무엇이 분형수입니까?
한 가지 나뭇가지를 상상해 보세요. 그 중에서 한 가지 나뭇가지를 내밀고, 그 나뭇가지마다 두 가지 나뭇가지를 내밀고, 이런 식으로 미루면... 이것이 바로 분형나무의 모습입니다.
그 형식은 Sierpinski 삼각형(또는 Sierpinski 패드)에서 나온다.
보시다시피 브랜치 사이의 각도를 변경할 때 하나는 다른 것으로 바뀝니다.
오늘, 우리는gif의 최종 형식과 유사한 도형을 얻을 것이다.
Vanilla JS로 분형 트리 작성
우선 최종 제품입니다(프로세스 중에 조정할 수 있습니다).
이제 한 걸음 한 걸음 그려봅시다.
우선, 우리는 색인을 초기화합니다.html 파일, 합리적인 차원의 캔버스, 그리고 모든 JS 코드가 있는 스크립트 표시.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<canvas id="my_canvas" width="1000" height="800"></canvas>
<script></script>
</body>
</html>
myCanvas 변수를 통해 접근하고 ctx(context) 변수를 사용하여 2D 렌더링 상하문을 만드는 방법으로 JS에서 캔버스 요소를 초기화합니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<canvas id="my_canvas" width="1000" height="800"></canvas>
<script>
var myCanvas = document.getElementById("my_canvas");
var ctx = myCanvas.getContext("2d");
</script>
</body>
</html>
지금은 생각할 때다.우리는 어떻게 분형 트리를 그리는 알고리즘을 정의합니까?음..🤔
어디 보자, 우리는 나뭇가지가 줄곧 작아지고 있다는 것을 안다.모든 나뭇가지의 끝에는 두 개의 나뭇가지가 있는데, 하나는 왼쪽에 있고, 하나는 오른쪽에 있다.
다시 말하면 하나의 지점이 충분하게 길면 두 개의 작은 지점을 그것에 연결시킨다.되풀이
듣자하니 우리는 어딘가에서 귀속문장을 사용해야 한다고 한다. 그렇지 않니?
코드로 돌아가서 우리는 함수
fractalTree를 정의합니다. 함수는 최소한 네 개의 매개 변수를 포함해야 합니다. 그것이 바로 지점이 시작하는 X와 Y 좌표, 지점의 길이와 각도입니다.함수에서, 우리는 beginPath () 방법으로 그림을 그리기 시작하고, save () 방법으로 화포의 상태를 저장합니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<canvas id="my_canvas" width="1000" height="800"></canvas>
<script>
var myCanvas = document.getElementById("my_canvas");
var ctx = myCanvas.getContext("2d");
function draw(startX, startY, len, angle) {
ctx.beginPath();
ctx.save();
}
</script>
</body>
</html>
이제 우리는 분형 트리를 그릴 것이다. 선 (지분) 을 그리고, 화포를 회전하고, 다음 지점을 그릴 것이다.이것은 다음과 같습니다. (코드 예제 아래에서 각 방법을 설명하겠습니다.)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<canvas id="my_canvas" width="1000" height="800"></canvas>
<script>
var myCanvas = document.getElementById("my_canvas");
var ctx = myCanvas.getContext("2d");
function draw(startX, startY, len, angle) {
ctx.beginPath();
ctx.save();
ctx.translate(startX, startY);
ctx.rotate(angle * Math.PI/180);
ctx.moveTo(0, 0);
ctx.lineTo(0, -len);
ctx.stroke();
if(len < 10) {
ctx.restore();
return;
}
draw(0, -len, len*0.8, -15);
draw(0, -len, len*0.8, +15);
ctx.restore();
}
draw(400, 600, 120, 0)
</script>
</body>
</html>
만약에 문장 이전의 마지막 두 가지 방법은lineTo와stroke입니다. 첫 번째 방법은 직선을 현재 경로에 추가하고, 두 번째 방법은 그것을 렌더링합니다. 이렇게 생각할 수 있습니다. lineTo는 명령을 주고,stroke는 그것을 실행합니다.
지금 우리는if문구가 하나 있는데, 이것은 우리에게 귀속을 멈추고, 그림을 멈추는 것을 알려준다.복구 방법MDN Docs에 설명된 바와 같이 "그림 상태 스택의 맨 위 항목을 팝업하여 최근에 저장된 캔버스 상태를 복원합니다."
if 문장 다음에 우리는 귀속 호출이 있고, Restore 방법에 대한 호출이 있습니다.그리고 우리가 방금 완성한 함수를 호출합니다.
현재 브라우저에서 코드를 실행합니다.마지막으로, 너는 분형수 한 그루를 볼 수 있을 거야!
너무 좋아요, 그렇죠?이제 더 잘하자.
분형 트리를 더욱 생동감 있게 하기 위해 그림 함수에 새 매개 변수인branchWidth를 추가할 것입니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<canvas id="my_canvas" width="1000" height="800"></canvas>
<script>
var myCanvas = document.getElementById("my_canvas");
var ctx = myCanvas.getContext("2d");
function draw(startX, startY, len, angle, branchWidth) {
ctx.lineWidth = branchWidth;
ctx.beginPath();
ctx.save();
ctx.translate(startX, startY);
ctx.rotate(angle * Math.PI/180);
ctx.moveTo(0, 0);
ctx.lineTo(0, -len);
ctx.stroke();
if(len < 10) {
ctx.restore();
return;
}
draw(0, -len, len*0.8, angle-15, branchWidth*0.8);
draw(0, -len, len*0.8, angle+15, branchWidth*0.8);
ctx.restore();
}
draw(400, 600, 120, 0, 10)
</script>
</body>
</html>
이제 색깔을 추가합시다!그늘도 있는데 왜 안 그래요?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<canvas id="my_canvas" width="1000" height="800"></canvas>
<script>
var myCanvas = document.getElementById("my_canvas");
var ctx = myCanvas.getContext("2d");
function draw(startX, startY, len, angle, branchWidth) {
ctx.lineWidth = branchWidth;
ctx.beginPath();
ctx.save();
ctx.strokeStyle = "green";
ctx.fillStyle = "green";
ctx.translate(startX, startY);
ctx.rotate(angle * Math.PI/180);
ctx.moveTo(0, 0);
ctx.lineTo(0, -len);
ctx.stroke();
ctx.shadowBlur = 15;
ctx.shadowColor = "rgba(0,0,0,0.8)";
if(len < 10) {
ctx.restore();
return;
}
draw(0, -len, len*0.8, angle-15, branchWidth*0.8);
draw(0, -len, len*0.8, angle+15, branchWidth*0.8);
ctx.restore();
}
draw(400, 600, 120, 0, 10)
</script>
</body>
</html>
이렇게!파일을 저장하고 최종 제품을 보려면 브라우저를 사용하여 엽니다.
지금 코드 사용을 권장합니다!음영 색상 변경, 채우기 스타일, 짧거나 긴 분형 트리 만들기, 각도 변경, 나뭇잎 추가 시도 등 도전적일 것😉
분형수 초월
내가 이 문장의 첫머리에서 너희들에게 보여준 바와 같이 서로 다른 분형이 있다.Canvas API로 이 모든 것을 만드는 것은 쉽지 않지만 가능할 것이다.나는 C 프로그래밍 언어로 좀 했고, p5도 사용했다.js.
js는 자바스크립트 라이브러리로 artists가 artists로 개발하고 기반Processing language이다.너는 상상할 수 있는 어떤 것도 그릴 수 있다.만약 네가 코드로 예술을 창작하는 것에 흥미가 있다면, 이것은 필수적이다.그들은 아주 좋은 입문 페이지를 가지고 있는데, 너는 볼 수 있다here.
나는 최근에 L 시스템을 이용하여 JS에 분형 트리를 만든 사이트를 발견했다.정말 멋있어요.보세요 The Fractal Zone!코드는 here🤓
자, 이제 이렇게 하자!어떤 문제든지 읽어 주시고, 평론해 주셔서 감사합니다. 다음 문장에서 뵙겠습니다.🧔
Cover by socialtrendspr0 from Pixabay
Reference
이 문제에 관하여(JavaScript 및 HTML5를 사용하여 파팅 트리 인코딩), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/lautarolobo/use-javascript-and-html5-to-code-a-fractal-tree-2n69텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
