Final Brainstorm

Initially, I wanted to work on a type of “true mirror” that would allow you to see yourself un-mirrored and speak about issues surrounding identity but I realized a lot of people do mirrors for their midterms and finals.

Tom suggested in class that I find inspiration in the things I’m interested in. Here are a few of those things: Music, the news,

My new concept is to do an installation incorporating p5.js elements that demonstrates how similar some songs are to each other. Using a system of buttons and faders, the viewer will be able to interact directly with the piece, selecting a song to play and then sliding the fader to hear the similar song.

One of the first steps I’m taking is to start collecting and researching songs that sound the same. The point of this project is to allow the listener to hear how remarkably similar two songs are. For example, “My Sweet Lord” by George Harrison is very much alike “He’s So Fine” by the Chiffons.


ICM Week 8 – Pumpkin Drum Kit

For this assignment I added a collection of sounds to my p5.js sketch and made a pumpkin drum set that uses the keys A, S, D, and F to play sounds. It is based off of code from here.

Here’s the code:let pumpkin;
let scream;
let kick;
let snare;
let hihat;
let extraScale = 0;
function preload() {
pumpkin = loadImage("pumpkin.jpg");
scream = loadSound("scream.mp3");
kick = loadSound("kick.mp3");
snare = loadSound("snare.mp3");
hihat = loadSound("hihat.mp3");
}
function setup() {
createCanvas(400, 400);
}
function draw() {
background(0);
imageMode(CENTER);
translate(width/2, height/2);
scale(1 + extraScale);
image(pumpkin, 0, 0);
if (extraScale > 0) {
extraScale -= 0.05;
}
}
function keyTyped() {
extraScale = 1;
if (key == "a") {
kick.play();
}
else if (key == "s") {
hihat.play();
}
else if (key == "d") {
snare.play();
}
else if (key == "f") {
scream.play();
}
}

I ran into a problem trying to add instructional text at the top because I added a noLoop to the function setup but then the pumpkin stopped enlarging every time a key was hit so I got rid of it and instead of adding the coordinate 0 on the x axis I added 25 and it finally showed up!

Here’s my new code:let pumpkin;
let scream;
let kick;
let snare;
let hihat;
let extraScale = 0;
function preload() {
pumpkin = loadImage("pumpkin.jpg");
scream = loadSound("scream.mp3");
kick = loadSound("kick.mp3");
snare = loadSound("snare.mp3");
hihat = loadSound("hihat.mp3");
}
function setup() {
createCanvas(400, 400);
}
function draw() {
background(0);
text("Press a s d f to play", 150, 25);
fill(255);
imageMode(CENTER);
translate(width/2, height/2);
scale(1 + extraScale);
image(pumpkin, 0, 0);
if (extraScale > 0) {
extraScale -= 0.05;
}
}
function keyTyped() {
extraScale = 1;
if (key == "a") {
kick.play();
}
else if (key == "s") {
hihat.play();
}
else if (key == "d") {
snare.play();
}
else if (key == "f") {
scream.play();
}
}

 

pComp Midterm – Cube Switch Game

For this assignment my partner and I came up with a game that has 5 colorful buttons on each side of a square cube with an LED above each light to signify when to press it. Upon pressing the sixth, black button, the game initiates and the player has only a few moments to press the button where the light is and the timing gets faster and faster as the game progresses. If the button isn’t pressed in time, all the LED’s light up in succession and the game is over.

Since part of the assignment was to include a serial connection to p5.js, we included sounds using serial.print that play every time a button is pressed and also when the player loses.

We laser cut a 1/4″ piece of Acrylic and fastened arcade buttons to each side of the cube.

Here is the code for Arduino:

