融入动画技术的交互应用-雪花

最新推荐文章于 2022-08-06 23:51:47 发布

weixin_44236367

最新推荐文章于 2022-08-06 23:51:47 发布

阅读量1.3k

点赞数 3

分类专栏：互动媒体文章标签：交互应用

本文链接：https://blog.csdn.net/weixin_44236367/article/details/89819945

版权

互动媒体专栏收录该内容

5 篇文章 0 订阅

订阅专栏

寸金难买寸光阴-时间流逝就像雪花一样飘散

一、介绍

江大正飘柳絮像是冬天的雪花飘落，想做做自己喜欢的雪花的特效，通过参考《代码本色》弄了雪花。

二、实现雪花过程

**1.**先画一个雪花6个主分叉的其中一个的绘制——分支类然后用类方法生成完整的一支雪花分枝。
在这里插入图片描述

class Branch 
{
 float radius,ratio,rotation;
 Branch(float radius_,float ratio_,float rot){
  radius=radius_;
  ratio=ratio_;
  rotation=rot;
}
 void generate()
{
   pushMatrix();
   rotate(radians(rotation)); 
   float len=getStartLength(radius,ratio);
   branch(len);
   popMatrix();
 }
 void branch(float len)
{
     strokeWeight(len*0.15); 
     strokeCap(ROUND);      
     line(0,0,0,-len);              
     translate(0,-len);           
     
     if(len>2) 
    {
       pushMatrix();
       branch(len*ratio);
       popMatrix();
       
       pushMatrix();
       rotate(radians(-60)); 
       branch(getStartLength(len,ratio));
       popMatrix();
       
       pushMatrix();
       rotate(radians(60)); 
       branch(getStartLength(len,ratio));
       popMatrix();
     }
 }
 
 float getStartLength(float length,float  ratio)
 {
    float len=(1-ratio)*length;
    return len;
 }
}

**2.**接下来实现雪花下落，随机生成新的雪花，然后消除落在画布外的雪花。

void  generate() 
{
 PVector position =new PVector(random(0,width),0);
 PVector velocity =new PVector(0,random(5,10));
 float rotation =random(0,360);
 float aVel=random(-2,5);
 float radius =random(10,20);
 float ratio=0.618;
 snowflake s=new snowflake(position,velocity,rotation,aVel,radius,ratio);
 snowflakes.add(s);
}

void  emit() 
{
   if(speed >=1)
   {
   for(int i=0;i<speed;i++){ generate();}
   }
   else if(speed>0){if(random(1)<speed){generate();}}
}

void update() 
{
Iterator<snowflake> ite=snowflakes.iterator(); 
while(ite.hasNext()){snowflake s=ite.next();s.update();s.show();
if(s.position.y>(height+s.radius)){ite.remove();}                       
} 
}
void run ()

在这里插入图片描述
**3.**然后自己觉得时间就像雪花飘落一样流逝，本来想弄一个比较酷的时间表，但是实力不允许啊！就添加了一个比较low的一个时间表！

**4.**实验完整代码如下

import java.util.Iterator;

snowsystem snow;
int cx, cy;
float secondsRadius;
float minutesRadius;
float hoursRadius;
float clockDiameter;


void setup() 
{
  size(640, 360);
snow =new snowsystem(0.8); 
int radius = min(width, height) / 2;
  secondsRadius = radius * 0.72;
  minutesRadius = radius * 0.60;
  hoursRadius = radius * 0.50;
  clockDiameter = radius * 1.8;
  
  cx = width / 2;
  cy = height / 2;
}
void draw () 
{
  background(20);
  stroke(240);
  snow.run();
  fill(random(0,255),random(0,255),random(0,255));

   ellipse(cx, cy, clockDiameter, clockDiameter);
  
  // Angles for sin() and cos() start at 3 o'clock;
  // subtract HALF_PI to make them start at the top
  float s = map(second(), 0, 60, 0, TWO_PI) - HALF_PI;
  float m = map(minute() + norm(second(), 0, 60), 0, 60, 0, TWO_PI) - HALF_PI; 
  float h = map(hour() + norm(minute(), 0, 60), 0, 24, 0, TWO_PI * 2) - HALF_PI;
  
  // Draw the hands of the clock
  stroke(255);
  strokeWeight(1);
  line(cx, cy, cx + cos(s) * secondsRadius, cy + sin(s) * secondsRadius);
  strokeWeight(2);
  line(cx, cy, cx + cos(m) * minutesRadius, cy + sin(m) * minutesRadius);
  strokeWeight(4);
  line(cx, cy, cx + cos(h) * hoursRadius, cy + sin(h) * hoursRadius);
  
  // Draw the minute ticks
  strokeWeight(2);
  beginShape(POINTS);
  for (int a = 0; a < 360; a+=6) {
    float angle = radians(a);
    float x = cx + cos(angle) * secondsRadius;
    float y = cy + sin(angle) * secondsRadius;
    vertex(x, y);
  }
  endShape();

}


