xxxxxxxxxx
81
// Uses https://www.npmjs.com/package/p5.createloop
// Be sure that the following script is included in index.html:
// https://unpkg.com/p5.createloop@0.2.8/dist/p5.createloop.js
var Offset
var Amplitude
var PhaseY
var PhaseX
var Frequency
var duration = 4000
function setup() {
createCanvas(400, 400);
rectMode(CENTER)
frameRate(50);
pixelDensity(1);
createLoop({
duration: 5,
gif: true
});
}
//------------------------------------------
function draw() {
background(143, 79, 79, 30);
strokeWeight(5);
noStroke();
Offset = height / 2;
Amplitude = 200;
Frequency = 1
PhaseX = radians(0);
PhaseY = radians(20);
var duration = 4000 ; // millis
var percentOfLoop = (millis(animLoop.theta) % duration) / duration; // 0...1
var percentA = percentOfLoop ;
var percentB = pow(percentOfLoop, 2.0);
var percentC = pow(percentOfLoop, 0.5);
var rectX = Offset + Amplitude * sin(TWO_PI * (percentOfLoop) * Frequency + PhaseX);
var rectY = Offset + Amplitude * sin(TWO_PI * (percentOfLoop) * Frequency + PhaseY);
var rectX2 = Offset + Amplitude * sin(-TWO_PI * (percentA) * Frequency + PhaseX);
var rectY2 = Offset + Amplitude * sin(-TWO_PI * (percentA) * Frequency + PhaseY);
var r = map(rectX, 50, 200, 0, 0);
var g = map(rectX, 50, 200, 100, 200);
var b = map(rectX, 50, 200, 100, 200);
rect(rectX, rectY, 20, 20, 20);
rect(rectX + 50, rectY, 20, 20, 20);
rect(rectX - 50, rectY, 20, 20, 20);
rect(rectX2, rectY2, 20, 20, 20);
rect(rectX2 - 50, rectY2, 20, 20, 20);
rect(rectX2 + 50, rectY2, 20, 20, 20);
push()
angle = 0;
fill(143, 79, 79);
translate(200, 200);
var size = Amplitude * sin(millis(animLoop.theta)/1000);
rotate(angle)
rect(0, 0, size, size)
fill(206, 230, 180)
rect(0, 0, size + 20, size + 20)
angle += 0.2
pop()
fill(r, g, b);
}