ICM WEEK 9: VIDEO & SOUND

Happy Halloween y’all. Over the last 10 days I have been making a short film for a  halloween inspired short film festival/party. I decided to make my film about an alien abductee trying to convince the world of his experience with extra terrestrials. I chopped up my film and designed my project as a choose your own adventure/surveillance style video page. It was a fun project to design, however implementing the videos to play/pause/cue as I wanted was difficult. I worked with the residents to de-bug, re-code, de-bug, re-code for about 2 days to get the videos and CSS style elements to work in tandem. There were many times where I wish I could have just spoken to p5 to tell it exactly what to do i.e. “p5, please align all the button to the right” – however, my machine did not listen to my voice, only to my code. I used a closure for the first time to have to make the videos toggle correctly – I think my brain is still trying to rebuild itself and being broken by that logic.

Unidentified U.N.I.I.F.

I think this is a strong medium for me to work in and I look forward to focusing on a larger project using narrative elements.wallpaperunif

Visual Language, Physical Computing and ICM week 7: Circle Manipulation & Linear Color Wheel

—> Color Wheel Video  <— Visual Language

—> Linear Color Wheel <— Visual Language & ICM

—> Circle Manipulation <—  PCOMP

—> 2nd look at Circle <— PCOMP

With our 7 week courses coming to an end and our midterm projects quickly approaching, this week has been hectic. Trying to navigate through this cramped and busy road lead to my cram all of my bags into one car and drive – so to speak…  I attempted to link together my ICM, Physical Computing, and Visual Language projects for one large and interlinked project that could encompass site, touch, and color. When trying to think of individual projects for this week I came to rely on my influences that I have soaked in over the last half semester, with one of the largest of those influences being shapes. When I got my final project for Visual Language, a color composition that requires a color hue visual test, I immediately thought of the color wheel – and with color wheel came potentiometer, and with potentiometer came a revolving visuals. I thought about the ways colors interest me and what kind of personal emotions they evoke from me. I did some research and found a vast array of emotional color wheels – each color on the diagram representing a different emotion and each emotion represents a different color. I then thought about trying to construct an emotional color wheel with hue, brightness, and saturation that could be controlled with a potentiometer, yet, I found this to be very advanced. What I ended up with while trying to create a moveable and transformative emotional color wheel are three projects which ultimately work, but failed to become how I imagined them working together. In the end we are left with a circle that can be manipulated with a potentiometer, a linear color wheel (the words are matched with a color and they move linearly with the click of a mouse) and a video demonstrating how color and words can help each other express meaning. I know these projects have potential to work together and I know that they are things I want to come back to in the very near future. I can say that although I did perhaps fail in some aspects, I  did succeed in making satisfying projects and learning an incredible amount over the week.

tumblr_ltroqt9UTb1r0sj5bo1_500 copy

Screen Shot 2015-10-08 at 3.09.56 PM

Screen Shot 2015-10-13 at 4.21.24 PM

Physical computing Code: Here we can manipulate the size of two circles with a potentiometer. 

var serial; // variable to hold an instance of the serialport library
var portName = ‘/dev/cu.usbmodemfd121’; // fill in your serial port name here
var inData; // for incoming serial data
var options = { baudrate: 9600}; // change the data rate to whatever you wish
serial.open(portName, options);

function setup() {
createCanvas(windowWidth, windowHeight);
img = loadImage(“assets/earth3.jpg”);
serial = new p5.SerialPort(); // make a new instance of the serialport library
// serial.on(‘list’, printList); // set a callback function for the serialport list event
serial.on(‘connected’, serverConnected); // callback for connecting to the server
serial.on(‘open’, portOpen); // callback for the port opening
serial.on(‘data’, serialEvent); // callback for when new data arrives
serial.on(‘error’, serialError); // callback for errors
serial.on(‘close’, portClose); // callback for the port closing
function serverConnected() {
println(‘connected to server.’);
}

function portOpen() {
println(‘the serial port opened.’)
}

function serialEvent() {
inData = Number(serial.readLine());
}

function serialError(err) {
println(‘Something went wrong with the serial port. ‘ + err);
}

function portClose() {
println(‘The serial port closed.’);
}
serial.list(); // list the serial ports
serial.open(portName); // open a serial port
}

function draw() {
background(0);
fill(255,0,0);
ellipse(width / 2, height / 2, inData * 4, inData * 4);
fill(0,255,0);
ellipse(width / 2, height / 2, inData * 2, inData * 2);
}

