chaos/scripts/fractal.js

247 lines
6.3 KiB
JavaScript
Raw Normal View History

2015-12-23 21:31:51 +00:00
'use strict';
import * as React from 'react';
import { applyChaos } from './chaos';
/**
* Render a canvas element that draws a fractal out of a
* given iterated function system
*/
2015-12-24 11:21:09 +00:00
class Fractal extends React.Component {
2015-12-23 21:31:51 +00:00
constructor(props) {
super(props);
this.state = {
2015-12-24 11:21:09 +00:00
zoom: 30,
2015-12-23 21:31:51 +00:00
dragging: false,
center: null,
points: null
};
}
/**
* Adjust zooming level and center so that wheeling the mouse
* on given point zooms around it
*
* @param {WheelEvent} event Mouse event
* @return {null}
*/
wheel(event) {
const zoom = this.state.zoom;
const center = this.state.center;
const height = this.ctx.canvas.height;
const delta = event.deltaMode === 0 ? event.deltaY / 53 : event.deltaY;
const newZoom = zoom * Math.max(0, 1 - delta * .035);
// which (unprojected) point does the mouse point on?
const mouse = [
(event.nativeEvent.offsetX - center[0]) / zoom,
(height - event.nativeEvent.offsetY - center[1]) / zoom
];
// we need to set the center so that `mouse` stays at
// the same position on screen, i.e (vectorially):
// mouse * newZoom + newCenter = mouse * zoom + center
// => newCenter = mouse * zoom - mouse * newZoom + center
this.setState({
zoom: newZoom,
center: [
mouse[0] * zoom - mouse[0] * newZoom + center[0],
mouse[1] * zoom - mouse[1] * newZoom + center[1]
]
}, this.draw);
event.preventDefault();
}
/**
* Save the mouse coordinates when we click down,
* for use by `mouseMove()`
*
* @param {MouseEvent} event Mouse event
* @return {null}
*/
mouseDown(event) {
this.setState({
dragging: [
event.nativeEvent.offsetX,
event.nativeEvent.offsetY
]
});
}
/**
* Save the fact that the mouse was released
*
* @return {null}
*/
mouseUp() {
this.setState({
dragging: false
});
}
/**
* When moving the mouse while clicking, pan the figure
*
* @param {MouseEvent} event Mouse event
* @return {null}
*/
mouseMove(event) {
const dragging = this.state.dragging;
const center = this.state.center;
if (dragging !== false) {
const newMouse = [
event.nativeEvent.offsetX,
event.nativeEvent.offsetY
];
const movement = [
newMouse[0] - dragging[0],
newMouse[1] - dragging[1]
];
// move the center by given offset and redraw
this.setState({
dragging: newMouse,
center: [
center[0] + movement[0],
center[1] - movement[1]
]
}, this.draw);
event.preventDefault();
}
}
/**
* Redraw `points` on the canvas, scaled with given
* `zoom` and based on current `center`
*
* @return {null}
*/
draw() {
const width = this.ctx.canvas.width;
const height = this.ctx.canvas.height;
const zoom = this.state.zoom;
const center = this.state.center;
const points = this.state.points;
// do not plot (very) small sizes
if (width < 1) {
return;
}
this.ctx.clearRect(0, 0, width, height);
// fill each point in `points` skipping the first 50 ones
const image = this.ctx.getImageData(0, 0, width, height);
const length = points.length;
const color = [0, 0, 0];
for (let i = 50; i < length; i += 1) {
const x = Math.floor(points[i][0] * zoom + center[0]);
const y = height - Math.floor(points[i][1] * zoom + center[1]);
if (x >= 0 && x < width && y >= 0 && y < height) {
const index = (y * width + x) * 4;
image.data[index] = color[0];
image.data[index + 1] = color[1];
image.data[index + 2] = color[2];
image.data[index + 3] = 255;
}
}
this.ctx.putImageData(image, 0, 0);
}
2015-12-24 11:21:09 +00:00
/**
* Get the container size
*
* @return {Array} Width and height of the container
*/
2015-12-23 21:31:51 +00:00
getSize() {
2015-12-24 11:21:09 +00:00
return [this.container.clientWidth, this.container.clientHeight];
2015-12-23 21:31:51 +00:00
}
/**
* Update the canvas size to its parent size
* and redraw
*
* @return {null}
*/
resize() {
[this.ctx.canvas.width, this.ctx.canvas.height] = this.getSize();
this.draw();
}
/**
* Calculate points with current system
*
* @return {Array} Points to be drawn
*/
calculate() {
return applyChaos(
[0, 0],
this.props.iterations,
...this.props.system
);
}
/**
* Setup resize listener and make initial drawing
* when the component has been mounted
*
* @return {null}
*/
componentDidMount() {
window.addEventListener('resize', this.resize.bind(this));
this.setState({
center: this.getSize().map(x => Math.floor(x / 2)),
points: this.calculate()
}, this.resize.bind(this));
}
/**
* Remove the resize listener before unmounting the component
*
* @return {null}
*/
componentWillUnmount() {
window.removeEventListener('resize', this.resize.bind(this));
}
/**
* Never create a new canvas
*/
shouldComponentUpdate() {
return false;
}
/**
* Create a canvas with correct listeners
*/
render() {
2015-12-24 11:21:09 +00:00
return <div id="content" ref={div => this.container = div}>
<canvas
ref={canvas => this.ctx = canvas.getContext('2d')}
onWheel={this.wheel.bind(this)}
onMouseDown={this.mouseDown.bind(this)}
onMouseUp={this.mouseUp.bind(this)}
onMouseMove={this.mouseMove.bind(this)}
></canvas>
</div>;
2015-12-23 21:31:51 +00:00
}
}
2015-12-24 11:21:09 +00:00
Fractal.defaultProps = {
iterations: 200000,
system: [[], []]
};
export { Fractal };