добавление нескольких объектов в p5. js - PullRequest
Новая
       19

добавление нескольких объектов в p5. js

1 голос
/ 15 января 2020

У меня есть немного javascript, который вызывает из библиотеки / p5 обработки. js несколько инструментов. 

// Spring drawing constants for top bar
let springHeight = 19,
    left,
    right,
    maxHeight = 300,
    minHeight = 0,
    over = false,
    move = false;

// Spring simulation constants
let M = 0.8,  // Mass
    K = 0.2,  // Spring constant
    D = 0.92, // Damping
    R = 180;  // Rest position

// Spring simulation variables
let ps = R,   // Position
    vs = 0.0, // Velocity
    as = 0,   // Acceleration
    f = 0;    // Force



function setup() {
  createCanvas(710, 400);
  rectMode(CORNERS);
  // rectMode(CORNER);
  c = color('rgb(255,233,234)');
  fill(c);
  noStroke();
  left = width / 2 - 400;
  right = width / 2 + 400;
}

function draw() {
  background(102);
  updateSpring();
  drawWire();
}

function drawWire() {
  rect(left, ps + 10, right, ps + springHeight);
  // rect(left, ps + 10, right, ps + springHeight);
}

function updateSpring() {
  // Update the spring position
  if ( !move ) {
    f = -K * ( ps - R ); // f=-ky
    as = f / M;          // Set the acceleration, f=ma == a=f/m
    vs = D * (vs + as);  // Set the velocity
    ps = ps + vs;        // Updated position
  }

  if (abs(vs) < 0.1) {
    vs = 0.0;
  }

  // Test if mouse if over the top bar
  if (mouseX > left && mouseX < right && mouseY > ps && mouseY < ps + springHeight) {
    over = true;
  } else {
    over = false;
  }

  // Set and constrain the position of top bar
  if (move) {
    ps = mouseY - springHeight / 2;
    ps = constrain(ps, minHeight, maxHeight);
  }
}

function mousePressed() {
  if (over) {
    move = true;
  }
}

function mouseReleased() {
  move = false;
}

файл javascript при запуске в моем html создаст одну приятную пружинящую строку:

enter image description here

Каков наилучший способ изменить этот код так, чтобы получалось несколько строк,

, возможно, разнесенных по вертикали на n пикселей?

Я попытался просто воспроизвести блок кода, но не могу понять, что это правильно!

1 Ответ

1 голос
/ 16 января 2020

Если вы просто хотите нарисовать несколько строк, используйте for l oop. Вычислить координату y вершины строки в зависимости от управляющей переменной (i) переменной l oop. например, y = ps + springDist * i;:

например, 3 строки: 

let springDist = 40.0;

function drawWire() {
    for (let i = 0; i < 3; ++i) {
        let y = ps + springDist * i;
        rect(left, y, right, y+springHeight);
    }
}

Конечно, вы должны проверить, является ли мышь over любой из строк, и указать (move_i), что строка «трогается»: 

let move_i = 0;

function updateSpring() {
    // [...]

    // Test if mouse if over the top bar
    over = false;
    for (let i = 0; i < 3; ++i) {
        let y = ps + springDist * i;
        if (mouseX > left && mouseX < right && mouseY > y && mouseY < y + springHeight) {
            over = true;
            move_i = i;
        }
    }

    // Set and constrain the position of top bar
    if (move) {
        ps = mouseY - springHeight / 2 - move_i * springDist;
        ps = constrain(ps, minHeight, maxHeight);
    }
}

Если вы хотите переместить каждую строку по отдельности, вам нужно создать список объектов : 

let strings = [];

function setup() {
    // [...]

    for (let i = 0; i < 3; ++i) {
        let ps = R + springDist * i;
        strings.push({ps : ps, vs : 0.0, as : 0, f : 0, R : ps})
    }
}

Нарисуйте объекты: 

function drawWire() {
    for (let i = 0; i < strings.length; ++i) {
        let y = strings[i].ps;
        rect(left, y, right, y+springHeight);
    }
}

Обновите объекты в al oop и переместите отдельный перетаскиваемый объект (move_i): 

function updateSpring() {
    // Update the spring position
    for (let i = 0; i < strings.length; ++i) {
        let st = strings[i];

        if ( i != move_i || !move ) {
            st.f = -K * ( st.ps - st.R ); // f=-ky
            st.as = st.f / M;             // Set the acceleration, f=ma == a=f/m
            st.vs = D * (st.vs + st.as);  // Set the velocity
            st.ps = st.ps + st.vs;        // Updated position
        }

        if (abs(st.vs) < 0.1) {
            st.vs = 0.0;
        }
    }

    // Test if mouse if over the top bar
    over = false;
    for (let i = 0; i < strings.length; ++i) {
        let y = strings[i].ps
        if (mouseX > left && mouseX < right && mouseY > y && mouseY < y + springHeight) {
            over = true;
            move_i = i;
        }
    }

    // Set and constrain the position of top bar
    if (move) {
        strings[move_i].ps = mouseY - springHeight / 2;
        strings[move_i].ps = constrain(strings[move_i].ps, minHeight, maxHeight);
    }
}

См. Пример: 

// Spring drawing constants for top bar
let springHeight = 19,
    springDist = 40,
    left,
    right,
    maxHeight = 300,
    minHeight = 0,
    over = false,
    move = false;
    move_i = 0;

// Spring simulation constants
let M = 0.8,  // Mass
    K = 0.2,  // Spring constant
    D = 0.92, // Damping
    R = 180;  // Rest position

// Spring simulation variables
let strings = [];

function setup() {
    createCanvas(710, 400);
    rectMode(CORNERS);
    // rectMode(CORNER);
    c = color('rgb(255,233,234)');
    fill(c);
    noStroke();
    left = width / 2 - 400;
    right = width / 2 + 400;
    
    for (let i = 0; i < 3; ++i) {
        let ps = R + springDist * i;
        strings.push({ps : ps, vs : 0.0, as : 0, f : 0, R : ps})
    }
}

function draw() {
    background(102);
    updateSpring();
    drawWire();
}

function drawWire() {
    for (let i = 0; i < strings.length; ++i) {
        let y = strings[i].ps;
        rect(left, y, right, y+springHeight);
    }
}

function updateSpring() {
    // Update the spring position
    for (let i = 0; i < strings.length; ++i) {
        let st = strings[i];
        
        if ( i != move_i || !move ) {
            st.f = -K * ( st.ps - st.R ); // f=-ky
            st.as = st.f / M;             // Set the acceleration, f=ma == a=f/m
            st.vs = D * (st.vs + st.as);  // Set the velocity
            st.ps = st.ps + st.vs;        // Updated position
        }

        if (abs(st.vs) < 0.1) {
            st.vs = 0.0;
        }
    }

    // Test if mouse if over the top bar
    over = false;
    for (let i = 0; i < strings.length; ++i) {
        let y = strings[i].ps
        if (mouseX > left && mouseX < right && mouseY > y && mouseY < y + springHeight) {
            over = true;
            move_i = i;
        }
    }

    // Set and constrain the position of top bar
    if (move) {
        strings[move_i].ps = mouseY - springHeight / 2;
        strings[move_i].ps = constrain(strings[move_i].ps, minHeight, maxHeight);
    }
}

function mousePressed() {
  if (over) {
    move = true;
  }
}

function mouseReleased() {
  move = false;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/p5.js"></script>
...