4K 프랙탈 이미지를 만들어 보았습니다.
사용한 도구
CodePen 및 p5.js (processing)를 사용했습니다.
비주얼 프로그래밍 오랜 시간이므로 무엇을 사용하는지 헤매었습니다. (node.js, OpenGL, svg 등)
코드는 이것입니다.
htps : // 코데펜. 이오 / 아조 / 펜 / GYdQMW
재귀 처리 최적화
재귀이지만 processing 의 copy 사용해 초고속화 할 수 있었습니다.
copy() \ Language (API) \ Processing 3+
copy의 계산 순서는 모르지만 분명히 빨라졌으므로 사용했습니다.
재귀 함수 호출은 3 ^ 11회에서 11회입니다.
이미지 출력 방법
이미지를 export하는 스마트한 방법이 생각나지 않았지만,
canvas 요소에서 img 변환하는 방법을 사용했습니다.
const canvas = document.getElementById("canvas-container");
const img = canvas.toDataURL("image/png");
document.write('<img src="'+img+'"/>');
CodePen에도 스크린 샷 기능은 붙어 있었지만 크기가 HD였습니다.
Screenshots - CodePen Blog
완제품
프랙탈 피 c. 라고 r. m/g vWtXV21H — 아논 😎 (@anozon)
재귀이지만 processing 의 copy 사용해 초고속화 할 수 있었습니다.
copy() \ Language (API) \ Processing 3+
copy의 계산 순서는 모르지만 분명히 빨라졌으므로 사용했습니다.
재귀 함수 호출은 3 ^ 11회에서 11회입니다.
이미지 출력 방법
이미지를 export하는 스마트한 방법이 생각나지 않았지만,
canvas 요소에서 img 변환하는 방법을 사용했습니다.
const canvas = document.getElementById("canvas-container");
const img = canvas.toDataURL("image/png");
document.write('<img src="'+img+'"/>');
CodePen에도 스크린 샷 기능은 붙어 있었지만 크기가 HD였습니다.
Screenshots - CodePen Blog
완제품
프랙탈 피 c. 라고 r. m/g vWtXV21H — 아논 😎 (@anozon)
const canvas = document.getElementById("canvas-container");
const img = canvas.toDataURL("image/png");
document.write('<img src="'+img+'"/>');
프랙탈 피 c. 라고 r. m/g vWtXV21H — 아논 😎 (@anozon)
확대하면 거친? 네요.
덧붙여서 프랙탈 차원은 (색은 무시한다고)
는 1/4로 줄이면 두 개의 자기 유사 구조가 필요하기 때문에 프랙탈 차원은 이러한 방식으로 결정됩니다
다른 생각
- 다음은 더 4K의 화소수에 맞춘 프랙탈을 만들고 싶다.
- CodePen 에 prettier 원한다.
- 4K 배경 화면은 어디에 업로드해야합니까?
감사합니다.
Reference
이 문제에 관하여(4K 프랙탈 이미지를 만들어 보았습니다.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/anozon/items/9b048faef02d68f74d92텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)