分形之科赫雪花

前言

分形是一种具有自相似性的几何图形或数学对象。它的特点是无论在任何放大或缩小的尺度下，都能够看到与整体相似的图形。分形的形状可以非常复杂，常常具有分支、重复的图案，以及细节层次丰富的结构。

分形在自然界中广泛存在，如云朵、树枝、山脉、海岸线等，它们都展现了分形的特性。分形也在科学和艺术中得到广泛应用。在科学中，分形可以用来描述复杂的自然现象，如心电图、地理地貌、经济市场的波动等。在艺术中，分形可以用来生成艺术作品，如绘画、音乐、电影等，通过分形的自相似性和美学特性，创造出独特的视觉和听觉体验。

分形理论的发展起源于20世纪70年代，由数学家贝诺瓦·曼德布罗特和两个波兰数学家兹比格涅夫·尼科拉斯·普鲁斯金斯基及尼科拉斯·尼可夫发现和研究。分形理论为我们提供了一种新的视角来理解自然界和艺术中的复杂性，并且对人类的认知和创造力产生了深远的影响。

科赫雪花（也叫科赫雪花曲线）是一种分形图形，由瑞典数学家科尔·科赫（Helge von Koch）于1904年提出的。它是从一个等边三角形开始构建的，然后将每条边分成三等分，并在其中一等分边上构建一个新的等边三角形。不断重复这个过程，每次都在已经构建好的图形的每条边上重复。最终，会得到一个形状复杂且具有自相似性的图形。

科赫雪花具有许多有趣的属性。首先，它有无限的边界长度，也就是说，无论你如何继续细分边界，都无法得到一个封闭的图形。其次，科赫雪花的面积虽然有限，但无法通过传统的几何方法来计算。最后，科赫雪花是自相似的，即它的任何一部分都与整体具有相似的形状。

科赫雪花是分形几何学的一个经典例子，它展示了分形的一些基本概念和性质。

分形是一种具有自相似性的图形，无论在任何尺度上观察，都能看到相似的形状。这种自相似性是分形图形与传统几何图形的重要区别之一，使得分形图形在自然界和科学中的许多领域都有广泛的应用。

用three.js实现科赫雪花

