xxxxxxxxxx
const COL = createCols("https://coolors.co/2b2d42-8d99ae-f8f32b-ffffff-000000");
let ondas = [];
function setup() {
createCanvas(600, 600);
// createCanvas(displayWidth, displayHeight);
// altura, resolucao_x, resolucao_y, frequencia, velocidade
ondas[0] = new Onda(random(10, 100), 5, 10, random(0.01, 0.3), 0.01);
ondas[1] = new Onda(random(10, 100), 5, 20, random(0.01, 0.3), -0.01);
noFill();
let i = 0;
// strokeWeight(3);
drawingContext.shadowColor = color(0, 128);
drawingContext.shadowBlur = 10;
for (let d = width - 20; d > 0; d -= 50) {
drawingContext.setLineDash([30, 10]);
drawingContext.lineDashOffset = 1 * frameCount % 50 * (i % 2 == 0 ? -1 : 1);
strokeWeight(4);
// rect((width - d) / 2, (height - d) / 2, d, d);
i++;
}
shuffle(COL, true);
}
function draw() {
background(COL[0]);
stroke(COL[1])
ondas[0].desenhar();
stroke(COL[2]);
ondas[1].desenhar();
}
class Onda {
constructor(altura, resolucao_x, resolucao_y, frequencia, velocidade) {
this.altura = altura;
this.resolucao_x = resolucao_x;
this.resolucao_y = resolucao_y;
this.frequencia = frequencia;
this.velocidade = velocidade;
this.tempo = 0;
}
desenhar() {
for (let y = -this.altura; y < height + this.altura; y += this.resolucao_y) {
let comprimento = 0;
beginShape();
for (let x = 0; x < width + this.resolucao_x; x += this.resolucao_x) {
let y_sin = sin(comprimento + this.tempo) * this.altura + y;
vertex(x, y_sin);
comprimento += this.frequencia;
}
endShape();
}
this.tempo += this.velocidade;
}
}
// function mousePressed() {
// ondas[0] = new Onda(random(10, 100), 5, 10, random(0.01, 0.3), 0.01);
// ondas[1] = new Onda(random(10, 100), 5, 20, random(0.01, 0.3), -0.01);
// shuffle(COL, true);
// }
function createCols(_url) {
let slash_index = _url.lastIndexOf('/');
let pallate_str = _url.slice(slash_index + 1);
let arr = pallate_str.split('-');
for (let i = 0; i < arr.length; i++) {
arr[i] = '#' + arr[i];
}
return arr;
}