ICM week 5 – Wiggle Jiggle and Bonus Poem

WIGGLE JIGGLE

I had a lot of fun with this assignment. There is an amazing gratification that comes from using arrays. Like I mentioned in my synthesis write up – last week I was struggling to make a click through poem – I had an incredible moment when arrays and the function mousePressed came into my tool box. I was talking to a fellow classmate about how powerful arrays and being able to scroll through them made us feel. It is a true feeling of POWER. This was a moment I was really waiting for –  the ability to make multiples from single objects, and to display single objects from an array with multiple items.

*As a bonus for this post I have included my click through text project. I imagine this to one day be displayed on a big screen. I have a feeling my mid term projects will revolve around text and buttons. The final form on the display end will be simple and elegant – the button, I am hoping, will be something that enhances the experience with it’s uniqueness… *

Poem: Just To Call You My Friend

ICM WEEK 4: I SEE THE LIGHT

ICMweek4

var moon = {
x: 500,
y: 650,
display: function() {
stroke(0);
strokeWeight(13);
ellipse(this.x, this.y, 300, 300);
},
move: function() {
this.x = this.x + random(-2, 2);
this.y = this.y + random(-2, 2);

// var road = {
// x1: -5,
// y1: 945,
// x2: 490,
// y2: 255,
// x3: 510,
// y3: 255,
// x4: 1005,
// y4: 945,

// display: function() {
// stroke(255, 204, 0);
// strokeWeight(5);
// fill(238, 229, 222);
// quad(this.x1, this.y1, this.x2, this.y2, this.x3, this.y3, this.x4, this.y4); //road Not working 😦 ROAD OBJECT
}
}

function setup() {
createCanvas(1000, 600);
}

function draw() {
background(255, 174, 185);
text(mouseX, 10, 20);
text(mouseY, 20, 30);
// road.display(); //not working 😦 ROAD OBJECT
stroke(255, 204, 0);
strokeWeight(5);
fill(238, 229, 222);
quad(-5, 945, 490, 255, 510, 255, 1005, 945); //road

stroke(255, 204, 0);
strokeWeight(7);
drawMoon(500, 110, 300, 0, 0, 255); //centermoon

moon.move();
moon.display();

push(); //centerstar
translate(500, 110);
rotate(frameCount / 90.0); //frame
star(0, 0, 80, 100, 40);
pop();
stroke(255, 204, 0);
strokeWeight(7);

drawMoon(100, 110, 300, 255, 0, 0);

push(); //leftstar
translate(100, 110);
rotate(frameCount / 90.0);
star(0, 0, 80, 100, 40);
pop();

drawMoon(900, 110, 300);

push(); //rightstar
translate(900, 110);
rotate(frameCount / 90.0);
star(0, 0, 80, 100, 40);
pop();

drawMoon(300, 90, 100);
drawMoon(700, 90, 100);
drawMoon(100, 110, 100);
drawMoon(900, 110, 100);

drawLamp(50, 400, 255);
drawLamp(200, 400, 0);
drawLamp(700, 400, 0);
drawLamp(850, 400, 255); //bottom 4
drawLamp(50, 250, 0);
drawLamp(200, 250, 255);
drawLamp(700, 250, 255);
drawLamp(850, 250, 0); //middle 4
drawLamp(50, 100, 255);
drawLamp(200, 100, 0);
drawLamp(700, 100, 0);
drawLamp(850, 100, 255); //top 4

}

function drawMoon(x, y, diameter, r, g, b) {
fill(r, g, b);
ellipse(x, y, diameter, diameter); //moon
}
function drawLamp(x, y, clr) {
fill(clr);
rect(x + 40, y + 50, 20, 400); //tube
rect(x, y, 100, 100); //shade
rect(x + 25, 550, 50, 50); //base
}

function star(x, y, radius1, radius2, npoints) {
var angle = TWO_PI / npoints;
var halfAngle = angle / 2.0;
beginShape();
for (var a = 0; a < TWO_PI; a += angle) {
var sx = x + cos(a) * radius2;
var sy = y + sin(a) * radius2;
vertex(sx, sy);
sx = x + cos(a + halfAngle) * radius1;
sy = y + sin(a + halfAngle) * radius1;
vertex(sx, sy);
}
endShape(CLOSE);
}