CODE YOUR WAY
LOOPING ANIMATIONS
p5.js code
let loaders = [];
let spd = 0;
let colors = ["#F44336","#03A9F4","#FFEB3B"];
let colorcount = 0;
function setup() {
createCanvas(400, 400);
}
function draw() {
background(255);
spd += 1;
spdcount = spd%30;
if (spdcount === 0){
colorcount++;
for (let i = 0; i < 1; i++) {
let loader = new Loader(width*0.2,height/2,colors[colorcount%3]);
loaders.push(loader);
}
}
for (let i = 0; i < loaders.length; i++) {
loaders[i].display();
loaders[i].move();
loaders[i].size();
if (loaders[i].x >= width*0.8){
loaders.splice(i,1);
i--;
}
}
}
class Loader {
constructor(x,y,c) {
this.x = x;
this.y = y;
this.width = 0;
this.height = 0;
this.corner = 0;
this.color = c;
this.rotate = 0;
}
display() {
push();
translate(this.x, this.y)
noStroke();
fill(this.color);
rectMode(CENTER);
rotate(this.rotate);
rect(0,0, this.width,this.height,this.corner);
pop();
}
move(){
this.x += 3*tan(10);
}
size() {
let dmap = map(this.x,width*0.2,width*0.8,0,PI)
this.width = 50*sin(dmap);
this.height = 50*sin(dmap);
this.corner = 5*sin(dmap);
this.rotate = PI*sin(dmap);
}
}
p5.js code
let loaders = [];
let loaders2 = [];
let spd = 0;
let colors = ["#F44336","#03A9F4","#FFEB3B"];
let colorcount = 0;
function setup() {
createCanvas(400, 400);
}
function draw() {
background(255);
drawLoader();
// drawLoader2();
}
function drawLoader(){
spd += 1;
spdcount = spd%60;
if (spdcount === 0){
colorcount++;
for (let i = 0; i < 1; i++) {
let loader = new Loader(width*0.2,height/2,colors[(colorcount)%3]);
loaders.push(loader);
}
}
for (let i = 0; i < loaders.length; i++) {
loaders[i].display();
loaders[i].move();
loaders[i].size();
// loaders[i].colour();
if (loaders[i].x >= width*0.8){
loaders.splice(i,1);
i--;
}
}
}
class Loader {
constructor(x,y,c) {
this.x = x;
this.y = y;
this.width = 0;
this.height = 0;
this.corner = 0;
this.color = c;
this.rotate = 0;
this.x1 = 0;
}
display() {
push();
translate(this.x1, this.y)
noStroke();
fill(this.color);
rectMode(CENTER);
// rotate(this.rotate);
ellipse(width/2,0, this.width);
pop();
}
move(){
this.x += 1;
let xmap = map(this.x,width*0.2,width*0.8,0,2*PI)
this.x1 = 150*sin(xmap);
}
size() {
let dmap = map(this.x,width*0.2,width*0.8,0,PI)
this.width = 10+40*sin(dmap);
this.height = 50*sin(dmap);
this.corner = 25*sin(dmap);
this.rotate = TWO_PI*sin(dmap);
}
// turn(){
// this.rotate = PI*
// }
}
function drawLoader2(){
spd += 1;
spdcount = spd%30;
if (spdcount === 0){
colorcount++;
for (let i = 0; i < 1; i++) {
let loader2 = new Loader2(width*0.2,height/2,colors[(colorcount+3)%3]);
loaders2.push(loader2);
}
}
for (let i = 0; i < loaders2.length; i++) {
loaders2[i].display();
loaders2[i].move();
loaders2[i].size();
// loaders[i].colour();
if (loaders2[i].x >= width*0.8){
loaders2.splice(i,1);
i--;
}
}
}
class Loader2 {
constructor(x,y,c) {
this.x = x;
this.y = y;
this.width = 0;
this.height = 0;
this.corner = 0;
this.color = c;
this.rotate = 0;
this.x1 = 0;
}
display() {
push();
translate(this.x1, this.y)
noStroke();
fill(this.color);
rectMode(CENTER);
// rotate(this.rotate);
ellipse(width/2,0, this.width);
pop();
}
move(){
this.x += 1;
let xmap = map(this.x,width*0.2,width*0.8,0,2*PI)
this.x1 = 150*sin(xmap);
}
size() {
let dmap = map(this.x,width*0.2,width*0.8,0,2*PI)
this.width = 10+40*cos(dmap);
this.height = 50*sin(dmap);
this.corner = 25*sin(dmap);
this.rotate = TWO_PI*sin(dmap);
}
}UNPREDICTABILITY
p5.js code
let xoff = 0;
let yoff = 1000;
let gap = 50;
let stars = 8;
let influence = 100;
let s = 10;
function setup() {
createCanvas(400, 400);
}
function draw() {
background(0);
// strokeWeight(2)
stroke(255);
let xpos= map(noise(xoff),0,1,0,width);
let ypos= map(noise(yoff),0,1,0,height);
xoff += 0.002;
yoff += 0.002;
// circle(xpos, ypos, 30);
for (let x = gap/2; x < width; x += gap) {
for (let y = gap/2; y < height; y += gap) {
let d = dist(xpos, ypos, x, y);
let d2 = d * d/100;
drawFlower(x,y,d,d2);
}
}
}
function drawFlower(x,y,divi,r){
//reverse last two values for different effect
let num = round(map(divi, 0, influence, stars,2));
angleMode(DEGREES);
let turn = map(r, 0, width, 0,180);
push();
translate(x,y);
rotate(turn);
line(0,s*-1,0,s);
pop();
for(let i = 1; i < num; i++){
push();
translate(x,y);
rotate((360/(num*2))*i+turn);
line(0,s*-1,0,s);
pop();
}
}
ITERATIVE PATTERNS 1
p5.js code
/*
Inspired by Tim Rodenbröker's Processing-Tutorial: Kinetic Typography 1
https://timrodenbroeker.de/processing-tutorial-kinetic-typography-1/
and works of Zach Lieberman
*/
let pg;
function setup() {
createCanvas(200, 200);
imageMode(CENTER);
drawChar();
}
function draw() {
background(0);
image(pg, width/2,height/2);
let tilesX = 20;
let tilesY = 4;
let tileW = int(width/tilesX);
let tileH = int(height/tilesY);
for (let x = 0; x < tilesX+1; x++) {
for (let y = 0; y < tilesY+1; y++) {
// SOURCE
let sx = (x-1)*tileW;
let sy = (y-1)*tileH;
// x posision of the source changes with the sine wave
let wave = int(sin(frameCount/20 + x*y*0.1)*50);
// let waveH = int(sin(frameCount/10 + x * y * 0.07) * 10);
// copies section of the image and paste on destination location
copy(pg, sx+wave, sy, tileW, tileH, sx, sy, tileW, tileH);
}
}
}
function drawChar(){
// pixelDensity(1);
pg = createGraphics(200, 200);
// pg.background(255);
// pg.textSize(250);
// pg.textAlign(CENTER, CENTER);
// pg.text("a",width/2, height/2);
// random circles
for (let i = 0; i < 50; i++){
pg.colorMode(HSB);
pg.fill(random(360),100,100);
pg.noStroke();
pg.ellipse(random(width*0.2,width*0.8),random(height*0.2,height*0.8),random(width*0.3));
}
pg.filter(BLUR, 50);
}ITERATIVE PATTERN 2
p5.js code
let r = 0;
let circles = [];
let num = 0;
let wider = 0;
let gapwidth = 0;
function setup() {
createCanvas(400,400);
angleMode(DEGREES);
colorMode(HSB);
wider = max(width,height);
num = wider/20;
gapwidth = wider/num;
for (let i = 0; i < num; i++) {
circles[i]= new Circle(i*gapwidth-gapwidth*random(-2,2),random(360),random(0.05,0.1)/(i),random(5),random(360));
}
}
function draw() {
background(0,0,100,0.01);
for (let i = 0; i < num; i++){
// circles[i].bands(360/num*i);
for (let j = 0; j < i; j++){
circles[j].show(int(j/2));
}
}
}
class Circle{
constructor(x, r, s, showband,h){
this.x = x;
this.y = 0;
this.speed = s;
this.rotation = r;
this.band = showband;
this.size = gapwidth*2;
this.h = h;
}
show(r){
this.rotation += this.speed;
// noStroke();
stroke(0,0,0,0.3);
strokeWeight(1);
// noFill()
fill(this.h,0,100,0.5);
for (let i = 0; i < r; i++){
push();
translate(width/2,height/2);
rotate(this.rotation + i*(360/r));
// circle(this.x,0,this.size);
// line(0,0,this.x,0);
rectMode(CENTER);
rect(this.x,0,this.size/2,this.size*20)
pop();
}
}
bands(h){
// if (this.band<1){
// stroke(0);
// } else{
// stroke(0,0);
// }
noFill();
// this.h = h;
stroke(this.h,15,90,0.1);
strokeWeight(gapwidth);
circle(width/2,height/2,this.x*2-gapwidth);
}
}
}
// function windowResized() {
// resizeCanvas(windowWidth, windowHeight);
// }