Вьющиеся фигуры на изображении с помощью p5. js - PullRequest
Новая
       88

Вьющиеся фигуры на изображении с помощью p5. js

0 голосов
/ 04 мая 2020

Вот изображение:

Dorothy

Я использую 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);
}

1 Ответ

1 голос
/ 04 мая 2020

Чтобы достичь желаемого, вам нужно изменить настройки. Вы должны перерисовать все точки в каждом кадре.

Создать точку для каждого кадра и сохранить точку в массиве: 

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>
...