Introduction to Computational Media

November 29, 2017

Social Tree

Basic Concept Creating a Tree that, instead of water and minerals, thrive on “likes” from it’s very own facebook page. The Social Tree is a physical sculpture made of wood and electronics with a leaf attached to one of its branches. It that will have it’s own Facebook Page where it will post pre written messages asking for more attention (likes) from other users. If no likes are given, the sculpture will release is “leaf” and will post how sad it is. Fabrication of the Foam and Wood prototypes HERE. (Update Dec 14, 2017 – LikeTimer Clock added to the project HERE) ICM – PCOM – Fabrication This project started as a Physical Computing experiment on creating physical consequences from […]
November 11, 2017

ICM – Final Project – Auto Video News Generator

Basic Outline presented in class Nov 8: System that reads data on a news article library, and generates a video version of it. The tone can be practical – using actual images and words in the article -, or more experimental – mixing and matching unrelated images while giving a new meaning on the original news.   The idea is to use an algorithm capable of reading a written news story and create a video version of it like the one bellow References NYTIMES Json library –    
October 23, 2017

ICM – Animated Data Graph

Part 00 Code P5 code ” graph 00″ Here Not sure where I’m going with this, but I’d like to have an animated bar graphic controlled by some external JSON list. For now, I’m just happy to have objects running. Let’s see if I can animate them. At this moment the height of the map is simply controlled by multiplying its height by “i” generated in a simple “for” loop inside the “graph.js” class. This means I’m unable to control each graph individually. I’ll need to find a way to do it.   Part 01 Code Here Going through some trial and error with classes. Tried to use the function “mouseX” as a parameter, but It didn’t work. I had no […]
October 15, 2017

ICM – Bouncing Ball Saga 6 – Function (and class)

Creating a Bouncing Ball Function Before I return to trying to make my slider control (bouncing ball saga 5), I wanted to create a Bouncing Ball function. (link to ball function 01 – multiple balls; no animation HERE) In order to create several different bouncing balls, without having to write the same code over and over, I have to create a Ball function. After some trial and error it looked like this: function BouncingBall(ballPos, ballSpeed, ballColor, ballSize) { fill(ballColor); let x = 0; while (x < 400) { ellipse(x, ballPos, ballSize, ballSize); x = x + ballSpeed; } For the first time I think I understand what the space between brackets () mean. There you can create any variable. For this […]
October 3, 2017

ICM – Bouncing Ball Saga 5 – UI Slider (part 2)

Press HERE for the P5 code Adding boolean functions after trying them successfully after watching Shiffman’s video on Boolean Variables (here). before using mouse control for the slider, I want to try detecting the mouse position relative to the slider button, even if it moved from its starting position. For now, just trying to change it’s color, but it keeps blinking, maybe because it is looping the 2 “fill” functions, moving from blue to white very fast.       let x = 0;//start X position let y = 0;//start Y position let speed = 1;//controls de speed of the ball let bounce = 1;//bounces the ball let slider = 0; //UI slider let sliderControl = 0; //UI slider Y position […]
October 3, 2017

ICM – Bouncing Ball Saga 5 – UI Slider (part 1)

Now that I’m feeling even more adventurous, I decided to add a slider UI to control the speed of this cursed bouncing ball. Click HERE to see and run the updated code. I started by creating new variables for the slider. My order of action was to first create the objects directly on the “draw”  or “setup”. In this case it was the “line” and the “slider” rectangle. Then I see which variables I will need to create in order to make these objects act the way I want. I created “sliderControl” to control (yeah) to call the Y position of the mouse and use later to control de speed. But I have a problem: The mouse controlled slider has no limits; […]
October 3, 2017

ICM – Bouncing Ball Saga 4 – mouse control

Third or fourth day of my bouncing ball madness. My fellow ITPeers are creating beautiful animated kaleidoscopes of code, while I keep obsessing on solidifying my dumb bouncing ball techniques. Today I started from scratch once again, but this time I added a new variable “bounce” in order to control the variable “speed” using the mouse X coordinates (divided by 100). Why create another variable and simply multiplying ” speed” by ” -1″  as always? It seems that, if I don’t do it as a variable, when the “Draw” loop restarts it resets the ” -1″ command from the “If” statement. This makes the ball vanish on the lower screen (not bounce). Also made a mistake by creating a double […]
October 2, 2017

ICM – Bouncing Ball Saga – 3 – Color Bounces

Managed to add X and Y bounces using “random” and 2 similar “IF” statements. Also added a “For” statement for changing the colors, but I’m not sure of what is really going on here. LINK HERE let x = 0; let y = 0; let speedY = 1; let speedX = 1; function setup() { createCanvas(400, 400); x = 200; background(220); } function draw() { ellipse (x, y , 20, 20); y = y + speedY; x = x + speedX; noStroke(); if (y <=0 || y >= height){ speedY = speedY * -1; speedX = speedX + random(-5,2); } if (x <=0 || x >=width){ speedX = speedX * -1; } for (var i =0; i <400; i +=60){ […]