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:

pComp Week 3 – Digital i/o & Observation

Set up a digital out and in and created short vid about it:

2017-09-23 18.44.42 from Marco Wylie on Vimeo.

OBSERVATION:

For this weeks assignment I chose the Bedford L’s subway turnstile (although this observation applies to all of nyc’s subway turnstiles). I noticed that people generally flow through with their cards with ease when and if their cards work. The swiping function and whether or not a person has insufficient funds on their card determines the flow of the crowd. Whenever someone gets stuck swiping their card many times for lack of functional knowledge or whatever it may be, the crowd gets backed up. If this occurs during rush hour, the chaos it creates is stronger. People end up having to back out of the front of the turnstile, which leads to the line behind them having to awkwardly back up too. Not having enough money on your card could cause the same problem, backing up the flow.

I think this could be solved a few different ways. The MTA has already introduced an automatically refillable Metrocard, but this doesn’t get around the issue of swiping the card to fast and trying to go through only to awkwardly get jolted back by the turnstile. In other countries, take France for example, you put a small card through the top of the machine and it takes it and spits it out half a foot below and opens the doors to let you in. I think you can buy a card that allows you to just place it near a sensor that allows you to open the doors and proceed as well.

While observing the turnstile traffic at the L train on Bedford Ave, I noticed that the people who were the slowest were usually tourists trying to figure out how to position the Metrocard correctly or struggling with the rate of speed of the swipe. Being a native New Yorker, I’m very familiar with how to use the turnstiles, but that is not to say that I don’t ever hold up the line trying to swipe.

I’m guessing the way that the whole process works is that by registering the swipe of a Metrocard, a lever is released  which then allows you to go through the turnstile.

Assuming everything goes smoothly, the act that takes the least amount of time is going through the turnstile. Getting your metro card out, if you didn’t in advance, and swiping it takes the longest amount of time.

ICM – Week 3

I cannot for the life of me figure out why a code taken directly from Dan’s video (4.2) will not run. Here’s a screenshot of what’s going on:

Anyway, here’s the homework assignment for this week. I added a spiraling circle to the canvas:


function setup() {
createCanvas(640, 360);
}
function draw() {
background(255);
for (var y = 0; y < height; y += 20) {
for (var x = 0; x < width; x += 20) { if (random(1) > 0.5) {
line(x, y, x + 20, y + 20);
} else {
line(x, y + 20, x + 20, y);
}
}
}
noLoop();
}

Then I added an if statement to add a green background when the mouse is pressed.

And here’s the final result:

(This code was loosely based on a chapter of Getting Started with p5.js. p.135)

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

To change parts of my partners code I altered the background color, made the ellipses bigger and added a strokeWeight around each ellipse.

Here is the final result and code:

let x=0;
let y=0;
function setup() {
createCanvas(400, 400);
}
function draw() {
background(0);
if(mouseIsPressed){
background(210,0,random(150));
for(let x=mouseX; x<= width;x+=40){
for(let y=mouseY; y<= height; y+=40){
strokeWeight(2);
fill(random(200),random(200),0);
ellipse(x,y,50);
}
}
}
}

pComp Week 2

Here’s my simple application of a switch LED.

Questions:

  1. Why would you want a series setup over a parallel? I understand why you would want a parallel for a setup similar to a kitchen where you wouldn’t want a lightbulb to go out that would make it so you couldn’t use your microwave.
  2. When do you want to use amps vs volts on the multimeter?
  3. Does it matter which side of a resistor is plugged into the breadboard? (does the gold band have to be on a specific side?)

I really like this quote from the reading this week:

“Good design means that beauty and usability are in balance. An object that is beautiful to the core is no better than one that is only pretty if they both lack usability.”

I also was able to make to LED’s light up individually on the board based on a parallel grid with two systems.

 

Week 2 – Signage

Unsuccessful Signage:

Above we can see an example of a sign that does not clearly state what the name of the store is, what it sells, and what the sign even says! The lettering used makes it pretty much impossible to decipher what the last word is especially.

