Memory Lane Module 02

แถวบ้านในความทรงจำ:

Memory Lane เป็นโครงการวิจัยเชิงทดลองของ Future Curiosity Lab ภายใต้ Bangkok City Lab ที่ผมพัฒนาขึ้นเพื่อสำรวจว่า เราจะออกแบบกระบวนการเรียนรู้ความสัมพันธ์ของผู้คนกับแถวบ้าน ซึ่งมักเป็นเรื่องของประสบการณ์ ความรู้สึก พฤติกรรม และความสัมพันธ์กับผู้คนรอบตัว ฯลฯ เพื่อแปลงมาเป็นข้อมูลและนำมาศึกษาร่วมกันได้อย่างไร

โครงการนี้เริ่มจากการสร้างเครื่องมือเก็บข้อมูลจากการสะท้อนประสบการณ์ของแต่ละคน เช่น เราใช้เวลาอยู่แถวบ้านมากน้อยแค่ไหน รู้จักผู้คนรอบตัวหรือไม่ มีบทบาทกับพื้นที่อย่างไร และรู้สึกว่าตัวเองเป็นส่วนหนึ่งของชุมชนในระดับไหน จากนั้นจึงแปลงคำตอบทั่วไปในชีวิตประจำวันเหล่านี้ออกมาเป็นรูปแบบของคะแนนแบบหลายมิติ เพื่อสร้างชุดข้อมูลที่สามารถอ่านได้ทั้งในระดับบุคคล และระดับภาพรวม

แรงบันดาลใจของงานทดลองนี้ มาจากเรื่องเล่าเกียวกับสวนสตอว์เบอร์รี่ในวัยเด็กของลูกค้าท่านหนึ่ง ที่ผู้คนในหมู่บ้านมีเวลาไม่ตรงกัน ทำให้การจัดประชุมเพื่อทำอะไรร่วมกันแทบจะเป็นไปไมไ่ด้ แต่คนในหมู่บ้านมักจะไปรวมกันที่ผับในคืนวันศุกร์สุดสัปดาห์ ทางเจ้าหน้าที่ของทางการก็เลยใช้คืนวันศุกร์ในผับเป็นช่วงเวลาของการจัดกิจกรรมนวัตกรรมการพัฒนาพันธุ์สตอว์เบอร์รี่ในหมู่บ้าน ผลคือคนเรียนรู้ไปด้วย สังสรรค์ไปด้วย สนุกสนานกันไป แต่ก็ได้แลกเปลี่ยนความรู้ระหว่างสวน และได้เรียนรู้จากเจ้าหน้าที่เกษตรของเมือง ทุกวันนี้สตอว์เบอร์รี่ที่พัฒนาพันธุ์จากแถวบ้านเขา ว่ากันว่ารสชาติและคุณภาพสูงมากที่สุดแห่งหนึ่ง

คงจะดีถ้าแถวบ้านเรา สามารถพัฒนานวัตกรรมอะไรร่วมกันได้แบบสบายสบาย กันเอง เป็นธรรมชาติ (ไม่เด็กเรียนเกินไป) ก็เลยทดลองพัฒนาการเก็บข้อมูลของแถวบ้านในพื้นที่ต่าง ๆ ขึ้นมาดูก่อนครับ 

โดยโครงการ Memory Lane แบ่งออกเป็น 3 ส่วน (module) ที่เชื่อมต่อกัน

Module 01 · Questionnaire

แบบสอบถามสั้น ๆ ใช้คำถามเกี่ยวกับชีวิตประจำวันเพื่อประเมินความสัมพันธ์ของผู้ตอบกับแถวบ้านในหลายมิติ ข้อมูลถูกประมวลผลผ่านเกณฑ์การให้คะแนนที่พัฒนาจากกรอบแนวคิดของโครงการ แล้วแปลงออกมาเป็น data portrait และหนึ่งใน 27 รูปแบบความสัมพันธ์กับย่าน พร้อมคำอธิบายในรูปแบบเซียมซีที่ช่วยให้ผู้ตอบอ่านและทบทวนความสัมพันธ์ของตัวเองกับพื้นที่ที่อาศัยอยู่

