Using p5*js, use the canvas to create an animated artwork. It may be an animated narrative, cubistic and abstract. It may be inspired by some of the works we've seen before, or completely your own.
requirements
Use one of the following --
a moving element (bounce off walls, circular, spiral, or sine wave movement)
use rotate() or scale() to transform a drawn element (circle, square, rectangle, polygon, line, etc.) at least once in your code.
let rows = 40;
let noiseScale = 0.007; //
let noiseSpeed = 0.01;
function setup() {
createCanvas(600, 600);
noiseSeed(1); // stabilize the noise field -- everytime we get the same results from noise
}
function draw() {
background(220);
let yd = height / rows;
let xd = width / rows;
for (let x = xd / 2; x < width; x += xd) {
for (let y = yd / 2; y < height; y += yd) {
let w =
noise(x * noiseScale, y * noiseScale, frameCount * noiseSpeed) * xd; // plug in up to 3 values, returns avalue betwen 0 -1
circle(x, y, w);
}
}
}
let noiseScale = 0.007; //
let noiseSpeed = 0.01; //
function setup() {
createCanvas(600, 600);
noiseSeed(1); // stabilize the noise field -- everytime we get the same results from noise
angleMode(DEGREES); // default mode angles is RADIANS
}
function draw() {
background(220);
translate(width / 2, height / 2);
let r = 50;
let points = 100;
beginShape();
for (let a = 0; a < 360; a += 360 / points) {
let n = map(
noise(a * noiseScale, frameCount * noiseSpeed),
0.1,
0.9,
0.5,
1
);
let x = sin(a) * (r * n); // sin and cos return values between -1 and 1
let y = cos(a) * (r * n);
vertex(x, y);
}
endShape(CLOSE);
}
let noiseScale = 0.007; //
let noiseSpeed = 0.005; //
let tx, ty; // translation coordinates
let ra = 0; // rotation angle
let bgA = 0; // angle for sin movement between bg colors
let bgc1, bgc2;
let maxRadius = 400;
function setup() {
createCanvas(600, 600);
noiseSeed(1); // stabilize the noise field -- everytime we get the same results from noise
angleMode(DEGREES); // default mode angles is RADIANS
tx = width / 2;
ty = height / 2;
bgc1 = color("#E91E63");
bgc2 = color("#1EE9E0");
}
// interrupts the draw loop
function mousePressed() {
tx = mouseX;
ty = mouseY;
maxRadius = 0;
}
function mouseDragged() {
tx = mouseX;
ty = mouseY;
}
function draw() {
if (maxRadius < 400) {
maxRadius++;
}
let bgLerp = map(sin(bgA), -1, 1, 0, 1); // sin returns between -1 and 1
bgA += 0.1;
let bg = lerpColor(bgc1, bgc2, bgLerp);
bg.setAlpha(1); // sets the transparency of the color
background(bg);
// translation
translate(tx, ty);
tx += 0.5;
ty += 0.7;
if (tx > width * 2 && ty > height * 2) {
tx = -width / 3;
ty = -height / 3;
}
//rotation
rotate(ra);
ra += 0.2;
noFill();
strokeWeight(5);
let points = 15;
for (let r = 10; r < maxRadius; r += 3) {
let s = map(r, 10, width, 0, 1);
let c = lerpColor(color("#9C27B0"), color("#00BCD4"), s); // interpolates between two colors by a factor between 0 and 1
stroke(c);
beginShape();
for (let a = 180; a < 360; a += 360 / points) {
let n = map(
noise(a * noiseScale, r * noiseScale, frameCount * noiseSpeed),
0.1,
0.9,
0.5,
1
);
let n2 = map(
noise(a * noiseScale, r * noiseScale, 1000 + frameCount * noiseSpeed),
0.1,
0.9,
0.5,
1
);
// let n = 1;
// let n2 = 1;
let x = sin(a * n) * (r * n2); // sin and cos return values between -1 and 1
let y = cos(a * n2) * (r * n);
vertex(x, y);
}
endShape();
}
filter(BLUR);
}