Computer Graphics & Visualization @ufrj.br
Public
Edited
Oct 12, 2023
Paused
Importers
5 stars
blurResult = DOM.canvas(pattern.width, pattern.height)
drawBlur = {
drawEdges;
const { vApp, hApp } = blurApps;
const blurInput = vApp.textureObjects["tex"];
blurInput.data(freiChenResult);
for (let i = 0; i < blurPasses; i++) {
if (i == 0) {
vApp.useFbo(0).texture("tex", blurInput).draw();
} else {
vApp
.useFbo(0)
.texture("tex", hApp.fboObjects[0].colorAttachments[0])
.draw();
}
if (i == blurPasses - 1) {
hApp
.useFbo(null)
.texture("tex", vApp.fboObjects[0].colorAttachments[0])
.draw();
} else {
hApp
.useFbo(0)
.texture("tex", vApp.fboObjects[0].colorAttachments[0])
.draw();
}
}
}
embossResult = DOM.canvas(pattern.width, pattern.height)
embossDraw = {
drawBlur;
let lightVec = [...embossParam.lightDir, embossParam.lightHeight];
let norm = Math.hypot(...lightVec);
lightVec = lightVec.map((x) => x / norm);
let embossTex = embossApp.textureObjects["tex"];
embossTex.data(noiseGrainResult);
let embossBump = embossApp.textureObjects["bumpmap"];
embossBump.data(blurResult);
embossApp
.uniform("lightVec", lightVec)
.uniform("ambientCoef", embossParam.ambientCoef)
.uniform("diffuseCoef", embossParam.diffuseCoef)
.uniform("specularCoef", embossParam.specularCoef)
.uniform("specularShininess", embossParam.specularShininess)
.uniform("bumpFactor", embossParam.bumpFactor)
.draw();
}
embossApp = gl2helper({
canvas: embossResult,
fragmentShader: illumShader,
textures: {
tex: noiseGrainResult,
bumpmap: blurResult
}
})
function fillWithSquares(cols, rows) {
const maxSize = Math.min(cols, rows) - 1;
const pick = probabilityPick(d3.range(1, maxSize + 1).map((n) => [n, 1]));
const cells = [];
const occupied = [];
for (let row = 0; row < rows; row++) {
occupied[row] = [];
for (let col = 0; col < cols; col++) {
cells.push({ col, row });
occupied[row][col] = false;
}
}
d3.shuffle(cells);
const squares = [];
const fit = (size) => {
for (let icell = 0; icell < cells.length; icell++) {
const { row, col } = cells[icell];
if (col + size <= cols && row + size <= rows) {
let ok = true;
for (let nc = 0; ok && nc < size; nc++) {
for (let nr = 0; ok && nr < size; nr++) {
if (occupied[row + nr][col + nc]) ok = false;
}
}
if (ok) {
for (let nc = 0; ok && nc < size; nc++) {
for (let nr = 0; ok && nr < size; nr++) {
occupied[row + nr][col + nc] = true;
}
}
squares.push({ row, col, size });
for (let k = cells.length - 1; k >= 0; k--) {
const { col, row } = cells[k];
if (occupied[row][col]) cells.splice(k, 1);
}
return true;
}
}
}
return false;
};
let tries = (rows * cols) ** 2;
while (tries-- > 0) {
const size = pick();
if (fit(size) && cells.length == 0) break;
}
return squares;
}
// Given an array of pairs [value,prob], where prob is a natural number,
// returns a function that returns a random value respecting
// the relative probability
//
function probabilityPick(pairs, rand = Math.random) {
const table = [];
for (let [v, p] of pairs) {
for (let i = 0; i < p; i++) table.push(v);
}
return () => {
const i = ~~(rand() * table.length);
return table[i];
};
}
import { getRandomPalette } from "@saneef/generate-palette"
import {
gl2helper,
grainShader,
noiseGrainShader,
illumShader,
horizontalBlurShader,
verticalBlurShader,
freiChenShader,
vectorInput,
shaderShow,
viewof grainParam,
viewof noiseGrainParam,
viewof blurPasses,
viewof illumParam
} from "@esperanc/webgl2-image-processing"
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
