that girl loves terrible days

“that girl loves terrible days” is a p5js sentece generator.
Drag to choose random words for each vertical section, scroll while dragging,
and find your sentence by moving it out of canvas.

type: group (:KJ Ha)
date: Sep 23, 2019

1. fade away effect

let speed = 8;

if(mouseY < height*2/5){
bright1 = 0;

bright1 += speed;

2. random sentence

let words_1 = ['he', 'that girl', 'Mimi', 'apple'];
let words_2 = ['loves', 'sees', 'despises', 'finds', 'misses'];
let words_3 = ['terrible', 'great', 'punctual', 'lonely', 'doubtful'];
let words_4 = ['days', 'candies', 'students', 'apples'];

3. additional effects 
-for mouseOver( ) and mouseOut( )
: it is bit redundant because I had to put effect on on top of the previous rectangle in draw function.
that is why it uses call backs, and then boolean variable(on) then to conditional statement. 

let cnv;
let on = false;

function setup( ){

function changeColor( ){
    on = true;

function changeBack( ){
    on = false;

function draw( ){


4. fix minor detail
-as written here, the boundaries are set height-30(mouseY) and 370(mouseX), because when I first wrote full canvas size,
I had a bug when the mouse was out of canvas, the words were keep showing random when is was supposed to happen just within the boundaries.
I found out that it recognizes the mouseX and mouseY still in the boundary if it “disappears” to out of canvas.
To fix this, I gave 30px offset each side.

if (mouseY > height*1/5 && mouseY < height*2/5 &&mouseX>30&&mouseX<370) {
    word_1 = random(words_1);
        } else if ((mouseY > height*2/5) && (mouseY < height*3/5)&&mouseX>30&&mouseX<370) {
    word_2 = random(words_2);
        } else if ((mouseY > height*3/5) && (mouseY < height*4/5)&&mouseX>30&&mouseX<370) {
    word_3 = random(words_3);
        } else if ((mouseY > height*4/5) && (mouseY < height-30)&&mouseX>30&&mouseX<370) {
    word_4 = random(words_4);

© ymchoi 2019