Calligram (textArt)

//Create a user interface for your canvas sketch using the DOM library.

//The interface should control the following parameters in your sketch:

//size, color, animationSpeed, isAnimated.

//Think about how you might trigger or change these parameters with

//buttons, sliders, hover interaction, etc.

​

/*Text manipulation based on the Processing text tutorial @

 http://www.processing.org/tutorials/text/ */

​

//Particle Systems for each object

​

// Sun object

class Sun {

  constructor(pos, r, word, letter) {

    this.pos = pos;

    this.color = 'yellow';

    this.name = 'sun';

    this.radius = r;

    this.wordwidth = word;

    this.letterwidth = letter

    this.arclength = 0;

  }

  drawSun() {

    push();

    // Start in the center and draw the circle

    translate(this.pos.x, this.pos.y);

    // keep track of position along the curve

    //for each word

    for (var s = 0; s < this.radius * 2; s += this.wordwidth) {

      // for each letter

      for (var i = 0; i < this.name.length; i++) {

        // check the width of each character

        var currentChar = this.name.charAt(i);

        var w = textWidth(currentChar) + this.letterwidth;

​

        // center each letter to half the width of the circle

        this.arclength += w / 2;

        // angle in radians is the arclength divided by the radius

        // starting on the left side of the circle by adding PI

        var theta = PI + this.arclength / this.radius;

​

        push();

        // translate to the curve of the circle radius

        translate(this.radius * cos(theta), this.radius * sin(theta));

        // rotate the letter

        rotate(theta + PI / 2);

        // display the word shape

        fill(this.color);

        text(currentChar, 0, 0);

        pop();

        // Move halfway again

        this.arclength += w / 2;

      }

    }

    pop();

  }

}

​

//Cloud object

class Cloud {

  constructor(pos, radius, word, letter) {

    this.pos = pos;

    this.color = 'white';

    this.name = 'clouds';

    this.radius = radius;

    this.wordwidth = word;

    this.letterwidth = letter;

    this.arclength = 0;

  }

  drawClouds() {

    push();

    // start in the center and draw the circle

    translate(this.pos.x, this.pos.y);

    //keep track of our position along the curve

    //for each word

    for (var c = 0; c < this.radius * 2; c += this.wordwidth) {

      // for each letter

      for (var i = 0; i < this.name.length; i++) {

        // check the width of each character

        var currentChar = this.name.charAt(i);

        var w = textWidth(currentChar) + this.letterwidth;

​

        // center each letter to half the width of the circle

        this.arclength += w / 2;

        // angle in radians is the arclength divided by the radius

        // starting on the left side of the circle by adding PI

        var theta = PI + this.arclength / this.radius;

​

        push();

        // translate to the curve of the circle radius

        translate(this.radius * cos(theta), this.radius * sin(theta));

        // rotate the letter

        rotate(theta + PI / 2);

        // display the word shape

        fill(this.color);

        text(currentChar, 0, 0);

        pop();

        // move halfway again

        this.arclength += w / 2;

      }

    }

    pop();

  }

}

​

//land object

class Land {

  constructor(y) {

    this.name = 'land';

    this.color = 'brown';

    this.y = y;

  }

  drawLand() {

    push();

    //create line of words, offset the begining to show

    //first letters of the word

    for (var i = 20; i < width; i += 40) {

      //display word shape

      fill(this.color);

      text(this.name, i, this.y);

    }

    pop();

  }

}

​

//Water object

class Water {

  constructor() {

    this.name = 'water';

    this.color = 'blue';

    this.x = 0;

    this.angle = 0;

  }

  drawWater() {

    push();

    //translate to the lower portion of the sketch

    translate(0, height - 200);

    while (this.x < width) {

      //set range of oscillation

      var amplitude = height / 50;

      //set y coors with sin() value

      var y = sin(radians(this.angle)) * amplitude;

      //display word shape

      fill(this.color);

      text(this.name, this.x, y);

      text(this.name, this.x, y + 25);

      text(this.name, this.x, y + 50);

      text(this.name, this.x, y + 75);

      text(this.name, this.x, y + 100);

      text(this.name, this.x, y + 125);

      text(this.name, this.x, y + 150);

​

      this.x += 50;

      this.angle += 40;

    }

    this.x %= width;

    pop();

  }

}

​

​

// The arrays for objects

var suns = [];

var sun;

var clouds = [];

var land = [];

var water = [];

​

// event variables

var btn;

var slider;

var colbox;

​

//color and animation variables

var bg;

var animate = true;

​

