Processing程序：弹幕交互

一：设计说明

当设计这段代码时，我关注的是创建一个交互式的项目列表，其中每个项目都具有文本和颜色。项目会从右侧向左侧移动，当用户点击某个项目时，该项目会从列表中消失。以下是代码设计过程的详细步骤：

设置画布和像素密度： 首先，在setup()函数中设置画布大小为800x800，并调用pixelDensity(1)来设置像素密度，确保画布的分辨率适应。

加载背景图像和字体： 使用loadImage()函数加载背景图像，并通过resize()函数调整图像大小以适应画布。然后，使用createFont()函数创建一个字体，并使用textFont()函数将文本使用的字体设置为刚刚创建的字体。

初始化项目列表： 使用ArrayList来存储项目对象。在循环中，根据总数量生成随机的文本和颜色，然后根据索引计算y坐标，创建Item对象并将其添加到项目列表中。

绘制函数： 在draw()函数中，首先绘制黑色的背景，然后使用image()函数绘制背景图像。接着，遍历项目列表中的每个项目，调用run()函数来处理移动和显示。如果项目被点击，将其从列表中移除。

鼠标点击事件： 使用mouseClicked()函数来检测鼠标点击事件。在循环中，检查每个项目是否被点击，如果是，则将其标记为已点击。

Item类： 创建了一个内部类Item，用于表示每个项目。在构造函数中，初始化项目的文本、位置、速度、颜色等属性。run()函数用于处理移动和显示项目，move()函数根据速度更新项目的x坐标，实现移动效果。checkClick()函数检查鼠标点击是否在项目范围内，如果是，则标记为已点击。display()函数绘制项目，根据点击状态来决定是否显示项目。

整个设计过程强调了项目的创建、移动和交互，使用了图片作为背景，通过字体、颜色和位置等元素来创造视觉上有趣的交互式效果。用户可以点击项目来互动，并观察项目的移动和消失。

二：部分代码

int total = 20; // 要显示的项目数量
ArrayList<Item> items; // 用于存储项目的ArrayList

String[] strs = {"哇", "天呀", "太美了", "好想去"}; // 项目的文本数组
color[] colors = {#CCCFFF, #FF0033, #FFFF66, #FFB703, #FB8500}; // 颜色数组

PFont font; // 字体
float fontSize = 50; // 字体大小
float speedRangeMin = 1; // 移动速度的最小值
float speedRangeMax = 3; // 移动速度的最大值
PImage img; // 背景图像

void setup() {
  size(800, 800); // 创建800x800大小的画布
  pixelDensity(1); // 设置像素密度
  smooth(); // 平滑绘制
  
  img = loadImage("back.jpg"); // 加载背景图像
  img.resize(width, height); // 调整图像大小以适应画布
  
  font = createFont("heiti.ttf", fontSize); // 创建字体
  textFont(font); // 设置文本使用的字体
  
  items = new ArrayList<Item>(); // 创建项目的ArrayList
  for (int i = 0; i < total; i++) {
    String str = strs[int(random(strs.length))]; // 随机选择一个文本
    color tColor = colors[int(random(colors.length))]; // 随机选择一个颜色
    float y = i * 40 + 50; // 根据索引计算y坐标
    items.add(new Item(str, tColor, y)); // 创建项目对象并添加到ArrayList中
  }
}

void draw() {
  background(0); // 设置背景颜色为黑色
  image(img, 0, 0); // 显示背景图像
  
  // 遍历项目ArrayList并运行每个项目
  for (int i = items.size() - 1; i >= 0; i--) {
    Item item = items.get(i);
    item.run();

三：图片

 

四：视频

 

Processing程序：弹幕交互