TEXT Generator

Concept

i wanted to keep going with the idea of being trapped. so i decided  to make a text that signifies that. The point of the project that i made was it being a cry for help that only shows for flashes of time as if the ball is trying to tell people its message but it’s not that clear so can only see it if you focus. it is clearly in prison since we can see the prison bars around it.

Process 

I made a code creating diffrent variables for mu prisoner ( the ball) and the x and y.

I then used the pre load to input the font i wanted to use which i downloaded for the web

I then imputed the text to the code.

I used my past project in order to create the prison cell .

I then created a class for my bouncing ball.

let myBouncingBall;
let x= 0
let y=0
let spacing = 20;

function preload() {
  font = loadFont("3D.TTF");
}


function setup() {
  createCanvas(400, 400);
  myBouncingBall = new BouncingBall();
  text ("FREE ME PLEASE!!!", 30,100)
  
}


function draw() {
  background(54);
   textFont(font);
  textSize(50);
  noStroke();
  text("FREE ME PLEASE!!!", 30, 100)
   stroke(56);
  if (random(7) < 0.9) {
    noStroke();
    (x, y, random(8, 12));
    fill(random(255), random(0), random(170));
  } else {
    stroke('#6cd8eb');
    line(x + spacing, y + spacing, x, y);
  }
  x = x + spacing; 
  if (x > width) { 
    x = 0;
    y = y + spacing;
  }
   for (let lineX = 0; lineX <= 600; lineX += 9) {
    line(lineX, 0, lineX, height);
  }
  ellipse (width/2, height/2, 154, 154)
  myBouncingBall.move();
  myBouncingBall.collision();
  myBouncingBall.draw();
   
  
}


class BouncingBall {
  constructor() {
    this.xPos = width / 2;
    this.yPos = random(100, 300);
    this.xSpeed = 4;
    this.ySpeed = 7;
  }

  move() {
    this.xPos += this.xSpeed;
    this.yPos += this.ySpeed;
  }
  collision() {
    if (this.xPos <= 150 || this.xPos >= (width - 150)) {
      this.xSpeed = -this.xSpeed;
    }
    if (this.yPos <= 150 || this.yPos >= (height - 150)) {
      this.ySpeed = -this.ySpeed;
    }
  }
  draw() {
    circle(this.xPos, this.yPos, 30);
    
  }
}

 

Improvements 

this project could have been easier on the eyes since it kind of hurts if you look at it for a long period of time. i would have liked the ball not to lag when you click it sometimes.