let flock;

let wordData; // 存储JSON依存关系和词向量数据

let wires = []; // 存储电线位置

let song; // 音乐变量

let maxBoidsPerWire = 8; // 每根电线上最多词鸟数量

​

function preload() {

  // 加载字体，确保字体文件路径正确

  myFont = loadFont('UNEXPECTED RUSTY TYPEWRITER.OTF');

  // 加载音乐

  soundFormats('mp3');

  song = loadSound('Fujii Kaze - Close To You.mp3');

  // 尝试加载JSON数据

  try {

    wordData = loadJSON('close_to_you_vectors_dependencies.json');

  } catch (error) {

    console.log('JSON数据加载失败，使用默认词汇');

  }

}

​

function setup() {

  // 自适应设置 - 将画布调整为设备屏幕宽度的90%

  let canvasWidth = min(540, windowWidth * 0.9); // 控制最大宽度为540

  let canvasHeight = canvasWidth * 16/9; // 16:9比例，类似抖音竖屏

  createCanvas(canvasWidth, canvasHeight);

  // 播放音乐并循环

  song.setVolume(0.5); // 设置音量为50%

  song.loop(); // 循环播放

  textFont(myFont); // 应用加载的字体

  textSize(canvasWidth * 0.02); // 根据画布大小设置文字大小

  textAlign(CENTER, CENTER); // 居中文本

  // 创建5根电线，竖屏版本，均匀分布

  let wireSpacing = canvasHeight / 6; // 确保电线均匀分布

  for (let i = 0; i < 5; i++) {

    wires.push(wireSpacing + i * wireSpacing);

  }

  // 准备词汇

  let words;

  if (wordData && wordData.words) {

    words = wordData.words.map(w => w.text);

  } else {

    // 使用默认歌词

    let poetry = "Why do birds suddenly appear Every time you are near? Just like me, they long to be Close to you.Why do stars fall down from the sky Every time you walk by? Just like me, they long to be Close to you.On the day that you were born the angels got together And decided to create a dream come true So they sprinkled moon dust in your hair of gold. And starlight in your eyes of blue.That is why all the girls in town Follow you all around Just like me, they long to be Close to you. On the day that you were born, the angels got together And decided to create a dream come true So they sprinkled moon dust in your hair of gold. And starlight in your eyes of blueThat is why all the girls in town Follow you all around Just like me, they long to be Close to you Just like me, they long to be. Close to you.Wa, close to you Wa, close to you Ha, close to you La, close to you";

    words = poetry.split(" ");

  }

  flock = new Flock(words);

  // 初始化初始boid数量为屏幕大小的适当比例

  let initialBoidCount = floor(canvasWidth * canvasHeight / 10000); // 根据画布大小调整初始boid数量

  // 初始化一些boids

  for (let i = 0; i < initialBoidCount; i++) {

    let wordText, wordId, deps, x, y;

    // 如果有JSON数据，使用词向量位置和依存关系

    if (wordData && wordData.words && wordData.words.length > 0) {

      let wordObj = wordData.words[i % wordData.words.length];

      wordText = wordObj.text;

      wordId = wordObj.id;

      deps = wordObj.dependencies;

      // 使用t-SNE坐标作为初始位置（如果有），但缩放到当前画布大小

      if (wordObj.initial_position) {

        // 假设原始t-SNE映射到1080x1920的画布

        x = map(wordObj.initial_position.x, 0, 1080, 0, canvasWidth);

        y = map(wordObj.initial_position.y, 0, 1920, 0, canvasHeight);

      } else {

        x = random(width);

        y = random(height);

      }

    } else {

      // 使用默认值

      wordText = words[i % words.length];

      wordId = "word_" + i;

      deps = [];

      x = random(width);

      y = random(height);

    }

    let b = new Boid(x, y, wordText, wordId, deps);

    // 找最近的电线

    let closestWire = 0;

    let minDist = abs(y - wires[0]);

    for (let j = 1; j < wires.length; j++) {

      let d = abs(y - wires[j]);

      if (d < minDist) {

        minDist = d;

        closestWire = j;

      }

    }

    b.preferredWire = closestWire;

    flock.addBoid(b);

  }

}

​

function draw() {

  background(255); // 白色背景

  // 绘制电线

  drawWires();

  // 更新和显示词群

  flock.run();

  // 显示电线上形成的句子

  displayWireSentences();

  // 检查每根电线上的词鸟数量

  enforceBoidLimits();

}

