260111

let textGraphics;

function setup() {
  createCanvas(800, 800, WEBGL);
  textGraphics = createGraphics(800, 800);
}

function draw() {
  background("#253276");
  setAttributes("depth", false);

  const codeString = `

let textGraphics;

function setup() {
  createCanvas(800, 800, WEBGL);
  textGraphics = createGraphics(800, 800);
}

function draw() {
  background("#253276");
  const codeString = PLACEHOLDER;

  const backtick = String.fromCharCode(96);
  const completeCode = codeString.replace(
    "PLACEHOLDER",
    backtick + codeString + backtick
  );

  textGraphics.background(0, 0);
  textGraphics.fill("#dfdad3");
  textGraphics.textSize(10);
  textGraphics.textFont("monospace");
  textGraphics.text(completeCode, 0, 0);

  for (let i = 0; i < 3; i++) {
    push();
    rotateY(-frameCount * 0.01 + (TAU / 3) * i);
    texture(textGraphics);
    noStroke();
    sphere(300);
    pop();
  }
}`;

  const backtick = String.fromCharCode(96);
  const completeCode = codeString.replace(
    "PLACEHOLDER",
    backtick + codeString + backtick
  );

  textGraphics.background(0, 0);
  textGraphics.fill("#dfdad3");
  textGraphics.textSize(12);
  textGraphics.textFont("monospace");
  textGraphics.text(completeCode, 0, 0);

  for (let i = 0; i < 3; i++) {
    push();
    rotateY(-frameCount * 0.005 + (TAU / 3) * i);
    texture(textGraphics);
    noStroke();
    sphere(300);
    pop();
  }
}