String Drawing Machine

Draw using your words! Innovative new software that allows you to control your letters in the phrase you type in to create a masterpiece!

TitleScreen

Begin by typing a phrase in the window. You will see it appear as you type. Press [enter] to begin the drawing. Default Mode is Drag and Draw is true, meaning if you leave these settings as is and press enter after typing a phrase, each character in the phrase (with a random color) will start drawing on the canvas.

There are three modes:

Drag, Stamp, and Snow (You can switch modes using the [Up/Down] keys, even during the drawing process)

Drag: Slides the individual characters across the screen a different way every time it goes off screen

Stamp: Places the character at a random place on the screen constantly

Snow: Trickles down your characters at varying speed with a small size and white color

The colors for each character for the Drag and Stamp modes change every time you switch to Snow mode and back

The “Draw” setting, whether set to true or false, allows you to either have the characters leave a trail on the screen as if you’re drawing with it, or don’t and see beautiful snow falling to the ground.

Example:

Phrase: “Hello”

Mode: Snow

Draw: false

snowHello

Phrase: Same as above

Mode: Same as above

Draw: true

snowDraw

You can change between different modes while drawing to create limitless possibilities!

Matrix!

allThree

Some drawings:

stringBoth stringDrag

Code:

dataVisualization

String input = "";
boolean visualize = false;
ArrayList<Letter> letters = null;
String mode = "Drag";
int x = width/2-300;
boolean firstSnow = true;
int myWidth = 1200;
int myHeight = 800;
boolean reset = true;
void setup() {
  size(1200, 800);
  textSize(25);
  fill(255);
}

void draw() {
  if (visualize) {
    if (letters == null) {
      letters = new ArrayList<Letter>();
      for (int i = 0; i < input.length(); i++) {
        letters.add(new Letter(input.charAt(i), myWidth, myHeight));
        if (mode == "Snow") {
          for (int j = 0; j < 10; j++) {
            letters.add(new Letter(input.charAt(i), myWidth, myHeight));
          }
        }
      }
    }
    if (visualize && !reset) {
      background(1);
    }
    for (Letter l : letters) {
      if (mode == "Drag") {
        l.drag();
      } else if (mode == "Stamp") {
        l.stamp();
      } else {
        l.snow(firstSnow);
      }
    }
    firstSnow = false;
  } else {
    background(1);
    textSize(20);
    fill(255);
    text("Enter some text and press [enter] to begin! \nMode [UP/DOWN] \nDraw [LEFT/RIGHT] \nHome [SPACE]", 25, 100);
    text(input, 50, height/2);
    stroke(255);
    line(x, height/2, x, height/2 + 50); 
    text("Mode: " + mode, 50, 700);
    text("Draw: " + reset, 50, 720);
  }
}

void keyPressed() {
  if (keyCode == UP) {
    if (mode == "Drag") {
      if (visualize && !reset)
        background(1);
      mode = "Snow";
      letters = null;
    } else if (mode == "Stamp") {
      if (visualize && !reset)
        background(1);
      mode = "Drag";
      firstSnow = true;
    } else {
      if (visualize && !reset)
        background(1);
      mode = "Stamp";
      letters = null;
    }
  }
  if (keyCode == DOWN) {
    if (mode == "Drag") {
      if (visualize && !reset)
        background(1);
      mode = "Stamp";
    } else if (mode == "Stamp") {
      if (visualize && !reset)
        background(1);
      mode = "Snow";
      firstSnow = true;
      letters = null;
    } else {
      if (visualize && !reset)
        background(1);
      mode = "Drag";
      letters = null;
    }
  }
  if (keyCode == RIGHT || keyCode == LEFT) {
    reset = !reset;
  }
  if (visualize) {
    if (key == ' ') {
      visualize = false;
      letters = null;
    }
  } else if (key == BACKSPACE) {
    if (input.length() > 0) {
      input = input.substring(0, input.length()-1);
    }
  } else if (key == ENTER) {
    if (input!="") {
      if (reset)
        background(1);
      visualize = true;
    }
  } else if (key != CODED) {
    input+=key;
  }
}

Letter

class Letter {
  char letter;
  float x;
  float x2;
  float x3;
  float y;
  float speed;
  float size;
  boolean sideways;
  color c;
  int w;
  int h;

  Letter(char letter, int w, int h) {
    this.letter = letter;
    x = random(0, w);
    y = random(0, h);
    this.w = w;
    this.h = h;
    speed = random(-50, 50);
    size = random(10, 100);
    float r = random(1, 2);
    c = color(random(0, 255), random(0, 255), random(0, 255));
    if (r > 1.5) {
      sideways = true;
    } else {
      sideways = false;
    }
  }

  public void drag() {
    //println(letter);
    textSize(size);
    fill(c);
    text(letter, x, y);
    if (sideways) {
      x+=speed;
    } else {
      y += speed;
    }
    if (y > 800 || y < 0  || x < 0 || x > 1000) {
      x = random(0, w);
      y = random(0, h);
      speed = random(-50, 50);
      size = random(10, 100);
      //c = color(random(0, 255), random(0, 255), random(0, 255));
      float r = random(1, 2);
      if (r > 1.5) {
        sideways = true;
      } else {
        sideways = false;
      }
    }
  }

  public void stamp() {
    //println(letter);
    textSize(size);
    fill(c);
    text(letter, x, y);
    x = random(0, w);
    y = random(0, h);
    size = random(10, 100);
    //c = color(random(0, 255), random(0, 255), random(0, 255));
  }

  public void snow(boolean firstTime) {
    if (firstTime) {
      y = 0;
      speed = random(5, 10);
    }
    size = 20;
    if (speed<0) {
      speed*=-1;
    }
    fill(#FFFFFF);
    textSize(size);
    text(letter, x, y);
    y += speed;
    if (y > h || y < 0  || x < 0 || x > w) {
      x = random(0, w);
      y = 0;
      size = 20;
      speed = random(5, 10);
      //c = color(random(0, 255), random(0, 255), random(0, 255));
    }
  }
}

 

Leave a Reply