113 lines
4.2 KiB
JavaScript
113 lines
4.2 KiB
JavaScript
new Vue({
|
|
el: '#app',
|
|
data: function () {return {
|
|
// things that will not show up in datGUI (for internal use)
|
|
colorSrc: [],
|
|
noise: new SimplexNoise(3.13),
|
|
reverse: false,
|
|
padding: 1.7,
|
|
iteration: 20,
|
|
stop1: '0%',
|
|
stop2: '100%',
|
|
// things that will show up in that gui
|
|
settings: {
|
|
seed: { value: 0.22557154953429298, min: 0, max: 1, fn: val => {
|
|
this.noise = new SimplexNoise(val);
|
|
this.colorSrc = new Array(Math.round(this.iteration + 2)).fill().map(
|
|
(v, i) => chroma.num(Math.floor(Math.abs(this.noise.noise2D(this.iterations * i, this.noisePos) * 16711680))).hex());
|
|
|
|
} },
|
|
noisePos: { value: .4421, min: 0, max: 4, fn: val => {
|
|
this.colorSrc = new Array(Math.round(this.iteration + 2)).fill().map(
|
|
(v, i) => chroma.num(Math.floor(Math.abs(this.noise.noise2D(this.iterations * i, val) * 16711680))).hex());
|
|
|
|
|
|
this.noiseVal1 = this.noise.noise2D(0, val);
|
|
this.noiseVal2 = this.noise.noise2D(val, 0);
|
|
} },
|
|
iterations: { value: 20, min: 2, max: 20, fn: val => {
|
|
this.iteration = Math.round(val);
|
|
this.colorSrc = new Array(Math.round(val + 2)).fill().map(
|
|
(v, i) => chroma.num(Math.floor(Math.abs(this.noise.noise2D(val * i, this.noisePos) * 16711680))).hex());
|
|
|
|
} },
|
|
stack: { value: 70, min: 30, max: 400, fn: val => {
|
|
this.stack = Math.round(val);
|
|
this.colorSrc = new Array(Math.round(val + 2)).fill().map(
|
|
(v, i) => chroma.num(Math.floor(Math.abs(this.noise.noise2D(val * i, this.noisePos) * 16711680))).hex());
|
|
|
|
} },
|
|
density: { value: 2, min: 0, max: 10, fn: val => {
|
|
this.density = val;
|
|
this.colorSrc = new Array(Math.round(val + 2)).fill().map(
|
|
(v, i) => chroma.num(Math.floor(Math.abs(this.noise.noise2D(val * i, this.noisePos) * 16711680))).hex());
|
|
|
|
} },
|
|
waves: { value: .7, min: 0, max: 3, fn: val => {
|
|
this.colorSrc = new Array(Math.round(val + 2)).fill().map(
|
|
(v, i) => chroma.num(Math.floor(Math.abs(this.noise.noise2D(val * i, this.noisePos) * 16711680))).hex());
|
|
|
|
} },
|
|
animate: { value: false },
|
|
rotation: { value: 250, min: 0, max: 1024, fn: () => {
|
|
this.colorSrc = [...this.colorSrc];
|
|
} },
|
|
bgrotation: { value: 90, min: 0, max: 359, fn: () => {
|
|
this.colorSrc = [...this.colorSrc];
|
|
} },
|
|
alternate: { value: false, fn: val => {
|
|
this.rotalt = val ? -1 : 1;
|
|
this.colorSrc = [...this.colorSrc];
|
|
} },
|
|
padding: { value: 1.7, min: 0, max: 4 },
|
|
background: { value: '#ff6464', color: true, fn: () => {
|
|
this.colorSrc = [...this.colorSrc];
|
|
} } } };
|
|
|
|
},
|
|
created() {
|
|
this.buildGui();
|
|
},
|
|
mounted() {
|
|
this.draw();
|
|
this.anim();
|
|
},
|
|
computed: {
|
|
colors: function () {
|
|
// returns a function that takes a int between 0-1
|
|
let colors = [...this.colorSrc];
|
|
if (this.reverse) {
|
|
colors.reverse();
|
|
}
|
|
return chroma.scale(this.colorSrc);
|
|
} },
|
|
|
|
methods: {
|
|
buildGui: function () {
|
|
// builds the datgui things
|
|
const gui = new dat.GUI();
|
|
Object.keys(this.settings).forEach(key => {
|
|
this[key] = this.settings[key].value;
|
|
const method = this.settings[key].hasOwnProperty('color') ? 'addColor' : 'add';
|
|
const guiProp = gui[method](this, key, this.settings[key].hasOwnProperty('min') ? this.settings[key].min : 0, this.settings[key].hasOwnProperty('max') ? this.settings[key].max : 1);
|
|
guiProp.onChange(value => {
|
|
if (this.settings[key].hasOwnProperty('fn')) {
|
|
this.settings[key].fn(value);
|
|
}
|
|
});
|
|
if (this.settings[key].hasOwnProperty('fn')) {
|
|
this.settings[key].fn(this.settings[key].value);
|
|
}
|
|
});
|
|
},
|
|
draw: function () {
|
|
|
|
},
|
|
anim: function () {
|
|
requestAnimationFrame(this.anim);
|
|
if (!this.animate) return;
|
|
// if you intend to animate something
|
|
// do it here:
|
|
this.noisePos += 0.01;
|
|
this.settings.noisePos.fn(this.noisePos);
|
|
} } }); |