-1

此代码有效（只需将下面的sketch.js代码复制并粘贴到在线 p5.js 编辑器中：https ://editor.p5js.org/ ），但是当合成器打开时，每个音符播放都会发出静态声音。任何人都可以提出一种消除静电的方法吗？也许让合成器一直运行并根据需要切换频率？谢谢。（要在您自己的编辑器上运行此程序，您需要项目文件夹中的 p5.js 和 p5.sound.min.js 文件。）

索引.html

<!DOCTYPE html>
<html lang="en">

<head>
    <script src="p5.js"></script>
    <script src="p5.sound.min.js"></script>
    <link rel="stylesheet" type="text/css" href="style.css">
    <meta charset="utf-8">
</head>
<body>
    <script src="sketch.js"></script>
</body>
</html>

样式.CSS

html, body {
  margin: 0;
  padding: 0;
}
canvas {
  display: block;
}

草图.js

// Removing Objects from Arrays
// Code! Programming with p5.js
// The Coding Train / Daniel Shiffman
// https://thecodingtrain.com/beginners/p5js/7.5-removing-objects-from-array.html
// https://youtu.be/tA_ZgruFF9k

// Main Sketch: https://editor.p5js.org/codingtrain/sketches/smC4Jedi
// Trail Sketch: https://editor.p5js.org/codingtrain/sketches/9Ve9S6Mx
var wave;
var playing = false;
let bubbles = [];
let time = .25;
let t = 1;
let waves = [];
let freqs = [392, 440, 392, 494, 523, 523, 330, 370, 392, 494, 587, 294, 294, 392, 440, 294, 330, 294, 294, 370, 392, 294, 330, 294, 294];
var freq;
let xs = [410, 500, 410, 600, 700, 700, 200, 350, 410, 700, 800, 100, 100, 410, 500, 100, 200, 100, 100, 350, 410, 100, 200, 100, 100];
let ys = [0, 50, 100, 150, 200, 250, 300, 350, 400, 450, 500, 550, 600, 650, 700, 750, 800, 850, 900, 950, 1000, 1050, 1100, 1150, 1200, ];

function setup() {
    createCanvas(1600, 2000);
    wave = new p5.Oscillator();


    for (let i = 0; i < 25; i++) {
        let x = xs[i];
        let y = ys[i];
        let r = 24;
        let b = new Bubble(x, y, r);
        bubbles.push(b);
    }
}

function mousePressed() {
    for (let i = bubbles.length - 1; i >= 0; i--) {
        if (bubbles[i].contains(mouseX, mouseY)) {
            //bubbles.splice(i, 1);
            wave.setType('sine');
            wave.start();
            wave.freq(freqs[i]);
            wave.amp(1);
            playing = true;
            wave.stop(time);
            waves.push(wave);
        }
    }
    console.log(waves);
    console.log(bubbles);
}

function draw() {
    background(0);
    strokeWeight(5);
    //stroke(255,0,255);
    fill(255, 255, 255);
    rect(60, 1400, 90, 180);
    rect(160, 1400, 90, 180);
    rect(260, 1400, 90, 180);
    rect(360, 1400, 90, 180);
    rect(460, 1400, 90, 180);
    rect(560, 1400, 90, 180);
    rect(660, 1400, 90, 180);
    rect(760, 1400, 90, 180);
    rect(860, 1400, 90, 180);
    stroke(0, 0, 255);
    fill(0, 0, 0);
    rect(10, 1300, 82, 180);
    rect(110, 1300, 82, 180);
    rect(310, 1300, 82, 180);
    rect(410, 1300, 82, 180);
    rect(510, 1300, 82, 180);
    rect(710, 1300, 82, 180);
    rect(810, 1300, 82, 180);


    for (let i = 0; i < bubbles.length; i++) {
        if (bubbles[i].contains(mouseX, mouseY)) {
            bubbles[i].changeColor('magenta');
        } else {
            bubbles[i].changeColor(0);
        }

        bubbles[i].move();
        bubbles[i].show();
    }
}

class Bubble {
    constructor(x, y, r) {
        this.x = x;
        this.y = y;
        this.r = r;
        this.brightness = 0;
    }

    changeColor(bright) {
        color = bright;
    }

    contains(px, py) {
        let d = dist(px, py, this.x, this.y);
        if (d < this.r) {
            return true;
        } else {
            return false;
        }
    }

    move() {
        this.x = this.x;
        this.y = this.y + 1.95;
    }

    show() {
        stroke(255);
        strokeWeight(4);
        fill(color);
        ellipse(this.x, this.y, this.r * 2);
    }
}
4

0 回答 0