Appendix A: Sound Design

Stock & Flow uses a generative sound system built with the Web Audio API to create a real-time interactive soundtrack.

A continuous ambient layer forms the background, while events in the visualization, such as movement, arrival, selection, and changes in formation, trigger additional sound events.

All sounds share the same harmonic language, based on open and suspended chords. This lets individual sounds overlap freely, without a fixed musical progression.

Sound events are scheduled independently and with controlled variation, so the composition is designed to keep evolving without a fixed repeating sequence.

Real-time synthesis

The engine generates all sounds directly in the browser using the Web Audio API. Oscillators, filters, gain, stereo positioning, delay, and dynamics are created and controlled in real time.

audioCtx = new (window.AudioContext || window.webkitAudioContext)();

const osc = audioCtx.createOscillator();
const gain = audioCtx.createGain();
const panner = audioCtx.createStereoPanner();

osc.connect(gain);
gain.connect(panner);
panner.connect(bus);

Harmonic Approach

Ambient layers and interaction sounds draw from the same chord families. The system moves mainly between open A (I) and D (IV) harmonies, with E major (V) appearing occasionally before resolving back to A.

const CHORDS = {
  // I 
  SUS2: {
    pad: [110.00, 164.81, 246.94, 329.63, 440.00, 493.88],
    melody: [220.00, 246.94, 329.63, 440.00, 493.88, 659.25],
    birth: [493.88, 659.25, 880.00],
    land: [220.00, 329.63, 440.00]
  },

  SUS4: {
    pad: [110.00, 146.83, 164.81, 220.00, 293.66, 329.63],
    melody: [220.00, 293.66, 329.63, 440.00, 587.33, 659.25],
    birth: [587.33, 659.25, 880.00],
    land: [220.00, 329.63, 440.00]
  },

  A5G: {
    pad: [110.00, 164.81, 196.00, 220.00, 329.63, 392.00],
    melody: [196.00, 220.00, 329.63, 392.00, 440.00, 659.25, 783.99],
    birth: [392.00, 659.25, 783.99],
    land: [220.00, 329.63, 440.00]
  },

  // IV
  D_SUS2: {
    pad: [146.83, 220.00, 329.63, 440.00, 587.33, 659.25],
    melody: [293.66, 329.63, 440.00, 587.33, 659.25, 880.00],
    birth: [587.33, 659.25, 880.00],
    land: [293.66, 329.63, 440.00]
  },

  D_SUS4: {
    pad: [146.83, 196.00, 220.00, 293.66, 392.00, 440.00],
    melody: [293.66, 392.00, 440.00, 587.33, 783.99, 880.00],
    birth: [587.33, 783.99, 880.00],
    land: [293.66, 392.00, 440.00]
  },

  D6NO3: {
    pad: [146.83, 220.00, 246.94, 293.66, 440.00, 493.88],
    melody: [220.00, 246.94, 293.66, 440.00, 493.88, 587.33, 880.00],
    birth: [493.88, 587.33, 880.00],
    land: [220.00, 293.66, 440.00]
  },

  // V
  E_MAJOR: {
    pad: [164.81, 246.94, 329.63, 415.30, 493.88, 659.25],
    melody: [329.63, 415.30, 493.88, 659.25, 830.61, 987.77],
    birth: [659.25, 830.61, 987.77],
    land: [329.63, 493.88, 659.25]
  }
};

const A_CHORD_FAMILY = ['SUS2', 'SUS4', 'A5G'];
const D_CHORD_FAMILY = ['D_SUS2', 'D_SUS4', 'D6NO3'];

Relationship between visual and sound events

Actions in the visualization call different parts of the same sound engine, so movement and interaction become part of the composition rather than separate interface sounds.

events.on('arrivalStarted', ({ avatar }) => {
  playArrivalStart(avatar);
});

events.on('arrivalCompleted', ({ avatar }) => {
  playLanding(avatar);
});

events.on('formationStarted', () => {
  enterFormationHarmony();
});