Text to Art (p5.js)

In this example below you will see how to do a Text to Art (p5.js) with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by Twinbee, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright Twinbee ©
  • HTML
  • CSS
  • JavaScript
    <div class="container">
  <div id="sketch-holder"></div>
</div>
<input class='numbers' placeholder='Input Text Here.'></input>

/*Downloaded from https://www.codeseek.co/Twinbee/text-to-art-p5js-wyjKzm */
    body {
  width: 100vw;
  height: 100vh;
  
  margin: 0;
  padding: 0;
  
  background: #222229;
  
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

// A nice Frame
.container {
  height: 600px;
  width: 600px;
  
  margin: 0 0 20px;
  background: #fff;
  
  box-shadow: 0px 6px 20px #001;
  display: flex;
  justify-content: center;
  align-items: center;
}

.numbers {
  width: 580px;
  padding: 10px;
  
  font-size: 20px;
  
  border: none;
  box-shadow: 0px 6px 20px #001;
}


/*Downloaded from https://www.codeseek.co/Twinbee/text-to-art-p5js-wyjKzm */
    // Global Variable Declarations
let c = {
  "width": 400,
  "height": 400
}

let position = 0,
    mouseMove = [],
    size = 20;

let m = {
  'width': 0, 
  'height': 0, 
  'start': c.width/2, 
  'finish': c.height/2,
}

// Setting up the Canvas
function setup() {
  let canvas = createCanvas(c.width, c.height);
  canvas.parent('sketch-holder');
  
  background(0);
}


// Where the Magic Happens (It draws when you release keys)
function keyReleased() {
  background(0);
  
  stroke(255);
  strokeCap(ROUND);
  let drawing = textToBin($('.numbers').val());
  
  m.start = c.width/2;
  m.finish = c.height/2;
  size = 10;
  
  m = rotation(drawing, position, m, size);
}


// Text to Binary conversion function
function textToBin(text) {
  let length = text.length,
      output = [];
  for (let i = 0;i < length; i++) {
    let bin = text[i].charCodeAt().toString(2);
    output.push(Array(8-bin.length+1).join("0") + bin);
  } 
  return output.join(" ");
}

function rotation(drawing, position, m, size) {
  // Variables
  let x = m.start,
      y = m.finish,
      oldX = 0,
      oldY = 0,
      xShift = 0,
      yShift = 0,
      xMax = 0,
      xMin = c.width,
      yMax = 0,
      yMin = c.height,
      drawWidth = 0,
      drawHeight = 0,
      drawX = x,
      drawY = y;
  
  // Only draws if not undefined

    for (let i=0; i<drawing.length; i++) {
      
      // rotation wrap
      if (position<0) {
        position=3;
      } else if (position>3) {
        position=0;
      }
      
      // identifying shift in x/y coordinates based on rotation
      switch (position) {
        case 0:
          xShift = 0;
          yShift = -size;
          break;
        case 1:
          xShift = size;
          yShift = 0;
          break;
        case 2:
          xShift = 0;
          yShift = size;
          break;
        case 3:
          xShift = -size;
          yShift = 0;
          break;
      }
      
      // Checking the binary for rotation or draw
      if (drawing[i] == '0') {
        position+=1;
      } else if (drawing[i] == '2') {
        position-=1;
      } else if (drawing[i] == '1') {
        oldX = x;
        oldY = y;
        x = x + xShift;
        y = y + yShift;
        
        if (x>xMax) xMax = x;
        if (x<xMin) xMin = x;
        if (y>yMax) yMax = y;
        if (y<yMin) yMin = y;
        
        line(oldX, oldY, x, y);
      }
    }
    
    drawWidth = xMax - xMin;
    drawHeight = yMax - yMin;
    
    m.width = drawWidth;
    m.height = drawHeight;
    m.start = drawX;
    m.finish = drawY;
    
    return m;
  }


// Saves position of mouse on click
function mousePressed() {
  mouseMove = [mouseX, mouseY];
}

// Updates starting draw position relative to change in mouse movement (draggable)
function mouseDragged() {
  background(0);
  let drawing = textToBin($('.numbers').val()); 
  
  m.start = m.start - (mouseMove[0] - mouseX);
  m.finish = m.finish - (mouseMove[1] - mouseY);
  
  mouseMove[0] = mouseX;
  mouseMove[1] = mouseY;
  
  m = rotation(drawing, position, m, size);
}

// Zoom Functionality on Mouse Scroll
function mouseWheel(event) {
  background(0);
  let drawing = textToBin($('.numbers').val()); 
  
  if (event.delta < 0) {
    size+=1;
  } else if (event.delta > 0) {
    size-=1;
  }
  
  if (size <= 1) {
    size = 1;
  }
  
  m = rotation(drawing, position, m, size);
}

Comments