NomNom: The Video Machine 2.0

December 17, 2016

Final Project | Physical Computing & ICM

My final project is a combination of what I've learned from the 2 classes, ICM & PComp and a collaborative project with Dror Ayalon.

Click on the photo to go to the project's page.

Project's Source Code

API | FOAAS

October 26, 2016

Week 8 | Data | API | JSON

FOAAS[ F**k Off As A Service ]
https://www.foaas.com/
https://alpha.editor.p5js.org/projects/B1uk976Je

I want to start of by apologizing in advance because my assignment this week is a bit verbally aggressive. I was so damn mad I though I was going to explode. I was on a rampage…. and when I stumbled upon this FOAAS API, I decided to channel my rage into getting the API to work.

Trying to get the API to work and print as I wanted really help me forget what I was even mad about… because all of my energy had totally shifted to p5!

Although, not exactly as I wanted but its great!

Also, I had a bit of trouble with .child() and .parent(). According to your youtube tutorial video, they should have worked the same way but I found that .child() gave error in chrome when inspected. However, they both draw the same result.

// Input from user
var button1;
var button2;
var input;
var clearInput;
var url = "https://www.foaas.com/";

var api1 = ["donut", "shakespeare", "linus", "king", "chainsaw", "outside", "madison",
            "nugget", "yoda", "bus", "xmas", "bday", "shutup", "bm", "gfy", "back", 
            "think", "keep", "look", "thinking", "blackadder", "deraadt", "problem", 
            "cocksplat"];
var api2 = ["this", "that", "everything", "everyone", "pink", "life", "thing", 
            "thanks", "flying", "fascinating", "cool", "what", "because", "bye", 
            "diabetes", "awesome", "tucker", "bucket", "family", "zayn", "mornin",
            "retard", "me", "single", "looking", "no", "give", "zero", "sake", 
            "maybe", "horse", "too", "ridiculous", "bag", "rtfm"];

var myname = " with love, mint";
var printText;


function setup() {
  noCanvas();

  // Grab the input and button from HTML
  input = createInput();
  input.id("input");
  // input.position(100, 50);

  button1 = createButton('Go! Go! Go!');
  button1.id("button1");
  button1.mousePressed(search);

  // Clear page  
  button2 = createButton('Clear');
  button2.id("button2");
  button2.mousePressed(clearDiv);

  var div = createDiv("");
  div.id("print");
}

// Clear
function clearDiv(e) {
  console.log('clear')
  var parentDiv = document.getElementById("print");
  parentDiv.innerHTML = '';
}

// Run the API call
function search() {
  console.log('im search')

  var chance = Math.random(0, 1);
  var randomVal1 = Math.floor(Math.random() * api1.length - 1);
  var randomVal2 = Math.floor(Math.random() * api2.length - 1);;
  var url1;
  var url2;
  var term = input.value();

  if ( chance < 0.5) {
    console.log('im url1');
    url1 = url + api1[randomVal1] + "/" + term + "/" + myname;     // URL for querying the times
    loadJSON(url1, gotData, 'json');        // Query the URL, set a callback
  }
  else {
    console.log('im url2')
    url2 = url + api2[randomVal2] + "/" + myname;
    loadJSON(url2, gotData, 'json');
  }
}

// Request is completed
function gotData(data) {
  console.log(data);

  printText = createP(data.message + data.subtitle);
  var parentDiv = document.getElementById("print");
  printText.parent(parentDiv); 
}

Clean Code using Function()

October 4, 2016

Week 4 | Assignment
Clean Code

Click on the Player to Drag & Drop anywhere on the field.

Apart from cleaning up the code via the use of function(), I also added and tweaked the sketch a little bit from last week. The added features are:

Ball's movement trials.
Player's movement trials.
The ball now bounce within the field.

LEFT: Cleaner Code: https://alpha.editor.p5js.org/projects/ByRswwgA

RIGHT: Last Week (very long) Code: https://alpha.editor.p5js.org/projects/rkbsUwgC

I wonder if there is an easier way to attach or add .js files into the sketch.js file that I'm working on. From what I can tell p5 IDE cannot drag and drop file from a file in the IDE. In order for me to clean up a very long code from last week, I have to separate the player, the field, the ball into individual files, then downloaded them into my laptop, and then added these files back into a new sketch in the p5 IDE in the project-folder. Maybe, there is a way but I couldn't find it yet.

American Football

September 30, 2016

Week 3
Assignment

This week I was paired up with Grant to work on the homework together. I really enjoyed working with him! He tried to teach me the basic rules of American Football, but….. I still don’t really get it....

We agreed on that we should create something that we like and I overheard him talking about American Football a few times already so it was perfect because I’ve been obsessing with bubbles, ellipse() and bouncing balls since week 1.

I learned that using image() is very different than drawing ellipse() to bounce off the canvas, especially when I want it to spin too! rotate() and translate() is still pretty confusing to me, But, I eventually got it to work with the help of Wippy, the second year ITPers. However, the football (image file) still couldn’t bounce correctly…..

After we’ve combined our sketches, the result is AWESOME!!!