xxxxxxxxxx
92
const C = {
loaded: false,
prop() { return this.height / this.width },
isLandscape() { return window.innerHeight <= window.innerWidth * this.prop() },
resize() {
const canvasElement = document.getElementById(this.css);
if (this.isLandscape()) {
canvasElement.style.height = "100%";
canvasElement.style.removeProperty('width');
} else {
canvasElement.style.removeProperty('height');
canvasElement.style.width = "100%";
}
},
setSize(w, h, p, css) {
this.width = w, this.height = h, this.pD = p, this.css = css;
},
createCanvas() {
this.main = createCanvas(this.width, this.height, WEBGL);
pixelDensity(this.pD);
this.main.id(this.css);
this.resize();
}
};
C.setSize(1500, 2000, 1, 'mainCanvas');
function windowResized() {
C.resize();
}
let palette = ["#7b4800", "#002185", "#003c32", "#fcd300", "#ff2702", "#6b9404"];
let flowField;
let stroke_brushes = ["2H", "HB", "charcoal"];
let hatch_brushes = ["marker", "marker2"];
function setup() {
C.createCanvas();
//angleMode(DEGREES);
// Set random background color from the palette
background("white");
translate(-width / 2, -height / 2);
const num_cols = 2;
const num_rows = 2;
const border = 50;
const col_size = (width - border) / num_cols;
const row_size = (height - border) / num_rows;
// Create a flow field
flowField = createFlowField(num_cols, num_rows);
for (let i = 0; i < num_rows; i++) {
for (let j = 0; j < num_cols; j++) {
const flowVector = flowField[i][j];
const angle = atan2(flowVector.y, flowVector.x);
push();
translate(border / 6 + col_size * j + col_size / 6, border / 6 + row_size * i + row_size / 6);
//rotate(angle);
if ((i + j) % 2 === 0) {
brush.fill(random(palette), random(80, 140));
brush.bleed(random(0.5, 10), 0.55, 10);
} else {
brush.set(random(stroke_brushes), random(palette));
brush.setHatch(random(hatch_brushes), random(palette));
brush.hatch(random(10, 90), random(0, 180), { rand: 0, continuous: false, gradient: false });
}
brush.rect(0.5, 10, col_size, row_size);
pop(); // Restore original transformation
}
}
}
// Function to create a flow field
function createFlowField(cols, rows) {
const field = [];
for (let i = 0; i < rows; i++) {
const row = [];
for (let j = 0; j < cols; j++) {
row.push(p5.Vector.fromAngle(random(TWO_PI)));
}
field.push(row);
}
return field;
}