sound-parade/public/parade.js

// // force https
// var http_confirm = location.href.split(":")[0];
// if (http_confirm == "http") {
//   window.location.replace("https://" + location.host);
// }

var socket = io(location.host);
var n = 0;
var fr = 20;
var arr = [];
var looper;
var score;
let logo;
var silence;

function preload() {
  silence = loadSound("./audio/_silence.wav");
}

function setup() {
  noCanvas();
  if (windowWidth > 1500 && windowWidth > windowHeight) {
    fr = 30;
  } else {
    fr = 20;
  }
  frameRate(fr);
}

//
var myroom = -1;
var intro;
var ready;
//
socket.on("connect", function() {
  console.log("connected!");
  //

  //TESTING... fixed to room 1.
  // myroom = 1;

  if (myroom == -1 && selectAll(".roomsel").length == 0) {
    //initial connection -> ask the room number.

    intro = createP("《흐름을 향하여 걷는》 ...");
    intro.style("font-size", windowHeight / 30 + "pt");
    intro.class("intro");
    var roomsel = createDiv();
    roomsel.class("roomsel");
    var b = createButton("시작하기!", 1);
    b.mouseClicked(function() {
      silence.play();
      myroom = parseInt(this.value());

      socket.emit("room", myroom, function(res) {
        if (res) {
          console.log("entered the room -> " + myroom);
          createP(str(myroom));
          // setTimeout(function() {
          //   ready = createP("퍼레이드 시작합니다!!");
          //   ready.position(
          //     windowWidth / 2 - windowWidth / 10,
          //     windowHeight / 2
          //   );
          // }, 1000);
        } else {
          console.log("rejected!");
        }
      });

      setTimeout(function() {
        selectAll(".roomsel").forEach(function(item) {
          item.remove();
        });
        selectAll(".intro").forEach(function(item) {
          item.remove();
        });
      }, 1000);
    });
    roomsel.child(b);
  } else {
    //re-connection -> just connect to remembered room!
    socket.emit("room", myroom, function(res) {
      if (res) {
        console.log("entered the room -> " + myroom);
      } else {
        console.log("rejected!");
      }
    });
  }
});

socket.on("post", async function(post) {

  console.log(post);
  var resp = await new Promise((resolve, reject) => {
    loadJSON("/entries", (json) => resolve(json));
  })
  console.log(resp.list);

  // var object = post.object;
  var object = {
    "id": 1,
    "type": "abc",
    "src": "https://p.dianaband.info/public/sound-parade/" + resp.list[post] + "/pixels.png",
    "audio": "https://p.dianaband.info/public/sound-parade/" + resp.list[post] + "/audio.mp3",
    "alt": "알트",
    "size": { "base": 40, "random": 20 },
    "y": { "base": 20, "random": 10 },
    "showtime": 30000
  };
  console.log(object);

  var img = createImg(object.src, object.alt, "", function(im) {
    var sound = loadSound(object.audio, function(snd) {
      //로딩이 끝나면, play!
      snd.loop();

      //로딩이 끝나면, show!
      im.show();

      //그림의 크기와 초기 위치 ==> 가로 보기인 경우
      var width = 0;
      if (windowWidth > windowHeight) {

        width = (windowHeight * (object.size.base * 1.4 + object.size.random * Math.random())) / 100; // 좀더 크게 + 40%  (ratio)
        im.size(width, AUTO);

        im.position(
          windowWidth * 1.5, // +150% 에서 생성되어서 접근 (sound fade-in)
          (windowHeight * (object.y.base + object.y.random * Math.random()) * 0.5) / 100 // 좀더 위로 위로 - 50%  (ratio)
        );

        //그림의 크기와 초기 위치 ==> 세로 보기인 경우
      } else {

        width = (windowHeight * (object.size.base + object.size.random * Math.random())) / 100; // json에서 정한 크기 그대로. (ratio)
        im.size(width, AUTO);

        im.position(
          windowWidth * 1.5, // +150% 에서 생성되어서 접근 (sound fade-in)
          (windowHeight * (object.y.base + object.y.random * Math.random())) / 100 // json에서 정한 위치 그대로. (ratio)
        );
      }

      //추가 정보들
      im.attribute("data-type", object.type);
      im.attribute("data-showtime", object.showtime / 1000); //milli-sec. -> seconds.

      //'아이콘' 들은 애니메이션을 시켜줘야 함...
      if (object.type == "icon") {
        //
        im.class("rotate");
        im.style("animation-duration", object.rotate + "s");
        var orgs = im.style("transform-origin").split(" ");
        var str = parseFloat(orgs[0]) + object.pivot.x + "px";
        str = str + " " + parseFloat(orgs[1]) + object.pivot.y + "px";
        im.style("transform-origin", str);
        //
      }

      //로딩이 다 되면, rendering array에 추가.
      var bundle = {
        ref: object,
        img: im,
        sound: snd,
        width: width
      };
      arr.push(bundle);
    });
  });

  //첨에는 hide
  img.hide();

});

function draw() {
  for (var i = arr.length - 1; i >= 0; i -= 1) {
    var bundle = arr[i];
    var img = bundle.img;
    var showtime = parseFloat(img.attribute("data-showtime"));
    var type = img.attribute("data-type");
    var x = img.position().x;
    var y = img.position().y;
    y = y + random(-1, 1);
    x = x - windowWidth / (fr * showtime);

    //
    if (type == "icon") {
      img.style("z-index", "-1");
    }
    3;

    img.position(x, y);
    var pan = (x / windowWidth) * 2 - 1;

    //panning
    var snd = bundle.sound;
    if (x >= -bundle.width && x < windowWidth) {
      pan = ((x + bundle.width) / (windowWidth + bundle.width)) * 2 - 1;
      snd.pan(pan);
      snd.setVolume(1);
    } else {
      var range;
      var knob;
      if (x >= windowWidth) {
        range = windowWidth / 2;
        knob = x - windowWidth;
        snd.pan(1);
        snd.setVolume(1 - knob / range);
      } else if (x < -bundle.width) {
        range = windowWidth / 2;
        knob = (x + bundle.width) * -1;
        snd.pan(-1);
        snd.setVolume(1 - knob / range);
      }
    }

    //remove at -50% (sound fade-out)
    var exit_x = -bundle.width - windowWidth/2;
    if (x < exit_x) {
      img.remove();
      snd.stop();
      arr.splice(i, 1);
    }
  }
}

// function randomvoiceplay() {
//   (looper = function(timeout) {
//     setTimeout(function() {
//       voice[int(random(19))].play();
//       looper(random(8000, 12000));
//     }, timeout);
//   })(8000);
// }