RenderATL 2024 | Talk Announcement

renderatl-2024-talk-announcement.markdown

RenderATL 2024 | Talk Announcement

A Pen by Monica.dev on CodePen.

License.

script.js

var siz = 35;
var pg;
let weight = 8;

function setup() {
  frameRate(2);
  textFont("Major Mono Display");
  createCanvas(windowWidth, windowHeight);
  background(0);

  pg = createGraphics(siz + 2, siz + 2);
  pg.noFill();
  pg.stroke("255");
  pg.strokeWeight(weight);
  pg.strokeCap(ROUND);
  pg.arc(0, 0, pg.width, pg.height, 0, PI / 2);
  pg.arc(pg.width, pg.height, pg.width, pg.height, PI, PI + PI / 2);
  imageMode(CENTER, CENTER);
}

function draw() {
  clear();
  background(0);
  fill("#ff88df");
  rect(0, 0, width, 10);

  textSize(windowWidth / 40);
  fill("white");
  text("Art+Data: An Exploration of Computational Creativity", 5, height - 45);

  for (var i = 0; i <= width; i += siz) {
    for (var j = 70; j <= height - 100; j += siz) {
      push();
      translate(i, j);
      var angle = (TWO_PI * int(random(1, 5))) / 4;
      rotate(angle);
      let variation = random(1);
      tint("#ff88df");
      image(pg, 0, 0);
      pop();
    }
  }

  fill("white");
  textSize(windowWidth / 65);
  text("RenderATL | June 12 – 14, 2024 | 🎤 @indigitalcolor", 5, 40);
  noFill();
}

function windowResized() {
  resizeCanvas(windowWidth, windowHeight);
}

function convertToSeed(input) {
  // could update this to use scrabble score instead
  return input.split("").reduce((acc, letter, idx) => {
    return acc + letter.charCodeAt() * idx;
  }, 0);
}

function keyPressed() {
  const SPACEBAR = " ";
  // pause/play animation when spacebar is pressed for sketches that animate from draw to draw

  if (key == SPACEBAR) {
    isLooping() ? noLoop() : loop();
  }

  if (key === "g") {
    saveGif("canvas", 25);
  }
  if (key === "s") {
    saveCanvas("canvas");
  }
}

function windowResized() {
  resizeCanvas(windowWidth, windowHeight);
}

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.0/p5.min.js"></script>

style.css

@import url("https://fonts.googleapis.com/css2?family=Major+Mono+Display&display=swap");

body {
  background: black;
}

canvas {
  /* center canvas in middle of page */
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  height: 50%;
  text-align: center;
  padding: 1em;
}