​

​

let pattern;//cercle grand

let pattern2;//carré

let pattern3;//cercle petit

​

​

let x = 0;//carré qui tourne

​

let moonRot = 0; 

let moonRotspeed = 0.01; 

​

function setup() {

  createCanvas(720, 720);

  rectMode(CENTER);

​

  //cercle grand

  let buffer = createGraphics(15, 15);

  buffer.pixelDensity(1);

  buffer.background("#FF9A00");

  buffer.line(10, 10, 25, 25);

  pattern = createPattern(buffer);

  //cercle petit + fond

  let buffer3 = createGraphics(5, 5);

  buffer3.pixelDensity(1);

  buffer3.background("#F6F7D7");

  buffer3.line(1, 1, 3, 3);

  pattern3 = createPattern(buffer3);

}

​

function draw() {

  background(245);

  noStroke();

  //carré du fond avec la trame

  push();

  fillPattern(pattern3);

  rect(width/2, height/2, width, height);

  pop();

  //carré

  push();

  let buffer2 = createGraphics(15+x*2, 15+x*2);

  buffer2.pixelDensity(2);

  buffer2.background("#3EC1D3");

  buffer2.line(10, 10+sin(20*x), 1+sin(20*x), 1);

  pattern2 = createPattern(buffer2);

  blendMode(DIFFERENCE);

  x += 0.005;

  translate(width / 2, height / 2);

  rotate(x);

  fillPattern(pattern2);

  rect(0, 0, 420, 420);

  pop();

  //grand cercle

  push();

  //blendMode(DIFFERENCE);

  fillPattern(pattern);

  circle(width/2, height/2, 280);

  pop();

  //petit cercle

  push();

  blendMode(DIFFERENCE);

  moonRot += moonRotspeed; 

  translate(width/2, height/2);

  rotate(moonRot); 

  translate(-width/2, -height/2);

  fillPattern(pattern3);

  ellipse(width/2, 512, 90, 90);

  pop();

}