xxxxxxxxxx
122
// 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
function setup() {
createCanvas(640, 640);
frameRate(30);
pixelDensity(1);
createLoop({
duration: 3,
gif: false
});
background(70, 140, 225);
for (var f = 0; f < 90; f++) {
myDraw(map(f, 0, 90, 0, TWO_PI));
}
}
//------------------------------------------
function draw() {
background(0, 60);
//for the arms
noStroke();
var myOffset = height / 2;
var nPoints = 20;
var nRings = 20;
var myFrequency = 1;
//for the eye
var gOffset = 128;
var gAmplitude = 128;
var gFrequency = 0.001;
var grayA = gOffset + gAmplitude * sin(animLoop.theta); //gFrequency);
var grayB = gOffset - gAmplitude * sin(animLoop.theta); //-gFrequency);
fill(grayA);
rect(height / 2, width / 2, 100, 100, 100, 100)
push();
fill(grayB);
translate(320, 320);
//for the blink
var t = animLoop.theta;
var sinOfT01 = map(sin(t), -1, 1, 0, 1);
var shapedsinOfT01 = pow(sinOfT01, 10.0);
var vw = map(shapedsinOfT01, 1, 0, 0.01, 0.30);
scale(vw, 0.75);
rotate(radians(45));
rect(0, 0, 80, 80, 0, 40, 0, 40);
pop();
//for loop that controls the movement of the arms
for (var j = 0; j < nRings; j++) {
for (var i = 0; i < 3 * nPoints; i++) {
var frac = i / nPoints; //0....1
var myRadius = 20 * j + 50
var phase = j / 10.0 * sin(animLoop.theta);
var rectY = myOffset + myRadius * sin(frac * TWO_PI + phase);
var rectX = myOffset + myRadius * cos(frac * TWO_PI + phase);
fill(j * 3, j * 30, j * 100);
rectMode(CENTER);
rect(rectX, rectY, 20, 20, 20, 20);
}
}
}
//------------------------------------------
function myDraw(myAngle) {
background(0, 60);
//for the arms
noStroke();
var myOffset = height / 2;
var nPoints = 20;
var nRings = 20;
var myFrequency = 1;
//for the eye
var gOffset = 128;
var gAmplitude = 128;
var gFrequency = 0.001;
var grayA = gOffset + gAmplitude * sin(myAngle); //gFrequency);
var grayB = gOffset - gAmplitude * sin(myAngle); //-gFrequency);
fill(grayA);
rect(height / 2, width / 2, 100, 100, 100, 100)
push();
fill(grayB);
translate(320, 320);
//for the blink
var t = myAngle;
var sinOfT01 = map(sin(t), -1, 1, 0, 1);
var shapedsinOfT01 = pow(sinOfT01, 10.0);
var vw = map(shapedsinOfT01, 1, 0, 0.01, 0.30);
scale(vw, 0.75);
rotate(radians(45));
rect(0, 0, 80, 80, 0, 40, 0, 40);
pop();
//for loop that controls the movement of the arms
for (var j = 0; j < nRings; j++) {
for (var i = 0; i < 3 * nPoints; i++) {
var frac = i / nPoints; //0....1
var myRadius = 20 * j + 50
var phase = j / 10.0 * sin(myAngle);
var rectY = myOffset + myRadius * sin(frac * TWO_PI + phase);
var rectX = myOffset + myRadius * cos(frac * TWO_PI + phase);
fill(j * 3, j * 30, j * 100);
rectMode(CENTER);
rect(rectX, rectY, 20, 20, 20, 20);
}
}
}