#javascript #processing #p5.js
#javascript #обработка #p5.js
Вопрос:
Я бы хотел, чтобы каждая сова прыгала по экрану самостоятельно, а не по одному и тому же пути
https://editor.p5js.org/nickBG/sketches/_96KYsurS
let rad = 45; // Width of the shape
let xpos, ypos; // Starting position of shape
let xspeed = 6; // Speed of the shape
let yspeed = 5.2; // Speed of the shape
let xdirection = 1.1; // Left or Right
let ydirection = 1.2; // Top to Bottom
let xspeed2 =10
let yspeed2 = 10
function setup() {
createCanvas(650, 500); //sets up sketch
noStroke();
// Set the starting position of the owels
xpos = width / 2;
ypos = height / 2;
}
function draw() {
background(125,155,155);
for(let x = 30; x < width; x = 80){
for(let y = 30; y < height; y = 80){
drawEyes(100, 100);
drawEyes(125, 100);
}
}
// Update the position of the owels
xpos = xpos xspeed * xdirection;
ypos = ypos yspeed * ydirection;
//*****
xpos2 = xpos xspeed * xdirection;
ypos2 = ypos yspeed * ydirection;
// reverse its direction by multiplying by -1 so owl stays on screen
if (xpos > width - rad || xpos < rad) {
xdirection *= -1;
}
if (ypos > height - rad || ypos < rad) {
ydirection *= -1;
}
display(xpos, ypos, 100);
display(xpos2 100, ypos2, 70);
display(xpos-130, ypos,150);
display(xpos, ypos 130,90);
display(xpos, ypos-120,70);
}
function drawBody(owlX, owlY, owlWidth, owlHeight) {//creates the body
fill(139,69,19);//makes the brown body
stroke(0);
ellipse(owlX, owlY, owlWidth, owlHeight);
fill(139,69,19);//makes brown head of owel
stroke(0);
ellipse(owlX, owlY - owlWidth / 4, owlWidth / 1, owlHeight );
}
function drawEyes(owlX, owlY, owlWidth, owlHeight ){
fill(255);
if(random(10) < 9){
fill(255);
ellipse(owlX - 15, owlY - owlWidth / 2.4, owlWidth / 1.9, owlHeight);//left whites of eye
ellipse(owlX 15, owlY - owlWidth / 2.4, owlWidth / 1.9, owlHeight);//right whites of eye
fill(0);//right pupil
noStroke();
ellipse( owlX 20 , owlY - owlWidth / 2.5, owlWidth / 10, owlHeight);
//left pupil
ellipse( owlX - 20 , owlY - owlWidth / 2.5, owlWidth / 10, owlHeight);
}
else {
stroke(0);
line(owlX - 15, owlY - owlWidth / 2.4, owlWidth / 1.9, owlHeight);
line(owlX 15, owlY - owlWidth / 2.4, owlWidth / 1.9, owlHeight);
}
}
function drawBeak(owlX, owlY, owlWidth, owlHeight) {
fill(60);
stroke(0);
strokeWeight();//creates the beak
triangle(owlX 1, owlY - 20,owlX-8, owlY 1,owlX 20, owlY 8 );
}
function drawChin(owlX, owlY, owlWidth, owlHeight) {
fill(160,82,1);
stroke(0);
strokeWeight();
ellipse( owlX , owlY - owlWidth / 15, owlWidth / 1.3, owlHeight);//creates the off brown ellipse chin
}
function display(owlX, owlY, owlWidth, owlHeight) {//draws the owels
drawBody(owlX, owlY, owlWidth, owlHeight);
drawChin(owlX, owlY, owlWidth, owlHeight);
drawEyes(owlX, owlY, owlWidth, owlHeight);
drawBeak(owlX, owlY, owlWidth, owlHeight);
} <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.3/p5.js"></script> Комментарии:
1. Вы пробовали создать объект Owl, который содержит переменные скорости и направления, а затем рандомизировал их при создании объекта? Прямо сейчас это выглядит так, как будто вы просто применяете одни и те же переменные скорости и направления к одному и тому же объекту, что объясняет то, что вы видите.
Ответ №1:
Вам нужно создать массивы xpos , ypos size xspeed , yspeed xdirection ydirection ,,,,,,,,,,,,,,, и,,,,,. Массивы содержат индивидуальные значения для каждого owl:
let rad = 45; // Width of the shape
let xpos, ypos; // Starting position of shape
let size;
let xspeed; // Speed of the shape
let yspeed; // Speed of the shape
let xdirection; // Left or Right
let ydirection ; // Top to Bottom
function setup() {
createCanvas(650, 500); //sets up sketch
noStroke();
// Set the starting position of the owels
let x = width / 2;
let y = height / 2;
xpos = [x, x 100, x-120, x, x];
ypos = [y, y, y, y 130, y-120];
size = [100, 70, 150, 90, 70];
xdirection = [1.1, 1.1, 1.1, 1.1, 1.1];
ydirection = [1.2, 1.2, 1.2, 1.2, 1.2];
xspeed = [6, 10, 10, 10, 10];
yspeed = [5.2, 10, 10, 10, 10];
}
Совы можно перемещать по отдельности и рисовать в цикле:
function draw() {
background(125,155,155);
for(let x = 30; x < width; x = 80){
for(let y = 30; y < height; y = 80){
drawEyes(100, 100);
drawEyes(125, 100);
}
}
for ( let i = 0; i < xpos.length; i) {
// Update the position of the owels
xpos[i] = xspeed[i] * xdirection[i];
ypos[i] = yspeed[i] * ydirection[i];
if (xpos[i] > width - rad || xpos[i] < rad) {
xdirection[i] *= -1;
}
if (ypos[i] > height - rad || ypos[i] < rad) {
ydirection[i] *= -1;
}
}
for ( let i = 0; i < xpos.length; i) {
display(xpos[i], ypos[i], size[i]);
}
}
Смотрите пример, где я применил измененное к вашему исходному коду:
let rad = 45; // Width of the shape
let xpos, ypos; // Starting position of shape
let size;
let xspeed; // Speed of the shape
let yspeed; // Speed of the shape
let xdirection; // Left or Right
let ydirection ; // Top to Bottom
function setup() {
createCanvas(650, 500); //sets up sketch
noStroke();
// Set the starting position of the owels
let x = width / 2;
let y = height / 2;
xpos = [x, x 100, x-120, x, x];
ypos = [y, y, y, y 130, y-120];
size = [100, 70, 150, 90, 70];
xdirection = [1.1, 1.1, 1.1, 1.1, 1.1];
ydirection = [1.2, 1.2, 1.2, 1.2, 1.2];
xspeed = [6, 10, 10, 10, 10];
yspeed = [5.2, 10, 10, 10, 10];
}
function draw() {
background(125,155,155);
for(let x = 30; x < width; x = 80){
for(let y = 30; y < height; y = 80){
drawEyes(100, 100);
drawEyes(125, 100);
}
}
for ( let i = 0; i < xpos.length; i) {
// Update the position of the owels
xpos[i] = xspeed[i] * xdirection[i];
ypos[i] = yspeed[i] * ydirection[i];
if (xpos[i] > width - rad || xpos[i] < rad) {
xdirection[i] *= -1;
}
if (ypos[i] > height - rad || ypos[i] < rad) {
ydirection[i] *= -1;
}
}
for ( let i = 0; i < xpos.length; i) {
display(xpos[i], ypos[i], size[i]);
}
}
function drawBody(owlX, owlY, owlWidth, owlHeight) {//creates the body
fill(139,69,19);//makes the brown body
stroke(0);
ellipse(owlX, owlY, owlWidth, owlHeight);
fill(139,69,19);//makes brown head of owel
stroke(0);
ellipse(owlX, owlY - owlWidth / 4, owlWidth / 1, owlHeight );
}
function drawEyes(owlX, owlY, owlWidth, owlHeight ){
fill(255);
if(random(10) < 9){
fill(255);
ellipse(owlX - 15, owlY - owlWidth / 2.4, owlWidth / 1.9, owlHeight);//left whites of eye
ellipse(owlX 15, owlY - owlWidth / 2.4, owlWidth / 1.9, owlHeight);//right whites of eye
fill(0);//right pupil
noStroke();
ellipse( owlX 20 , owlY - owlWidth / 2.5, owlWidth / 10, owlHeight);
//left pupil
ellipse( owlX - 20 , owlY - owlWidth / 2.5, owlWidth / 10, owlHeight);
}
else {
stroke(0);
line(owlX - 15, owlY - owlWidth / 2.4, owlWidth / 1.9, owlHeight);
line(owlX 15, owlY - owlWidth / 2.4, owlWidth / 1.9, owlHeight);
}
}
function drawBeak(owlX, owlY, owlWidth, owlHeight) {
fill(60);
stroke(0);
strokeWeight();//creates the beak
triangle(owlX 1, owlY - 20,owlX-8, owlY 1,owlX 20, owlY 8 );
}
function drawChin(owlX, owlY, owlWidth, owlHeight) {
fill(160,82,1);
stroke(0);
strokeWeight();
ellipse( owlX , owlY - owlWidth / 15, owlWidth / 1.3, owlHeight);//creates the off brown ellipse chin
}
function display(owlX, owlY, owlWidth, owlHeight) {//draws the owels
drawBody(owlX, owlY, owlWidth, owlHeight);
drawChin(owlX, owlY, owlWidth, owlHeight);
drawEyes(owlX, owlY, owlWidth, owlHeight);
drawBeak(owlX, owlY, owlWidth, owlHeight);
} <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.3/p5.js"></script>