​

// 限制每根电线上的词鸟数量

function enforceBoidLimits() {

  // 计算每根电线上的词鸟数量

  let boidsOnWire = Array(wires.length).fill(0);

  for (let i = 0; i < flock.boids.length; i++) {

    let boid = flock.boids[i];

    if (boid.isOnWire) {

      boidsOnWire[boid.preferredWire]++;

    }

  }

  // 如果某根电线上的词鸟超过限制，让一些起飞

  for (let i = 0; i < flock.boids.length; i++) {

    let boid = flock.boids[i];

    if (boid.isOnWire && boidsOnWire[boid.preferredWire] > maxBoidsPerWire) {

      // 有20%概率让这个词鸟起飞

      if (random() < 0.2) {

        boid.isOnWire = false;

        boid.velocity.y = random(-1, 1);

        boidsOnWire[boid.preferredWire]--;

        // 如果已经达到限制，就不再处理

        if (boidsOnWire[boid.preferredWire] <= maxBoidsPerWire) {

          break;

        }

      }

    }

  }

}

​

function drawWires() {

  stroke(200); // 浅灰色电线

  strokeWeight(1);

  for (let i = 0; i < wires.length; i++) {

    line(0, wires[i], width, wires[i]);

  }

}

​

// 显示电线上形成的句子

function displayWireSentences() {

  // 为每根电线收集单词

  for (let i = 0; i < wires.length; i++) {

    let wireWords = [];

    // 查找在这根电线上的所有boid

    for (let j = 0; j < flock.boids.length; j++) {

      let boid = flock.boids[j];

      if (boid.isOnWire && boid.preferredWire === i && boid.position.x > 0 && boid.position.x < width) {

        wireWords.push({

          text: boid.text,

          x: boid.position.x

        });

      }

    }

    // 按x坐标排序

    wireWords.sort((a, b) => a.x - b.x);

    // 构建句子

    let sentence = wireWords.map(w => w.text).join(" ");

    // 显示句子

    if (sentence.length > 0) {

      fill(0);

      noStroke();

      textAlign(CENTER);

      textSize(width * 0.015);

      text(sentence, width/2, wires[i] - 15);

    }

  }

  // 恢复文本设置

  textAlign(CENTER, CENTER);

  textSize(width * 0.02);

}

​

function Flock(words) {

  this.boids = [];

  this.words = words;

}

​

Flock.prototype.addBoid = function(b) {

  this.boids.push(b);

};

​

Flock.prototype.run = function() {

  for (let i = 0; i < this.boids.length; i++) {

    this.boids[i].run(this.boids);

  }

};

​

function Boid(x, y, text, id, dependencies) {

  this.acceleration = createVector(0, 0);

  this.velocity = createVector(random(-1, 1), random(-1, 1));

  this.position = createVector(x, y);

  this.r = 1.0;

  this.maxspeed = 2;

  this.maxforce = 0.1;

  this.text = text;

  this.id = id || "word_" + text;

  this.dependencies = dependencies || [];

  this.preferredWire = 0; // 偏好的电线索引

  this.isOnWire = false; // 是否停留在电线上

  this.stayOnWireChance = 0.2; // 停留在电线上的概率

  this.takeFlight = 0.01; // 从电线起飞的概率

}

​

Boid.prototype.run = function(boids) {

  // 检查是否应该停留在电线上

  if (!this.isOnWire && abs(this.position.y - wires[this.preferredWire]) < 5 && random() < this.stayOnWireChance) {

    // 检查当前电线上的词鸟数量

    let count = 0;

    for (let i = 0; i < boids.length; i++) {

      if (boids[i].isOnWire && boids[i].preferredWire === this.preferredWire) {

        count++;

      }

    }

    // 只有在电线上的词鸟数量未达到限制时才停留

    if (count < maxBoidsPerWire) {

      this.isOnWire = true;

      this.velocity.y = 0; // 停止垂直运动

      this.position.y = wires[this.preferredWire]; // 精确停在电线上

    }

  }

  // 检查是否应该从电线起飞

  if (this.isOnWire && random() < this.takeFlight) {

    this.isOnWire = false;

    this.velocity.y = random(-1, 1); // 给一个随机的垂直速度

  }

  // 应用行为

  if (this.isOnWire) {

    this.flockOnWire(boids);

  } else {

    this.flock(boids);

  }

  this.update();

  this.borders();

  this.render();

};

