processingであの花EDっぽいものを作る part4
最後の仕上げをする
さて、それでは最後の仕上げを行っていきます。
まず表示する花をもっと追加して、色や大きさ、移動速度などを調整していきます。
また、花の色が切り替わるタイミングで視点移動があるので、その処理を追加します。
最後にめんまの画像を配置して完成です。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 |
【コード】 PImage flowerImg;//PImage型の変数flowerImgを定義 Flower[] flowers = new Flower[4];//Flowerクラスの配列flowersを定義 Flower[] flowers_1 = new Flower[25];//Flowerクラスの配列flowers_1を定義 Flower[] flowers_2 = new Flower[30];//Flowerクラスの配列flowers_2を定義 Flower[] flowers_3 = new Flower[35];//Flowerクラスの配列flowers_3を定義 Flower[] flowers_4 = new Flower[40];//Flowerクラスの配列flowers_4を定義 Flower[] flowers_5 = new Flower[90];//Flowerクラスの配列flowers_5を定義 PImage menma;//PImage型の変数menma定義 void setup(){ size( 1200,800,P3D);//processing3Dを使用した３次元空間 imageMode(CENTER);//画像表示の起点を真ん中に設定 hint(ENABLE_DEPTH_SORT); flowerImg = loadImage("flower.png");//flowerImgにflower.pngを格納 menma = loadImage("menma2.png");//menmaにmenma.pngを格納 //配列flowersにFlowerクラスのインスタンスを格納 for(int i = 0; i<flowers.length; i++){ flowers[i] = new Flower(-1,200,0,random(1,2)); } for(int i = 0; i<flowers_1.length; i++){ flowers_1[i] = new Flower(-10,100,0,random(1,3)); } for(int i = 0; i<flowers_2.length; i++){ flowers_2[i] = new Flower(-20,90,0,random(1,3)); } for(int i = 0; i<flowers_3.length; i++){ flowers_3[i] = new Flower(-30,70,random(-1,1),random(1,4)); } for(int i = 0; i<flowers_4.length; i++){ flowers_4[i] = new Flower(-40,50,random(-1,1),random(1,4)); } for(int i = 0; i<flowers_5.length; i++){ flowers_5[i] = new Flower(-50,30,random(-2,2),random(3,6)); } } void draw(){ background(#ffffff);//背景色を白に //Flowerクラスのshow()をインスタンスの数だけ呼び出し for(int i = 0; i<flowers.length; i++){ flowers[i].show(#eeeeee,#b7f4c5); }; for(int i = 0; i<flowers_1.length; i++){ flowers_1[i].show(#cccccc,#F0A0C7); } for(int i = 0; i<flowers_2.length; i++){ flowers_2[i].show(#dddddd,#E9AEE4); } for(int i = 0; i<flowers_3.length; i++){ flowers_3[i].show(#aaaaaa,#97A3DA); } for(int i = 0; i<flowers_4.length; i++){ flowers_4[i].show(#bbbbbb,#CED1FA); } for(int i = 0; i<flowers_5.length; i++){ flowers_5[i].show(#eeeeee,#Fafea9); } tint(#ffffff); translate(width/2, height-165,-5); image(menma, 0, 0, 120, 465); } class Flower{ float x = random(0,width);//画像のx座標の初期表示位置をランダムに設定 float plusX;//x座標の移動距離を管理 float y = random(-200,height);//画像のy座標の初期表示位置をランダムに設定 float plusY;//y座標の移動距離を管理 float roll = 0;//回転の角度を保持する変数 color flColorDown;//落ちている時の花の色 color flColorUp;//上っている時の花の色 int upDown = 0;//花の上り下がり制御フラグ float z;//画像のz座標を管理 int flSize;//花の大きさ int i=0; Flower(float z,int flSize,float plusX,float plusY){ this.z = z; this.flSize = flSize; this.plusX = plusX; this.plusY = plusY; } void show(color flColorDown,color flColorUp){ if(mousePressed && upDown == 0){ upDown =1;//マウスクリックで花の色を切替 delay(5); } if(upDown ==0){ tint(flColorDown); }else if(upDown ==1){ camera(width/2.0, height/2.0, (height/2.0) / tan(PI*60.0 / 360.0)+i, width/2.0, height/2.0, 0, 0, 1, 0) ; i+=3; if(i>90)upDown = 2; tint(flColorDown); pushMatrix();//現在の座標(=0,0)を記憶 translate(x, y,z);//x,y,zの位置に起点を移動 rotate(roll);//画面の回転 image(flowerImg, 0, 0,flSize,flSize); //x,yの座標を中心にflower.pngを表示 popMatrix();//pushMatrixで記憶した座標に戻す return; }else if(upDown ==2){ camera(width/2.0, height/2.0, (height/2.0) / tan(PI*60.0 / 360.0)+i, width/2.0, height/2.0, 0, 0, 1, 0) ; tint(flColorUp); } pushMatrix();//現在の座標(=0,0)を記憶 translate(x, y,z);//x,y,zの位置に起点を移動 rotate(roll);//画面の回転 image(flowerImg, 0, 0,flSize,flSize); //x,yの座標を中心にflower.pngを表示 popMatrix();//pushMatrixで記憶した座標に戻す roll += 0.01;//回転の角度を増やす //マウスクリックで花の移動方向を切り替え if(upDown ==0){ x += plusX; y += plusY; }else{ x = x - plusX; y = y - plusY; } //花が落ちている時に画面外に出た場合の処理 if(x < -200 || x > width+200 && upDown == 0){ x = random(-200, width+200); y = -200; }else if(y > height + 200 && upDown == 0){ x = random(-200, width+200); y = -200; } //花が上っている時に画面外に出た場合の処理 if( x < -200 || x > width + 200 && upDown == 2){ x = random(-200, width+200); y = height + 200; }else if(y < -200 && upDown == 2){ x = random(-200, width+200); y = height + 200; } } } 【実行結果】 [video width="1280" height="720" mp4="https://tama-lab.net/wp-content/uploads/2013/10/anohanaHP.mp4"][/video] |
processingでの処理はこれで完成です。
音楽を付けたり映像の編集をしたい場合は、これをベースに映像編集ソフトを使う方が良ろしいかと思います。
ズームする部分の再現で悩んでいるときに、こちらを見つけ、大変参考になりました。
おかげさまでかなり満足のいく出来になりました。ありがとうございます。