API | FOAAS

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); 
}

HTML | CSS | DOM | p5.gif.js

Week 7
p5  |  HTML  |  CSS  |  DOM  |  p5.gif.js  

---

This week, I mess around with the p5.gif.js and HTML and move to Sublime and terminal for better handling files and code......

I don't know how to share the embedded code via sublime so here is a video screen of the result. Also, I don't know what happen to the text on the right. It's supposed to write "This is a FLYING DOG!!" The text "This is an EVIL CATS!!" works fine, though. I also added a little bit of control using mouseMoved() and keyPressed() function to the sketch.

After I've delved into the world of gif art in internet, I think I got more interested in how I an manipulating frames or pixels of the videos of pictures

Full Code Here.
https://drive.google.com/open?id=0B2uiTzJTtiBhNnd2c1pQMng5cDg

var canvas;
var dogGif, catGif, galaxyGif;

var h1;
var x = 0;
var xSpeed = 0.5;
var y = 0;

var text1, text2, text3, text4, text5, text6, text7, text8;
var h1;

function setup() {
  canvas = createCanvas(500, 500);
  canvas.position(10, 50); 
  galaxyGif = loadGif('galaxy.gif');
  dogGif = loadGif('dog.gif');
  catGif = loadGif('cat.gif');

// Dog
  text1 = createP("<<<<<<<This");
  text1.style("font-family", "monospace");
  text1.style("color", "#FF00ee");
  text1.style("font-size", "18pt");
  text1.style("padding", "10px");

  text2 = createP("<<<<<is a");
  text2.style("font-family", "monospace");
  text2.style("color", "#FF00ee");
  text2.style("font-size", "20pt");
  text2.style("padding", "10px");

  text3 = createP("<<<FLYING");
  text3.style("font-family", "monospace");
  text3.style("color", "#FF00ee");
  text3.style("font-size", "22pt");
  text3.style("padding", "10px");

  text4 = createP("<<DOG!!");
  text4.style("font-family", "monospace");
  text4.style("color", "#FF00ee");
  text4.style("font-size", "30pt");
  text4.style("padding", "10px");

// Cat
  text5 = createP("This>>>>>>>>");
  text5.style("font-family", "monospace");
  text5.style("color", "#FF00ee");
  text5.style("font-size", "18pt");
  text5.style("padding", "10px");

  text6 = createP("is an>>>>>>");
  text6.style("font-family", "monospace");
  text6.style("color", "#FF00ee");
  text6.style("font-size", "20pt");
  text6.style("padding", "10px");  

  text7 = createP("EVIL>>>>>>");
  text7.style("font-family", "monospace");
  text7.style("color", "#FF00ee");
  text7.style("font-size", "22pt");
  text7.style("padding", "10px");

  text8 = createP("CAT!!>>");
  text8.style("font-family", "monospace");
  text8.style("color", "#FF00ee");
  text8.style("font-size", "30pt");
  text8.style("padding", "10px");

  // h1 = createElement('h1', 'Press Any Key.');
  // h1.positio(550, 550);
}

function draw() {
  background(0);
  image(galaxyGif, 0, 0);
  image(dogGif, 0, 0);
  image(catGif, 250, 250);

  text1.position(x + 280, y + 35);
  text2.position(x + 280, y + 75);
  text3.position(x + 280, y + 115);
  text4.position(x + 280, y + 155);
  text5.position(x, y + 290);
  text6.position(x, y + 330);
  text7.position(x, y + 380);
  text8.position(x, y + 420);
  x = x + xSpeed;
  if (x > width - 430 || x < 0) {
    xSpeed = -xSpeed;
  }

}

function mouseMoved() {
  if (dogGif.loaded() && !dogGif.playing()){
    var totalFrames = dogGif.totalFrames();
    var frame = int(map(mouseX, 0, width, 0, totalFrames));
    dogGif.frame(frame);
  }

    if (catGif.loaded() && !catGif.playing()){
    var totalFrames = catGif.totalFrames();
    var frame = int(map(mouseX, 0, width, 0, totalFrames));
    catGif.frame(frame);
  }
}

function keyPressed() {
  if (dogGif.playing()) {
    dogGif.pause();
  } else {
    dogGif.play();
  }

  if (catGif.playing()) {
    catGif.pause();
  } else {
    catGif.play();
  }

  if (galaxyGif.playing()) {
    galaxyGif.pause();
  } else {
    galaxyGif.play();
  }
}

Downloaded gifs from www.giphy.com

Synthesis

p5.js  |  Arduino  |  p5 Serial Control

Friday Oct 7, 2016

---

Synthesis Challange

"The focus for today is a design challenge: Physical Variable.
Create an experience using p5 that responds to a single physical interaction. Think creatively about your physical interaction -- is it a switch, a sensor, attached to your body, invisible?"

https://github.com/ITPNYU/ICM-2016/wiki/Synthesis

---

At the beginning, we struggled a little bit because we could not figure out why the line plane does not tilt the way we mapped it out.

We also see these weird numbers when we printed out the values.

After a while of debugging and processes of plugging and unplugging and changing out the potentiometer, we finally figured out the reason….which I believe it has to do with the port between Arduino and p5 IDE. They were open at the same time, between Arduino and p5 IDE.

Not yet mapped value

Once we got the rotation working, we mapped out the value to -30 to 30

Mapped value -30, 30

We wanted to create balls to fall onto the line plane and make a sort of game out of it, so that the balls stay on the plane which it would be controlled by physical variable, as well as trying out different physical variable, but we didn't get a chance to do this.

View fullsize

View fullsize

View fullsize

American Football

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!!!

Elements

Looking at the code, I learned that there are a lot of elements needed to break down and drawn. Thank You Grant!!

1. Ball
2. Player
3. Numbers
4. Lines
5. Endzones

View fullsize

View fullsize

View fullsize

View fullsize

View fullsize

View fullsize

Hello p5.js

Week 01  |  Assignment

Bubbles ~ Bubbles ~

Bubbles - 01/001

---

Bubbles - 01/002

---

Bubbles - 01/003

---