function setup() {

  createCanvas(windowWidth, windowHeight);

  frameRate(10);

  bg = color(50, 170, 255);

​

  //push new sun objects

  suns.push(new Sun(createVector(width - 200, height / 6), 80, 20, 10));

  suns.push(new Sun(createVector(width - 200, height / 6), 60, 20, 10));

  suns.push(new Sun(createVector(width - 200, height / 6), 40, 20, 10));

​

  //push new cloud objects

  clouds.push(new Cloud(createVector(100, 250), 40, 30, 4));

  clouds.push(new Cloud(createVector(150, 200), 60, 36, 6));

  clouds.push(new Cloud(createVector(210, 225), 50, 33, 3.5));

​

  //push new cloud objects

  clouds.push(new Cloud(createVector(width / 2, 250), 40, 30, 4));

  clouds.push(new Cloud(createVector(width / 2 + 50, 200), 60, 36, 6));

  clouds.push(new Cloud(createVector(width / 2 + 110, 225), 50, 33, 3.5));

​

  //push new cloud objects

  clouds.push(new Cloud(createVector(width / 4, 150), 40, 30, 4));

  clouds.push(new Cloud(createVector(width / 4 + 50, 100), 60, 36, 6));

  clouds.push(new Cloud(createVector(width / 4 + 110, 125), 50, 33, 3.5));

​

  //push new land objects

  land.push(new Land(height - 250));

  land.push(new Land(height - 275));

​

  //push new water object

  water.push(new Water());

​

  // create checkbox to control color param

  colbox = createCheckbox('', false);

  colbox.position(width / 4, height / 2);

  colbox.changed(changeColor);

​

  // create button to control animation param

  btn = createButton('Animation');

  btn.position(width - 350, height / 2);

  btn.mousePressed(isAnimated);

​

  // create slider to control size and speed params

  slider = createSlider(15, 30, 20);

  slider.position(width / 2.2, height / 2);

​

  textAlign(CENTER);

  smooth();

}

​

​

function draw() {

  //create sky

  background(bg);

  //change word shape size and rotation speed

  var val = slider.value();

  textSize(val);

​

  //create land

  for (var l = 0; l < land.length; l++) {

    var lnd = land[l];

    lnd.drawLand();

  }

​

  //create sun

  for (var s = 0; s < suns.length; s++) {

    var sun = suns[s];

    sun.drawSun();

  }

​

  //create clouds

  for (var c = 0; c < clouds.length; c++) {

    var cloud = clouds[c];

    cloud.drawClouds();

  }

​

  //create water

  for (var w = 0; w < water.length; w++) {

    var wtr = water[w];

    wtr.drawWater();

  }

​

  //label for checkbox

  fill('black');

  text('Color / B & W', width / 4, height / 2 - 10);

​

  //label for animation button

  text('Click to stop / start animation', width - 300, height / 2 - 25);

  text('(Click twice the first time)', width - 300, height / 2 - 5);

​

  //label for slider

  text('Slide to change Speed and Size', width / 2, height / 2 - 10);

}

​

//Color changeing function

function changeColor() {

  // if the box is checked

  //change all the word shapes to black

  if (this.checked()) {

    for (var s = 0; s < suns.length; s++) {

      var sun = suns[s];

      sun.color = 'black';

    }

    for (var c = 0; c < clouds.length; c++) {

      var cloud = clouds[c];

      cloud.color = 'black';

    }

    for (var w = 0; w < water.length; w++) {

      var wtr = water[w];

      wtr.color = 'black';

    }

    //create land

    for (var l = 0; l < land.length; l++) {

      var lnd = land[l];

      lnd.color = 'black';

    }

    //background white

    bg = 'white';

  }

  // if the box us unchecked

  //use the word shapes object color

  else {

    for (var s = 0; s < suns.length; s++) {

      sun = suns[s];

      sun.color = 'yellow';

    }

    for (var c = 0; c < clouds.length; c++) {

      var cloud = clouds[c];

      cloud.color = 'white';

    }

    for (var w = 0; w < water.length; w++) {

      var wtr = water[w];

      wtr.color = 'blue';

    }

    //create land

    for (var l = 0; l < land.length; l++) {

      var lnd = land[l];

      lnd.color = 'brown';

    }

    // background light blue

    bg = color(50, 170, 255);

  }

}

​

// animation function

function isAnimated() {

  // if animate variable is false

  if (animate === false) {

    // stop draw loop 

    noLoop();

    //switch animation variable to true

    animate = true;

  }

  // if animation variable is true

  else {

    // start draw loop

    loop();

    //switch animation variable to false

    animate = false;

  }

}

​

/*THANKS for reviewing my code! Hope you enjoyed this sketch! */