p5js processing 动态海报

1.设计说明

代码解释：
导入语句： 代码以导入必要的库开始，具体来说是用于音频的ddf.minim库和用于图像处理的PImage库。

变量声明： 声明了各种全局变量，用于存储图像、管理时间和动画，并控制程序行为的不同方面。

setup() 函数： 该函数在程序启动时调用一次。它初始化了画布大小，加载图像，设置音频，并初始化变量。

draw() 函数： 该函数会反复调用，定义了主要的动画循环。它控制画布上图像和动画的行为。

ImageObj 类： 该类代表画布上移动的图像。该类的每个实例包含图像、位置和透明度属性。该类的 drawMe() 方法负责渲染图像并处理其透明度变化。

keyPressed() 函数： 该函数检测是否按下了某个键，并根据情况更改了 mode 变量的值。

设计说明：
该程序似乎创建了一个交互式的视觉体验，具有以下特点：

背景图像： 在画布上显示了两个背景图像（image1 和 image2），透明度水平（image1Tou）在变化，从而产生淡入淡出的效果。

动画循环： draw() 函数包含两种视图模式（view == 1 和 view == 2），在淡入和淡出背景图像之间交替切换。

漂浮图像： 该程序生成并显示了 ImageObj 类的实例，代表在画布上漂浮的较小图像。这些图像具有随机的位置和透明度值。透明度会根据 mode 值减小，从而产生图像逐渐消失的 illusory 效果。

交互性： 当按下 ‘s’ 键时（keyPressed() 函数），mode 变量会变为 2，导致漂浮图像开始更快地消失。

音频播放： 该程序使用 Minim 库使用 player 对象循环播放音频文件（“music.mp3”）。

图像列表： 代码加载了各种图像文件，并将它们添加到 imagList 数组中，用于随机选择用于漂浮对象的图像。

设计考虑事项：
视觉构图： 设计可以从更清晰的视觉构图和层次结构中受益。您可以尝试排列图像，调整它们的大小和位置，以创建更具吸引力和美感的体验。

过渡效果： 实现不同视图模式之间的平滑过渡，以避免图像透明度和位置的突然变化。

用户交互： 考虑添加更多用户交互元素。例如，可以通过鼠标输入或其他键盘命令让用户控制图像的透明度和移动。

优化： 随着漂浮图像数量（imags）的增加，性能可能会降低。考虑优化代码，以更高效地处理更多图像。

用户反馈： 提供视觉或音频反馈，以指示按下 ‘s’ 键的效果，帮助用户更好地理解交互。

探索： 由于这是一个创意的视觉程序，不要犹豫尝试不同的参数，例如动画速度、透明度变化速率和图像变化，以找到更具吸引力和令人满意的结果。

2.部分代码import ddf.minim.*;

Minim minim;
AudioPlayer player;

PImage image1 ;
PImage image2 ;
PImage textBack;


PImage p1 ;
PImage p2 ;
PImage p3 ;
PImage p4 ;
PImage p5 ;
PImage p6 ;
PImage p7 ;
PImage p8 ;
PImage p9 ;
PImage p10 ;
PImage p11 ;
PImage p12 ;
PImage p13 ;
PImage p14 ;
PImage p15 ;
PImage p16 ;
PImage p17 ;
PImage p18 ;
PImage p19 ;
PImage p20 ;


int heightSingleSize = height/10;
int widthSingleSize = width/10;
int initTime ;

ArrayList<ImageObj> imags =new ArrayList<>();

ArrayList<PImage> imagList =new ArrayList<>();

void setup() {
  size(540, 960);
  minim = new Minim(this);


  player = minim.loadFile("music.mp3");
  player.loop();
  //初始化图像
  image1 =loadImage("img1.png");
  image1.resize(width, height-height/3);
  image2 =loadImage("img2.png");
  image2.resize(width, height-height/3);
 textBack =loadImage("textback.png");
 textBack.resize(width, height);
  p1 =loadImage("1.png");
  p2 =loadImage("2.png");
  p3 =loadImage("3.png");
  p4 =loadImage("4.png");
  p5 =loadImage("5.png");
  p6 =loadImage("6.png");
  p7 =loadImage("7.png");
  p8 =loadImage("8.png");
  p9 =loadImage("9.png");
  p10 =loadImage("10.png");
  p11 =loadImage("11.png");
  p12 =loadImage("12.png");
  p13 =loadImage("13.png");
  p14 =loadImage("14.png");
  p15 =loadImage("15.png");
  p16 =loadImage("16.png");
  p17 =loadImage("17.png");
  p18 =loadImage("18.png");
  p19 =loadImage("19.png");
  p20 =loadImage("20.png");
  imagList.add(p1);
  imagList.add(p2);
  imagList.add(p3);
  imagList.add(p4);
  imagList.add(p5);
  imagList.add(p6);
  imagList.add(p7);
  imagList.add(p8);
  imagList.add(p9);
  imagList.add(p10);
  imagList.add(p11);
  imagList.add(p12);
  imagList.add(p13);
  imagList.add(p14);
  imagList.add(p15);
  imagList.add(p16);
  imagList.add(p17);
  imagList.add(p18);
  imagList.add(p19);
  imagList.add(p20);


  //设置可以放大
  //surface.setResizable(true);

  //设置初始化时间
  initTime =millis();
}

int image1Tou =255; //背景图片透明度
int touSpeed =1;
int view =1;

void draw() {
  //设置背景色，background会不断刷新
  background(255);
  //frameRate(60);

  if (view ==1) {

    //图一平移
    pushMatrix();
    //tint(255，image1Tou);
    tint(255, image1Tou);
    translate(0, heightSingleSize*25);
    image(image1, 0, 0);
    popMatrix();


    //图二平移
    pushMatrix();
    tint(255, image1Tou);
    translate(widthSingleSize*2, heightSingleSize*15);
    scale(0.8);
    image(image2, 0, 0);
    popMatrix();

    if (image1Tou>100) {
      image1Tou-=touSpeed;
    }

    if (image1Tou<=100) {
      view =2;
    }
  }

  if (view ==2) {

    //图一平移
    pushMatrix();
    //tint(255，image1Tou);
    tint(255, image1Tou);
    translate(0, heightSingleSize*25);
    image(image1, 0, 0);
    popMatrix();


    //图二平移
    pushMatrix();
    tint(255, image1Tou);
    translate(widthSingleSize*2, heightSingleSize*15);
    scale(0.8);
    image(image2, 0, 0);
    popMatrix();


    if (image1Tou<254) {
      image1Tou+=touSpeed;
    }

    if (image1Tou>250) {
      image1Tou=255;
      view =1;
    }
  }
  if (frameCount%1==0) {
    int num =(int)random(imagList.size());
    int num2 =(int)random(imagList.size());
    int num3 =(int)random(imagList.size());
    ImageObj obj =new ImageObj(imagList.get(num) );
    ImageObj obj2 =new ImageObj(imagList.get(num2) );
    ImageObj obj3 =new ImageObj(imagList.get(num3) );
    imags.add(obj);
    imags.add(obj2);
    imags.add(obj3);
    //imags.add(new ImageObj(imageList.get(num)));
  }

  for (int i =0; i<imags.size(); i++) {

    imags.get(i).drawMe();
  }

  //int elapsedTime = millis() - initTime;
  //int remainingTime = 6000 - elapsedTime; // 计算剩余的时间
  //int seconds = floor(remainingTime / 1000); // 将剩余的毫秒数转换为秒数

  //if (seconds==0) {
  //  mode=2;
  //}
  image(textBack,0,0);
}

3.运行视频

p5js processing动态海报

4.运行图片