​

Boid.prototype.flockOnWire = function(boids) {

  let sep = this.separate(boids);

  let dep = this.dependencyAlignment(boids);

  // 在电线上时增强依存关系对齐，减弱其他力

  sep.mult(1.2);

  dep.mult(2.0);

  // 应用力

  this.applyForce(sep);

  this.applyForce(dep);

};

​

Boid.prototype.flock = function(boids) {

  let sep = this.separate(boids);   // Separation

  let ali = this.align(boids);      // Alignment

  let coh = this.cohesion(boids);   // Cohesion

  let dep = this.dependencyAlignment(boids); // 依存关系对齐

  let wir = this.seekWire(); // 电线吸引力

  sep.mult(1.5);

  ali.mult(1.0);

  coh.mult(1.0);

  dep.mult(5); // 依存关系权重

  wir.mult(0.1); // 弱电线吸引力

  this.applyForce(sep);

  this.applyForce(ali);

  this.applyForce(coh);

  this.applyForce(dep);

  this.applyForce(wir);

};

​

Boid.prototype.dependencyAlignment = function(boids) {

  let steer = createVector(0, 0);

  let count = 0;

  // 如果没有依存关系数据，返回零向量

  if (!this.dependencies || this.dependencies.length === 0) {

    return steer;

  }

  // 检查与其他boid的依存关系

  for (let i = 0; i < boids.length; i++) {

    let other = boids[i];

    if (other === this) continue;

    // 查找与other之间的依存关系

    for (let j = 0; j < this.dependencies.length; j++) {

      let dep = this.dependencies[j];

      // 如果找到依存关系

      if (dep.target === other.id) {

        let d = p5.Vector.dist(this.position, other.position);

        if (d > 0 && d < 150) { // 依存关系作用范围比普通对齐更大

          // 应用依存关系强度

          let force = other.velocity.copy();

          let strength = dep.strength || 1.0;

          force.mult(strength);

          steer.add(force);

          count++;

          // 如果两个词都在电线上且有依存关系，它们会更靠近

          if (this.isOnWire && other.isOnWire && this.preferredWire === other.preferredWire) {

            let cohesionForce = p5.Vector.sub(other.position, this.position);

            cohesionForce.y = 0; // 保持在电线上

            cohesionForce.normalize();

            cohesionForce.mult(this.maxspeed * strength * 0.5);

            let cohSteer = p5.Vector.sub(cohesionForce, this.velocity);

            cohSteer.limit(this.maxforce);

            steer.add(cohSteer);

          }

        }

      }

    }

  }

  if (count > 0) {

    steer.div(count);

    steer.normalize();

    steer.mult(this.maxspeed);

    steer.sub(this.velocity);

    steer.limit(this.maxforce);

  }

  return steer;

};

​

Boid.prototype.seekWire = function() {

  // 寻找偏好的电线

  let targetY = wires[this.preferredWire];

  let desired = createVector(this.position.x, targetY);

  desired = p5.Vector.sub(desired, this.position);

  desired.normalize();

  desired.mult(this.maxspeed);

  let steer = p5.Vector.sub(desired, this.velocity);

  steer.limit(this.maxforce);

  return steer;

};

​

Boid.prototype.applyForce = function(force) {

  // 如果在电线上，忽略垂直力

  if (this.isOnWire) {

    force.y = 0;

  }

  this.acceleration.add(force);

};

​

Boid.prototype.update = function() {

  this.velocity.add(this.acceleration);

  // 如果在电线上，保持水平运动

  if (this.isOnWire) {

    this.velocity.y = 0;

  }

  this.velocity.limit(this.maxspeed);

  this.position.add(this.velocity);

  this.acceleration.mult(0);

};

​

Boid.prototype.separate = function(boids) {

  let desiredSeparation = 30.0;

  let steer = createVector(0, 0);

  let count = 0;

  for (let i = 0; i < boids.length; i++) {

    let d = p5.Vector.dist(this.position, boids[i].position);

    if ((d > 0) && (d < desiredSeparation)) {

      let diff = p5.Vector.sub(this.position, boids[i].position);

      diff.normalize();

      diff.div(d);

      steer.add(diff);

      count++;

    }

  }

  if (count > 0) {

    steer.div(count);

  }

  if (steer.mag() > 0) {

    steer.normalize();

    steer.mult(this.maxspeed);

    steer.sub(this.velocity);

    steer.limit(this.maxforce);

  }

  return steer;

};

