Проблемы с мышью нажата в p5js - PullRequest
Новая
       6

Проблемы с мышью нажата в p5js

1 голос
/ 23 октября 2019

Я пытаюсь создать простое приложение, которое воспроизводит песню, когда вы нажимаете / нажимаете на экран. После того, как вы нажмете / нажмете, произойдет эффект пульсации, а также появится визуальный аспект.

Пульсация должна происходить каждый раз, когда вы нажимаете / щелкаете, но в моем коде (перезапускается каждый раз, когда вы нажимаете), вы нажимаете, и пульсация происходит, но не продолжает цикл. Я знаю, что ответ на кончике моего языка, но я не могу понять это. Кроме того, когда загружается мой эскиз, появляется фиолетовая рамка, и я не знаю почему. 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="resources\p5.js"></script>
    <script src="resources\p5.dom.js"></script>
    <script src="resources\p5.sound.js"></script>
    <script type="text/javascript" src="js\app.js"></script>
    <link rel="stylesheet" href="css\style.css">
    <title>Breathe</title>
</head>
<body>

</body>
</html>


* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


let outerDiam = 0;
let cnv;
let drawThings;

function centerCanvas() {
  var x = (windowWidth - width) / 2;
  var y = (windowHeight - height) / 2;
  cnv.position(x, y);
}

function setup() { 
  cnv = createCanvas(600, 600);
  centerCanvas();
  background(255, 0, 255);
} 

function windowResized() {
  centerCanvas();
}

function draw() { 
  if (drawThings) {
      background(255);
      for (let i = 0; i < 5; i++){
        let diam = outerDiam - 30 * i;    
        if (diam > 0){

          let fade = map(diam, 0, width, 0, 255);
            stroke(fade);
            noFill();
            ellipse(300, 300, diam);
    }


        outerDiam = outerDiam + 2;
    } 
    }
  }

function mousePressed() {
  drawThings = !drawThings;
}

Ответы [ 2 ]

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

В функции mousePressed вы фактически никогда не сбрасываете анимацию, вы просто переключаете воспроизведение. 

function mousePressed() {
  drawThings = !drawThings;
}

Когда воспроизведение снова начинается при нажатии, анимация просто продолжается с того места, где она остановилась.

Вместо того, чтобы выключать рисование при нажатии, сбросьте outerDiam на 0. Так вот: 

function draw() { 
  if (drawThings) {
    [...]
  }

function mousePressed() {
  drawThings = !drawThings;
}

становится таким: 

function draw() { 
  [...]
}

function mousePressed() {
  outerDiam = 0;
}

Также "Пурпурное поле "создается из-за того, что фон вначале имеет фиолетовый цвет: 

function setup() { 
  [...]
  background(255, 0, 255); //red is 255, green is 0 and blue is 255 so it appears purple
}

Это перезаписывается, когда вы начинаете рисовать с помощью функции фона в draw (), но в коде, который вы дали фонусохраняет этот цвет до тех пор, пока вы не нажмете, поскольку drawThings не был определен для начала и стал true только при первом нажатии.

Если вы сделаете изменения, которые я предложил выше, тогда этот фон в setup ()будет немедленно нарисован, поэтому вы вообще не увидите фиолетовый фон. (Я бы рекомендовал удалить эту первую фоновую функцию, которая есть в функции настройки.)

0 голосов
/ 23 октября 2019

Я исправил ваш код, теперь анимация воспроизводится при каждом нажатии мыши: 

"use strict";

let outerDiam = 0;
let cnv;
let drawThings;

function centerCanvas() {
  var x = (windowWidth - width) / 2;
  var y = (windowHeight - height) / 2;
  cnv.position(x, y);
}

function setup() {
  cnv = createCanvas(600, 600);
  centerCanvas();
  background(255, 0, 255);
}

function windowResized() {
  centerCanvas();
}

function draw() {
  //if (drawThings) {
  background(255);
  for (let i = 0; i < 5; i++) {
    let diam = outerDiam - 30 * i;
    if (diam > 0) {

      let fade = map(diam, 0, width, 0, 255);
      stroke(fade);
      noFill();
      ellipse(300, 300, diam);
    }


    outerDiam = outerDiam + 2;
  }
  //}
}

function mousePressed() {
  drawThings = !drawThings;
  outerDiam = 0;
}
...