NYWORK MANUAL

シェイプレイヤーを3Dレイヤーにする

追加→多角形

種類：スター、頂点の数：200、内半径：0

追加→パス

パスにエクスプレッションを記入

// パラメータの設定
var radius = 200; // らせんの半径
var numTurns = 5; // らせんの巻き数
var height = 500; // らせんの高さ（Z軸方向の広がり）
var speed = 1; // らせんの回転速度

// 頂点ごとの位置を計算
var points = content(“多角形パス 1”).points;
var newPoints = [];

for (var i = 0; i < points; i++) {
var angle = (i / (points – 1)) * Math.PI * 2 * numTurns; // 角度を計算
var x = Math.cos(angle) * radius; // X座標
var y = Math.sin(angle) * radius; // Y座標
var z = (i / (points – 1)) * height – height/2; // Z座標（中央を0とする）

// 3Dレイヤーに変換されたときの見た目を考慮して、パースを適用
// ここでは簡易的にZ値をXとYに影響させています
var perspectiveScale = 1 + z / 500; // 簡易的なパース計算

newPoints.push([x * perspectiveScale, y * perspectiveScale]);

}

createPath(newPoints, [], [], false);

外半径：0、「線」も追加

螺旋は描けたけど、思い描いたものとは違うな。。改善の余地あり。

新規シェイプレイヤー

追加→多角形

線を追加し、適宜調整

頂点の数=100、内半径 = 外半径 = 0 を調整

パスを追加

パスのエクスプレッションに以下を記入

以下のエクスプレッションを「パス1」に追加。

—————————————————————————-

// パラメータの設定
var amplitude = 200; // 波の振幅
var frequency = 0.05; // 波の周波数
var speed = -20; // 波の移動速度
var points = 200; // 頂点数

// 頂点ごとの位置を計算
var newPoints = [];
for (var i = 0; i < points; i++) {
var x = i * (thisComp.width / (points – 1));
var y = Math.sin(x * frequency + time * speed) * amplitude;
newPoints.push([x, thisComp.height / 2 + y]);
}

// パスを生成
createPath(newPoints, [], [], false);
—————————————————————————-

各種パラメーターを調整したら、以下のような正弦波が描けた。

新規ヌルレイヤーを作成して、名前を「Controller」にする。

Controllerをガイドレイヤーに変更する

エフェクト→エクスプレッション制御→スライダー制御を選択（２つ複製して合計3つ作成）

スライダーの名前を「Number of Points」と「Max Y Value」、「Min Y Value」に変更する。

新規シェイプレイヤーを追加する

コンテンツに「線」を追加する

任意の色を設定する

コンテンツに「パス」も追加する（最終的にはパスが線の上にある必要あり）

csvフォルダを作成し、そこにcsvをドラッグ&ドロップ

csvはこんな構成↓

パスのエクスプレッションを開く

以下のコードをエクスプレッションに記入（csvのファイル名や列番号（0-indexed）は適宜修正）

==================================================
var numberOfPoints = thisComp.layer(“Controller”).effect(“Number of Points”)(“スライダー”);
var maxYValue = thisComp.layer(“Controller”).effect(“Max Y Value”)(“スライダー”);
var minYValue = thisComp.layer(“Controller”).effect(“Min Y Value”)(“スライダー”);

var startingPointX = 0;
var spacingForPoints = thisComp.width / (numberOfPoints – 1);
var arrayOfPoints = [];

for (var i = 0; i < numberOfPoints; i++) {
// Read CSV: row i+1 (skip header), column 1 = Y values
var values = thisComp.layer(“【ファイル名】.csv”).footage(“【ファイル名】.csv”).dataValue([【列番号】,i]);

// Normalise Y to comp height (flip so bigger values go upward)
var lineHeight = linear(values, minYValue, maxYValue, 0, thisComp.height) * -1;

arrayOfPoints.push([startingPointX, lineHeight]);
startingPointX += spacingForPoints;
}

createPath(arrayOfPoints, [], [], false);
==================================================

【注意】エラーがでる時は、ウィップでControllerと再接続したり、コードをマニュアルで書き直したりする必要あり。csvのファイル名もマニュアル修正要。

Controllerの値を適宜調整

とりあえず描けたっぽい

パスを線の上に持ってきたら、線が描画された

位置を「0，960」にしたら、真ん中に配置された

シェイプレイヤーを3Dレイヤー（クラシック3D）に変更する

y軸（緑軸）の回転を30度にしてみた。

z軸（青軸）の位置を1000にしてみた

パスのトリミングを追加して、５秒のアニメーションにしてみた

同じ要領で、２つの波を重ねてみた。

ヌルを中央に配置して、そこにリンクを設定した上で、スケールや回転の調整をすれば、アンカーを中央に設定したままでシェイプの調整が可能。

というより、各シェイプでコントロールせずに、ヌルで調整した方が良い！

最終的にアニメにしてみた

（参考ウェブサイト）

【追加】スケールや位置もスライダー制御できる

「X position」、「Y position」、「X scale」、「Y scale」

==================

xPosition = effect(“X position”)(“スライダー”);
yPosition = effect(“Y position”)(“スライダー”);
[xPosition, yPosition]

——————-

xScale = effect(“X scale”)(“スライダー”);
yScale = effect(“Y scale”)(“スライダー”);
[xScale, yScale]

==================

※追加エフェクトもマニュアルで作業しないとエラーが出る可能性が高い。その際、ウィップでリンクさせると、temp = thisComp…..とxの分しか作成されないので、自分でyの分を書く必要あり。

できた！

Anchorのx回転を調整すれば、断面図を垂直にもできる。

※はじっこのゼロの値のFeatureの表示をオフにしないと変な表示になる（一番上のシェイプレイヤー）。

皇居を通る緯線のgeojsonを用意した。普通に描画すると「線」のみ。

Extrusionを追加した

できた！

動かせる

元の3D柱状図はこれ（↓）