class Branch  
{
 float radius,ratio,rotation;
 Branch(float radius_,float ratio_,float rot)
 {
  radius=radius_;
  ratio=ratio_;
  rotation=rot;
}
 void generate()
{
   pushMatrix();
   rotate(radians(rotation)); 
   float len=getStartLength(radius,ratio);
   branch(len);
   popMatrix();
 }
 void branch(float len)
{
  stroke(random(0,255),random(0,255),random(0,255));   
  strokeWeight(len*0.15); 
     strokeCap(ROUND);      
     line(0,0,0,-len);              
     translate(0,-len);            
     
     if(len>2) 
    {
       pushMatrix();
       branch(len*ratio);
       popMatrix();
       
       pushMatrix();
       rotate(radians(-60)); 
       branch(getStartLength(len,ratio));
       popMatrix();
       
       pushMatrix();
       rotate(radians(60)); 
       branch(getStartLength(len,ratio));
       popMatrix();
     }
 }
 
 float getStartLength(float length,float  ratio)
 {
    float len=(1-ratio)*length;
    return len;
 }
}

class snowflake  
{
   PVector position ,velocity;
   float rotation ,aVelocity,radius,ratio;
   Branch[] branches=new Branch[6];
   
    snowflake(PVector pos,PVector vel,float rot,float aVel,float r,float rat)
    {
     position =pos;
     velocity=vel;
     rotation=rot;
     aVelocity=aVel;
     radius=r;
     ratio=rat;
     
     for(int i=0;i<6;i++){ branches[i]=new Branch(radius,ratio,i*60);}
    }
   
    void update()
    {
    position.add(velocity);
    rotation+=aVelocity; 
    }
    void show()  
    {
    pushMatrix();
    translate(position.x,position.y);
    rotate(radians(rotation));
    for(Branch b:branches)
    {b.generate();}
    popMatrix();  
    }
}

class snowsystem   
{
  float speed ;
  ArrayList<snowflake> snowflakes;
  
  snowsystem (float speed_){
  speed=speed_;
  snowflakes=new ArrayList<snowflake>();
 }

void  generate() 
{
 PVector position =new PVector(random(0,width),0);
 PVector velocity =new PVector(0,random(5,10));
 float rotation =random(0,360);
 float aVel=random(-2,5);
 float radius =random(10,20);
 float ratio=0.618;
 snowflake s=new snowflake(position,velocity,rotation,aVel,radius,ratio);
 snowflakes.add(s);
}

void  emit()  
{
   if(speed >=1)
   {
   for(int i=0;i<speed;i++){ generate();}
   }
   else if(speed>0){if(random(1)<speed){generate();}}
}

void update()  
{
Iterator<snowflake> ite=snowflakes.iterator(); 
while(ite.hasNext()){snowflake s=ite.next();s.update();s.show(); 
if(s.position.y>(height+s.radius)){ite.remove();}                       
} 
}
void run () 
{ emit();update();}
}

三、总结

一开始我就对动画技术有着浓烈的好奇心，它在我的心里总有一份神秘感，带着好奇和神秘我在课堂上我跟随着老师的引导在动画的世界自由翱翔，但是学习的不好。这一学期动画的学习，我学到了很多知识。原来我本来以为画画是不用动脑筋的事情，其实画画也需要花很多的心思:颜色的搭配，运用各种数学公式等等，都要花很多的时间去学习。
讲课教师就像路人将我们带入了课间创作天地，激发了我们的创作欲望和学习灵感，有了更多的思索。特别是老师讲课的方式很有趣，比如我有一个喜欢的老师，就特别课爱，每一次讲着就会说一个笑话，虽然有点冷（哈哈哈）！
动画很可爱，它需要画而且要让他动起来，这是它与纯绘画不同的地方，在画这一点来说，需要懂一点造型艺术，还需要的熟悉各种数学原理！
自己觉得时间就像雪花飘落一样流逝，本来想弄一个比较酷的时间表，但是实力不允许啊！本次作业本来想弄一个时间表里的颜色随着音乐变颜色，尝试了好多次还是不行，就弄了个很low的一个随机变颜色的时间表！

weixin_44236367

关注

3
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
融入动画技术的交互应用-雪花

寸金难买寸光阴-时间就像雪花一样飘散一、介绍江大正飘柳絮像是冬天的雪花飘落，想做做自己喜欢的雪花的特效，通过参考《代码本色》弄了雪花。二、实现雪花过程**1.**先画一个雪花6个主分叉的其中一个的绘制——分支类然后用类方法生成完整的一支雪花分枝。class Branch { float radius,ratio,rotation; Branch(float radius_,flo...
复制链接

扫一扫