我想使用 HTML、JavaScript 和 p5.js 创建此效果，但我不知道此效果的名称，也不知道如何处理它。 https://yalegraphicdesign.tumblr.com/post/182779665334/simone-cutri-mfa-2019
同样，我想让文本像霉菌或细胞一样摆动，还想给它一个像下面这样扩散的效果。如果上述内容有困难，我希望得到类似效果的建议。 https://martingroch.tumblr.com/post/188814239759/poster-for-theatre-meetfactory https://codepen.io/Mertl/pen/rNvEEYr
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>
</head>
<body>
<script>
const MAX = 1000;
let particles = [];
let list = [];
let axis;
let count = 0;
let typedText = 'Macro';
let inputText = [];
let graphics;
function setup() {
createCanvas(1200, 600);
colorMode(RGB, 255, 255, 255);
frameRate(30);
noStroke();
noCursor();
graphics = createGraphics(width, height);
graphics.textFont("Arial", 300);
graphics.fill(0);
graphics.textAlign(CENTER, CENTER);
graphics.text(typedText, width / 2, height / 2 - 70);
typedText = "";
inputText = [];
count = 0;
list = new Array(width * height);
graphics.loadPixels();
for(let y = 0; y <= height - 1; y++) {
for(let x = 0; x <= width - 1; x++) {
let index = (x + y * graphics.width) * 4;
if(graphics.pixels[index] < 128) {
list[y * width + x] = 0;
} else {
list[y * width + x] = 1;
}
}
}
graphics.updatePixels();
particles = [];
}
function draw() {
if (count < MAX) {
let i = 0;
while(i < 3) {
axis = createVector(int(random(100, width - 300)), int(random(100, height - 300)));
if(list[int(axis.y * width + axis.x)] == 0) {
particles.push(new Particle(axis.x, axis.y));
i++;
count++;
}
}
}
background(239);
for (let i = 0; i < particles.length; i++) {
let p = particles[i];
fill(20);
p.display();
p.update();
}
}
function keyReleased() {
if (keyCode == ENTER) {
typedText = inputText.join('');
setup();
} else {
inputText.push(key);
}
}
class Particle {
constructor(x, y) {
this.location = createVector(x, y);
this.velocity = createVector(0, 0);
this.scale = random(0.35, 0.9);
this.radius = this.scale * 45;
this.border = 15;
}
update() {
let noiseX = noise(this.location.x * 0.005, this.location.y * 0.005);
let noiseY = noise(this.location.y * 0.005, this.location.x * 0.005);
this.velocity.x = map(noiseX, 0, 1, -0.5, 0.5);
this.velocity.y = map(noiseY, 0, 1, -0.5, 0.5);
this.location.add(this.velocity);
// Check if the particle is out of the text area
if(list[int((this.location.y + this.velocity.y) * width + int(this.location.x + this.velocity.x))] == 1) {
this.velocity.mult(-1);
}
}
display() {
ellipse(this.location.x, this.location.y, this.radius, this.radius);
}
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>
</head>
<body>
<script>
const MAX = 1000;
let particles = [];
let list = [];
let axis;
let count = 0;
let typedText = 'Macro';
let inputText = [];
let graphics;
function setup() {
createCanvas(1200, 600);
colorMode(RGB, 255, 255, 255);
frameRate(30);
noStroke();
noCursor();
graphics = createGraphics(width, height);
graphics.textFont("Arial", 300);
graphics.fill(0);
graphics.textAlign(CENTER, CENTER);
graphics.text(typedText, width / 2, height / 2 - 70);
typedText = "";
inputText = [];
count = 0;
list = new Array(width * height);
graphics.loadPixels();
for(let y = 0; y <= height - 1; y++) {
for(let x = 0; x <= width - 1; x++) {
let index = (x + y * graphics.width) * 4;
if(graphics.pixels[index] < 128) {
list[y * width + x] = 0;
} else {
list[y * width + x] = 1;
}
}
}
graphics.updatePixels();
particles = [];
}
function draw() {
if (count < MAX) {
let i = 0;
while(i < 3) {
axis = createVector(int(random(100, width - 300)), int(random(100, height - 300)));
if(list[int(axis.y * width + axis.x)] == 0) {
particles.push(new Particle(axis.x, axis.y));
i++;
count++;
}
}
}
background(239);
for (let i = 0; i < particles.length; i++) {
let p = particles[i];
fill(20);
p.display();
p.update();
}
}
function keyReleased() {
if (keyCode == ENTER) {
typedText = inputText.join('');
setup();
} else {
inputText.push(key);
}
}
class Particle {
constructor(x, y) {
this.location = createVector(x, y);
this.velocity = createVector(0, 0);
this.scale = random(0.35, 0.9);
this.radius = this.scale * 45;
this.border = 15;
}
update() {
let noiseX = noise(this.location.x * 0.005, this.location.y * 0.005);
let noiseY = noise(this.location.y * 0.005, this.location.x * 0.005);
this.velocity.x = map(noiseX, 0, 1, -0.5, 0.5);
this.velocity.y = map(noiseY, 0, 1, -0.5, 0.5);
this.location.add(this.velocity);
// Check if the particle is out of the text area
if(list[int((this.location.y + this.velocity.y) * width + int(this.location.x + this.velocity.x))] == 1) {
this.velocity.mult(-1);
}
}
display() {
ellipse(this.location.x, this.location.y, this.radius, this.radius);
}
}
</script>
</body>
</html>
我使用上面的图像尝试了各种方法，但我很沮丧，因为我不知道效果的具体名称。如果您能给我尽可能多的建议，我将不胜感激。
我猜这个效果叫“遮罩”，就像Photoshop中的遮罩工具一样。