//LED Pins
int LEDPins[] = {5, 6, 7, 8, 9};
//Switch Pins
int switchPins [] = {12, 11, 2, 3, 4};
//sides
int activeSide;
int activeSwitchState;
int lastActiveSwitchState;
//Start button
int startButtonPin = 10;
bool gameActive = false;
int startButtonState;
int lastStartButtonState;
bool userLost = false;
//timing
long startTime;
long interval;
void setup() {
Serial.begin(9600);
//LEDS
pinMode(LEDPins[0], OUTPUT);
pinMode(LEDPins[1], OUTPUT);
pinMode(LEDPins[2], OUTPUT);
pinMode(LEDPins[3], OUTPUT);
pinMode(LEDPins[4], OUTPUT);
//Digital Switches (buttons)
pinMode(switchPins[0], INPUT);
pinMode(switchPins[1], INPUT);
pinMode(switchPins[2], INPUT);
pinMode(switchPins[3], INPUT);
pinMode(switchPins[4], INPUT);
//start button
pinMode(startButtonPin, INPUT);
}
void loop() {
//make array of switch inputs
int switchStates [] = {
//analog inputis
digitalRead(switchPins[0]),
digitalRead(switchPins[1]),
digitalRead(switchPins[2]),
digitalRead(switchPins[3]),
digitalRead(switchPins[4])
};
//start button
startButtonState = digitalRead(startButtonPin);
//when start button is pressed, game is activated
if (startButtonState != lastStartButtonState) {
if (startButtonState == HIGH) {
gameActive = true;
userLost = false;
//initialize time
startTime = millis();
activeSide = pickRandomSide();
interval = 10000;
}
lastStartButtonState = startButtonState;
}
if (gameActive) {
//within the time limit
if (millis() - startTime <= interval) {
activeSwitchState = switchStates[activeSide];
if (activeSwitchState != lastActiveSwitchState) {
if (activeSwitchState == HIGH) {
Serial.print(activeSide);
Serial.print(',');
Serial.println(interval);
interval *= 0.80;
activeSide = pickRandomSide();
startTime = millis();
}
lastActiveSwitchState = activeSwitchState;
}
} else {
//game not active, user lost game
gameActive = false;
userLost = true;
}
}
if (!gameActive && userLost) {
//if you go over the time interval you lose & LEDs will flash
Serial.print(5);
Serial.print(',');
Serial.println(0);
for (int i = 0; i < 5; i++) {
digitalWrite(LEDPins[i], HIGH);
delay(100);
digitalWrite(LEDPins[i], LOW);
}
}
}
//function that lights up the LED & returns value of the side it is on
int pickRandomSide() {
for (int j = 0; j < 5; j++) {
digitalWrite(LEDPins[j], LOW);
}
int side = random(0, 5);
digitalWrite(LEDPins[side], HIGH);
return side;
}

And the code for p5.js:
// Declare a "SerialPort" object
let serial;
let latestData = "waiting for data";
//sounds
let sounds = [];
//incoming data from arduino
let arduinoData = [];
let activeSide;
let interval;
//logic for when to play sound
let lastInterval;
function preload() {
soundFormats('mp3');
for (let i = 0; i < 6; i++) { sounds.push(loadSound('sound' + i + '.mp3')); } } function setup() { // Instantiate our SerialPort object serial = new p5.SerialPort(); serial.open("/dev/cu.usbmodemFD121"); serial.on('data', gotData); } function gotData() { var currentString = serial.readLine(); // read the incoming string trim(currentString); // remove any trailing whitespace if (!currentString) return; // if the string is empty, do no more //console.log(currentString); // println the string latestData = currentString; // save it for the draw method } function draw() { arduinoData = split(latestData, ','); activeSide = arduinoData[0]; interval = arduinoData[1]; if (activeSide >= 0 && activeSide <= 5 && lastInterval != interval) {
sounds[activeSide].play();
lastInterval = interval;
}
}

I’m going to have to upload the pictures of the box making process tomorrow because dreamhost won’t let me upload any more pictures tonite…

Here’s the finished working result!

IMG_9641 from Marco Wylie on Vimeo.

 

 

ICM Week 7 – Tony’s Working Website

I’m still having some trouble with the image showing up properly on my webpage. It’s sideways and I double checked to make sure my original file is properly sized and facing the right way and it is.

I added a background color and made the header text bold. After that I included an api that generates a random cat GIF when reloading the website.

Here is a video of the website (not sure how to share it since it’s a locally hosted site)…

tony’s website vid from Marco Wylie on Vimeo.

Here’s the code:
var img;
var tony;
function preload() {
img = loadImage("tony.jpg");
}
function setup() {
canvas = createCanvas(800, 800);
}
function draw() {
image(img, 0, 0, 400, 400);
}

And the HTML code:

 

Business Card

I had a lot of ideas for this card, a few surrounded by the idea of a lightening bolt because I happen to have one tattooed behind my right ear. My wife and I got it done a year and a half into being with each other because in our first apartment together I spray painted a bolt onto our wall in gold and black.

I wanted to have a simple color scheme using a black background with gold lettering. To find the gold I was looking for I googled a few color codes for a nice gold I found online.

The fonts I used for the front and back are Dynamo and Archian Night. I know it is a little risqué to include two fonts but both fonts, I think, complement each other and show my personality.

I wish that the font on the back was more clear. Originally I had the font on the front, FF Archian Night, on the back as well but it looked really distorted so I spent quite some time looking for a font that would go well with the original one I picked out and still embodied some of the buzz words that I brainstormed. If I had a better printer and access to embossing tools I would have made the card more streamlined.

I had a lot of trouble trying to figure out how to print double sided from my illustrator file. It kept printing the first side over and over until I almost ran out of ink! After a while I realized that the bleed borders were printing somehow so I had to adjust the size of the image. I couldn’t figure out a way to make the bleed borders a different color so that I could cut the cards out to size after the printed result.

 

 

pComp Week 6 CEREAL (nomnom) input to p5.js

LAB UNO:

2017-10-14 16.48.26 from Marco Wylie on Vimeo. (sorry for the sideways video)