When I take a closer look, the sign says “Love Pink Posh” with a heart as the “o” in “Posh.” It’s a horrible design because it doesn’t give the viewer any clue about what the store is selling. The first two words feature an upper case first letter but then the last word is in all caps. It’s just a mess! In very small black lettering underneath the last letter of the sign it says “boutique” in all caps but it’s very easy to miss, in fact, I didn’t notice it until I zoomed in on the picture above.

To fix the image, I made the text much clearer to read. I incorporated the heart in as the “o” in love and made the words “Boutique” legible so that you can clearly understand what the store sells. I’m inclined to say the last image would be the best for the store because it simplifies it and makes it easy to take in. The first image would also work, but for some reason it still seems really wordy. If it were my store, (I would rename it entirely!), I would take a few words out to make it a simpler design.

Now, upon second thought, I think the above picture would be best to redesign the sign. It incorporates the word pink in the color of the text and image, and love in the symbol of the heart around the text. The only word I left in was Posh, and added below it “Boutique.” I think provides a clear example of what the store is selling and incorporates aspects of the original wording of the sign.

Here is another example of signage that is misleading — it happened when I was watching a program with limited commercials but it would flash before you for only 3 or 5 seconds and every time I saw it I would read it as “you are reduced to watching commercials” instead of what it actually says. I just thought that was interesting. I would design it differently by taking out “with” and putting “commercial” below “reduced” to allow your eye to follow the wording nicely.

And here is another since the one before that was found inside and I was having trouble uploading photos to the blog due to a dreamhost HTTP error… The white lettering was a poor choice because you can’t read what it says well.

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

Here are some examples of great signage!

You can’t really see it here because I took the picture when it was dark out but it’s a really nice sign for a tequila bar.

Here’s another sign for “Rosario’s Fish Shack” also taken at night but it’s really beautiful and plays with color to create a summer vibe.

Both examples are to the point, accurate about what the restaurant offers, and really aesthetically pleasing.

 

ICM – Week 2

Answers to Quiz 2:

  1. When trying to make the rectangle in the center of the screen without using any hard-coded numbers I ran into a little trouble. My rectangle appeared off the screen.

Then I figured out that I forgot to add rectMode(CENTER) which solved that problem!

2. Moving a circle from the middle of the screen to the right:

Then by taking my little monster from last week and updating it to include dots in the background I added some variables that set the values of a spot that will appear on the canvas every time the script is run and the color of the spots on an RGB scale:

var spot = {
x: 100,
y: 50
};

var col = {
r : 255,
g : 0,
b : 0,
};

Which made it look like this:

After adding the dots I made the head of the monster go to the right of the screen. (I changed all my var’s to let’s). First I added let x; and a few defined variables under setup: (I kept seeing an http error when trying to upload an image of the code and preview so I had to separate the images — not sure how to resolve that) Then I took out the coded numbers for ellipse under //head and put x and y for the first two digits.

This placed the head in the center of the screen, which I wasn’t expecting but I’ll go with it…perhaps it’s because I set x and y equal to half of the width and height of the canvas which would place it in the center.

Next, I added x++ below the ellipse (x,y,125,125); and got the following:

Then, to make the body rectangle move when the mouse is moved I replaced the first value of rect in //body and replaced it with mouseX.

 


The final code looks like this:

let x;
let spot = {
x: 100,
y: 50
};
let col = {
r : 255,
g : 0,
b : 0,
};
function setup() {
createCanvas(500, 500);
x = width/2
y = height/2
}
function draw() {
background(0,153,255);
//body
noStroke();
fill(45);
rect(mouseX,200,50,150);
//head
stroke(45);
fill(0,204,0);
ellipse(x,y,125,125);
x++;
//feet
stroke(45);
line(273,345,300,450);
line(200,450,225,345);
//eyes
fill(50);
noStroke();
ellipse(215,215,20,20);
ellipse(250,220,20,20);
//dots on screen
spot.x = random(0, width);
spot.y = random(0, height);
col.r = random(100,175);
col.g = 0;
col.b = random(100,200);
fill(col.r, col.g, col.b);
//ellipse(100,100,24,24)
ellipse(spot.x, spot.y,25,25);
}

Here’s a link to the completed version: http://alpha.editor.p5js.org/marcowylie/sketches/SkPVHTY9-