4-2. 加算合成

前回まで学んできた図形に「重ねたときの効果」を加えて、さらに表現の幅を広げます。効果はわかりやすくシンプルです。メジャーなものが「加算合成」です。加算合成は重なった色が明るくなっていきます。

まずは上の図と同じ結果を得られるようコードを書いてみましょう。

通常の円を2つ描きます。
次に加算合成の円を2つ描きます。加算合成円は PGAddCircle() を使います。
赤のPGCircle()に.zIndex( 1 ), 青のPGCircle()に.zIndex( 2 )を追加します。zIndexは重なり順をコントロールできます。数字が大きい方が上になります。

 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


func design( screen:PGScreen ) {
   screen.clearColor = .darkGrey

   PGCircle()
   .scale( square:200 )
   .position( cx: -50, cy: 150 ) 
   .color( .red )
   .zIndex( 1 )

   PGCircle()
   .scale( square:200 )
   .position( cx: 50, cy: 150 ) 
   .color( .blue )
   .zIndex( 2 )

   PGAddCircle()
   .scale( square:200 )
   .position( cx: -50, cy: -150 ) 
   .color( .red )

   PGAddCircle()
   .scale( square:200 )
   .position( cx: 50, cy: -150 ) 
   .color( .blue )
}

「コードを実行」を押します。

目標

通常の重なる円と、加算合成で重なった円が表示されれば成功です。加算合成の色を観察してください。背景の色も含めて、重なると明るい色に向かっていくことがわかります。

終わったら次のページへ進みます。

Note: 加算合成は重ねると白に近づきます。白の背景に描いても効果がないので、サンプルではscreen.clearColor = .darkGreyを用いています。

Note: zIndexの初期値は0.0です。0.0~99999.0までの小数を指定できます。

目標#

実行例#

目標

実行例