Processing动态交互作品-Toy模板网

这篇具有很好参考价值的文章主要介绍了Processing动态交互作品。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

一：代码介绍

允许用户输入文本并在屏幕上显示。程序允许用户输入文本并将其显示为逐渐消失的文本元素。在特定时间间隔后，显示的文本将被清除，并且包含了时钟和天数计数器以实现视觉效果。

以下是程序的说明：

1.全局变量：

inputText：存储用户输入的文本。

timer：跟踪清除显示文本的时间间隔。

interval：指定时间间隔的持续时间（3分钟）。

clockTimer：跟踪更新天数计数器的时间间隔。

clockInterval：指定更新时钟显示的时间间隔（1分钟）。

daysCounter：记录天数的计数器。

texts：用于存储TextElement类的实例的ArrayList。

2.setup() 函数：

设置画布大小和字体。

设置文本对齐方式和大小。

初始化 timer 和 clockTimer 变量。

3.draw() 函数：

清除背景并将原点平移至（0, 100）。

调用 drawClock()、drawDaysCounter()、drawTextInputBox() 和 drawTexts() 函数分别显示时钟、天数计数器、文本输入框和文本元素。

在画布底部显示静态消息。

4.drawClock() 函数：

将原点平移至画布中心。

根据当前时间旋转坐标系。

绘制表示时钟指针的线条。

如果时钟间隔已过，则更新 daysCounter。

5.drawDaysCounter() 函数：

构造并显示天数计数器文本框，使用矩形形状。

在文本框内显示当前天数计数。

6.drawTextInputBox() 函数：

构造并显示文本输入框，使用矩形形状。

在框内显示当前输入的文本。

绘制单独的按钮用于提交文本。

7.drawTexts() 函数：

遍历 texts ArrayList，更新和显示每个 TextElement 对象。

如果时间间隔已过，则清除 texts ArrayList 并重置 timer。

8.mousePressed() 函数：

检测鼠标是否按在提交按钮区域。

如果是，则创建一个带有当前输入文本和随机坐标的新 TextElement 对象，并将其添加到 texts ArrayList。

清空输入文本。

9.keyTyped() 函数：

将键入的字符追加到 inputText 变量中，除非它是特殊键（例如 ENTER、RETURN 或 CODED）。

处理 BACKSPACE 键，通过从 inputText 字符串中删除最后一个字符。

10.TextElement 类：

表示具有位置、透明度和起始时间的文本元素。

update() 方法随时间更新透明度。

display() 方法显示当前透明度的文本。

keyPressed() 函数：

以与 keyTyped() 函数类似的方式处理 BACKSPACE 键。

二：相关代码

String inputText = "hello";
int timer;
int interval = 3 * 60 * 1000; // 3 minutes in milliseconds
int clockTimer;
int clockInterval = 60 * 1000; // 1 minute in milliseconds
int daysCounter = 1;
ArrayList<TextElement> texts = new ArrayList<TextElement>();

void setup() {
  size(1200, 800);
  PFont font = createFont("SourceHanSansCN-Regular.otf", 32);
  textFont(font);

  textAlign(CENTER, CENTER);
  textSize(32);
  timer = millis() + interval;
  clockTimer = millis() + clockInterval;
}

void draw() {
  background(255);
  pushMatrix();
  translate(0, 100);
  drawClock();

  popMatrix();
  drawDaysCounter();
  drawTextInputBox();
  drawTexts();
  textSize(20);
  fill(0);
  text("———朋友圈仅三天可见———", width/2, height-100);
}

void drawClock() {
  pushMatrix();
  translate(width / 2, height / 2 - 220);
  rotate(radians((millis() % clockInterval) * 360.0 / clockInterval));
  stroke(0);
  strokeWeight(2);
  line(0, 0, 0, -80);
  popMatrix();
  if (millis() >= clockTimer) {
    daysCounter = (daysCounter + 1) % 4;
    clockTimer = millis() + clockInterval;
  }
}

void drawDaysCounter() {
  String daysText = "天数：" + daysCounter + "天";
  textSize(22);
  fill(255, 102);
  stroke(0);
  strokeWeight(1);
  rectMode(CENTER);
  rect(width / 2, height / 2 - 280, textWidth(daysText) + 20, 30, 7);
  fill(0);
  text(daysText, width / 2, height / 2 - 280);
}

void drawTextInputBox() {
  fill(255, 102);
  stroke(0);
  strokeWeight(1);
  rectMode(CENTER);
  rect(width / 2, height / 2 + 50, 600, 50, 20);
  fill(0);
  text(inputText, width / 2, height / 2 + 50);
  noStroke();
  fill(5, 193, 96);

  strokeWeight(1);
  rect(width / 2 + 400, height / 2 + 50, 100, 50, 10, 10, 10, 10);
  //rect(width / 2 + 352, height / 2 + 50, 100, 50);
  fill(255);
  text("发表", width / 2 + 400, height / 2 + 50);
}

void drawTexts() {
  for (TextElement textElement : texts) {
    textElement.update();
    textElement.display();
  }
  if (millis() >= timer) {
    texts.clear();
    timer = millis() + interval;
  }
}

void mousePressed() {
  if (dist(mouseX, mouseY, width / 2 + 400, height / 2 + 50) < 25) {
    float x = random(50, width - 50);
    float y = random(50, height - 50);
    texts.add(new TextElement(inputText, x, y));
    inputText = "";
  }
}

void keyTyped() {
  if (key != ENTER && key != RETURN && key != CODED) {
    inputText += key;
  }
    if(key== BACKSPACE&& inputText.length() > 0){
     inputText = inputText.substring(0, inputText.length() - 1);
   
  }
 
}