スクリプトで描いた、線、あるいは、線で囲んだ描画をカーブ状(曲線)に変形し、その変形状態を反復運動をさせるお勉強である。 反復運動は、三角関数を用いて行なった。 |
ステージなどの準備 |
●ステージのサイズ、背景色は任意。 fpsも好みに応じて任意(ここでは、24fps) |
SAMPLE1(山の数は1から任意) |
|
SAMPLE2 |
このページのコンテンツには、Adobe Flash Player の最新バージョンが必要です。

|
SAMPLE3 |
このページのコンテンツには、Adobe Flash Player の最新バージョンが必要です。

|
SAMPLE4 |
SAMPLE5 |
このページのコンテンツには、Adobe Flash Player の最新バージョンが必要です。

|
このページのコンテンツには、Adobe Flash Player の最新バージョンが必要です。

|
スクリプト (as2.0) |
SAMPLE1 |
//描画を構成するポイントの座標を配列定義
var pointx = [];
var pointy = [];
//線画用ムービークリップ
var c_mc = this.createEmptyMovieClip("c_mc", 1);
//座標、回転角、ポイント数の初期値定義
var x0 = 20;
var y0 = 60;
var dx = 50;
var dy = 100;
var rd = 0;
var pointNum = 11;
//ポイントの初期配置(直線状にdx間隔で並べる)
for (i=0; i<pointNum; i++) {
pointx[i] = x0+dx*i;
pointy[i] = y0;
}
myDraw(c_mc);
//描画関数
function myDraw(mc) {
mc.clear();
mc.lineStyle(0,0xff0000);
mc.moveTo(pointx[0],pointy[0]);
for (i=0; i<pointNum; i++) {
if (i%2 == 1) {
mc.curveTo(pointx[i],pointy[i],pointx[i+1],pointy[i+1]);
}
}
}
//反復運動
//偶数の(山となる)ポイントを往復運動させ
//隣の山は逆方向に動かす
c_mc.onEnterFrame = function() {
for (j=0; j<pointNum; j++) {
if (j%2 == 1) {
if (j%4 == 1) {
pointy[j] = y0+dy*Math.sin(rd);
} else {
pointy[j] = y0-dy*Math.sin(rd);
}
}
}
myDraw(this);
rd += 0.1;
};
|
SAMPLE2 |
//描画を構成するポイントの座標を配列定義
var pointx = [];
var pointy = [];
//線画用ムービークリップ
var c_mc = this.createEmptyMovieClip("c_mc", 1);
//座標、回転角、ポイント数、角度の初期値定義
var x0 = 20;
var y0 = 60;
var dx = 50;
var dy = 100;
var rd = 0;
var pointNum = 11;//ポイントの数は奇数に
var rd = Math.sin(Math.PI/2);
//左から右へ11ポイントを配置
for (i=0; i<pointNum; i++) {
pointx[i] = x0+dx*i;
pointy[i] = y0;
}
//右から左へ10ポイントを配置(10ポイント目は最左)
// 0 1 2 3 4 5 6 7 8 9 10
//20 19 18 17 16 15 14 13 12 11
for(i=pointNum; i<=2*(pointNum-1); i++) {
pointx[i] = x0+(pointNum-1)*dx + (pointNum-1-i)*dx;
pointy[i] = y0;
}
myDraw(c_mc);
//描画関数
function myDraw(mc) {
mc.clear();
mc.lineStyle(0,0xff0000);
mc.beginFill(0xff0000,50);
mc.moveTo(pointx[0],pointy[0]);
for (i=0; i<2*(pointNum-1); i++) {
if (i%2 == 1) {
mc.curveTo(pointx[i],pointy[i],pointx[i+1],pointy[i+1]);
}
}
}
//反復運動
c_mc.onEnterFrame = function() {
for (j=0; j<2*pointNum+1; j++) {
if (j%2 == 1) {
if (j%4 == 1) {
pointy[j] = y0+dy*Math.sin(rd);
} else {
pointy[j] = y0-dy*Math.sin(rd);
}
}
}
myDraw(this);
rd += 0.1;
};
|
SAMPLE3 |
//描画を構成するポイントの座標を配列定義
//pointx0には初期値を記憶させる
var pointx = [];
var pointy = [];
var pointx0 = [];
//線画用ムービークリップ
var c_mc = this.createEmptyMovieClip("c_mc", 1);
//座標、回転角、ポイント数、角度の初期値定義
var x0 = 20;
var y0 = 60;
var dx = 50;
var dy = 100;
var rd = 0;
var pointNum = 11;//ポイントの数は奇数に
var rd = Math.sin(Math.PI/2);
//左から右へ11ポイントを配置
for (i=0; i<pointNum; i++) {
pointx[i] = x0+dx*i;
pointx0[i] = pointx[i];
pointy[i] = y0;
}
//右から左へ10ポイントを配置(10ポイント目は最左)
// 0 1 2 3 4 5 6 7 8 9 10
//20 19 18 17 16 15 14 13 12 11
for(i=pointNum; i<=2*(pointNum-1); i++) {
pointx[i] = x0+(pointNum-1)*dx + (pointNum-1-i)*dx;
pointx0[i] = pointx[i];
pointy[i] = y0;
}
myDraw(c_mc);
//描画関数
function myDraw(mc) {
mc.clear();
mc.lineStyle(0,0xff0000);
mc.beginFill(0xff0000,50);
mc.moveTo(pointx[0],pointy[0]);
for (i=0; i<2*(pointNum-1); i++) {
if (i%2 == 1) {
mc.curveTo(pointx[i],pointy[i],pointx[i+1],pointy[i+1]);
}
}
}
//反復運動
c_mc.onEnterFrame = function() {
for (j=0; j<2*pointNum-1; j++) {
if (j%2 == 1) {
if (j%4 == 1) {
pointy[j] = y0+dy*Math.sin(Math.PI/2);
} else {
pointy[j] = y0-dy*Math.sin(Math.PI/2);
}
}
if(j<pointNum) {
pointx[j] = pointx0[j] + 5*j*Math.sin(2*rd);
} else {
pointx[j] = pointx0[j] + 5*(2*(pointNum-1)-j)*Math.sin(2*rd);
}
}
myDraw(this);
rd += 0.1;
};
|
SAMPLE4 |
//線画用ムービークリップ
var c_mc = this.createEmptyMovieClip("c_mc", 1);
//四辺形になるようにポイントを定義
//サフィックス数字二桁は中点
var x1 = 50;
var y1 = 50;
var x12 = 100;
var y12 = 50;
var x2 = 150;
var y2 = 50;
var x23 = 150;
var y23 = 100;
var x3 = 150;
var y3 = 150;
var x34 = 100;
var y34 = 150;
var x4 = 50;
var y4 = 150;
var x41 = 50;
var y41 = 100;
//初期角度
var rd = Math.PI;
//振れ幅
var r = 43;
//描画関数
function myDraw(mc) {
mc.clear();
mc.lineStyle(0,0xff0000);
mc.beginFill(0xff0000,50);
mc.moveTo(x1,y1);
mc.curveTo(x12,y12,x2,y2);
mc.curveTo(x23,y23,x3,y3);
mc.curveTo(x34,y34,x4,y4);
mc.curveTo(x41,y41,x1,y1);
mc.endFill();
}
//反復運動
//四角形に戻ったところで初期角度に返す
c_mc.onEnterFrame = function() {
y12 = 50 + r * Math.sin(rd);
x23 = 150 - r * Math.sin(rd);
y34 = 150 - r * Math.sin(rd);
x41 = 50 + r * Math.sin(rd);
myDraw(this);
if (rd >= 2 * Math.PI) {
rd = Math.PI;
} else {
rd += 0.05;
}
};
|
SAMPLE5 |
//線画用ムービークリップ
var c_mc = this.createEmptyMovieClip("c_mc", 1);
//ハート形になるようにポイントを定義
//x0,y0が最下部
//サフィックス数字二桁は中点
var x0 = 120;
var y0 = 250;
var x01= 10;
var y01= 210;
var x1 = 20;
var y1 = 90;
var x12= 40;
var y12= -20;
var x2 = 120;
var y2 = 80;
var x23= 210;
var y23= -20;
var x3 = 220;
var y3 = 90
var x30= 220;
var y30= 210;
//初期角度
rd = Math.PI;
//振れ幅
r = 10;
myDraw(c_mc);
//描画関数
function myDraw(mc) {
mc.clear();
mc.lineStyle(1,0xff0000);
mc.beginFill(0xff0000,50);
mc.moveTo(x0,y0);
mc.curveTo(x01,y01,x1,y1);
mc.curveTo(x12,y12,x2,y2);
mc.curveTo(x23,y23,x3,y3);
mc.curveTo(x30,y30,x0,y0);
}
//反復運動
//上部3点、最下部を上下に
//左右4点を左右に反復させる
c_mc.onEnterFrame = function() {
y0 = 250 + r * Math.sin(rd)/2;
x01= 10 + r * Math.sin(rd);
x1 = 20 + r * Math.sin(rd)/2;
x3 = 220 - r * Math.sin(rd)/2;
y12 = -20 - r * Math.sin(rd);
y2 = 80 - r * Math.sin(rd)/2;
y23 = -20 - r * Math.sin(rd);
x30 = 220 - r * Math.sin(rd);
myDraw(this);
rd += 0.2;
}
|
|
|
HOME お勉強総リスト |