図形たくさん

You can view and edit template source code, as well as checking its revision history.

Your request for the template deletion was cancelled.

Your request for the template deletion is accepted.

Live preview

Created dateTemplate title
Created dateTitle

No videos using this template has been created yet.

Source code

Please refer to Template API documents when writing code.

function BackgroundDots() { this.name = "図形たくさん"; this.type = PUBLIC | GRAPHIC; // @ui Color() // @title 背景色 this.background = new Color("#2e88d7"); // @ui Slider(0, 100) // @title 背景の透明度 this.backgroundOpacity = 40; // @ui Slider(0, 100) // @title 図形の透明度 this.opacity = 80; // @ui Slider(1, 100) // @title 図形を横に並べる数 this.n = 7; // @ui Check() // @title 四角にする this.rectangle = false; // @ui Check() // @title ビート(ON)/節(OFF) this.beat = false; // @ui Slider(1, 4) // @title 速度[倍] this.speed = 1; // @ui Slider(1, 5) // @title 変形アルゴリズム this.algorithm = 2; // @ui Slider(0, 90) // @title 図形の回転 this.rotation = 0; // @ui Slider(0, 5000) // @title 図形の大きさ this.scale = 100; // @ui Check() // @title 図形を徐々に回転 this.rotateAnimation = false; // @ui Check() // @title 図形を回転する向きを逆転 this.rotateReverse = false; // @ui Check() // @title 図形を虹色にする this.rainbow = false; // @ui Color() // @title 虹色1 this.colors0 = new Color('#E60012'); // @ui Color() // @title 虹色2 this.colors1 = new Color('#F39800'); // @ui Color() // @title 虹色3 this.colors2 = new Color('#FFF100'); // @ui Color() // @title 虹色4 this.colors3 = new Color('#009944'); // @ui Color() // @title 虹色5 this.colors4 = new Color('#0068B7'); // @ui Color() // @title 虹色6 this.colors5 = new Color('#1D2088'); // @ui Color() // @title 虹色7 this.colors6 = new Color('#920783'); // @ui Slider(-5000, 5000) // @title 開始時刻補正 this.headTime = 0; // @ui Slider(-5000, 5000) // @title 終了時刻補正 this.tailTime = 0; // @ui Slider(0, 100) // @title 演出タイミング補正 this.offsetTime = 0; // @ui Slider(0, 360) // @title 図形ごとの演出ズレ [°] this.offsetTheta = 0; this.animate = function(now) { var unit = this.getAssignedUnit(); if (unit.startTime - this.headTime > now || unit.endTime + this.tailTime < now) return; var progress = (now - unit.startTime) / unit.duration , opacity = this.backgroundOpacity/100; if (progress < 0) progress = 1 - (unit.startTime - now) / this.headTime; else if (progress > 1) progress = 1 - (now - unit.endTime) / this.tailTime; else progress = 1; opacity *= progress; unit.graphics .beginFill('rgba(' + this.background.r + ',' + this.background.g + ',' + this.background.b + ',' + opacity + ')') .drawRect(-margin[3], -margin[0], width+margin[1]+margin[3]+1, height+margin[0]+margin[2]+1) .endFill(); var beat = findBeat(now); if (beat !== null) { var beatProgress; if (this.beat) { beatProgress = beat.progress(now); } else { beatProgress = (beat.progress(now) + beat.position - 1) / beat.length; } beatProgress = beatProgress * this.speed + this.offsetTime * 0.01; beatProgress -= Math.floor(beatProgress); var p; switch (this.algorithm) { case 2: p = Math.max(0, 1-circOut(beatProgress)); break; case 3: p = Math.max(0, circOut(beatProgress)); break; case 4: p = Math.max(0, 1-circIn(beatProgress)); break; case 5: p = Math.max(0, circIn(beatProgress)); break; default: p = beatProgress; } var n = this.n, dx = width / n, ym = Math.ceil(n * height / width + 1), i = 0; for (var x = 0; x < n; x ++) { for (var y = 0; y < ym; y ++) { var px = dx * (x + 0.5) , py = dx * (y + 0.5) + (height - ym * dx) / 2 , pi = (p + (this.offsetTheta * (y * n + x) / 360)) % 1 , r = dx * pi * this.scale / 100 , color; if (this.rainbow) { color = this['colors' + (i ++ % 7)]; } else { color = this.background; } opacity = this.opacity/100 * progress; unit.graphics .beginFill('rgba(' + color.r + ',' + color.g + ',' + color.b + ',' + opacity + ')'); if (this.rectangle) { var rot = this.rotation * Math.PI / 180; if (this.rotateAnimation) { rot = rot * pi; } if (this.rotateReverse) { rot = -rot; } unit.graphics .moveTo(px + r * Math.cos(rot + Math.PI*3/4), py + r * Math.sin(rot + Math.PI*3/4)) .lineTo(px + r * Math.cos(rot + Math.PI*5/4), py + r * Math.sin(rot + Math.PI*5/4)) .lineTo(px + r * Math.cos(rot + Math.PI*7/4), py + r * Math.sin(rot + Math.PI*7/4)) .lineTo(px + r * Math.cos(rot + Math.PI*9/4), py + r * Math.sin(rot + Math.PI*9/4)) .closePath(); } else { unit.graphics .drawCircle(px, py, r); } unit.graphics .endFill(); } } } }; }

Copyright (c) 2018 arc@dmz [技術書典6 か77]. This software is released under the MIT License. When you submit your code to this website (TextAlive), it is regarded that you agree to distribute the code under the same license.

The author name comes from the login account if you are logged in. Otherwise, your name will be displayed as 'Anonymous'.

emnor、あいうえおかがきぎくけこさしじすせそぞただちっつてでとどなにねのはべほまみむもゃょよらりるれろわをんアィイエオキケコサジスズッテデトドナノハバピモャヨリルンー丸人付任似供僕入出効取合君四地変夜子学寝尽幅待得思悩想意愛手持描教日時更服未来校欲歩毎気汚深特猫球生疲白真眠着空繰羽育背色薬行街角誕誰足跡踊転迎返迷過道違隣雪飛駆?