Использование функции random () в p5.js - PullRequest
Новая
       10

Использование функции random () в p5.js

2 голосов
/ 04 октября 2019

Я пытаюсь создать код, в котором смайлики нарисованы на экране случайным образом и случайным цветом, который должен зацикливаться, но я не могу понять, как лучше всего использовать функцию random () для достижения этой цели. Кто-нибудь может дать мне несколько советов! Я пытался использовать переменные (var внутри функции рисования для вызова функции smileyFace, но не повезло!

CODE: 

function setup() {
  createCanvas(400, 400);
  background(220);
  smileyFace(random(0, 400), random(0, 400));
}

function draw() {

}

function smileyFace(x, y) {
  fill(250);
  ellipse(x, y, 60, 60);
  fill(255);
  ellipse(x - 10, y - 10, 10, 10);
  ellipse(x + 10, y - 10, 10, 10);
  arc(x, y + 5, 30, 25, 0, PI, CHORD);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/p5.js"></script>

Ответы [ 2 ]

2 голосов
/ 04 октября 2019

Функция draw() в p5 выполняется несколько раз, поэтому, если вы хотите нарисовать несколько смайликов, вы можете поместить свой метод smileyFace() в метод draw().

Чтобы получить случайные цветаВы можете передать объект color методу fill(color). Чтобы получить цвет, вы можете использовать метод color(), который принимает три значения. Значения: r (красный), g (зеленый) и b (синий) и должны быть в диапазоне 0-255. Итак, чтобы получить случайный цвет, вы можете использовать random(0, 255), чтобы получить случайные значения для каждого компонента цвета (r, g & b): 

function setup() {
  createCanvas(400, 400);
  background(220);
}

function draw() {
  smileyFace(random(0, 400), random(0, 400));
}

function smileyFace(x, y) {
  fill(getRandomColour());
  ellipse(x, y, 60, 60);
  
  fill(getRandomColour());
  ellipse(x - 10, y - 10, 10, 10);
  ellipse(x + 10, y - 10, 10, 10);
  arc(x, y + 5, 30, 25, 0, PI, CHORD);
}

function getRandomColour() {
  const r = random(0, 255);
  const g = random(0, 255);
  const b = random(0, 255);
  return color(r, g, b);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/p5.js"></script>
2 голосов
/ 04 октября 2019

[...] несколько смайликов, нарисованные на одном холсте случайными цветами (r, g, b) и размещенные на экране случайным образом.

Просто переместите вызов smileyFaceк функции draw и создайте случайный цвет с помощью 

c = color(random(0, 255), random(0, 255), random(0, 255));

См. пример: 

function setup() {
    createCanvas(400, 400);
    background(220);
}

function draw() {
    c = color(random(0, 255), random(0, 255), random(0, 255));
    smileyFace(random(0, 400), random(0, 400), c);
}

function smileyFace(x, y, c) {
    fill(c);
    ellipse(x, y, 60, 60);
    fill(255);
    ellipse(x - 10, y - 10, 10, 10);
    ellipse(x + 10, y - 10, 10, 10);
    arc(x, y + 5, 30, 25, 0, PI, CHORD);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/p5.js"></script>
...