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.

 

 

ICM Week 5

When trying to modify my bouncing ball to allow the balls to turn red when they touch each other I ran into an error that I can’t figure out.

Here’s the ball.js file:

class Ball {
constructor(x, y, xspeed, yspeed) {
this.x = x
this.y = y
this.xspeed = xspeed
this.yspeed = yspeed
}
run() {
this.update();
this.display();
}
update() {
this.xspeed = bounce(this.x, this.xspeed, 0, width);
this.x += this.xspeed;
this.yspeed = bounce(this.y, this.yspeed, 0, height);
this.y += this.yspeed;
}
display() {
ellipse(this.x, this.y, 50, 50);
}
this.changeColor = function() {
this.col = color(random(255), random(255), random(255));
}
this.intersects = function(other) {
let d = dist(this.x, this.y, other.x, other.y);
if (d < this.r * other.r) {
return true;
} else {
return false;
}
}
}

On line 24 (this.changeColor = function(){) I get an error “Class proprieties must be methods.” I have no idea what this means and I get it on line 28 as well.

Aside from that, here’s the homework for the week:

I made two circles (or eyes) move across the screen on the x axis and when you press any key it goes back to the left side of the screen.

let ball;
function setup() {
createCanvas(500, 400);
ball = new Ball();
}
function draw()
{
background(255);
if(ball.x > 400)
{
ball.stop();
}
ball.move();
ball.display();
}
function keyPressed()
{
ball.x = 0;
ball.speed = 2;
}
function Ball()
{
this.x = 0;
this.y = 200;
this.speed = 2;
this.c = color(153, 102, 51);
this.move = function()
{
if(this.x > width)
{
this.x = 0;
}
this.x = this.x + this.speed;
}
this.stop = function()
{
if(this.speed > 0)
{
this.speed = this.speed - 0.05;
} else {
this.speed = 0;
}
}
this.display = function()
{
fill(0);
ellipse(this.x + 20, this.y + 45, 40, 40);
ellipse(this.x + 80, this.y + 45, 40, 40);
}
}

 

 

 

pComp Week 4

This week I reviewed the material by creating a blinking led on a trum potentiometer that allows the led to blink faster or slower on a dimmer. The code was borrowed from here.

2017-10-04 01.39.24 from Marco Wylie on Vimeo.

And here is the code:
int sensorPin = 0;
int ledPin = 13;
void setup()
{
pinMode(ledPin, OUTPUT);
}
void loop()
{
int sensorValue;
sensorValue = analogRead(sensorPin);
digitalWrite(ledPin, HIGH);
delay(sensorValue);
digitalWrite(ledPin, LOW);
delay(sensorValue);
}

Week 4 – The Color Of Me

I found a color inspiration through West Side Story, the canals of Venice, Italy, and from some of my pictures on Instagram I took while traveling abroad in 2012. My main color scheme consists of an orangish red, a bright blue, black, venetian pink, and an off whitish yellow.

After playing around in Coolors.co I found the names of the colors in my palette that consists of the following:

Vermillion Red, Celestial Blue, Raw Sienna, Mustard, and Eerie Black

E83413, 4392CC, DE835C, FEC65B, 1B171F

 

Then I used a website called Pattern Cooler to create collages with the color palette.

 

ICM Week 4 – The struggle is real.

I’m trying to make a ball appear on the screen using my own functions with move() and display() but I’m running into a console error I can’t figure out.

let balls = [];
function setup() {
createCanvas(500, 400);
for (let i = 0; i < 4; i++) {
balls[i] = {
x: random(0,width),
y: random(0,height),
display: function() {
stroke(255);
noFill();
ellipse(this.x, this.y, 25, 25);
},
move: function() {
this.x = this.x + random(-1, 1);
this.y = this.y + random(-1, 1);
}
}
}
}
function draw() {
background(0);
for (let i = 0; i < balls.length; i++);
balls[i].move();
balls[i].display();
}

Console says Uncaught ReferenceError: i is not defined (sketch:line 26) which is this line of code:

for (let i = 0; i < balls.length; i++);

Since Dan moved on in his video to simplify, I will move on too…

Unfortunately, I ran into the same problem with the simplified code…

let balls = [];
function setup() {
createCanvas(500, 400);
for (let i = 0; i < 4; i++) {
balls[i] = new Ball();
}
}
function draw() {
background(0);
for (let i = 0; i < balls.length; i++); {
balls[i].move();
balls[i].display();
}
}
function Ball() {
this.x = random(0,width);
this.y = random(0, height);
this.display = function() {
stroke (255);
noFill();
ellipse(this.x, this.y, 25, 25);
}
this.move = function() {
this.x = this.x + random(-1,1);
this.y = this.y + random(-1,1);
}
}

It’s unbelievably annoying to move forward with the video’s we have to watch without being able to replicate the code sufficiently…let’s see if I can learn this stuff without recreating it at the same time I guess..

……..Now I’m really getting angry…I just tried to copy what dan was coding, verbatim, and I’m getting an uncaught type error in this code:
let bubbles = [];
function setup() {
createCanvas(600, 400);
for (let i = 0; i < 10; i++) {
let x = random(width);
let y = random(height);
bubbles.push(new Bubble(x,y));
}
}
function draw() {
background(0);
for (let i = 0; i < bubbles.length; i++)
bubbles[i].move();
bubbles[i].display();
}

I put that in the sketch.js folder, then I created another file named “bubble.js” and put the appropriate code there too…I cannot figure out why I can’t seem to get anything to show up today 4 hours into doing all this……..I’m losing my mind…taking a break now as I’m about to throw my computer across the room.

……………………………………………………………………………………………………..

Moving on from all that ’cause I still can’t figure it out.

For homework this week I took an old sketch and tried to rework it. Here’s the old one:

And the code:
let angle = 0
let x = 50
let y = 50
function setup() {
createCanvas(400, 400);
angleMode(DEGREES);
}
function draw() {
background(0);
translate(200, 200);
rotate(angle);
stroke(130);
line(0, 0, 50, 50);
rectMode(CENTER);
fill(255, 50, 20);
rect(x, y, 10, 10);
angle = angle + 2;
}

And after some more frustrating attempts — can’t get this to work either! Every single code I’ve done this weekend has not worked…now I’m starting to think that something is wrong with p5.js. None of the quiz answers I gave work, and I can’t figure out how to clean up this code and make the clock center itself.

When I take background and put it into the setup I see that the rotating line and square are actually drawing every time they move which means that if I add the background back to the draw function, it draws every time the line and square moves. But I still have no idea how to center it. 🙁

Here’s one code I ended up with:
let angle = 0
let x = 50
let y = 50
function setup() {
createCanvas(400, 400);
}
function draw() {
background(0);
angleMode(DEGREES);
translate(width/height);
rotate(angle);
stroke(130);
line(0, 0, 50, 50);
fill(255, 50, 20);
rect(x, y, 10, 10);
angle = angle + 2;
}

And here’s another code where I ended up with the same as above, I cannot center this damn thing:
let angle = (200,200);
let x = 50;
let y = 50;
function setup() {
createCanvas(400, 400);
angleMode(DEGREES);
}
function draw() {
background(0);
translate(moveCenter(), height/2);
rotate(angle);
stroke(130);
line(0, 0, 50, 50);
fill("red");
rect(x, y, 10, 10);
angle = angle + 2;
function moveCenter(pct) {
return width * pct/400;
}
}

Another thing I don’t understand is why, in the image below, “var painting = false” if you are indeed painting…I guess the language is confusing.

 

Week 3 – Typography & Expression

PLANE TICKET:

Sketches for the redesigned boarding pass:

I used Illustrator to start playing around with the information given:

I went through a lot of different designs before I came to what I think is the best one!

EXPRESSIVE WORDS:

I wish I could have had more time to put some of my ideas for expressive words into After Effects, but I’ve never used the program and I didn’t have enough time.

Here are some ideas I had that work well on paper as is. One of them I made a video of to give a little more animation to it. I also added a few sketches I had for words that would have worked better if I added animation to them.

2017-09-26 23.13.46 from Marco Wylie on Vimeo.

Reeperbahn Regular

(This is Reeperbahn font taken from here)

Below are some ideas I had: