Processing 动态海报制作教程 【小白】—— 初学者必看的简易指南！

简介

欢迎来到本篇博客，我将带您踏上一段令人兴奋的创意之旅！

如果您是一名初学者，想要学习如何制作动态海报，那么您来对地方了。本文旨在为所有初学者提供一份易于理解的Processing动态海报制作教程，即使您没有任何编程或设计背景，也能轻松入门。Processing是一款简单而强大的编程语言，结合了图形学和交互式设计，让您能够创造出令人惊叹的动态视觉作品。

随着数字媒体的快速发展，动态海报成为了吸引眼球、传递信息和表达创意的热门形式之一。通过本教程，您将学会使用Processing创造出独特而引人注目的动态海报，无论是用于个人项目、社交媒体展示，还是作为艺术创作的一部分，您都将受益匪浅。

本文的目标是让每位初学者都能轻松理解并参与其中，不需要高深的编程知识或专业的设计技能。我们将从基础知识开始，一步步引导您进入Processing的魅力世界。为了让这篇文章获得更多的曝光率，我将尽可能用简洁明了的语言讲解复杂的概念，并提供丰富的实例和可操作的演示，确保每一位读者都能从中受益。

无论您是艺术爱好者、设计师、学生，还是对新事物充满好奇的普通人，我都诚挚地邀请您与我一同探索Processing的无限可能。让我们一起开启这个令人兴奋的创意之旅，创造出属于自己的动态海报，将您的创意与世界分享！让我们马上开始吧！

教程

效果展示

主要包含元素：

1. 跟随鼠标移动并变速的可以张开和闭合翅膀的蝴蝶
2. 自由移动并可以鼠标交互暂停和继续的蝴蝶
3. 可以循环放大缩小的烟花
4. 背景花园
5. 点击鼠标会下雪花

背景花园

一行代码实现：
iback.drawImg();

跟随鼠标移动并变速的可以张开和闭合翅膀的蝴蝶【蓝色】

在main中调用函数：

moveImgMouseXYWithSpeed(ifly1,0.05);
moveImgMouseXYWithSpeed(ifly1open,0.05);

实现蝴蝶跟随鼠标移动。
其中moveImgMouseXYWithSpeed函数为：

//移动myimg到鼠标位置，速度为speed
void moveImgMouseXYWithSpeed(MyImage myimg, float speed){
  continueMoveImgXY(myimg,(mouseX - myimg.getX())*speed,(mouseY - myimg.getY())*speed);
  changeImgDirectionXY(myimg,mouseX - myimg.getX(),mouseY - myimg.getY());
}

其中ifly1open是蝴蝶张开时的图片。通过以下代码实现翅膀的开合：

void BirdFly(){
  if(birdpos>8){
    ifly1.drawImg();   
  }else{
    ifly1open.drawImg();
  }
}

自由移动并可以鼠标交互暂停和继续的蝴蝶【粉色】

通过以下代码控制蝴蝶运动的轨迹：

void BirdFly(){
  birdpos+=1;
  birdpos%=16;
}

通过以下代码完成蝴蝶循环运动：

if(ifly2_flag==1){
ifly2RoutinMoveImgLR(ifly2,100,765,8);
routinMoveImgTD(ifly2,195,600,4);
}

通过以下代码实现蝴蝶在鼠标点击时停止：

void mousePressed(){
  if(mouseOnImg(ifly2)){
    ifly2_flag++;
    ifly2_flag%=2;
  }
}

可以循环放大缩小的烟花

在main函数中调用以下代码：

backforceScale1(iflower1,400,500);
backforceScale2(iflower2,400,500);

其中backforceScale1函数如下（backforceScale2只是速度不同）：

void backforceScale1(MyImage myimg,float l,float b){
  print(scaleState);
  if(scaleState == 0 ){
    if(myimg._img.width > l){
       myimg.setWH(myimg._img.width*0.99,myimg._img.height*0.99);
       myimg.resizeImg(0.99);

    }else{
      scaleState =1;
      PImage tmp = loadImage("flower1.png");
      tmp.resize(int(myimg._img.width),int(myimg._img.height));
      myimg._img = tmp;
    }
  }
  else if(scaleState == 1 ){
    if(myimg._img.width <b){
       myimg.setWH(myimg._img.width*1.01,myimg._img.height*1.01);
       myimg.resizeImg(1.01);
    }else{
      scaleState =0;
      PImage tmp = loadImage("flower1.png");
      tmp.resize(int(myimg._img.width),int(myimg._img.height));
      myimg._img = tmp;
    }
  }
}

点击鼠标会下雪花

在main函数中调用：

LeftFall();

其中mouseClicked完成鼠标交互的函数的内容是:

void mouseClicked(){
    initLeaves(20);   
}

主要思路是通过粒子系统来生成20个雪花，并在更新画布时反复作画。

多说一点

processing动态海报的制作大同小异，只要掌握方法一招顶十招。当然还需要一些练习。这个案例包括鼠标交互、粒子系统和类的运用等方面的知识，非常适合初学者上手。由于篇幅问题未将所有代码列出，有需要的可以后台踢踢我。

【如果你有构思，可以帮你实现各种processing程序】
【授人以鱼不如授人以渔，长期接processing答疑教学】