void setup() {
Serial.begin(9600);
}
void loop() {
int analogValue = analogRead(A0)/4;
Serial.write(analogValue);
}

So in this video I’ve used a serial connection between my Arduino and my laptop, and with the code in the Arduino software I can see the binary values that the potentiometer gives out which is why it looks crazy on the screen. I also noticed that the board lights up “TX” which means it’s transmitting information, not receiving.

After that I downloaded Processing and was able to read the data there:

I couldn’t seem to get any farther than that though because I was getting a string of errors and then my computer shut down. 🙁 I moved onto the next lab in the effort of time.

Below, I tried using an example from tigoe’s examples to see if I have my potentiometer serially hooked up to p5.js but the browser kept freezing.

No matter what I tried that tab kept freezing so I moved onto another lab “serial input to p5js ide” and ran into the following error after copying the code:

I thought I found part of the problem — I didn’t upload the p5.serialserver.js file to my sketch, but I’m still running into the same error! Soooo frustrated….

OK! After an hour or so of mind-blowing frustration I realized I uploaded the wrong #&*@ file…I had uploaded p5.serialserver.js instead of p5.serialport.js — to my dismay, I’m still getting errors: (see below)

After commenting out all those functions I was able to get a sensor reading.

Serial Sensor p5 reading from Marco Wylie on Vimeo.

Here’s a link to the p5.js sketch.

When trying to go a step further and add a graph to my sketch I encountered this error:

There seems to be a problem with my background but I can’t figure out what the issue is. I tried restarting with a fresh tab but now I’m not seeing any results or errors…

Here’s the code:
var serial; // variable to hold an instance of the serialport library
var portName = '/dev/cu.usbmodem1421'; // fill in your serial port name here
var inData; // for incoming serial data
var xPos = 0; // x position of the graph
function setup() {
createCanvas(400, 300);
background(0x08, 0x16, 0x40);
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.list(); // list the serial ports
}
// get the list of ports:
function printList(portList) {
// portList is an array of serial port names
for (var i = 0; i < portList.length; i++) { // Display the list the console: //println(i + " " + portList[i]); } } function graphData(newData) { // map the range of the input to the window height: var yPos = map(newData, 0, 255, 0, height); // draw the line in a pretty color: stroke(0xA8, 0xD9, 0xA7); line(xPos, height, xPos, height - yPos); // at the edge of the screen, go back to the beginning: if (xPos >= width) {
xPos = 0;
// clear the screen by resetting the background:
background(0x08, 0x16, 0x40);
} else {
// increment the horizontal position for the next reading:
xPos++;
}
}
function draw() {
graphData(inData);
}

ICM week 6

Another nightmare week with the homework. Cannot find a way in hell to upload a picture and make it work.

Here is my failed attempt after hours and hours of watching dan’s video’s and reading the p5 book. I cannot seem to make this work.

Just getting a local server was trouble enough..

var img;
var tony;
function setup() {
canvas = createCanvas(200, 200);
}
function draw() {
image(img, 0, 0);
image(img, 0, height/2, img.width/2, img.height/2);
}

 

 

Composition – ITP Winter Show

Here is my process for creating the ITP Winter Show postcard.

I used a breadboard and some electrical wires to make the lettering.

After playing around with the lettering on grid paper, I realized that I wanted to use the ITP font (Gothic) so I reworked it to look as similar as possible to that type style.

Then I finally ended up with this concept after a lot of toying around with the color and different versions of the same kind of picture. (dreamhost is turning out to be nightmare host…they won’t let me upload any more pictures right now or else I would have shown the whole process).

Candy Machine

For this weeks assignment I made a candy machine that uses a potentiometer and a servo that dispenses the candy using a wheel attached to the servo.

2017-10-07 18.35.59 from Marco Wylie on Vimeo.

Here is the code:

#include
Servo myservo; // create servo object to control a servo
int potpin = 0; // analog pin used to connect the potentiometer
int val; // variable to read the value from the analog pin
void setup()
{
myservo.attach(9); // attaches the servo on pin 9 to the servo object
}
void loop()
{
val = analogRead(potpin); // reads the value of the
// potentiometer (value between
// 0 and 1023)
val = map(val, 0, 1023, 0, 179); // scale it to use it with
// the servo (value between 0 and
// 180)
myservo.write(val); // sets the servo position according
// to the scaled value
delay(15); // waits for the servo to get there
}

It took a little finagling but eventually I was able to tape down the ramp to the cardboard in a way that would allow the wheel not to get caught when it spun. Once I had that in place I hot glued everything together. The only problem I ran into was similar to Oren’s problem last week. My potentiometer, when all the way to the left or right position would start to act out on it’s own. I contacted him to see if he had a solution but he said he didn’t and I was unable to rectify the problem myself.

The final result (with a few kinks):

2017-10-10 23.13.10 from Marco Wylie on Vimeo.