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, 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; // open a serial port

function draw() {
ellipse(width / 2, height / 2, inData * 4, inData * 4);
ellipse(width / 2, height / 2, inData * 2, inData * 2);


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s