Hello everyone and welcome to my final project blog post! For my final project, I decided to revisit and extend my Vibe Check project. My initial foray into p5.js was so satisfying that I wanted to continue making my dream for Vibe Check a reality.

To begin, I set up my Vibe Check again and wrote down on some sticky notes some things that I would like to improve in this project or things I would like to add. These notes included fixing the joystick, incorporating 3D objects, and acquiring music. Unfortunately, my attempts to fix my joystick, which moved in the opposite direction of where you pointed it, were met with failure and I quickly gave up on finding what the issue was. 

Otherwise, based on these brainstorming sticky notes, I started researching how to go about creating if/else statements on p5.js to cause different reactions based on where the “vibe” was charted. In the first installment of Vibe Check, I kept coming across a Youtuber called The Coding Train and it was finally during this project that I was able to find exactly what I was looking for. Specifically, his tutorial on Conditional Statements in p5.js was extremely useful to me and helped me set up branching logic in my program. 

Figuring out how to cause certain reactions when on specific parts of the screen was the most difficult part of this project as I am a novice JavaScript coder. To overcome this gap in knowledge, I used p5.js’ excellent documentation on images. Through these guides and extensive debugging, I finally figured out which combination of logic operators and variables would make the effect I wanted my sketch to have. Figuring this out gave me the “aha” moment I was looking for and helped me feel confident in my ability to load 3D models into my environment.

Once more, I watched a Coding Train tutorial to learn how to use WebGL, which is the feature that allows p5.js users to upload and display 3D objects. After watching this tutorial, I began to explore the web for Cat in the Hat 3D files. I had a lot of issues trying to find a 3D file that worked and was simple as p5.js had a hard time reading complex vertices. After much spelunking, I finally came across this Cat in the Hat 3D object that I quite liked and was simple enough for p5.js to read. Furthermore, I used the material and texture options in p5.js to give my models more customization. 

Lastly, I wanted to include music or sound in one of my branching statements. I had not worked with sound in p5.js before, so I consulted their very useful sound library documentation which taught me how to load and play sound. For my project, I decided to include a simple sound that “glitches” based not on a p5.js sound effect, but flawed logic in my branching statement. My sound, which is a man saying “vibe check”, was generated using a text to speech generator and took advantage of an if loop to play the sound multiple times out of sync. I think that exploiting the technicalities of my conditional statements is something I did well in this project as it demonstrates my simultaneous ineptitude and dexterity with code. Also, including sound was something I felt important to have in my project and was fairly easy after I consulted the proper documentation. Below is my Vibe Check: RELOADED.

Working with p5.js and Arduino has been a dream. I never thought that I would get the opportunity to work with digital and physical components simultaneously before. Even though at times it has been utterly frustrating, this project has also been very fulfilling for me as I have built my confidence in code and tinkering. While there are still improvements I would like to make on this assignment (*cough*the darn joystick*), I had lots of fun making this project and enjoyed exploring coding in a way that I have not had the confidence or ability to do before. Find my code below.

p5.js:

var serial;
var portName = 'COM6';
var xValue = 0;
var yValue = 0;
var button = 1;
angle = 0;

function preload() {
  cat_in_hat = loadModel('cat_in_hat.obj', true);
  jenn_img = loadImage('jenn.png');
  cat_hat = loadImage('cat_hat_small.png');
  vibe_check_txt = loadFont('comic_sans.otf');
  song = loadSound('speech.mp3');
  fur = loadImage('fur.jpg');
}

function setup() {
  createCanvas(800, 400, WEBGL);
  serial = new p5.SerialPort();
  serial.on('list', printList);
  serial.on('connected', serverConnected);
  serial.on('open', portOpen);
  serial.on('data', serialEvent);
  serial.on('error', serialError);
  serial.on('close', portClose);
  serial.open(portName);
}

function draw() {
  background("#100c08");
  fill("#00FF00");
  textSize(16);
  textFont(vibe_check_txt);
  textAlign(LEFT, TOP);
  words = text("VIBE CHECK LADZ", 5, 5);
  image(jenn_img, 5, 15, 0, 0);
  imageMode(CENTER);
  noStroke();
  
  if (button === 0) {
    image(cat_hat, xValue / 2, yValue / 2);
    song.stop();
    
  } if (button === 1 && xValue > jenn_img.width) {
    clear();
    background("#d9fdff");
    rotateX(angle);
    rotateY(angle * 1.3);
    rotateZ(angle * 0.7);
    angle += 0.03;
    
    normalMaterial();
    model(cat_in_hat);
    song.play();

  } if (button === 1 && xValue < jenn_img.width) {
    ambientLight(200);
    ambientMaterial(200, 87, 70);
    rotateX(angle);
    rotateY(angle * 1.3);
    rotateZ(angle * 0.7);
    angle += 0.03;
    model(cat_in_hat);
}
} 
  
function printList (portList) {
  for (var i = 0; i < portList.length; i++) {
    console.log(i + " " + portList[i]);
  }
}

function serverConnected() {
  console.log('connected to server.');
}

function portOpen() {
  console.log('the serial port opened.')
}

function serialEvent() {
  var data = serial.readLine();
  if (data.length > 0) {
    //console.log(data);
    var sensors = split(data, ",");
    if (sensors.length > 2) {
      xValue = sensors[0];
      yValue = sensors[1];
      button = int(sensors[2]);
    }
  }
}

function serialError(err) {
  console.log('Something went wrong with the serial port.' + err);
}

function portClose() {
  console.log('The serial port closed.');
}

Tagged with: Coding

Categorised as: Arduino