▶ 実 行
▶ 実行
クリア
クリスマスツリーを飾ろう!
by 雪乃☆雫
!『https://n3s.nadesi.com/plain/SVGplus.nako3』を取り込む。 描画中キャンバスの「高さ」に0をDOM属性設定。 母艦は、DOM親要素。 タイムリミット=60。# 秒 # 親SVG作成 変数 [画面幅,画面高]=[380,520]。 ツリー画像=[画面幅,画面高]のSVG親要素作成。# svg # 背景 ツリー画像へSVG描画開始。 変数 地平線=画面幅。 ## 空 定義=ツリー画像へSVG定義領域作成。# defs stop=[["0%","#000033"],["100%",アリスブルー色]]。 x1,x2,y1,y2=[0,0,0,1] グラ空=定義へ[x1,y1]から[x2,y2]までstopでSVG線形グラデーション作成。 背景空=[0,0,画面幅,地平線]へSVG四角描画。 背景空の「塗り色」にグラ空をSVGグラデーション設定。 ## 地面 ベージュ色にSVG塗り色設定。 背景地面=[0,地平線,画面幅,画面高さ-地平線]へSVG四角描画。 #ツリー 変数 [頂点,中心]=[65,画面幅/2]。 ## 幹 茶色にSVG塗り色設定。 [中心-20,頂点+200,40,50]へSVG四角描画。 ## 葉 「#009900」にSVG塗り色設定。「#009900」にSVG線色設定。 15にSVG線太さ設定。「丸」にSVG角形状設定。 葉頂点=頂点。 3回: 枝張り=65+30*(回数-1)。葉底辺=葉頂点+枝張り。 [[中心,葉頂点],[中心-枝張り,葉底辺],[中心+枝張り,葉底辺]]のSVG多角形描画。 葉頂点=葉頂点+枝張り/2。 ## 鉢 10にSVG線太さ設定。 鉢=[[中心-50,頂点+250],[中心+50,頂点+250],[中心+40,頂点+310],[中心-40,頂点+310]]のSVG多角形描画。 ### 鉢のパターン レンガ=定義に[40,20]でSVGタイルパターン作成。# pattern レンガへSVG描画開始。 # 鉢の地色 無色にSVG線色設定。「#CC5533」にSVG塗り色設定。1にSVG線太さ設定。 [0,0,40,20]へSVG四角描画。 # レンガの目地 # まとめてフィルターが掛けられるようグループにする 目地=レンガへSVGグループ作成。# g 目地へSVG描画開始。 白色にSVG塗り色設定。 [0,0,40,2]へSVG四角描画。[0,10,40,2]へSVG四角描画。 [0,0,2,10]へSVG四角描画。[20,0,2,10]へSVG四角描画。 [10,10,2,10]へSVG四角描画。[30,10,2,10]へSVG四角描画。 # 目地にかけるフィルター フィルター鉢=定義にSVGフィルター作成。# filter SVG対象フィルター=フィルター鉢。 目地を3にSVG画像粒子拡散。 # パターンを適用 鉢の「塗り色」にレンガをSVGタイルパターン設定。 鉢の「線色」にレンガをSVGタイルパターン設定。 # オーナメント ツリー画像へSVG描画開始。# 描画先がパターンになってるので戻す。 ##星 黄色にSVG塗り色設定。 星=5で[40,40]に[40,18]のSVG星描画。 星を[20,地平線+20]へSVG描画移動。 ##キャンディ 縞=定義に[10,10]でSVGタイルパターン作成。 縞へSVG描画開始。 赤色にSVG塗り色設定。赤色にSVG線色設定。 [0,0,10,10]へSVG四角描画。 白色にSVG線色設定。3にSVG線太さ設定。「四角」にSVG線端形状設定。 [5,0]から[0,5]へSVG線描画。 [10,5]から[5,10]へSVG線描画。 飴=ツリー画像へSVGグループ作成。 飴へSVG描画開始。 無色にSVG塗り色設定。空にSVG線色設定。10にSVG線太さ設定。「丸」にSVG線端形状設定。 [16,16]へ(180をラジアン変換)から0まで8のSVG円弧描画。 [24,16]から[24,50]へSVG線描画。 飴の「線色」に縞をSVGタイルパターン設定。 飴を[120,地平線+25]へSVG描画移動。 飴を30だけSVG描画回転。 ##プレゼント プレゼント=ツリー画像へSVGグループ作成。 プレゼントへSVG描画開始。 黄色にSVG塗り色設定。無色にSVG線色設定。1にSVG線太さ設定。 [0,12,30,24]へ[3,3]でSVG角丸四角描画。 赤色にSVG塗り色設定。 [13,12,4,24]へSVG四角描画。 [0,22,30,4]へSVG四角描画。 [15,12]へSVG連続パス描画開始。 [27,3]まで[23,0]でSVG二次ベジェ曲線描画。 [15,12]まで[30,10]でSVG二次ベジェ曲線描画。 [3,3]まで[0,10]でSVG二次ベジェ曲線描画。 [15,12]まで[7,0]でSVG二次ベジェ曲線描画。 SVG連続パス描画終了。 [15,12]へ[3,2]のSVG楕円描画。 プレゼントを[160,地平線+40]へSVG描画移動。 ##靴下 赤色にSVG塗り色設定。赤色にSVG線色設定。1にSVG線太さ設定。 靴下=ツリー画像へSVGグループ作成。 靴下へSVG描画開始。 [30,5,20,35]へSVG四角描画。 [20,30,20,20]へSVG四角描画。 [20,40]へ10のSVG円描画。 [40,40]へ10のSVG円描画。 白色にSVG塗り色設定。 [28,3,24,12]へ3のSVG角丸四角描画。 靴下を[200,地平線+30]へSVG描画移動。 靴下を10だけSVG描画回転。 ##玉 玉シンボル=定義へSVGシンボルグループ作成。# symbol 空にSVG塗り色設定。 玉シンボルへSVG描画開始。 [50,70]へ50のSVG円描画。 [40,4,20,20]へSVG四角描画。 # フィルター フィルター球=定義にSVGフィルター作成。# filter SVG対象フィルター=フィルター球。 照明=[白色]で玉シンボルへSVG照明効果。 照明のDOM要素ID取得の「surfaceScale」に4をSVG属性設定。 照明に[30,45,30]のSVG点光源設定。 「」に5のSVG画像ボカシ。 「元画像」と「」を「lighten」でSVG画像ブレンド。 「」と「影」を「atop」でSVG画像合成。 # 複製 ツリー画像へSVG描画開始。 玉色=[黄色,赤色,紫色,青色] 玉位置=[[280,30],[320,30],[280,70],[320,70]] 飾玉は空配列。 4回: 番号=回数-1。 x,y=玉位置[番号]。 飾玉[番号]=玉シンボルをSVG参照複製。 飾玉[番号]の「塗り色」に玉色[番号]をSVG属性設定。 [x,地平線+y]へ飾玉[番号]をSVG描画移動。 飾玉[番号]を0.2だけSVG描画拡大。 ##電飾 電飾シンボル=定義へSVGシンボルグループ作成。 電飾シンボルへSVG描画開始。 # 画像ボカシで光ってる感じにする 「rgba(255,255,100,0.5)」にSVG塗り色設定。無色にSVG線色設定。 光=[16,16]へ10のSVG円描画。 フィルター光=定義にSVGフィルター作成。 SVG対象フィルター=フィルター光。 光に4でSVG画像ボカシ。 # 電球 金色にSVG塗り色設定。 [16,16]へ4のSVG円描画。 # 移動 ツリー画像へSVG描画開始。 電飾は空配列。 16回 番号=回数-1。 電飾[番号]=電飾シンボルをSVG参照複製。 [20*回数,地平線+105]へ電飾[回数-1]をSVG描画移動。 ここまで。 # アニメーションは飾り付け完了後に開始させる。 ●電飾アニメーション開始 点滅間隔=3。 16回: 番号=回数-1。 電飾[番号]の「塗り透明度」に0.1をSVG属性設定。 電飾[番号]の「塗り透明度」に「{点滅間隔}s」と「0.1;0.7;1;1;1;0.7;0.1」でSVGアニメーション設定。 それの「begin」に「{番号%点滅間隔}s」をSVG属性設定。 ここまで。 ツリー画像へSVG描画開始。 #ドラッグ&ドロップ ツリー画像のSVGドラッグ許可。 星のSVGドラッグオン。 飴のSVGドラッグオン。 プレゼントのSVGドラッグオン。 靴下のSVGドラッグオン。 4回。飾玉[回数-1]のSVGドラッグオン。。。 16回。電飾[回数-1]のSVGドラッグオン。。。 #タイムリミット ##雪のフィルター # ぼかして雪っぽくするためのフィルター フィルター雪=定義にSVGフィルター作成。 SVG対象フィルター=フィルター雪。 5のSVG画像ボカシ。 ##積雪のアニメーション 白色にSVG塗り色設定。無色にSVG線色設定。 積雪=[-10,地平線-10,画面幅+20,1]へSVG四角描画。 積雪にフィルター雪をSVGフィルター設定。 積雪アニメ=積雪の「height」に「{タイムリミット}s」と「{0};{画面高さ-地平線+20}」でSVGアニメーション設定。 積雪アニメの「repeatCount」に1をSVG属性設定。# 1回だけのアニメーション 積雪アニメの「fill」に「freeze」をSVG属性設定。# アニメーションが終わったらその状態を固定。 ##降雪のアニメーション 背景は背景地面のDOM次要素取得。 雪は空配列。雪数=画面幅/20。 白色にSVG塗り色設定。無色にSVG線色設定。 # シンボル 雪シンボル=定義へSVGシンボルグループ作成。 雪シンボルへSVG描画開始。 [20,20]へ8のSVG円描画。 フィルター雪をSVGフィルター設定。 # 複製 ツリー画像へSVG描画開始。 雪は空配列。 雪数回: 雪[回数-1]=雪シンボルをSVG参照複製。 ツリー画像の背景に雪[回数-1]をDOM子要素挿入。 [0,-40]へ雪[回数-1]をSVG描画移動。 # アニメーション開始のタイミング 降雪開始は0から雪数の配列連番作成。 降雪開始を配列シャッフル。 # アニメーション設定 雪数回: 番号=回数-1。 X=番号*20+8。Y=-20。 揺れ幅=((20の乱数)+10)/2。 揺れ位置=空。 32回。 XX=SIN(((地平線/2)/16*回数)/(地平線/2)*PI*2)*揺れ幅。 揺れ位置は揺れ位置に「{X+XX},{Y};」を追加。 Y=Y+(地平線/2)/16。 ここまで。 落下速度=(5の乱数)+5。 雪[番号]の「translate」に「{落下速度}s」と揺れ位置でSVG変形アニメーション設定。 それの「begin」に「{降雪開始[番号]/2}s」をSVG属性設定。 #メリークリスマスのアニメーション ##グーグルフォント設定 # https://fonts.google.com/specimen/Kaushan+Script?category=Handwriting¬o.script=Latn グーグルフォント指定=ツリー画像にSVG定義領域作成。 グーグルフォント指定に「<style>@import url("https://fonts.googleapis.com/css2?family=Kaushan+Script&display=swap")</style> 」をHTML設定。 ##メリークリスマス 「"Kaushan Script", cursive」にSVG文字フォント設定。 「38」にSVG文字サイズ設定。 「crimson」にSVG塗り色設定。 メリークリスマス=[30,450]へ「Merry Christmas !!」をSVG文字描画。 ##マスク 白色にSVG塗り色設定。無色にSVG線色設定。 文字マスク=[0,地平線,画面幅,125]へSVG四角描画。 文字マスクをSVG最背面。 メリークリスマスをSVG最背面。 ##アニメーション設定 文字アニメ=文字マスクの「x」に「6s」と「0;{画面幅}」でSVGアニメーション設定。 文字アニメの「begin」に「{タイムリミット}s」をSVG属性設定。 文字アニメの「repeatCount」に1をSVG属性設定。# 1回だけのアニメーション 文字アニメの「fill」に「freeze」をSVG属性設定。# アニメーションが終わったらその状態を固定。 ##アニメーション開始 (タイムリミット)秒後には、: メリークリスマスをSVG最前面。 文字マスクをSVG最前面。 8秒後には、終了処理。。。 ●終了処理: ツリー画像のSVGドラッグ許可取消し。 文字マスクをツリー画像からDOM子要素削除。 積雪アニメを積雪からDOM子要素削除。 積雪の「高さ」に画面高さ-地平線+20をSVG属性設定。 「終了! うまく飾れたかな?」と言う。 電飾アニメーション開始。 母艦へDOM親要素設定。 ツリー画像をタッチした時には、: 対象イベントのDOMイベント処理停止。