html5 区域选择,HTML5简单的区域无限细分算法动画

比眉伴天荒 2022-10-06 10:50 146阅读 0赞

JavaScript

语言：

JaveScriptBabelCoffeeScript

确定

// Configuration

const SIM\_ITERATIONS = 14;

class Vector2 \{

constructor(x = 0, y = 0) \{

this.x = x;

this.y = y;

clone() \{

return new Vector2(this.x, this.y);

add(v) \{

this.x += v.x;

this.y += v.y;

return this;

subtract(v) \{

this.x -= v.x;

this.y -= v.y;

return this;

multiply(v) \{

this.x \*= v.x;

this.y \*= v.y;

return this;

multiplyScalar(s) \{

this.x \*= s;

this.y \*= s;

return this;

static fromScalar(s) \{

return new Vector2(s, s);

class Rectangle \{

constructor(position, size) \{

this.position = position;

this.size = size;

getSurfaceSize() \{

return this.size.x \* this.size.y;

cut(position) \{

const orientation = Math.random() < .5 ? 'x': 'y';

const positionInv = 1 - position;

const positionA = this.position.clone();

const sizeA = this.size.clone();

sizeA\[orientation\] \*= position;

const positionB = this.position.clone();

const sizeB = this.size.clone();

positionB\[orientation\] += sizeA\[orientation\];

sizeB\[orientation\] -= sizeA\[orientation\];

return \[

new Rectangle(positionA, sizeA),

new Rectangle(positionB, sizeB),

\];

render(context, scale = Vector2.fromScalar(1)) \{

const position = this.position.clone()

.multiply(scale);

const size = this.size.clone()

.multiply(scale);

context.fillRect(

position.x,

position.y,

size.x,

size.y

);

class Simulation \{

constructor(interationsMAx) \{

this.canvas = document.createElement('canvas');

this.context = this.canvas.getContext('2d');

this.scale = Vector2.fromScalar(1);

this.rectangles = \[\];

this.loop = this.animate.bind(this);

this.loopInterval = null;

this.iterationsMax = interationsMAx;

this.reset();

setSize(width, height) \{

this.canvas.height = height;

this.canvas.width = width;

this.scale.x = width;

this.scale.y = height;

reset() \{

if (this.loopInterval) \{

this.loopInterval = cancelAnimationFrame(this.loopInterval);

this.loopInterval = null;

this.iteration = 0;

this.rectangles = \[

new Rectangle(

Vector2.fromScalar(0),

Vector2.fromScalar(1)

)

\];

this.animate();

animate() \{

if (++this.iteration <= this.iterationsMax) \{

this.loopInterval = requestAnimationFrame(this.loop);

this.update();

this.render();

update() \{

const newRectangles = \[\];

const cutMin = .1;

const cutMax = .9;

this.rectangles.forEach((rectangle, index) => \{

const cut = cutMin + (cutMax - cutMin) \* Math.random();

const segments = rectangle.cut(cut);

newRectangles.push(...segments);

\});

this.rectangles = newRectangles;

getColor(rectangle) \{

const shadeMin = .25;

const shadeMax = .75;

const hue = rectangle.position.x;

const shade = shadeMin + (shadeMax - shadeMin) \* (1 - rectangle.position.y);

return \`hsl($\{hue \* 360\}, 80%, $\{shade \* 100\}%)\`;

render() \{

this.context.fillStyle = 'rgba(255, 255, 255, .5)';

this.context.fillRect(0, 0, this.canvas.width, this.canvas.height);

this.rectangles.forEach((rectangle, index) => \{

this.context.fillStyle = this.getColor(rectangle);

rectangle.render(this.context, this.scale);

\});

const sim = new Simulation(SIM\_ITERATIONS);

sim.setSize(window.innerWidth, window.innerHeight);

document.body.appendChild(sim.canvas);

window.addEventListener('click', () => sim.reset());

window.addEventListener('resize', () => \{

sim.setSize(window.innerWidth, window.innerHeight);

sim.render();

\});

html5 区域选择,HTML5简单的区域无限细分算法动画

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关 html5 电流效果,HTML5 – 渲染简单的电路

相关 html画布动画,HTML5画布CANVAS动画。

相关 html5 区域选择,HTML5简单的区域无限细分算法动画

相关 html5动画

相关 html5的canvas旋转动画

相关 HTML5新增的选择器

相关 HTML5/CSS3系列教程：HTML5 区域(Sectioning)的重要性

相关 html5之canvas动画

相关 HTML5特效动画

相关 HTML5加载动画