时间戳

首页 > 解决方案 > 使用 p5.js 在图像上摆动形状

javascript - 使用 p5.js 在图像上摆动形状

问题描述

这是图像：

多萝西

我正在使用 p5.js 在图像上绘制随机圆圈。我有下面的代码使圆圈出现并且我想要。但是，我也希望所有的点都摆动一下。我很难弄清楚这方面。我很感激任何提示！谢谢

let img;
let smallPoint, largePoint;
let fr = 30;

function preload() {
    img = loadImage('images/face.png');
}

function setup() {
    createCanvas(720, 800);
    let cvn = createCanvas(1000, 1000);
    let x = (windowWidth - width) / 2;
    let y = (windowHeight - height) / 2;
    cvn.position(x,y);
    smallPoint = 5;
    largePoint = 20;
    noStroke();
    background(255);
    image(img, 0, 0, 720, 800);
    img.loadPixels();
    frameRate(fr);
}

function draw() {
    let pointillize = map(mouseX, 0, width, smallPoint, largePoint);
    let x = floor(random(img.width));
    let y = floor(random(img.height));
    let pix = img.get(x, y);
    fill(pix);
    ellipse(x, y, pointillize, pointillize);
}

标签： javascriptprocessingp5.js

解决方案

要实现您想要的，您必须更改设置。您必须重绘每一帧中的所有点。

每帧创建一个点并将该点存储到数组中：

points = []

function draw() {
    let pointillize = map(mouseX, 0, width, smallPoint, largePoint);
    let x = random(img.width);
    let y = random(img.height);
    let pix = img.get(x, y);
    points.push( {x: x, y: y, color: pix, size: pointillize});

    // [...]

在每一帧中绘制图像并在其上绘制所有点：

    // [...]

    for(let i= 0; i < points.length; i++ ) {
        let p = points[i];
        fill(p.color);
        ellipse(p.x, p.y, p.size, p.size);
    }
}

为了实现“摆动”效果，我建议使用该sin()函数来计算偏移量并用于millis()按时间更改偏移量。

为每个点创建一个随机比例 ( sx, sy) 和偏移量 ( dx, )：dx

let dx = random();
let dy = random();
let sx = random();
let sy = random();
points.push( {x: x, y: y, color: pix, size: pointillize, dx: dx, dy: dy, sx: sx, sy: sy});

计算取决于时间的摆动效应 ( t)。在下文中，摆动取决于十分之一秒 ( millis() * 0.01)，数量为 -3 到 3：

let t =  millis() * 0.01;

let x = p.x + sin(PI * p.dx + t * p.sx) * 3;
let y = p.y + sin(PI * p.dy + t * p.sy) * 3;
ellipse(x, y, p.size, p.size);

请参阅示例：

let img;
let smallPoint, largePoint;
let fr = 100;

function preload() {
    img = loadImage('https://raw.githubusercontent.com/Rabbid76/graphics-snippets/master/resource/texture/parrot_image.jpg');
}

function setup() {
    let cvn = createCanvas(img.width, img.height);
    let x = (windowWidth - width) / 2;
    let y = (windowHeight - height) / 2;
    cvn.position(x,y);
    smallPoint = 5;
    largePoint = 20;
    img.loadPixels();
    frameRate(fr);
}

points = []
function draw() {
    let pointillize = map(mouseX, 0, width, smallPoint, largePoint);
    let x = random(img.width), y = random(img.height);
    let pix = img.get(x, y);
    let dx = random(), dy = random(), sx = random(), sy = random();
    points.push( {x: x, y: y, color: pix, size: pointillize, dx: dx, dy: dy, sx: sx, sy: sy});

    noStroke();
    background(255);
    image(img, 0, 0, img.width, img.height);

    let t =  millis() * 0.01;
    for(let i= 0; i < points.length; i++ ) {
        let p = points[i];
        fill(p.color);
        let x = p.x + sin(PI * p.dx + t * p.sx) * 3;
        let y = p.y + sin(PI * p.dy + t * p.sy) * 3;
        ellipse(x, y, p.size, p.size);
    }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.0.0/p5.min.js"></script>

推荐阅读