v© z5Ê.ޥת ÚÕÍÖß=¬ cordQ text/html M³
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ord Fields - Colourfield #17</title>
<meta property="og:image" content="https://plugins.whatsonchain.com/api/plugin/main/ce6aad720a2c57fb018e4a40d9c6c10d35ba40a530230c7fed3edb7d460d6a16/0">
<style>
body {
margin: 0;
overflow: hidden;
background-color: #000;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
canvas {
display: block;
margin: auto;
transform-origin: center;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>
</head>
<body>
<script>
const numShapes = 50;
let scaleFactor;
class OrganicShape {
constructor() {
this.x = random(width);
this.y = random(height);
this.size = random(30, 60);
this.baseColor = color(random(255), random(255), random(255));
this.alphaMin = 0;
this.alphaMax = 60;
this.alpha = this.alphaMin;
this.freq = random(0.002, 0.004);
this.offset = random(TWO_PI);
this.vertices = [];
this.numVertices = 20;
this.initVertices();
}
initVertices() {
this.vertices = [];
for (let i = 0; i < this.numVertices; i++) {
let angle = TWO_PI / this.numVertices * i;
let variance = random(-this.size * 0.2, this.size * 0.2);
let x = this.x + (this.size + variance) * cos(angle);
let y = this.y + (this.size + variance) * sin(angle);
this.vertices.push(createVector(x, y));
}
}
update() {
this.alpha = map(sin(frameCount * this.freq + this.offset), -1, 1, this.alphaMin, this.alphaMax);
for (let v of this.vertices) {
let newX = v.x + random(-0.0, 0.0);
let newY = v.y + random(-0.0, 0.0);
newX = constrain(newX, 0, width);
newY = constrain(newY, 0, height);
v.x = newX;
v.y = newY;
}
}
display() {
let displayColor = color(red(this.baseColor), green(this.baseColor), blue(this.baseColor), this.alpha);
fill(displayColor);
noStroke();
beginShape();
for (let v of this.vertices) {
curveVertex(v.x, v.y);
}
curveVertex(this.vertices[0].x, this.vertices[0].y);
curveVertex(this.vertices[1].x, this.vertices[1].y);
curveVertex(this.vertices[2].x, this.vertices[2].y);
endShape();
}
}
let shapes = [];
function setup() {
let cnv = createCanvas(100, 100);
for (let i = 0; i < numShapes; i++) {
shapes.push(new OrganicShape());
}
adjustScaleToFit();
}
function draw() {
background(0);
for (let shape of shapes) {
shape.update();
shape.display();
}
}
function adjustScaleToFit() {
let desiredHeight = Math.min(windowHeight, 600);
scaleFactor = desiredHeight / height;
let cnv = select('canvas');
cnv.style('transform', `scale(${scaleFactor})`);
console.log("Adjusting Scale:", scaleFactor);
}
function windowResized() {
console.log("Window Resized");
adjustScaleToFit();
}
</script>
</body>
</html>
h
https://whatsonchain.com/tx/undefined