p5.jsダイナミックコード描画(3 d回転、2 d回転ベース)を実現
p5.jsダイナミックコード描画(3 d回転、2 d回転ベース)を実現
一.開始前に発生したコンパイラの問題
p 5には独自のグラフィックフレームワークがあり、非常に使いやすいオフラインページ版コンパイラがあり、新しいコンパイラによる悩みを解消しています.しかし、そのweb editorには、意味連想やコード補完がないという欠点もあります.結局vscodeを使うことにした.しかし、非常に軽量級のコンパイラとして、vscodeは自動的に関数パラメータテーブルを補完すると同時に、ユーザーに対応する関数方法がどのようなパラメータを伝達する必要があるかを提示することができるが、rider大工場が作ったビジネスレベルのコードコンパイラのように多くの関数説明を統合することはできない.そのため、公式ドキュメントを頻繁に参照し、コードのスペルミスを常に警戒する必要があります.p 5関連の拡張パッケージを導入するとjsのconsole.log()メソッドは使用できませんが、多くのメソッドを試してもコードをデバッグすることができません.少しつらいので、Bugを調整するときはページ側のp 5コンパイラを使いました.
最初は主に以下の2つの効果を実現しました.
回転を描画する❤
p 5は非常に簡単で使いやすいbox()関数を与え,立方体を生成する:translateは平行移動量であり,posX,posY,posZの位置に指定してboxsizeの大きさの立方体を生成する. translate(posX,posY,posZ);
box(BoxSize);
次に、心の中の四角い配列で座標を計算し、心を一つにまとめる機能を提供する.その後、私たちはこの方法を呼び出してより多くの心を生成します.// ❤
function drawHeart(BoxSize,posX,posY,posZ,r,g,b,)
{
fill(r,g,b);
//
translate(posX,posY,posZ);
box(BoxSize);
//translate
translate(-(10/9)*BoxSize,0,0);
box(BoxSize);
translate(-(10/9)*BoxSize,0,0);
box(BoxSize);
translate(-(10/9)*BoxSize,0,0);
box(BoxSize);
translate(4*(10/9)*BoxSize,0,0);
box(BoxSize);
translate((10/9)*BoxSize,0,0);
box(BoxSize);
translate((10/9)*BoxSize,0,0);
box(BoxSize);
//
translate(0,-(10/9)*BoxSize,0);
box(BoxSize);
translate(-(10/9)*BoxSize,0,0);
box(BoxSize);
translate(-(10/9)*BoxSize,0,0);
box(BoxSize);
translate(-(10/9)*BoxSize,0,0);
box(BoxSize);
translate(-(10/9)*BoxSize,0,0);
box(BoxSize);
translate(-(10/9)*BoxSize,0,0);
box(BoxSize);
translate(-(10/9)*BoxSize,0,0);
box(BoxSize);
// 4
translate((10/9)*BoxSize,-(10/9)*BoxSize,0);
box(BoxSize);
translate((10/9)*BoxSize,0,0);
box(BoxSize);
translate(2*(10/9)*BoxSize,0,0);
box(BoxSize);
translate((10/9)*BoxSize,0,0);
box(BoxSize);
// 5
translate(0,3*(10/9)*BoxSize,0);
box(BoxSize);
translate(-(10/9)*BoxSize,0,0);
box(BoxSize);
translate(-(10/9)*BoxSize,0,0);
box(BoxSize);
translate(-(10/9)*BoxSize,0,0);
box(BoxSize);
translate(-(10/9)*BoxSize,0,0);
box(BoxSize);
// 3
translate((10/9)*BoxSize,(10/9)*BoxSize,0);
box(BoxSize);
translate((10/9)*BoxSize,0,0);
box(BoxSize);
translate((10/9)*BoxSize,0,0);
box(BoxSize);
// 1
translate(-(10/9)*BoxSize,(10/9)*BoxSize,0);
box(BoxSize);
}
今、私たちはそれを回転させます.p 53 dでは、回転を必要とする全体がpush()/pop()関数の間に含まれ、この全体が原点(0,0)ではなくこの物体の重心の周りを回転するようにする必要がある. push();
translate(-width/2+60, -height/2+60);
rotateY(millis() / 1000);
drawHeart(10,0,0,0,249,37,72);
pop();
ここでtranslate()はキャンバス上の中心の位置を指定し、rotate()は回転の速度を指定します.その後,translateにおける座標の増分とrotateにおけるパラメータの分母を変化させて,異なる位置と回転速度を調整する.また、最初のrotate()を除いた他のrotaeでは、まずmillis()に値を加算します.この値は、心と心の間に時間差を生じさせるためです.そうしないと、すべての心が軸回りに回転しているように、参差感がありません.この値を加えて彼らを間違えた.
すべてのコード:function setup(){
createCanvas(430, 430, WEBGL);
}
function draw() {
// put drawing code here
background(255);
// ，
push();
translate(-width/2+60, -height/2+60);
rotateY(millis() / 1000);
drawHeart(10,0,0,0,249,37,72);
pop();
push();
translate(-width/2+160, -height/2+60);
rotateY((millis()+500) / 1000);
drawHeart(10,0,0,0,251,68,105);
pop();
push();
translate(-width/2+260, -height/2+60);
rotateY((millis()+1000) / 1000);
drawHeart(10,0,0,0,249,37,72);
pop();
push();
translate(-width/2+360, -height/2+60);
rotateY((millis()+1500) / 1000);
drawHeart(10,0,0,0,251,68,105);
pop();
push();// ，
translate(-width/2+60, -height/2+160);
rotateY((millis()+500) / 1000);
drawHeart(10,0,0,0,251,68,105);
pop();
push();
translate(-width/2+160, -height/2+160);
rotateY((millis()+1000) / 1000);
drawHeart(10,0,0,0,251,68,105);
pop();
push();
translate(-width/2+260, -height/2+160);
rotateY((millis()+1500) / 1000);
drawHeart(10,0,0,0,249,37,72);
pop();
push();
translate(-width/2+360, -height/2+160);
rotateY((millis()+2000) / 1000);
drawHeart(10,0,0,0,249,37,72);
pop();
push();// ，
translate(-width/2+60, -height/2+260);
rotateY((millis()+1000) / 1000);
drawHeart(10,0,0,0,249,37,72);
pop();
push();
translate(-width/2+160, -height/2+260);
rotateY((millis()+1500) / 1000);
drawHeart(10,0,0,0,251,68,105);
pop();
push();
translate(-width/2+260, -height/2+260);
rotateY((millis()+2000) / 1000);
drawHeart(10,0,0,0,249,37,72);
pop();
push();
translate(-width/2+360, -height/2+260);
rotateY((millis()+2500) / 1000);
drawHeart(10,0,0,0,251,68,105);
pop();
push();// ，
translate(-width/2+60, -height/2+360);
rotateY((millis()+1500) / 1000);
drawHeart(10,0,0,0,251,68,105);
pop();
push();
translate(-width/2+160, -height/2+360);
rotateY((millis()+2000) / 1000);
drawHeart(10,0,0,0,249,37,72);
pop();
push();
translate(-width/2+260, -height/2+360);
rotateY((millis()+2500) / 1000);
drawHeart(10,0,0,0,251,68,105);
pop();
push();
translate(-width/2+360, -height/2+360);
rotateY((millis()+3000) / 1000);
drawHeart(10,0,0,0,249,37,72);
pop();
}
// ❤
function drawHeart(BoxSize,posX,posY,posZ,r,g,b,)
{
fill(r,g,b);
//
translate(posX,posY,posZ);
box(BoxSize);
//translate
translate(-(10/9)*BoxSize,0,0);
box(BoxSize);
translate(-(10/9)*BoxSize,0,0);
box(BoxSize);
translate(-(10/9)*BoxSize,0,0);
box(BoxSize);
translate(4*(10/9)*BoxSize,0,0);
box(BoxSize);
translate((10/9)*BoxSize,0,0);
box(BoxSize);
translate((10/9)*BoxSize,0,0);
box(BoxSize);
//
translate(0,-(10/9)*BoxSize,0);
box(BoxSize);
translate(-(10/9)*BoxSize,0,0);
box(BoxSize);
translate(-(10/9)*BoxSize,0,0);
box(BoxSize);
translate(-(10/9)*BoxSize,0,0);
box(BoxSize);
translate(-(10/9)*BoxSize,0,0);
box(BoxSize);
translate(-(10/9)*BoxSize,0,0);
box(BoxSize);
translate(-(10/9)*BoxSize,0,0);
box(BoxSize);
// 4
translate((10/9)*BoxSize,-(10/9)*BoxSize,0);
box(BoxSize);
translate((10/9)*BoxSize,0,0);
box(BoxSize);
translate(2*(10/9)*BoxSize,0,0);
box(BoxSize);
translate((10/9)*BoxSize,0,0);
box(BoxSize);
// 5
translate(0,3*(10/9)*BoxSize,0);
box(BoxSize);
translate(-(10/9)*BoxSize,0,0);
box(BoxSize);
translate(-(10/9)*BoxSize,0,0);
box(BoxSize);
translate(-(10/9)*BoxSize,0,0);
box(BoxSize);
translate(-(10/9)*BoxSize,0,0);
box(BoxSize);
// 3
translate((10/9)*BoxSize,(10/9)*BoxSize,0);
box(BoxSize);
translate((10/9)*BoxSize,0,0);
box(BoxSize);
translate((10/9)*BoxSize,0,0);
box(BoxSize);
// 1
translate(-(10/9)*BoxSize,(10/9)*BoxSize,0);
box(BoxSize);
}
実行結果:
2 D回転(頂点の周りを回転してしばらく滞在)
最初は簡単に見れば見るほど複雑になる図です.まず、すべての扇形は異なる速度で中心の周りを回転する必要がある.次に、各グラフィックの開始位置を計算するには、再び回転するたびに一定の時間停止する必要があります.最後に、よく見ると扇形が回転しているものもあれば、回転して止まっているものもあれば、時計回りに1回回転した後、すぐに反時計回りに回転して往復しているものもあります.各セクタの回転特性は非常に同じではなく,非常に大きな困難をもたらした.この簡単そうな図は前後5時間以上書いてあります.
1.4種類の回転関数は、各回転方法を関数にカプセル化し、図形の中心、色、回転の時間を制御する. function drawCircle(posX, posY, r, g, b, q) {
noStroke();
push();
fill(r, g, b);
translate(posX, posY);
rotate(q * HALF_PI);
arc(0, 0, 100, 100, 0, HALF_PI, PIE);
arc(0, 0, 100, 100, PI, PI + HALF_PI, PIE);
pop();
}
function drawCircle2(posX, posY, r, g, b, q) {
noStroke();
push();
fill(r, g, b);
translate(posX, posY);
rotate(q * HALF_PI);
arc(0, 0, 100, 100, HALF_PI, HALF_PI + HALF_PI, PIE);
arc(0, 0, 100, 100, PI + HALF_PI, TWO_PI, PIE);
pop();
}
function antiClockwise1(posX, posY, r, g, b, q) {
noStroke();
push();
fill(r, g, b);
translate(posX, posY);
rotate(-q * HALF_PI);
arc(0, 0, 100, 100, HALF_PI, HALF_PI + HALF_PI, PIE);
arc(0, 0, 100, 100, PI + HALF_PI, TWO_PI, PIE);
pop();
}
function antiClockwise2(posX, posY, r, g, b, q) {
noStroke();
push();
fill(r, g, b);
translate(posX, posY);
rotate(-q * HALF_PI - HALF_PI);
arc(0, 0, 100, 100, HALF_PI, HALF_PI + HALF_PI, PIE);
arc(0, 0, 100, 100, PI + HALF_PI, TWO_PI, PIE);
pop();
}
2.qでストップ時間を計算する function ease(q) {
return q * q * 3 - q * q * q * 2;
}
3.時間回転に応じて、tを設定してループを行うパラメータ.frameCount(描画されたフレーム数を表す)を1として演算し、得られた数に基づいて各セクタが一定期間にわたって必要とされる回転を判断する.その後、tをパーティション化し、時間をブロック化し、各時間において回転を必要とするセクタに運動特性を付与する. function draw() {
noStroke();
background(0);
t = (0.01 * frameCount) % 1;
push();
//
if (t < .25) {
// 1
}
else if(t<0.5){
// 2
}
else if(...)
....
4.停止時間については、map()関数を使用してマッピングします.map(t,a 1,a 2,b 1,b 2)は、tを(a 1,a 2)の範囲から(b 1,b 2)にマッピングすることを表す.mapマッピング規則は、時間パーティションに基づいて異なる選択を行う.例: drawCircle2(100,100,0,163,150,ease(map(t, 0, .25, 0, 1)));
すなわち、(100100)の位置にrgb(0153150)の色を描いた蝶形を表す.
完全なコードは次のとおりです.function setup() {
createCanvas(400, 400);
//background(0);
}
function draw() {
noStroke();
background(0);
t = (0.01 * frameCount) % 1;
push();
//
if (t < .25) {
//
drawCircle2(100,100,0,163,150,ease(map(t, 0, .25, 0, 1)));
drawCircle2(300,100,97,46,141,ease(map(t, 0, .25, 0, 1)));
drawCircle2(100,300,97,46,141,ease(map(t, 0, .25, 0, 1)));
drawCircle2(300,300,234,34,94,ease(map(t, 0, .25, 0, 1)));
//
antiClockwise1(200, 200, 97,46,141, ease(map(t, 0, .25, 0, 1)));
//
antiClockwise1(0, 0, 247,182,44, ease(map(t, 0, .25, 0, 1)));
antiClockwise1(0, 200,0,163,150, ease(map(t, 0, .25, 0, 1)));
antiClockwise1(0, 400,97,46,141, ease(map(t, 0, .25, 0, 1)));
antiClockwise1(200, 0,0,163,150, ease(map(t, 0, .25, 0, 1)));
antiClockwise1(200, 400,234,34,94, ease(map(t, 0, .25, 0, 1)));
antiClockwise1(400, 0,97,46,141, ease(map(t, 0, .25, 0, 1)));
antiClockwise1(400, 200,234,34,94, ease(map(t, 0, .25, 0, 1)));
antiClockwise1(400, 400,247,182,44, ease(map(t, 0, .25, 0, 1)));
//
antiClockwise2(100, 0, 129,197,64, ease(map(t, 0, .25, 0, 1)));
antiClockwise2(100, 200, 22,116,188, ease(map(t, 0, .25, 0, 1)));
antiClockwise2(100, 400, 194,34,134, ease(map(t, 0, .25, 0, 1)));
antiClockwise2(300, 0, 22,116,188, ease(map(t, 0, .25, 0, 1)));
antiClockwise2(300, 200, 194,34,134, ease(map(t, 0, .25, 0, 1)));
antiClockwise2(300, 400, 237,91,53, ease(map(t, 0, .25, 0, 1)));
//
drawCircle(0, 100, 129,197,64, ease(map(t, 0, .25, 0, 1)))
drawCircle(0, 300, 22,116,188, ease(map(t, 0, .25, 0, 1)))
drawCircle(200, 100, 22,116,188, ease(map(t, 0, .25, 0, 1)))
drawCircle(200, 300, 194,34,134, ease(map(t, 0, .25, 0, 1)))
drawCircle(400, 100, 194,34,134, ease(map(t, 0, .25, 0, 1)))
drawCircle(400, 300, 237,91,53, ease(map(t, 0, .25, 0, 1)))
}
else if (t < .5) {
//
drawCircle(100, 100, 0,163,150, ease(map(t, 0.25, .5, 0, 1)))
drawCircle(100, 300, 97,46,141, ease(map(t, 0.25, .5, 0, 1)))
drawCircle(300, 100, 97,46,141, ease(map(t, 0.25, .5, 0, 1)))
drawCircle(300, 300, 234,34,94, ease(map(t, 0.25, .5, 0, 1)))
//
antiClockwise2(200, 0, 0,163,150, 0);
antiClockwise2(200, 200, 97,46,141, 0);
antiClockwise2(200, 400, 234,34,94, 0);
//
antiClockwise2(0, 0, 247,182,44, ease(map(t, .25, .5, 0, 1)));
antiClockwise2(0, 200, 0,163,150, ease(map(t, .25, .5, 0, 1)));
antiClockwise2(0, 400, 97,46,141, ease(map(t, .25, .5, 0, 1)));
antiClockwise2(400, 0, 97,46,141, ease(map(t, .25, .5, 0, 1)));
antiClockwise2(400, 200, 234,34,94, ease(map(t, .25, .5, 0, 1)));
antiClockwise2(400, 400, 247,182,44, ease(map(t, .25, .5, 0, 1)));
//
antiClockwise1(100, 0, 129,197,64, 0);
antiClockwise1(100, 200, 22,116,188, 0);
antiClockwise1(100, 400, 194,34,134, 0);
antiClockwise1(300, 0, 22,116,188, 0);
antiClockwise1(300, 200, 194,34,134, 0);
antiClockwise1(300, 400, 237,91,53, 0);
//
drawCircle2(0, 100, 129,197,64, 0);
drawCircle2(0, 300, 22,116,188, 0);
drawCircle2(200, 100, 22,116,188, 0);
drawCircle2(200, 300, 194,34,134, 0);
drawCircle2(400, 100, 194,34,134, 0);
drawCircle2(400, 300, 237,91,53, 0);
}
else if (t < .75) {
//
drawCircle2(100, 100, 0,163,150, ease(map(t, 0.5, .75, 0, 1)));
drawCircle2(100, 300, 97,46,141, ease(map(t, 0.5, .75, 0, 1)));
drawCircle2(300, 100, 97,46,141, ease(map(t, 0.5, .75, 0, 1)));
drawCircle2(300, 300, 234,34,94, ease(map(t, 0.5, .75, 0, 1)));
//
drawCircle(200, 0, 0,163,150, ease(map(t, 0.5, .75, 0, 1)));
drawCircle(200, 200, 97,46,141, ease(map(t, 0.5, .75, 0, 1)));
drawCircle(200, 400, 234,34,94, ease(map(t, 0.5, .75, 0, 1)));
//
antiClockwise1(0, 0, 247,182,44, ease(map(t, 0.5, .75, 0, 1)));
antiClockwise1(0, 200, 0,163,150, ease(map(t, 0.5, .75, 0, 1)));
antiClockwise1(0, 400, 97,46,141, ease(map(t, 0.5, .75, 0, 1)));
antiClockwise1(400, 0, 97,46,141, ease(map(t, 0.5, .75, 0, 1)));
antiClockwise1(400, 200, 234,34,94, ease(map(t, 0.5, .75, 0, 1)));
antiClockwise1(400, 400, 247,182,44, ease(map(t, 0.5, .75, 0, 1)));
//
antiClockwise1(100, 0, 129,197,64,ease(map(t, 0.5, .75, 0, 1)));
antiClockwise1(100, 200,22,116,188,ease(map(t, 0.5, .75, 0, 1)));
antiClockwise1(100, 400,194,34,134,ease(map(t, 0.5, .75, 0, 1)));
antiClockwise1(300, 0,22,116,188,ease(map(t, 0.5, .75, 0, 1)));
antiClockwise1(300, 200,194,34,134,ease(map(t, 0.5, .75, 0, 1)));
antiClockwise1(300, 400,237,91,53,ease(map(t, 0.5, .75, 0, 1)));
//
drawCircle2(0, 100, 129,197,64, ease(map(t, 0.5, .75, 0, 1)))
drawCircle2(0, 300, 22,116,188, ease(map(t, 0.5, .75, 0, 1)))
drawCircle2(200, 100, 22,116,188, ease(map(t, 0.5, .75, 0, 1)))
drawCircle2(200, 300, 194,34,134, ease(map(t, 0.5, .75, 0, 1)))
drawCircle2(400, 100, 194,34,134, ease(map(t, 0.5, .75, 0, 1)))
drawCircle2(400, 300, 237,91,53, ease(map(t, 0.5, .75, 0, 1)))
}
else if (t < 1)
{
//
drawCircle(100, 100, 0,163,150, ease(map(t, .75, 1, 0, 1)));
drawCircle(100, 300, 97,46,141, ease(map(t, .75, 1, 0, 1)));
drawCircle(300, 100, 97,46,141, ease(map(t, .75, 1, 0, 1)));
drawCircle(300, 300, 234,34,94, ease(map(t, .75, 1, 0, 1)));
//
drawCircle2(200, 0, 0,163,150, 0);
drawCircle2(200, 200, 97,46,141, 0);
drawCircle2(200, 400, 234,34,94, 0);
//
antiClockwise2(0, 0, 247,182,44, ease(map(t, 0.75, 1, 0, 1)));
antiClockwise2(0, 200, 0,163,150, ease(map(t, 0.75, 1, 0, 1)));
antiClockwise2(0, 400,97,46,141, ease(map(t, 0.75, 1, 0, 1)));
antiClockwise2(400, 0,97,46,141, ease(map(t, 0.75, 1, 0, 1)));
antiClockwise2(400, 200,234,34,94, ease(map(t, 0.75, 1, 0, 1)));
antiClockwise2(400, 400,247,182,44, ease(map(t, 0.75, 1, 0, 1)));
//
antiClockwise2(100,0, 129,197,64,0);
antiClockwise2(100,200, 22,116,188,0);
antiClockwise2(100,400, 194,34,134,0);
antiClockwise2(300,0, 22,116,188,0);
antiClockwise2(300,200, 194,34,134,0);
antiClockwise2(300,400, 237,91,53,0);
//
drawCircle(0, 100,129,197,64, 0);
drawCircle(0, 300,22,116,188, 0);
drawCircle(200,100,22,116,188, 0);
drawCircle(200,300,194,34,134, 0);
drawCircle(400,100,194,34,134, 0);
drawCircle(400,300,237,91,53, 0);
}
pop();
}
function ease(q) {
return q * q * 3 - q * q * q * 2;
}
function drawCircle(posX, posY, r, g, b, q) {
noStroke();
push();
fill(r, g, b);
translate(posX, posY);
rotate(q * HALF_PI);
arc(0, 0, 100, 100, 0, HALF_PI, PIE);
arc(0, 0, 100, 100, PI, PI + HALF_PI, PIE);
pop();
}
function drawCircle2(posX, posY, r, g, b, q) {
noStroke();
push();
fill(r, g, b);
translate(posX, posY);
rotate(q * HALF_PI);
arc(0, 0, 100, 100, HALF_PI, HALF_PI + HALF_PI, PIE);
arc(0, 0, 100, 100, PI + HALF_PI, TWO_PI, PIE);
pop();
}
function antiClockwise1(posX, posY, r, g, b, q) {
noStroke();
push();
fill(r, g, b);
translate(posX, posY);
rotate(-q * HALF_PI);
arc(0, 0, 100, 100, HALF_PI, HALF_PI + HALF_PI, PIE);
arc(0, 0, 100, 100, PI + HALF_PI, TWO_PI, PIE);
pop();
}
function antiClockwise2(posX, posY, r, g, b, q) {
noStroke();
push();
fill(r, g, b);
translate(posX, posY);
rotate(-q * HALF_PI - HALF_PI);
arc(0, 0, 100, 100, HALF_PI, HALF_PI + HALF_PI, PIE);
arc(0, 0, 100, 100, PI + HALF_PI, TWO_PI, PIE);
pop();
}
この例の実現にはいくつかの問題があり、いくつかの蝶形の回転はまだ少し間違っているが、今日これを書くのは本当に頭がくらくらして、やりたくない.効果図:
2番目のグラフィックを拡張すると、他のグラフィックに拡張しやすくなります.どの蝶形の回転方向(または回転速度、停止時間)を修正しても、異なる図を生み出すことができます.これはとても面白いです.例えば、コードも貼り付けられます.function setup() {
createCanvas(400, 400);
//background(0);
}
function draw() {
noStroke();
background(0);
t = (0.018*frameCount)%1;
push();
if(t<0.5)
{
//
drawCircleReverse(0,0,246,182,48,ease(map(t,0,0.5,0,1)));
drawCircleReverse(100,0,129,197,64,ease(map(t,0,0.5,0,1)));
drawCircle(200,0,1,163,150,ease(map(t,0,0.5,0,1)));
drawCircleReverse(300,0,22,116,188,ease(map(t,0,0.5,0,1)));
drawCircleReverse(400,0,97,46,141,ease(map(t,0,0.5,0,1)));
//
drawCircle(0, 100, 129,197,64,ease(map(t,0,.5,0,1)));
drawCircle(100, 100, 1, 163, 150,ease(map(t,0,.5,0,1)));
drawCircle2(200,100,22, 116, 188,ease(map(t,0,.5,0,1)));
drawCircle(300, 100, 97, 46, 141,ease(map(t,0,.5,0,1)));
drawCircle(400, 100, 194,34,134,ease(map(t,0,.5,0,1)));
//
drawCircleReverse(0, 200, 1, 163, 150,ease(map(t,0,.5,0,1)));
drawCircleReverse(100, 200,22,116,188,ease(map(t,0,.5,0,1)));
drawCircle2(200, 200,97, 46, 141,ease(map(t,0,0.5,0,1)));
drawCircle2Reverse(300, 200,194,34,134,ease(map(t,0,0.5,0,1)));
drawCircleReverse(400, 200,234,34,94,ease(map(t,0,0.5,0,1)));
//
drawCircle(0,300,22, 116, 188,ease(map(t,0,.5,0,1)));
drawCircle(100, 300, 97, 46, 141,ease(map(t,0,0.5,0,1)));
drawCircle2(200, 300, 194,34,134,ease(map(t,0,0.5,0,1)));
drawCircle(300, 300,234,34,94,ease(map(t,0,0.5,0,1)));
drawCircle2(400, 300,237,91,53,ease(map(t,0,0.5,0,1)));
//
drawCircle2Reverse(0, 400,97, 46, 141,ease(map(t,0,0.5,0,1)));
drawCircle2Reverse(100,400,194,34,134,ease(map(t,0,0.5,0,1)));
drawCircle(200,400,234,34,94,ease(map(t,0,0.5,0,1)));
drawCircle2Reverse(300,400,237,91,53,ease(map(t,0,0.5,0,1)));
drawCircleReverse(400,400,246,182,48,ease(map(t,0,0.5,0,1)));
}
else if(t>0.5)
{
//
drawCircle2Reverse(0,0,246,182,48,ease(map(t,0.5,1,0,1)));
drawCircle2Reverse(100,0,129,197,64,ease(map(t,0.5,1,0,1)));
drawCircle2Reverse(200,0,1,163,150,ease(map(t,0.5,1,0,1)));
drawCircle2Reverse(300,0,22,116,188,ease(map(t,0.5,1,0,1)));
drawCircle2Reverse(400,0,97,46,141,ease(map(t,0.5,1,0,1)));
//
drawCircle2(0, 100, 129,197,64,ease(map(t,0.5,1,0,1)));
drawCircle2(100, 100, 1, 163, 150,ease(map(t,.5,1,0,1)));
drawCircle(200,100, 22,116,188,ease(map(t,0.5,1,0,1)));
drawCircle2(300, 100, 97, 46, 141,ease(map(t,0.5,1,0,1)));
drawCircle2(400, 100, 194,34,134,ease(map(t,0.5,1,0,1)));
//
drawCircle2Reverse(0, 200, 1, 163, 150,ease(map(t,0.5,1,0,1)));
drawCircle2Reverse(100, 200,22,116,188,ease(map(t,0.5,1,0,1)));
drawCircleReverse(200, 200,97, 46, 141,ease(map(t,0.5,1,0,1)));
drawCircleReverse(300, 200,194,34,134,ease(map(t,0.5,1,0,1)));
drawCircle2Reverse(400, 200,234,34,94,ease(map(t,0.5,1,0,1)));
//
drawCircle2(0,300,22, 116, 188,ease(map(t,0.5,1,0,1)));
drawCircle2(100, 300, 97, 46, 141,ease(map(t,.5,1,0,1)));
drawCircle(200, 300, 194,34,134,ease(map(t,0.5,1,0,1)));
drawCircle2(300, 300,234,34,94,ease(map(t,.5,1,0,1)));
drawCircle(400, 300,237,91,53,ease(map(t,0.5,1,0,1)));
//
drawCircleReverse(0, 400,97, 46, 141,ease(map(t,0.5,1,0,1)));
drawCircleReverse(100,400,194,34,134,ease(map(t,0.5,1,0,1)));
drawCircle2Reverse(200,400,234,34,94,ease(map(t,0.5,1,0,1)));
drawCircleReverse(300,400,237,91,53,ease(map(t,0.5,1,0,1)));
drawCircle2Reverse(400,400,246,182,48,ease(map(t,0.5,1,0,1)));
}
else{
//pauseCircle(0,0,246,182,48,ease(map(t,0.5,1,0,1)));
pauseCircle(200,100,22,116,188,ease(map(t,0,.5,0,1)));
}
pop();
}
function ease(q)
{
return q*q*3-q*q*q*2;
}
function drawCircle(posX, posY, r, g, b,q) {
noStroke();
push();
fill(r, g, b);
translate(posX,posY);
rotate(q*HALF_PI);
arc(0, 0 , 100, 100, 0, HALF_PI, PIE);
arc(0, 0 , 100, 100, PI, PI + HALF_PI, PIE);
pop();
}
function drawCircle2(posX, posY, r, g, b, q) {
noStroke();
push();
fill(r, g, b);
translate(posX,posY);
rotate(q*HALF_PI);
arc(0, 0 , 100, 100, HALF_PI, HALF_PI+HALF_PI, PIE);
arc(0, 0 , 100, 100, PI+HALF_PI, TWO_PI, PIE);
pop();
}
function drawCircleReverse(posX, posY, r, g, b, q){
noStroke();
push();
fill(r, g, b);
translate(posX,posY);
rotate(-q*HALF_PI);
arc(0, 0 , 100, 100, 0, HALF_PI, PIE);
arc(0, 0 , 100, 100, PI, PI + HALF_PI, PIE);
pop();
}
function drawCircle2Reverse(posX, posY, r, g, b, q) {
noStroke();
push();
fill(r, g, b);
translate(posX,posY);
rotate(-q*HALF_PI);
arc(0, 0 , 100, 100, HALF_PI, HALF_PI+HALF_PI, PIE);
arc(0, 0 , 100, 100, PI+HALF_PI, TWO_PI, PIE);
pop();
}
function pauseCircle(posX, posY, r, g, b,q) {
noStroke();
push();
fill(r, g, b);
translate(posX,posY);
//rotate(0);
arc(0, 0 , 100, 100, 0, HALF_PI, PIE);
arc(0, 0 , 100, 100, PI, PI + HALF_PI, PIE);
pop();
}
書かないで書かない.疲れた.
translate(posX,posY,posZ);
box(BoxSize);
// ❤
function drawHeart(BoxSize,posX,posY,posZ,r,g,b,)
{
fill(r,g,b);
//
translate(posX,posY,posZ);
box(BoxSize);
//translate
translate(-(10/9)*BoxSize,0,0);
box(BoxSize);
translate(-(10/9)*BoxSize,0,0);
box(BoxSize);
translate(-(10/9)*BoxSize,0,0);
box(BoxSize);
translate(4*(10/9)*BoxSize,0,0);
box(BoxSize);
translate((10/9)*BoxSize,0,0);
box(BoxSize);
translate((10/9)*BoxSize,0,0);
box(BoxSize);
//
translate(0,-(10/9)*BoxSize,0);
box(BoxSize);
translate(-(10/9)*BoxSize,0,0);
box(BoxSize);
translate(-(10/9)*BoxSize,0,0);
box(BoxSize);
translate(-(10/9)*BoxSize,0,0);
box(BoxSize);
translate(-(10/9)*BoxSize,0,0);
box(BoxSize);
translate(-(10/9)*BoxSize,0,0);
box(BoxSize);
translate(-(10/9)*BoxSize,0,0);
box(BoxSize);
// 4
translate((10/9)*BoxSize,-(10/9)*BoxSize,0);
box(BoxSize);
translate((10/9)*BoxSize,0,0);
box(BoxSize);
translate(2*(10/9)*BoxSize,0,0);
box(BoxSize);
translate((10/9)*BoxSize,0,0);
box(BoxSize);
// 5
translate(0,3*(10/9)*BoxSize,0);
box(BoxSize);
translate(-(10/9)*BoxSize,0,0);
box(BoxSize);
translate(-(10/9)*BoxSize,0,0);
box(BoxSize);
translate(-(10/9)*BoxSize,0,0);
box(BoxSize);
translate(-(10/9)*BoxSize,0,0);
box(BoxSize);
// 3
translate((10/9)*BoxSize,(10/9)*BoxSize,0);
box(BoxSize);
translate((10/9)*BoxSize,0,0);
box(BoxSize);
translate((10/9)*BoxSize,0,0);
box(BoxSize);
// 1
translate(-(10/9)*BoxSize,(10/9)*BoxSize,0);
box(BoxSize);
}
push();
translate(-width/2+60, -height/2+60);
rotateY(millis() / 1000);
drawHeart(10,0,0,0,249,37,72);
pop();
function setup(){
createCanvas(430, 430, WEBGL);
}
function draw() {
// put drawing code here
background(255);
// ，
push();
translate(-width/2+60, -height/2+60);
rotateY(millis() / 1000);
drawHeart(10,0,0,0,249,37,72);
pop();
push();
translate(-width/2+160, -height/2+60);
rotateY((millis()+500) / 1000);
drawHeart(10,0,0,0,251,68,105);
pop();
push();
translate(-width/2+260, -height/2+60);
rotateY((millis()+1000) / 1000);
drawHeart(10,0,0,0,249,37,72);
pop();
push();
translate(-width/2+360, -height/2+60);
rotateY((millis()+1500) / 1000);
drawHeart(10,0,0,0,251,68,105);
pop();
push();// ，
translate(-width/2+60, -height/2+160);
rotateY((millis()+500) / 1000);
drawHeart(10,0,0,0,251,68,105);
pop();
push();
translate(-width/2+160, -height/2+160);
rotateY((millis()+1000) / 1000);
drawHeart(10,0,0,0,251,68,105);
pop();
push();
translate(-width/2+260, -height/2+160);
rotateY((millis()+1500) / 1000);
drawHeart(10,0,0,0,249,37,72);
pop();
push();
translate(-width/2+360, -height/2+160);
rotateY((millis()+2000) / 1000);
drawHeart(10,0,0,0,249,37,72);
pop();
push();// ，
translate(-width/2+60, -height/2+260);
rotateY((millis()+1000) / 1000);
drawHeart(10,0,0,0,249,37,72);
pop();
push();
translate(-width/2+160, -height/2+260);
rotateY((millis()+1500) / 1000);
drawHeart(10,0,0,0,251,68,105);
pop();
push();
translate(-width/2+260, -height/2+260);
rotateY((millis()+2000) / 1000);
drawHeart(10,0,0,0,249,37,72);
pop();
push();
translate(-width/2+360, -height/2+260);
rotateY((millis()+2500) / 1000);
drawHeart(10,0,0,0,251,68,105);
pop();
push();// ，
translate(-width/2+60, -height/2+360);
rotateY((millis()+1500) / 1000);
drawHeart(10,0,0,0,251,68,105);
pop();
push();
translate(-width/2+160, -height/2+360);
rotateY((millis()+2000) / 1000);
drawHeart(10,0,0,0,249,37,72);
pop();
push();
translate(-width/2+260, -height/2+360);
rotateY((millis()+2500) / 1000);
drawHeart(10,0,0,0,251,68,105);
pop();
push();
translate(-width/2+360, -height/2+360);
rotateY((millis()+3000) / 1000);
drawHeart(10,0,0,0,249,37,72);
pop();
}
// ❤
function drawHeart(BoxSize,posX,posY,posZ,r,g,b,)
{
fill(r,g,b);
//
translate(posX,posY,posZ);
box(BoxSize);
//translate
translate(-(10/9)*BoxSize,0,0);
box(BoxSize);
translate(-(10/9)*BoxSize,0,0);
box(BoxSize);
translate(-(10/9)*BoxSize,0,0);
box(BoxSize);
translate(4*(10/9)*BoxSize,0,0);
box(BoxSize);
translate((10/9)*BoxSize,0,0);
box(BoxSize);
translate((10/9)*BoxSize,0,0);
box(BoxSize);
//
translate(0,-(10/9)*BoxSize,0);
box(BoxSize);
translate(-(10/9)*BoxSize,0,0);
box(BoxSize);
translate(-(10/9)*BoxSize,0,0);
box(BoxSize);
translate(-(10/9)*BoxSize,0,0);
box(BoxSize);
translate(-(10/9)*BoxSize,0,0);
box(BoxSize);
translate(-(10/9)*BoxSize,0,0);
box(BoxSize);
translate(-(10/9)*BoxSize,0,0);
box(BoxSize);
// 4
translate((10/9)*BoxSize,-(10/9)*BoxSize,0);
box(BoxSize);
translate((10/9)*BoxSize,0,0);
box(BoxSize);
translate(2*(10/9)*BoxSize,0,0);
box(BoxSize);
translate((10/9)*BoxSize,0,0);
box(BoxSize);
// 5
translate(0,3*(10/9)*BoxSize,0);
box(BoxSize);
translate(-(10/9)*BoxSize,0,0);
box(BoxSize);
translate(-(10/9)*BoxSize,0,0);
box(BoxSize);
translate(-(10/9)*BoxSize,0,0);
box(BoxSize);
translate(-(10/9)*BoxSize,0,0);
box(BoxSize);
// 3
translate((10/9)*BoxSize,(10/9)*BoxSize,0);
box(BoxSize);
translate((10/9)*BoxSize,0,0);
box(BoxSize);
translate((10/9)*BoxSize,0,0);
box(BoxSize);
// 1
translate(-(10/9)*BoxSize,(10/9)*BoxSize,0);
box(BoxSize);
}
function drawCircle(posX, posY, r, g, b, q) {
noStroke();
push();
fill(r, g, b);
translate(posX, posY);
rotate(q * HALF_PI);
arc(0, 0, 100, 100, 0, HALF_PI, PIE);
arc(0, 0, 100, 100, PI, PI + HALF_PI, PIE);
pop();
}
function drawCircle2(posX, posY, r, g, b, q) {
noStroke();
push();
fill(r, g, b);
translate(posX, posY);
rotate(q * HALF_PI);
arc(0, 0, 100, 100, HALF_PI, HALF_PI + HALF_PI, PIE);
arc(0, 0, 100, 100, PI + HALF_PI, TWO_PI, PIE);
pop();
}
function antiClockwise1(posX, posY, r, g, b, q) {
noStroke();
push();
fill(r, g, b);
translate(posX, posY);
rotate(-q * HALF_PI);
arc(0, 0, 100, 100, HALF_PI, HALF_PI + HALF_PI, PIE);
arc(0, 0, 100, 100, PI + HALF_PI, TWO_PI, PIE);
pop();
}
function antiClockwise2(posX, posY, r, g, b, q) {
noStroke();
push();
fill(r, g, b);
translate(posX, posY);
rotate(-q * HALF_PI - HALF_PI);
arc(0, 0, 100, 100, HALF_PI, HALF_PI + HALF_PI, PIE);
arc(0, 0, 100, 100, PI + HALF_PI, TWO_PI, PIE);
pop();
}
function ease(q) {
return q * q * 3 - q * q * q * 2;
}
function draw() {
noStroke();
background(0);
t = (0.01 * frameCount) % 1;
push();
//
if (t < .25) {
// 1
}
else if(t<0.5){
// 2
}
else if(...)
....
drawCircle2(100,100,0,163,150,ease(map(t, 0, .25, 0, 1)));
function setup() {
createCanvas(400, 400);
//background(0);
}
function draw() {
noStroke();
background(0);
t = (0.01 * frameCount) % 1;
push();
//
if (t < .25) {
//
drawCircle2(100,100,0,163,150,ease(map(t, 0, .25, 0, 1)));
drawCircle2(300,100,97,46,141,ease(map(t, 0, .25, 0, 1)));
drawCircle2(100,300,97,46,141,ease(map(t, 0, .25, 0, 1)));
drawCircle2(300,300,234,34,94,ease(map(t, 0, .25, 0, 1)));
//
antiClockwise1(200, 200, 97,46,141, ease(map(t, 0, .25, 0, 1)));
//
antiClockwise1(0, 0, 247,182,44, ease(map(t, 0, .25, 0, 1)));
antiClockwise1(0, 200,0,163,150, ease(map(t, 0, .25, 0, 1)));
antiClockwise1(0, 400,97,46,141, ease(map(t, 0, .25, 0, 1)));
antiClockwise1(200, 0,0,163,150, ease(map(t, 0, .25, 0, 1)));
antiClockwise1(200, 400,234,34,94, ease(map(t, 0, .25, 0, 1)));
antiClockwise1(400, 0,97,46,141, ease(map(t, 0, .25, 0, 1)));
antiClockwise1(400, 200,234,34,94, ease(map(t, 0, .25, 0, 1)));
antiClockwise1(400, 400,247,182,44, ease(map(t, 0, .25, 0, 1)));
//
antiClockwise2(100, 0, 129,197,64, ease(map(t, 0, .25, 0, 1)));
antiClockwise2(100, 200, 22,116,188, ease(map(t, 0, .25, 0, 1)));
antiClockwise2(100, 400, 194,34,134, ease(map(t, 0, .25, 0, 1)));
antiClockwise2(300, 0, 22,116,188, ease(map(t, 0, .25, 0, 1)));
antiClockwise2(300, 200, 194,34,134, ease(map(t, 0, .25, 0, 1)));
antiClockwise2(300, 400, 237,91,53, ease(map(t, 0, .25, 0, 1)));
//
drawCircle(0, 100, 129,197,64, ease(map(t, 0, .25, 0, 1)))
drawCircle(0, 300, 22,116,188, ease(map(t, 0, .25, 0, 1)))
drawCircle(200, 100, 22,116,188, ease(map(t, 0, .25, 0, 1)))
drawCircle(200, 300, 194,34,134, ease(map(t, 0, .25, 0, 1)))
drawCircle(400, 100, 194,34,134, ease(map(t, 0, .25, 0, 1)))
drawCircle(400, 300, 237,91,53, ease(map(t, 0, .25, 0, 1)))
}
else if (t < .5) {
//
drawCircle(100, 100, 0,163,150, ease(map(t, 0.25, .5, 0, 1)))
drawCircle(100, 300, 97,46,141, ease(map(t, 0.25, .5, 0, 1)))
drawCircle(300, 100, 97,46,141, ease(map(t, 0.25, .5, 0, 1)))
drawCircle(300, 300, 234,34,94, ease(map(t, 0.25, .5, 0, 1)))
//
antiClockwise2(200, 0, 0,163,150, 0);
antiClockwise2(200, 200, 97,46,141, 0);
antiClockwise2(200, 400, 234,34,94, 0);
//
antiClockwise2(0, 0, 247,182,44, ease(map(t, .25, .5, 0, 1)));
antiClockwise2(0, 200, 0,163,150, ease(map(t, .25, .5, 0, 1)));
antiClockwise2(0, 400, 97,46,141, ease(map(t, .25, .5, 0, 1)));
antiClockwise2(400, 0, 97,46,141, ease(map(t, .25, .5, 0, 1)));
antiClockwise2(400, 200, 234,34,94, ease(map(t, .25, .5, 0, 1)));
antiClockwise2(400, 400, 247,182,44, ease(map(t, .25, .5, 0, 1)));
//
antiClockwise1(100, 0, 129,197,64, 0);
antiClockwise1(100, 200, 22,116,188, 0);
antiClockwise1(100, 400, 194,34,134, 0);
antiClockwise1(300, 0, 22,116,188, 0);
antiClockwise1(300, 200, 194,34,134, 0);
antiClockwise1(300, 400, 237,91,53, 0);
//
drawCircle2(0, 100, 129,197,64, 0);
drawCircle2(0, 300, 22,116,188, 0);
drawCircle2(200, 100, 22,116,188, 0);
drawCircle2(200, 300, 194,34,134, 0);
drawCircle2(400, 100, 194,34,134, 0);
drawCircle2(400, 300, 237,91,53, 0);
}
else if (t < .75) {
//
drawCircle2(100, 100, 0,163,150, ease(map(t, 0.5, .75, 0, 1)));
drawCircle2(100, 300, 97,46,141, ease(map(t, 0.5, .75, 0, 1)));
drawCircle2(300, 100, 97,46,141, ease(map(t, 0.5, .75, 0, 1)));
drawCircle2(300, 300, 234,34,94, ease(map(t, 0.5, .75, 0, 1)));
//
drawCircle(200, 0, 0,163,150, ease(map(t, 0.5, .75, 0, 1)));
drawCircle(200, 200, 97,46,141, ease(map(t, 0.5, .75, 0, 1)));
drawCircle(200, 400, 234,34,94, ease(map(t, 0.5, .75, 0, 1)));
//
antiClockwise1(0, 0, 247,182,44, ease(map(t, 0.5, .75, 0, 1)));
antiClockwise1(0, 200, 0,163,150, ease(map(t, 0.5, .75, 0, 1)));
antiClockwise1(0, 400, 97,46,141, ease(map(t, 0.5, .75, 0, 1)));
antiClockwise1(400, 0, 97,46,141, ease(map(t, 0.5, .75, 0, 1)));
antiClockwise1(400, 200, 234,34,94, ease(map(t, 0.5, .75, 0, 1)));
antiClockwise1(400, 400, 247,182,44, ease(map(t, 0.5, .75, 0, 1)));
//
antiClockwise1(100, 0, 129,197,64,ease(map(t, 0.5, .75, 0, 1)));
antiClockwise1(100, 200,22,116,188,ease(map(t, 0.5, .75, 0, 1)));
antiClockwise1(100, 400,194,34,134,ease(map(t, 0.5, .75, 0, 1)));
antiClockwise1(300, 0,22,116,188,ease(map(t, 0.5, .75, 0, 1)));
antiClockwise1(300, 200,194,34,134,ease(map(t, 0.5, .75, 0, 1)));
antiClockwise1(300, 400,237,91,53,ease(map(t, 0.5, .75, 0, 1)));
//
drawCircle2(0, 100, 129,197,64, ease(map(t, 0.5, .75, 0, 1)))
drawCircle2(0, 300, 22,116,188, ease(map(t, 0.5, .75, 0, 1)))
drawCircle2(200, 100, 22,116,188, ease(map(t, 0.5, .75, 0, 1)))
drawCircle2(200, 300, 194,34,134, ease(map(t, 0.5, .75, 0, 1)))
drawCircle2(400, 100, 194,34,134, ease(map(t, 0.5, .75, 0, 1)))
drawCircle2(400, 300, 237,91,53, ease(map(t, 0.5, .75, 0, 1)))
}
else if (t < 1)
{
//
drawCircle(100, 100, 0,163,150, ease(map(t, .75, 1, 0, 1)));
drawCircle(100, 300, 97,46,141, ease(map(t, .75, 1, 0, 1)));
drawCircle(300, 100, 97,46,141, ease(map(t, .75, 1, 0, 1)));
drawCircle(300, 300, 234,34,94, ease(map(t, .75, 1, 0, 1)));
//
drawCircle2(200, 0, 0,163,150, 0);
drawCircle2(200, 200, 97,46,141, 0);
drawCircle2(200, 400, 234,34,94, 0);
//
antiClockwise2(0, 0, 247,182,44, ease(map(t, 0.75, 1, 0, 1)));
antiClockwise2(0, 200, 0,163,150, ease(map(t, 0.75, 1, 0, 1)));
antiClockwise2(0, 400,97,46,141, ease(map(t, 0.75, 1, 0, 1)));
antiClockwise2(400, 0,97,46,141, ease(map(t, 0.75, 1, 0, 1)));
antiClockwise2(400, 200,234,34,94, ease(map(t, 0.75, 1, 0, 1)));
antiClockwise2(400, 400,247,182,44, ease(map(t, 0.75, 1, 0, 1)));
//
antiClockwise2(100,0, 129,197,64,0);
antiClockwise2(100,200, 22,116,188,0);
antiClockwise2(100,400, 194,34,134,0);
antiClockwise2(300,0, 22,116,188,0);
antiClockwise2(300,200, 194,34,134,0);
antiClockwise2(300,400, 237,91,53,0);
//
drawCircle(0, 100,129,197,64, 0);
drawCircle(0, 300,22,116,188, 0);
drawCircle(200,100,22,116,188, 0);
drawCircle(200,300,194,34,134, 0);
drawCircle(400,100,194,34,134, 0);
drawCircle(400,300,237,91,53, 0);
}
pop();
}
function ease(q) {
return q * q * 3 - q * q * q * 2;
}
function drawCircle(posX, posY, r, g, b, q) {
noStroke();
push();
fill(r, g, b);
translate(posX, posY);
rotate(q * HALF_PI);
arc(0, 0, 100, 100, 0, HALF_PI, PIE);
arc(0, 0, 100, 100, PI, PI + HALF_PI, PIE);
pop();
}
function drawCircle2(posX, posY, r, g, b, q) {
noStroke();
push();
fill(r, g, b);
translate(posX, posY);
rotate(q * HALF_PI);
arc(0, 0, 100, 100, HALF_PI, HALF_PI + HALF_PI, PIE);
arc(0, 0, 100, 100, PI + HALF_PI, TWO_PI, PIE);
pop();
}
function antiClockwise1(posX, posY, r, g, b, q) {
noStroke();
push();
fill(r, g, b);
translate(posX, posY);
rotate(-q * HALF_PI);
arc(0, 0, 100, 100, HALF_PI, HALF_PI + HALF_PI, PIE);
arc(0, 0, 100, 100, PI + HALF_PI, TWO_PI, PIE);
pop();
}
function antiClockwise2(posX, posY, r, g, b, q) {
noStroke();
push();
fill(r, g, b);
translate(posX, posY);
rotate(-q * HALF_PI - HALF_PI);
arc(0, 0, 100, 100, HALF_PI, HALF_PI + HALF_PI, PIE);
arc(0, 0, 100, 100, PI + HALF_PI, TWO_PI, PIE);
pop();
}
function setup() {
createCanvas(400, 400);
//background(0);
}
function draw() {
noStroke();
background(0);
t = (0.018*frameCount)%1;
push();
if(t<0.5)
{
//
drawCircleReverse(0,0,246,182,48,ease(map(t,0,0.5,0,1)));
drawCircleReverse(100,0,129,197,64,ease(map(t,0,0.5,0,1)));
drawCircle(200,0,1,163,150,ease(map(t,0,0.5,0,1)));
drawCircleReverse(300,0,22,116,188,ease(map(t,0,0.5,0,1)));
drawCircleReverse(400,0,97,46,141,ease(map(t,0,0.5,0,1)));
//
drawCircle(0, 100, 129,197,64,ease(map(t,0,.5,0,1)));
drawCircle(100, 100, 1, 163, 150,ease(map(t,0,.5,0,1)));
drawCircle2(200,100,22, 116, 188,ease(map(t,0,.5,0,1)));
drawCircle(300, 100, 97, 46, 141,ease(map(t,0,.5,0,1)));
drawCircle(400, 100, 194,34,134,ease(map(t,0,.5,0,1)));
//
drawCircleReverse(0, 200, 1, 163, 150,ease(map(t,0,.5,0,1)));
drawCircleReverse(100, 200,22,116,188,ease(map(t,0,.5,0,1)));
drawCircle2(200, 200,97, 46, 141,ease(map(t,0,0.5,0,1)));
drawCircle2Reverse(300, 200,194,34,134,ease(map(t,0,0.5,0,1)));
drawCircleReverse(400, 200,234,34,94,ease(map(t,0,0.5,0,1)));
//
drawCircle(0,300,22, 116, 188,ease(map(t,0,.5,0,1)));
drawCircle(100, 300, 97, 46, 141,ease(map(t,0,0.5,0,1)));
drawCircle2(200, 300, 194,34,134,ease(map(t,0,0.5,0,1)));
drawCircle(300, 300,234,34,94,ease(map(t,0,0.5,0,1)));
drawCircle2(400, 300,237,91,53,ease(map(t,0,0.5,0,1)));
//
drawCircle2Reverse(0, 400,97, 46, 141,ease(map(t,0,0.5,0,1)));
drawCircle2Reverse(100,400,194,34,134,ease(map(t,0,0.5,0,1)));
drawCircle(200,400,234,34,94,ease(map(t,0,0.5,0,1)));
drawCircle2Reverse(300,400,237,91,53,ease(map(t,0,0.5,0,1)));
drawCircleReverse(400,400,246,182,48,ease(map(t,0,0.5,0,1)));
}
else if(t>0.5)
{
//
drawCircle2Reverse(0,0,246,182,48,ease(map(t,0.5,1,0,1)));
drawCircle2Reverse(100,0,129,197,64,ease(map(t,0.5,1,0,1)));
drawCircle2Reverse(200,0,1,163,150,ease(map(t,0.5,1,0,1)));
drawCircle2Reverse(300,0,22,116,188,ease(map(t,0.5,1,0,1)));
drawCircle2Reverse(400,0,97,46,141,ease(map(t,0.5,1,0,1)));
//
drawCircle2(0, 100, 129,197,64,ease(map(t,0.5,1,0,1)));
drawCircle2(100, 100, 1, 163, 150,ease(map(t,.5,1,0,1)));
drawCircle(200,100, 22,116,188,ease(map(t,0.5,1,0,1)));
drawCircle2(300, 100, 97, 46, 141,ease(map(t,0.5,1,0,1)));
drawCircle2(400, 100, 194,34,134,ease(map(t,0.5,1,0,1)));
//
drawCircle2Reverse(0, 200, 1, 163, 150,ease(map(t,0.5,1,0,1)));
drawCircle2Reverse(100, 200,22,116,188,ease(map(t,0.5,1,0,1)));
drawCircleReverse(200, 200,97, 46, 141,ease(map(t,0.5,1,0,1)));
drawCircleReverse(300, 200,194,34,134,ease(map(t,0.5,1,0,1)));
drawCircle2Reverse(400, 200,234,34,94,ease(map(t,0.5,1,0,1)));
//
drawCircle2(0,300,22, 116, 188,ease(map(t,0.5,1,0,1)));
drawCircle2(100, 300, 97, 46, 141,ease(map(t,.5,1,0,1)));
drawCircle(200, 300, 194,34,134,ease(map(t,0.5,1,0,1)));
drawCircle2(300, 300,234,34,94,ease(map(t,.5,1,0,1)));
drawCircle(400, 300,237,91,53,ease(map(t,0.5,1,0,1)));
//
drawCircleReverse(0, 400,97, 46, 141,ease(map(t,0.5,1,0,1)));
drawCircleReverse(100,400,194,34,134,ease(map(t,0.5,1,0,1)));
drawCircle2Reverse(200,400,234,34,94,ease(map(t,0.5,1,0,1)));
drawCircleReverse(300,400,237,91,53,ease(map(t,0.5,1,0,1)));
drawCircle2Reverse(400,400,246,182,48,ease(map(t,0.5,1,0,1)));
}
else{
//pauseCircle(0,0,246,182,48,ease(map(t,0.5,1,0,1)));
pauseCircle(200,100,22,116,188,ease(map(t,0,.5,0,1)));
}
pop();
}
function ease(q)
{
return q*q*3-q*q*q*2;
}
function drawCircle(posX, posY, r, g, b,q) {
noStroke();
push();
fill(r, g, b);
translate(posX,posY);
rotate(q*HALF_PI);
arc(0, 0 , 100, 100, 0, HALF_PI, PIE);
arc(0, 0 , 100, 100, PI, PI + HALF_PI, PIE);
pop();
}
function drawCircle2(posX, posY, r, g, b, q) {
noStroke();
push();
fill(r, g, b);
translate(posX,posY);
rotate(q*HALF_PI);
arc(0, 0 , 100, 100, HALF_PI, HALF_PI+HALF_PI, PIE);
arc(0, 0 , 100, 100, PI+HALF_PI, TWO_PI, PIE);
pop();
}
function drawCircleReverse(posX, posY, r, g, b, q){
noStroke();
push();
fill(r, g, b);
translate(posX,posY);
rotate(-q*HALF_PI);
arc(0, 0 , 100, 100, 0, HALF_PI, PIE);
arc(0, 0 , 100, 100, PI, PI + HALF_PI, PIE);
pop();
}
function drawCircle2Reverse(posX, posY, r, g, b, q) {
noStroke();
push();
fill(r, g, b);
translate(posX,posY);
rotate(-q*HALF_PI);
arc(0, 0 , 100, 100, HALF_PI, HALF_PI+HALF_PI, PIE);
arc(0, 0 , 100, 100, PI+HALF_PI, TWO_PI, PIE);
pop();
}
function pauseCircle(posX, posY, r, g, b,q) {
noStroke();
push();
fill(r, g, b);
translate(posX,posY);
//rotate(0);
arc(0, 0 , 100, 100, 0, HALF_PI, PIE);
arc(0, 0 , 100, 100, PI, PI + HALF_PI, PIE);
pop();
}