​

Boid.prototype.align = function(boids) {

  let neighborDist = 50;

  let sum = createVector(0, 0);

  let count = 0;

  for (let i = 0; i < boids.length; i++) {

    let d = p5.Vector.dist(this.position, boids[i].position);

    if ((d > 0) && (d < neighborDist)) {

      sum.add(boids[i].velocity);

      count++;

    }

  }

  if (count > 0) {

    sum.div(count);

    sum.normalize();

    sum.mult(this.maxspeed);

    let steer = p5.Vector.sub(sum, this.velocity);

    steer.limit(this.maxforce);

    return steer;

  } else {

    return createVector(0, 0);

  }

};

​

Boid.prototype.cohesion = function(boids) {

  let neighborDist = 50;

  let sum = createVector(0, 0);

  let count = 0;

  for (let i = 0; i < boids.length; i++) {

    let d = p5.Vector.dist(this.position, boids[i].position);

    if ((d > 0) && (d < neighborDist)) {

      sum.add(boids[i].position);

      count++;

    }

  }

  if (count > 0) {

    sum.div(count);

    return this.seek(sum);

  } else {

    return createVector(0, 0);

  }

};

​

Boid.prototype.seek = function(target) {

  let desired = p5.Vector.sub(target, this.position);

  desired.normalize();

  desired.mult(this.maxspeed);

  let steer = p5.Vector.sub(desired, this.velocity);

  steer.limit(this.maxforce);

  return steer;

};

​

Boid.prototype.render = function() {

  // 使用Shiffman方法获取速度的方向角度

  let heading = this.velocity.heading();

  fill(0);

  noStroke();

  push();

  translate(this.position.x, this.position.y);

  // 根据需要调整文本方向

  rotate(heading ); // 加上PI/2（90度）使文本垂直于运动方向

  // 如果只想让文本沿着运动方向，可以使用：rotate(heading);

  text(this.text, 0, 0); 

  pop();

};

​

Boid.prototype.borders = function() {

  if (this.position.x < -this.r) this.position.x = width + this.r;

  if (this.position.y < -this.r) this.position.y = height + this.r;

  if (this.position.x > width + this.r) this.position.x = -this.r;

  if (this.position.y > height + this.r) this.position.y = -this.r;

};

​

function mouseDragged() {

  // 使用鼠标位置确定最近的电线

  let closestWire = 0;

  let minDist = abs(mouseY - wires[0]);

  for (let i = 1; i < wires.length; i++) {

    let d = abs(mouseY - wires[i]);

    if (d < minDist) {

      minDist = d;

      closestWire = i;

    }

  }

  // 决定添加哪个词

  let wordText, wordId, deps;

  if (wordData && wordData.words) {

    // 如果有JSON数据，随机选择一个词及其依存关系

    let randomIndex = floor(random(wordData.words.length));

    let wordObj = wordData.words[randomIndex];

    wordText = wordObj.text;

    wordId = wordObj.id;

    deps = wordObj.dependencies;

  } else {

    // 使用默认词汇

    let words = flock.words;

    let numBoids = flock.boids.length;

    wordText = words[numBoids % words.length];

    wordId = "word_" + numBoids;

    deps = [];

  }

  let newBoid = new Boid(mouseX, mouseY, wordText, wordId, deps);

  newBoid.preferredWire = closestWire;

  flock.addBoid(newBoid);

}

​

// 添加音乐控制功能

function keyPressed() {

  // 按空格键暂停/播放音乐

  if (key === ' ') {

    if (song.isPlaying()) {

      song.pause();

    } else {

      song.play();

    }

  }

}

​

// 窗口大小改变时调整画布

function windowResized() {

  let canvasWidth = min(540, windowWidth * 0.9);

  let canvasHeight = canvasWidth * 16/9;

  resizeCanvas(canvasWidth, canvasHeight);

  // 重新计算电线位置

  wires = [];

  let wireSpacing = canvasHeight / 6;

  for (let i = 0; i < 5; i++) {

    wires.push(wireSpacing + i * wireSpacing);

  }

  // 调整文字大小

  textSize(canvasWidth * 0.02);

}