<!DOCTYPE html>
<html class="fullscreen" lang="zh-CN"><head><title>snow flake</title><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link rel="icon" href=""><style>.fullscreen {margin: 0px;padding: 0px;width: 100vw;height: 100vh;overflow: hidden;}html, body {overflow: hidden;font-family: '微软雅黑', sans-serif;color: #2f2f2f;}/* Page Loader */.page-loader {width: calc(100vw - 15px);height: calc(100vh - 15px);background-color: #f5e6d3;position: absolute;z-index: 100;top: 50%;left: 50%;transform: translate(-50%, -50%);border-radius: 10px;display: flex;align-items: center;justify-content: center;}.loader-container {width: 200px;height: 200px;display: flex;justify-content: center;align-items: center;}.base {position: absolute;width: 90px;height: 51px;}.base-two {transform: rotate(60deg)}.base-three {transform: rotate(-60deg)}.loader-hex-edge {position: absolute;width: 4px;height: 0%;background: #00738B;z-index: 101;}.h1 {left: 0;animation: AniOne 7.2s ease infinite;}.h2 {right: 0;animation: AniTwo 7.2s ease .6s infinite;}.h3 {right: 0;animation: AniTwo 7.2s ease 1.2s infinite;}.h4 {right: 0;animation: AniTwo 7.2s ease 1.8s infinite;}.h5 {left: 0;animation: AniOne 7.2s ease 2.4s infinite;}.h6 {left: 0;animation: AniOne 7.2s ease 3s infinite;}@keyframes AniOne {0% {bottom: 0;height: 0;}6.944444444% {bottom: 0;height: 100%;}50% {top: 0;height: 100%;}59.944444433% {top: 0;height: 0;}}@keyframes AniTwo {0% {top: 0;height: 0;}6.944444444% {top: 0;height: 100%;}50% {bottom: 0;height: 100%;}59.944444433% {bottom: 0;height: 0;}}/* Canvas */.container {width: calc(100vw - 1px);height: calc(100vh - 1px);position: absolute;z-index: 0;top: 50%;left: 50%;transform: translate(-50%, -50%);}.canvas {border-radius: 1px;}</style><script type="importmap">{"imports": {"three": "https://cdn.jsdelivr.net/npm/three@0.162.0/+esm","three/addons/": "https://cdn.jsdelivr.net/npm/three@0.162.0/examples/jsm/","lil-gui": "https://threejsfundamentals.org/3rdparty/dat.gui.module.js","@tweenjs/tween.js": "https://cdn.jsdelivr.net/npm/@tweenjs/tween.js@23.1.1/dist/tween.esm.js"}}</script></head><body class="fullscreen"><div class="page-loader"><div class="loader-container"><div class="base"><span class="loader-hex-edge h6"></span><span class="loader-hex-edge h3"></span></div><div class="base base-two"><span class="loader-hex-edge h1"></span><span class="loader-hex-edge h4"></span></div><div class="base base-three"><span class="loader-hex-edge h5"></span><span class="loader-hex-edge h2"></span></div></div></div><div class="fullscreen container"><canvas class="fullscreen canvas"></canvas></div><script type="module">import * as THREE from 'three';import * as TWEEN from '@tweenjs/tween.js';import { GUI } from 'lil-gui';const _changeEvent = { type: 'change' };const _startEvent = { type: 'start' };const _endEvent = { type: 'end' };const _ray = new THREE.Ray();const _plane = new THREE.Plane();const TILT_LIMIT = Math.cos( 70 * THREE.MathUtils.DEG2RAD );class OrbitControls extends THREE.EventDispatcher {constructor( object, domElement ) {super();this.object = object;this.domElement = domElement;this.domElement.style.touchAction = 'none'; // disable touch scroll// Set to false to disable this controlthis.enabled = true;// "target" sets the location of focus, where the object orbits aroundthis.target = new THREE.Vector3();// Sets the 3D cursor (similar to Blender), from which the maxTargetRadius takes effectthis.cursor = new THREE.Vector3();// How far you can dolly in and out ( PerspectiveCamera only )this.minDistance = 0;this.maxDistance = Infinity;// How far you can zoom in and out ( OrthographicCamera only )this.minZoom = 0;this.maxZoom = Infinity;// Limit camera target within a spherical area around the cursorthis.minTargetRadius = 0;this.maxTargetRadius = Infinity;// How far you can orbit vertically, upper and lower limits.// Range is 0 to Math.PI radians.this.minPolarAngle = 0; // radiansthis.maxPolarAngle = Math.PI; // radians// How far you can orbit horizontally, upper and lower limits.// If set, the interval [ min, max ] must be a sub-interval of [ - 2 PI, 2 PI ], with ( max - min < 2 PI )this.minAzimuthAngle = - Infinity; // radiansthis.maxAzimuthAngle = Infinity; // radians// Set to true to enable damping (inertia)// If damping is enabled, you must call controls.update() in your animation loopthis.enableDamping = false;this.dampingFactor = 0.05;// This option actually enables dollying in and out; left as "zoom" for backwards compatibility.// Set to false to disable zoomingthis.enableZoom = true;this.zoomSpeed = 1.0;// Set to false to disable rotatingthis.enableRotate = true;this.rotateSpeed = 1.0;// Set to false to disable panningthis.enablePan = true;this.panSpeed = 1.0;this.screenSpacePanning = true; // if false, pan orthogonal to world-space direction camera.upthis.keyPanSpeed = 7.0;	// pixels moved per arrow key pushthis.zoomToCursor = false;// Set to true to automatically rotate around the target// If auto-rotate is enabled, you must call controls.update() in your animation loopthis.autoRotate = false;this.autoRotateSpeed = 2.0; // 30 seconds per orbit when fps is 60// The four arrow keysthis.keys = { LEFT: 'ArrowLeft', UP: 'ArrowUp', RIGHT: 'ArrowRight', BOTTOM: 'ArrowDown' };// Mouse buttonsthis.mouseButtons = { LEFT: THREE.MOUSE.ROTATE, MIDDLE: THREE.MOUSE.DOLLY, RIGHT: THREE.MOUSE.PAN };// Touch fingersthis.touches = { ONE: THREE.TOUCH.ROTATE, TWO: THREE.TOUCH.DOLLY_PAN };// for resetthis.target0 = this.target.clone();this.position0 = this.object.position.clone();this.zoom0 = this.object.zoom;// the target DOM element for key eventsthis._domElementKeyEvents = null;//// public methods//this.getPolarAngle = function () {return spherical.phi;};this.getAzimuthalAngle = function () {return spherical.theta;};this.getDistance = function () {return this.object.position.distanceTo( this.target );};this.listenToKeyEvents = function ( domElement ) {domElement.addEventListener( 'keydown', onKeyDown );this._domElementKeyEvents = domElement;};this.stopListenToKeyEvents = function () {this._domElementKeyEvents.removeEventListener( 'keydown', onKeyDown );this._domElementKeyEvents = null;};this.saveState = function () {scope.target0.copy( scope.target );scope.position0.copy( scope.object.position );scope.zoom0 = scope.object.zoom;};this.reset = function () {scope.target.copy( scope.target0 );scope.object.position.copy( scope.position0 );scope.object.zoom = scope.zoom0;scope.object.updateProjectionMatrix();scope.dispatchEvent( _changeEvent );scope.update();state = STATE.NONE;};// this method is exposed, but perhaps it would be better if we can make it private...this.update = function () {const offset = new THREE.Vector3();// so camera.up is the orbit axisconst quat = new THREE.Quaternion().setFromUnitVectors( object.up, new THREE.Vector3( 0, 1, 0 ) );const quatInverse = quat.clone().invert();const lastPosition = new THREE.Vector3();const lastQuaternion = new THREE.Quaternion();const lastTargetPosition = new THREE.Vector3();const twoPI = 2 * Math.PI;return function update( deltaTime = null ) {const position = scope.object.position;offset.copy( position

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/845408.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

Java常用API（三）

Java常用API（三）

一、Arrays类 1.定义 Arrays是一个用于操作数组的工具类。 2.常用方法 1.toString方法 public class Demo {public static void main(String[] args) {//toString 将数组变成字符串int[] arr {1, 2, 3, 4, 5, 6, 7, 8, 9, 10};System.out.println(Arrays.toString(arr));…
阅读更多...
故障——pod状态为pending该如何解决

故障——pod状态为pending该如何解决

一、报错问题 当您的虚拟机出现如下报错&#xff0c;您首先快照一下虚拟机如果仍然报错 二、解决方法 2.1 任务管理器 首先进入任务管理器&#xff08;CtrlAltDel&#xff09;内&#xff0c;查看所有vmware是否都处在运行的状态&#xff0c;可能会跳出一个比较突兀的进程&#…
阅读更多...
【Spring Cloud】微服务链路跟踪Sleuth

【Spring Cloud】微服务链路跟踪Sleuth

目录 为什么要使用微服务链路跟踪微服务的现状多服务协同工作复杂的调用链条容易出错 微服务链路跟踪需要实现的需求实现监控决策避免技术债务快速定位故障 微服务链路跟踪的技术要求低消耗应用透明延展性可控采样率可视化 Spring Cloud Sleuth简介Spring Cloud Sleuth的4个特点…
阅读更多...
自动控制：控制系统的稳定性

自动控制：控制系统的稳定性

自动控制&#xff1a;控制系统的稳定性 在自动控制领域&#xff0c;控制系统的稳定性是一个至关重要的问题。稳定性决定了系统在受到扰动后是否能够恢复到平衡状态。本文将介绍控制系统稳定性的基本概念、如何利用特征值分析稳定性&#xff0c;并通过具体示例和Python代码展示…
阅读更多...
【洛谷B3643】图的存储 解题报告

【洛谷B3643】图的存储 解题报告

洛谷B3643 - 图的存储 题目描述 给定一个 n n n 个顶点 m m m 条边的无向图。请以邻接矩阵和邻接表的形式输出这一张图。 输入格式 第一行输入两个正整数 n n n 和 m m m&#xff0c;表示图的顶点数和边数。 第二行开始&#xff0c;往后 m m m 行&#xff0c;每行输入…
阅读更多...
Docker中布置Jenkins实现Android项目的自动化构建

Docker中布置Jenkins实现Android项目的自动化构建

因项目需要&#xff0c;要在服务器上使用Jenkins完成Android项目的自动化构建&#xff0c;但服务器上登录的账户没有管理员权限&#xff0c;无法用sudo命令&#xff0c;因此需要把相应环境布置在docker中。 环境搭建 docker容器相关命令 创建容器 docker create -it contai…
阅读更多...
【Python】解决Python报错：AttributeError: ‘function‘ object has no attribute ‘xxx‘

【Python】解决Python报错：AttributeError: ‘function‘ object has no attribute ‘xxx‘

&#x1f9d1; 博主简介&#xff1a;阿里巴巴嵌入式技术专家&#xff0c;深耕嵌入式人工智能领域&#xff0c;具备多年的嵌入式硬件产品研发管理经验。 &#x1f4d2; 博客介绍&#xff1a;分享嵌入式开发领域的相关知识、经验、思考和感悟&#xff0c;欢迎关注。提供嵌入式方向…
阅读更多...
未来已来， AI将作为超级工具？

未来已来， AI将作为超级工具？

人工智能时代已来 1.AI将作为超级工具&#xff1a;AI是推动全产业数字化转型的高效工具&#xff0c;机遇比互联网时代大10倍&#xff0c;但只有1/3的机会留给初创企业。 2.硅谷AI市场分类中&#xff0c;特别看好开源平台&#xff0c;其将为初创企业和大企业提供更多选择。 3.…
阅读更多...
C# 字节数组(byte[])拼接的性能对比测试

C# 字节数组(byte[])拼接的性能对比测试

将C#中的三种字节数组拼接方式的性能做了一个对比测试&#xff0c;DEMO程序代码如下&#xff1a; using System; using System.Collections.Generic; using System.Diagnostics; using System.Linq; using System.Text; using System.Threading.Tasks;namespace Byte数组拼接测…
阅读更多...
使用 DuckDuckGo API 实现多种搜索功能

使用 DuckDuckGo API 实现多种搜索功能

在日常生活中&#xff0c;我经常使用搜索引擎来查找信息&#xff0c;如谷歌和百度。然而&#xff0c;当我想通过 API 来实现这一功能时&#xff0c;会发现这些搜索引擎并没有提供足够的免费 API 服务。如果有这样的免费 API, 就能定时获取“关注实体”的相关内容&#xff0c;并…
阅读更多...
Gbase 国产数据库

Gbase 国产数据库

参考&#xff1a;参考&#xff1a; 5分钟学会Linux环境GBase 8t安装和部署 - 光洋山 - twt企业IT交流平台 (talkwithtrend.com)https://www.talkwithtrend.com/Article/197237 视频 GBase 8s快速入门-功能简介与演示-大数据教程-腾讯课堂 (qq.com)https://ke.qq.com/course/…
阅读更多...
ADB日常使用命令

ADB日常使用命令

【ADB全称 Android Debug Bridge】 是Android SDK中的一个命令行工具adb命令可以直接操作管理Android模拟器或真实的Android设备&#xff08;手机&#xff09; 建立PC和模拟器连接 # 建立连接 adb connect 127.0.1: 模拟器端口号〈逍遥模拟器21503〉 # 验证是否连接成功 adb d…
阅读更多...
整数乘除法练习题

整数乘除法练习题

#define _CRT_SECURE_NO_WARNINGS #include<stdio.h> #include<stdlib.h> #include<time.h> #include<Windows.h>void show1(); .//开始界面 int getchoice(); //选择界面 int dowork(int n); //随机做乘除法 int num(); //用户确定做题的数量 v…
阅读更多...
OrangePi AIpro 变身 Android 打包机

OrangePi AIpro 变身 Android 打包机

主板基本信息介绍 OrangePi AIpro&#xff0c;是香橙派联合华为精心打造&#xff0c;建设人工智能新生态而设计的一款开发板&#xff0c;这次为大家分享下我上手的这款 OrangePi AIpro 8GB&#xff08;算力达8TOPS&#xff09; 的一些小小的经验。 基本参数如下&#xff1a; …
阅读更多...
首创十八道工艺，口味王引领槟榔产业高质量发展

首创十八道工艺，口味王引领槟榔产业高质量发展

说到槟榔&#xff0c;相信大伙都不会陌生&#xff0c;槟榔的历史可以追溯到汉代&#xff0c;不少文献有过记载&#xff0c;如汉代的沈约著的《咏竹槟榔盘》中提到“荐羞虽百品&#xff0c;所贵浮天实”&#xff1b;唐朝“诗仙”李白更是写道“何时黄金盘&#xff0c;一斛荐槟榔…
阅读更多...
分享 ASP.NET Core Web Api 中间件获取 Request Body 两个方法

分享 ASP.NET Core Web Api 中间件获取 Request Body 两个方法

不废话&#xff0c;直接上正文。_ 方法一 思路&#xff1a;利用 BodyReader 直接读取 HttpContext 的 Request Body&#xff0c;再反序列化 var reqStream context.Request.BodyReader.AsStream(); var jsonObj JsonSerializer.Deserialize<CheckAndParsingMiddlewareM…
阅读更多...
buuctf的RSA（五）

buuctf的RSA（五）

[RoarCTF2019]RSA 一看到题目&#xff0c;我就有些蒙了&#xff0c;A是代表了什么&#xff0c; 先来分解n 接下来可以暴力破解e了&#xff0c;因为e没有给出来&#xff0c;应该不会太大&#xff0c;猜测是四位数字 import gmpy2 import libnum from Crypto.Util.number import…
阅读更多...
网卡配置基础知识

网卡配置基础知识

1、网络设置方式 首先科普下Virtual Box虚拟机的几种主流的网络设置方式&#xff0c;官方文档&#xff1a; 2解释 Host-only&#xff1a;仅主机模式 虚拟机和宿主机、虚拟机之间能互通&#xff0c;但是不能访问外网&#xff0c;虚拟机和宿主机同网段的其他主机不能互通这种…
阅读更多...
数据结构---栈队列

数据结构---栈队列

栈和队列是我们数据结构中经常使用的数据结构&#xff0c;所以现在来了解一下栈和队列。 栈 特点&#xff1a; 栈是一种特殊的线性表&#xff0c;其中进行数据插入和弹出的部分叫做栈顶&#xff0c;另一端叫做栈底。 只允许数据从栈顶压入&#xff0c;从栈顶弹出即先进后出的…
阅读更多...
最佳实践：REST API 的 HTTP 请求参数

最佳实践：REST API 的 HTTP 请求参数

HTTP 请求中的请求参数解释 当客户端发起 HTTP 请求 时&#xff0c;它们可以在 URL 末尾添加请求参数&#xff08;也叫查询参数或 URL 参数&#xff09;来传递数据。这些参数以键值对的形式出现在 URL 中&#xff0c;方便浏览和操作。 请求参数示例 以下是一些带有请求参数的…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023