/** * InfoPollution. * Source code in TypeScript: https://github.com/fal-works/p5js-sketches/tree/master/info-pollution * @copyright 2020 FAL * @version 0.1.0 */ (function(p5ex, CCC) { "use strict"; /** * ---- Common ---------------------------------------------------------------- */ const { Random } = CCC; const { onSetup, ShapeColor, setRenderer } = p5ex; /** * Shared p5 instance. */ let p; onSetup.push(p5Instance => { p = p5Instance; }); /** * Shared canvas instance. */ let canvas; onSetup.push(() => { canvas = p5ex.canvas; }); /** * ---- Settings -------------------------------------------------------------- */ /** The id of the HTML element to which the canvas should belong. */ const HTML_ELEMENT_ID = "InfoPollution"; /** The logical height of the canvas. */ const LOGICAL_CANVAS_HEIGHT = 800; /** The font name. */ const fontName = "Squada One"; /** The font size. */ const fontSize = 48; /** The line height. */ const lineHeight = 1.5 * fontSize; /** Interval between two letters. */ const letterInterval = 5; // prettier-ignore const leetTable = new Map([ ["a", ["4", "/\\", "@", "/-\\", "^", "(L"]], ["b", ["I3", "8", "13", "|3", "s", "P>", "|:", "!3", "(3", "/3", ")3", "|-]", "j3"]], ["c", ["[", "<", "(", "c"]], ["d", [")", "|)", "(|", "|o", "[)", "I>", "|>", "T)", "I7", "cl", "|}", "|]"]], ["e", ["3", "&", "[-", "|=-"]], ["f", ["|=", "|#", "/=", "v"]], ["g", ["6", "&", "(_+", "9", "C-", "(?,", "[,", "{,", "<-", "(."]], ["h", ["#", "/-/", "[-]", "]-[", ")-(", "(-)", ":-:", "|~|", "|-|", "]~[", "}{", "!-!", "1-1", "\\-/", "I+I", "}-{"]], ["i", ["1", "!", "|", "][", "]"]], ["j", ["_|", "_/", "", "\\", "[]\\", "//", "[]", "/V", "1V", "^"]], ["o", ["0", "()", "[]", "p", "<>"]], ["p", ["|*", "|o", "|o", "|^(o)", "|>", "|\"", "9", "[]D", "|7"]], ["q", ["(_,)", "()_", "0_", "<|", "&"]], ["r", ["I2", "|`", "|~", "|?", "/2", "|^", "lz", "|9", "2", "12", "[z", ".-", "|2", "|-"]], ["s", ["5", "$", "z", "2"]], ["t", ["7", "+", "-|-", "']['", "\"|"]], ["u", ["(_)", "|_|", "v", "L|"]], ["v", ["\\/", "|/", "\\|"]], ["w", ["\\/\\/", "vv", "\\N", "'//", "\\\\'", "\\^/", "(n)", "\\V/", "\\X/", "\\|/", "\\_|_/", "\\_:_/", "uu", "2u", "\\\\//\\\\//"]], ["x", ["><", "}{", "×", ")(", "][", "}{"]], ["y", ["j", "`/", "7", "\\|/", "\\"]], ["z", ["2", "7_", "-/_", "%", ">_", "s", "~/_", "-\\_", "-|_"]] ]); const Leet = (() => { const convertRandom = character => { const candidates = leetTable.get(character); return candidates ? Random.Arrays.get(candidates) : undefined; }; return { convertRandom }; })(); const Letter = (() => { const emptyFunction = () => {}; const createLetterGraphics = (value, color) => { p.textFont(fontName, fontSize); const width = Math.max(fontSize, p.textWidth(value) + 10); const height = 1.3 * fontSize; const g = p.createGraphics(width, height); g.textFont(fontName, fontSize); setRenderer(g); ShapeColor.apply(color, 255); setRenderer(p); g.text(value, 0, fontSize); return g; }; const defaultColor = ShapeColor.create(null, "#202020", 1); const pollutedColor = ShapeColor.create(null, "#ff0099", 1); const createDraw = (value, polluted) => { const color = polluted ? pollutedColor : defaultColor; const graphics = createLetterGraphics(value, color); return (x, y) => p.image(graphics, x, y); }; const create = (x, y, value, polluted = false) => { const width = p.textWidth(value); const isSpace = value === " "; const draw = !isSpace ? createDraw(value, polluted) : emptyFunction; return { value, width, isSpace, polluted, frequency: Random.between(0.03, 0.07), x, y, targetX: x, targetY: y, draw, frameCount: 0, shakeValue: polluted ? 50 : 0, isAlive: true }; }; const pollute = letter => { if (letter.polluted || letter.isSpace || letter.frameCount < 90) return undefined; if (Random.bool(0.999)) return undefined; const newValue = Leet.convertRandom(letter.value.toLowerCase()); if (!newValue) return undefined; letter.isAlive = false; return create(letter.targetX, letter.targetY, newValue, true); }; const update = letter => { letter.frameCount += 1; letter.x += 0.1 * (letter.targetX - letter.x); letter.y += 0.1 * (letter.targetY - letter.y); letter.shakeValue *= 0.9; }; const draw = letter => { const { x, y, shakeValue, draw: drawAt, frequency, frameCount } = letter; const actualY = y + 5 * Math.sin(frameCount * frequency); if (shakeValue < 1) drawAt(x, actualY); else drawAt( x + Random.signed(shakeValue), actualY + Random.signed(shakeValue) ); }; const isAlive = letter => letter.isAlive; const exists = letter => !!letter; return { create, update, draw, pollute, isAlive, exists, defaultColor }; })(); /** * ---- Sketch ---------------------------------------------------------------- */ let drawBackground; const letters = []; let x; let y; let initialized = false; let intervalId = undefined; const minX = 30; const minY = 30; const resetLetters = () => { letters.length = 0; }; const resetX = () => { x = minX; }; const resetY = () => { y = minY; }; const clearArea = () => { resetLetters(); resetX(); resetY(); }; const breakLine = () => { resetX(); y += lineHeight; }; const createLetter = character => { const letter = Letter.create(x, y, character); x += letter.width + letterInterval; if (x > 0.75 * canvas.logicalSize.width) { breakLine(); } return letter; }; const addLetter = character => { const newLetter = createLetter(character); letters.push(newLetter); }; const addSentence = sentence => { if (sentence === "") return; const characters = sentence.split(""); const newLetters = characters.map(createLetter); letters.push(...newLetters); breakLine(); }; const addInitialSentences = () => { addSentence("Type something!"); addSentence("Everything turns"); addSentence("into the Leet."); }; const popLetter = () => { const lastLetter = letters.pop(); if (!lastLetter) return; x = lastLetter.x; y = lastLetter.y; }; const getSubsequentLetters = (letter, letterList) => letterList.filter( cur => cur.targetY === letter.targetY && cur.targetX > letter.targetX ); const reset = () => { p.background(252); drawBackground = p5ex.storePixels(); clearArea(); addInitialSentences(); }; const completeInitialize = () => { reset(); initialized = true; if (intervalId) { clearInterval(intervalId); intervalId = undefined; } }; const initialize = () => { p.textFont(fontName, fontSize); const testString = "MMMMMMMMMM"; const properTextWidth = 223; const initialTextWidth = p.textWidth(testString); if (Math.floor(initialTextWidth) === properTextWidth) { reset(); initialized = true; return; } intervalId = setInterval(() => { const currentTextWidth = p.textWidth(testString); if ( currentTextWidth !== initialTextWidth || Math.floor(currentTextWidth) === properTextWidth ) { completeInitialize(); } }, 100); p.text("Loading...", 100, 100); }; const updateSketch = () => { letters.forEach(Letter.update); const pollutedList = []; for (let i = 0; i < letters.length; i += 1) { const currentLetter = letters[i]; const polluted = Letter.pollute(currentLetter); if (!polluted) continue; const xDisplacement = polluted.width - currentLetter.width; if (y === polluted.y) x += xDisplacement; const shift = letter => { letter.targetX += xDisplacement; }; const pollutedLetters = pollutedList.map(element => element.value); getSubsequentLetters(currentLetter, letters).forEach(shift); getSubsequentLetters(currentLetter, pollutedLetters).forEach(shift); pollutedList.push({ index: i, value: polluted }); } for (const polluted of pollutedList) letters.splice(polluted.index, 1, polluted.value); }; const drawTextCursor = () => { p.stroke(0, 128 + 127 * Math.sin(p.frameCount * 0.1)); p.strokeWeight(2); p.line(x, y, x, y + fontSize); }; const drawSketch = () => { letters.forEach(Letter.draw); drawTextCursor(); }; const draw = () => { if (!initialized) { if (p.frameCount > 60) completeInitialize(); return; } updateSketch(); drawBackground(); canvas.drawScaled(drawSketch); }; const keyTyped = () => { switch (p.keyCode) { case p.ENTER: case p.RETURN: case p.BACKSPACE: return false; } addLetter(p.key); return false; }; const keyPressed = () => { if (!initialized) return; switch (p.keyCode) { case p.ENTER: case p.RETURN: breakLine(); break; case p.BACKSPACE: popLetter(); break; case p.ESCAPE: clearArea(); break; } }; const p5Methods = { draw, keyTyped, keyPressed }; /** * ---- Main ------------------------------------------------------------------ */ const setP5Methods = p => { Object.assign(p, p5Methods); p.windowResized = () => { canvas.resizeIfNeeded(); reset(); }; }; p5ex.startSketch({ htmlElement: HTML_ELEMENT_ID, logicalCanvasHeight: LOGICAL_CANVAS_HEIGHT, initialize: initialize, setP5Methods }); })(p5ex, CreativeCodingCore);

Info Pollution