互动媒体技术——使用processing代码生成花

总体步骤概述

1.观察图形，总结其中的规律

2.将规律转化为代码，注意封装性

3.应用鼠标的交互性，拓展作品

一、观察图形，总结其中的规律

(1）形状特点：

• 一共有7层花，7圈
• 每一圈有12个椭圆形的花瓣
• 随着半径的减小，椭圆的大小也在发生变化，越来越小

（2) 角度特点

• 12个椭圆平分360°，因此每个椭圆占360°/12=30°
  
• 一共7层，每单数层首个椭圆的起始角度是0，每双数层首个椭圆的起始角度是15°
  

（3）颜色特点

随着半径的减小，颜色RGB中的G的值逐渐增大，R的值几乎维持在252左右，G的值越大，越黄。

（4）动态特点

可以观察到，随着时间的变换，花瓣的颜色在变浅，逐渐显现出边框。因此可以判断，颜色值中的alpha值在改变。且改变的差值与半径大小成正比

二、将规律转化为代码，注意封装性

(1)第一步：绘制出最外圈的一层花瓣

• 每一圈的椭圆构成的花瓣是以圆形排布的，因此这里确定每一个椭圆的位置时，应该使用圆的坐标计算。圆的坐标这里建议选取极坐标，因为涉及到每个椭圆还需旋转一定角度的问题。
  圆的极坐标表示为：
  
  
• 这里我们先建立一个绘制每一个花瓣的类（即一个椭圆）
  x:椭圆绘制的中心的x坐标
  y：椭圆绘制的中心的y坐标
  w:椭圆的宽度
  h:椭圆的高度
  c:椭圆的颜色

class Circle{
   
  float x;
  float y;
  float w;
  float h;
  color c;
  public Circle(){
   
  }
  public Circle(float x,float y,float w,float h,color c ){
   
     this.x=x;
     this.y=y;
     this.w=w;
     this.h=h;
     this.c=c;
  }

• 为该类添加一个旋转的成员函数（因为每一个椭圆的角度是不一致的，因此这里需要改变角度）

public void   rotateSelf(float angle1){
   
    pushMatrix();
    translate(x,y);
    rotate(angle1);
    translate(-x,-y);
    drawCircle();
    popMatrix();
  }

 public void drawCircle(){
   
    fill(c);
    ellipse(x,y,w,h);
  }

• 每一层由12个花瓣组成，因此建立一圈的话，可以看为一组，这里可以建立一个类对象数组

Circle[] circle=new Circle[12];

• 进行对象的的初始化以及绘制
  （1）之前已经知道，每30°绘制一个椭圆，那么椭圆到底绘制多大会较好呢