xxxxxxxxxx
// CREATIVE CODING, ACM DESIGN
// P5 DOCS: https://p5js.org/
// ONE THING TO TAKEAWAY FROM THIS WORKSHOP IS...
// SOMETIMES WE DON'T NEED TO FOLLOW CONVENTION, THE USUAL, TEMPLATES
// ITS IMPORTANT TO HAVE FUN AND PUSH THE BOUNDARIES DESIGN, BE UNREPLACEABLE
// A GOOD PROJECT + CREATIVE CODING MAKES IT A **GREAT** PROJECT ex. https://graphs.joelee.info/
// BUT... DON'T OVERDO IT, CREATIVE CODING IS A DOUBLE-EDGED SWORD
// CREATIVE CODING IS ALWAYS: IDEA -> MOCKUP -> VALIDATE UI/UX -> CODING
// JOE ALWAYS STARTS ON A PIECE OF PAPER .-.
// TRY MAKING SOMETHING! SHOW IT OFF TO YOUR FRIENDS!
// HERE'S SOMETHING I MADE!
function setup() {
createCanvas(windowWidth, windowHeight);
graphic = createGraphics(width, height);
graphic.fill(0);
graphic.textSize(255);
graphic.textStyle(BOLD)
graphic.textLeading(180);
graphic.textAlign(CENTER, CENTER);
graphic.text("ACM DESIGN", width / 2, height / 2);
}
function draw() {
background(255)
let tileSize = map(0, 0, width, 40, 60);
for (let i = 0; i < width; i = i + tileSize) {
for (let j = 0; j < height; j = j + tileSize) {
// INTERACTIVITY
let mX = map(mouseX, 0, width, 0, 1);
// NERDY MATH
let distortionX =
sin(frameCount * 0.1 + (i / tileSize) * 0.5 + j * 0.4) * (15 * mX);
let distortionY =
sin(frameCount * 0.1 + (i / tileSize) * 0.2 + j * 0.2) * 5;
image(
graphic,
i,
j,
tileSize,
tileSize,
i + distortionX,
j + distortionY,
tileSize,
tileSize
);
}
}
image(graphic, 0, 0, width, height, 0, 0, width, height);
}