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.

Final Project Proposal B

November 18, 2016

Week 10 | PComp + ICM | Physical + Digital GUI

Final Project Proposal A

November 11, 2016

Week 10 | Ideas | Inspirations | Procrastination......

This is a Final Project Proposal of what I wanted to do.... but I think I should focus on my other idea that involves a project from Physical Computing Class. Me and Dror, we are developing a Video Machine [ continuation process since Midterm ] But I'm just going to post what I wanted to do, so maybe sometime in the near future I can make these sketches.

I want to make series of Drawings of Natural scenes through experimentation with Perlin Noise + Flow Field.

I want to experiment with Perlin Noise + Flow Field generating clouds and ocean and maybe have some underwater creatures floating in my sketches.

Favourite Hobbies = Diving ~~~

^^^^ Me in the photos

A glimpse at my Pinterest inspiration page.

Inspirations

Natural Behavior | Phenomena
Things that effect another thing
Swarm Behavior | Wind
Emerging of Life through randomness

Inspirations Artists

Sol Lewitt
Casey Reas
- Instruction | Procedural Art
- Simple Rule sets

Title

Box of Wonder
Natural Bliss

Context

For me? To help me to procrastinate faster

Questions

Too simple? [ want to focus on coding skills + drawings ]

What are you unsure of? Conceptually and Technically.

Self Running object not just show on a laptop screen.
Raspberry Pi + Screen => Fabrication involve
Time?

Video + Sound

November 10, 2016

Week 9 | Video + Sound

https://github.com/dodiku/the_video_machine

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

HTML | CSS | DOM | p5.gif.js

October 21, 2016

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

October 13, 2016

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.

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