ELECTRONICS LABS: Light 'em Up!

This week in physical computing we began to experiment with electronics, learning about circuits and different components. Using an Arduino, a microcontroller that connects to the computer, as my power supply, I tested different ways to wire an LED light bulb on a breadboard.

The breadboard allows me to connect wires and build circuits without having to solder (connecting wires with melted alloy – a more permanent connection). I especially wanted to get my hands on using the Arduino instead of just a battery or direct current power supply, so I could see how coding will play into mix.

Getting an LED to light up

A seemingly simple task, the first experiment was to light up a bulb. As I had learned from flashlight making this requires a circuit to carry electric current to the bulb and pass through to the ground. However, this exercise makes one delved deeper. LEDs only require a certain amount of voltage to light up, about 3 volts, too much voltage will actually make them burn out. This is where voltage regulators and resistors come in – to reduce the passage of current.

For this circuit, the Arduino allows us to eliminate the voltage regulator because we have a couple options of voltage we can output. By using the 5V pin and a 220 Ohm resistor, we reduce the voltage to an appropriate amount for the LED. Making sure all was in its proper place and using simple code, the light turns on and can even blink!

Me on Snapchat like…

YASSS

LED with Switch

A switch means you can essentially break the circuit and put it back together at a push of a button. The component used here is literally a “push button”, so when held down the current can pass through the whole circuit. When the button is released the circuit is broken.

Added a second LED, so they both light up with the switch.

Using a potentiometer

A potentiometer is a dial that controls the input of current. When turned all the way up, all 5 volts can pass through the circuit, turned down and the voltage will decrease eventually to 0. When connected to an LED, the potentiometer acts as a dimmer. When turned to 5V the LED is at its brightest. When the potentiometer is turned down, the light gradually dims until it turns completely off.

Switches in parallel

This wiring is kind of like a tree diagram. The power supply splits off into different branches, providing the same voltage but in different directions. With switches wired in parallel, any switch can turn the light on.

Switches in a series

This means the current travels down the line. The LED won’t light unless all switches are turned on at the same time.

Making my own switch

The possibilities for this were truly endless. A switch just needs to be something that completes the circuit. Since copper is super conductive, I decided to make my switch out of two pennies. There was a time we considered pulling pennies from circulation, so why not make it into something useful. Makes cents to me!

lol I’m sorry I’m done. k bye.

jk, final thoughts:

This lab was very exciting. It’s amazing to see how simply moving wires, pins, and components can make different things happen. I cannot stress enough how important it is that everything is wired correctly. Often one pin placed in the wrong row on the bread board was the culprit for something not working, and it could potentially damage everything. Lastly, the Arduino shows how something can become an extension of the computer. It takes information from my laptop and effects something outside the screen in the physical world. Sure, it was just lighting up LEDs and making switches, but I can definitely see how physical computing could have a larger impact and truly opens up the possibilities of technology and interaction.

WEEK TWO: A RIPPLE IN TIME

Week One proved to be a difficult one, and since I felt very restricted by my drawing with 2D primitives, I decided to abandon it completely and try something new for week two. The criteria of this week’s sketch made me think of ripples. My goal was to have each click of the mouse create an ellipse. The ellipse would grow until it is not visible on the screen. Here was my plan of how to satisfy each criteria:

1. One element controlled by the mouse: A clicked mouse initializes the start of the ripple.

2. One element that changes over time, independently of the mouse: The ripple enlarges by itself.

3. One element that is different every time you run the sketch: The background color is a different shade of blue at each start of the program.

Step 1: make a circle grow

I started with the element that I thought would be the easiest - making an ellipse grow, since we have had a bit of practice in class changing objects on the canvas over time. This program uses variables and the looping draw() function in p5.js.

With this code, the ellipse is a perfect circle starting in the center of the canvas. The width and height increase by 1 pixel every frame as indicated by lines 13 and 14. BUT How can I make the mouse trigger this event/growing circle?

Step 2: mousePressed()

This is a function I didn’t know how to use before, so I had to read up from the p5.js documentation about different functions used to cause events. The mousePressed() or mouseClicked() functions do just this. The former triggers an even when the mouse is clicked, the latter after a mouse is clicked and released. Either would work for what I was trying to do.

In a separate program I wrote code that would create an ellipse when the mouse was clicked to practice this element of my future ripple program.

This code creates an ellipse of 80 width and 80 height anywhere the mouse indicates position using built in variables mouseX and mouseY. With each click, a new ellipse is created. Next I needed to figure out how to combine these two events, so that the mouse created an ellipse that would then grow on its own.

Step 3: mouse triggered ripple

In order to combine the two programs above, the draw() function would have to contain the ellipse making instructions, otherwise mousePressed() or mouseClicked() wouldn’t trigger a growing ellipse, just a stagnant one. With the help of this code, I learned that you can create a sort of on/off switch in the mouseClicked() function. Line 24 “start = !start;” indicates this start or stop of the drawing loop with each click of the mouse. It is setting the variable “start” to not start, meaning that mouseClicked() triggers the opposite of the current state. If start is true, mouse click will produce false start or stop. If at stop, the mouse click will produce start.

Although, I was able to make the animation of the ripple begin with a mouseClick, I faced a huge challenge of knowing where to place mouseX and mouse Y. I didn’t want the ellipse to follow my mouse every frame as shown below:

My goal was to be able to click the mouse to indicate position and essentially leave the ellipse in that place. Ironically, it wasn’t until I wrote some things down on paper that I started to make sense of it all. I realized that I wanted where mouse indicated starting position to happen ONLY ONCE. That was my epiphany. If the mouse indicates the position of the ellipse only once, I could move the mouse and the ellipse would grow from the originally clicked place.

When I figured out that the position of mouseX and mouseY should occur only once and be indicated by the mouse click, I realized that I could create my own variables for mouse x and y position and these should be set in the mouseClicked() function as opposed to the looping draw() function. This changed everything and allowed me to move my cursor away from its initial start, but the ripple would continue to expand on its own from that postion.

Step 4: creating an element that is different every time

This step was made for the random() function. I applied this to the background color. By randomizing just the red and green values but keeping blue the same, the background color varies from shades of pinks, purples, and blues, kind of like water at sunset. See the final program in the p5.js web editor here.

FINAL THOUGHTS:

This program is not complete, but I’ve reached a standstill in my current knowledge. My eventual goal is to have the mouse move anywhere and create new ripples with each click. This would make the program constantly interactive. However, to achieve this I need the mouse click to trigger the same animation over and over again. It’s kind of like I need to loop the loop. But I also need to store each ripple so that it finishes out its expansion and doesn’t disappear with a new click. Initial research has shown that an array would be able to accomplish such a task, but I don’t know how to implement this yet. I would love to come back to this program and add this last element to truly make it what I wanted it to be.

WEEK TWO: REPEATABILITY

For this assignment we needed to make 5 of the same thing, focusing on repeatability. How can you assembly line a process? What tools can be used to help you repeat a process over and over again. The project had to be multi-processed, not just pressing print 5 copies on the laser cutter or 5D printer.

After much back and forth on what to make , I decided on wooden dice. I wanted to challenge myself to work with the power tools in the shop and a material that could not be as easily molded by hand, like wire. And there would certainly be many steps to their creation.

Dice have been used since before recorded history, and are one of our earliest gaming implements known to man. The oldest known dice date from 2800-2500 B.C.E and were excavated from an an archeological site in south-eastern Iran as part of a backgammon like game (Wikipedia). The precursors of dice were often marked animal bones with “magical properties” used to cast fortunes of the future. The mathematical connections were not attached to dice until the 16th century when the concepts of randomness and probability were conceived (Britannica ). Although there are many forms of dice nowadays, different shapes, loaded, etc. the typical 6 sides cube is labeled with numbers 1-6. And if you didn’t know, each face and its opposite always add up to 7!

My plan:

I’ve set a guideline for myself: no purchasing of any material – only use scrap wood.

1. Obtain a longish piece of wood

2. Cut to a size so that one face is a perfect square

3. Chop into five cubes

4. Create a “stencil”/jig out of a copper plate I found on the junk shelf with 9 evenly spaced holes 3 x 3 (drilled with drill press). This will be my guide for where to place the dots on the face of the cube

5. Use a drill, or if possible a dremel with a circular head? (ask in shop) to create the dots. Ideally I would like them to look like dimples more than holes, which is why I’d like to know what tool could accomplish that.

As planned, I secured wood from the scrap pile! For a better aesthetic, I looked for solid pieces of wood instead of ply. Note: none of these scrap pieces were very long, which made my quest for precision even more difficult, because I barely had any room for error.

Sketching out my plan.

The first thing I did was figure out a good size to make the dice based on the pieces of wood I found. 1.5” square seemed to work. I started by cutting a board roughly in half lengthwise with the band saw. Ben already told us this wasn’t very accurate, so I left room in case I couldn’t make a straight line. Then I went totally power sander crazy. With no guidelines, I just kept sanding like YAY EVERYTHING IS SMOOTH. So I ended up with two very smooth but very wonky blocks. Alas, as most things are in creating, it doesn’t go perfectly the first time around.

I tried again, using penciled lines carefully measured. This allowed me to sand with a guideline instead of depleting material recklessly. The final square face would be 1 3/8” square.

Next, I needed to chop the long pieces into cubes. Since the band saw, is not very precise, I knew I should use the chop saw. I measured out my long pieces to be chopped with a fine pencil line separating each. John made me rethink this because the chop saw blade is 1/4”. Measuring each cube needed to account for this loss of material. John helped me cut five “equal” cubes.

After this I wanted to make some sort of jig to place the dots perfectly on each face of the cube. I saw this as a good opportunity to use some things we were learning in ICM. I wrote a simple program to create 3 x 3 grid of 9 equally placed dots. From these nine, I could make all the different dice patterns.

It took me a white to figure out how to pt the dots on the cube. Aesthetically, I wanted them to be dimples more than holes. So I tried using a dremel with a stone bit. Although, I liked it (even when it burned the wood), I knew drilling each dot by hand would be difficult.

Drill press and mighty clamp.

Dot stencil ”jig” placed over each cube.

Drawn dots. Matched to make sure each opposite face add up to 7.

Rough dice, rough dots, rough table surface.

I opted for the drill press instead to create more exact holes. Ideally, my jig would be able to hold the cube solidly in place and in line with where ever a dot would need to be drilled, but since there are a few patterns, this potentially meant several jigs.

Ultimately, I used the clamps at the drill press as a sort of jig to hold dice position and my dot code as a paper stencil. For example, patterns 1, 3, and 5 all contain 1 dot in the center. I could leave the clamp in “same position” for all the centers of all 5 dice. HOWEVER, and it’s a big however. These are far from perfect cubes. While this would have worked in concept, it did not work in practice, and I had to move the clamp almost every drill to line up the dice in the proper position (using my stenciled holes drawn on each dice as a guide). 105 dots in total!

To finish up, I gave them a nice sand. In the future, I might paint the dots a nice brown (inspired by my accidental wood burning) and maybe wax them to bring out the grain.

FINAL THOUGHTS

Though far from perfect or precise, I am proud of what I made for this assignment. I chose dice for the opportunity to learn the power tools in the shop and work with wood. Two goals that I accomplished. I practice using the band saw, power sander, chop saw, and drill press. My big lesson learned is not to rush. Especially during dot making, I started getting frustrated it was taking so long. There are a few holes that frayed because of my impatience, and thus it doesn’t look as polished as if I just gave over a few extra seconds to do it right. I don’t know if I’d make dice again, but I know some good techniques to apply for other projects.

Now, let’s go play Yahtzee!

WEEK ONE: FLASHLIGHT

At ITP we have to document everything, so I have been using the blog itself as my medium to hash out ideas. From beginning to end of this post, you will see how my ideas evolved.

Step 1: Research 

I needed to know exactly how a flashlight works or I wouldn’t have a chance of making one. In addition, a few ideas design wise: I kinda liked the portability of my USB drive and its pinwheel cover effect. Maybe I’d model it after real fire emitting tools ex: lighter, match .... after some research, could I put the electronic components in the actual lighter body??

A quick google search led me to this diagram which explains how a flashlight works. It boils down to a simple circuit: A light bulb of some kind, batteries, wire, and a switch/button (can throw in a resistor in there too if we want to control voltage).

How to proceed? I'm thought I should try making the circuit first and then figure out what to put it into.

Step 2: Make a Circuit

I made a simple circuit with 2 AA batteries taped together, a white LED, and copper wire. My finger acts as the switch, turning the light on when pressure is applied.

For the second round: I added a switch (small Arduino button) to control when the light goes on or off. In the future, I’d like to look into switches that hold this position, so that the user does not have to constantly hold the button for light.

Step Three: Find a shell

After having the circuitry figured out, the next step is to encase it into some sort of shell. Although I felt pretty married to the idea of putting it in a lighter, using two batteries forced me to abandon that idea. I would need something long and slender instead. That’s when I thought a highlighter or Expo marker would work well. It’s the right width to hold batteries and the LED could fit where the felt tip would be.

But what would creation be without the unexpected. After removing the insides of the marker, the batters fit perfectly in diameter but were too long and stuck out at the end. Determined to use the marker as the shell, my plan is to extend it out at the bottom. I’ll use another marker shell to increase the length.

My biggest issue so far was figuring out how to include the switch. Ideally the switch would be encased as well with only the button exposed for the user. However, the batteries fit too snugly that there is no room for the switch. I started by drilling a hole, until realizing the whole square base of the button will have to come out from the shell. Using an icepick and my gas stove, I heated the icepick to melt the plastic, creating more of a square hole for the button.

I loosely rigged it all together, so that I know all parts will work and roughly where I want them:

Sketch of the final design aesthetic:

Step 4: Assemble

Using the band saw in the shop, I cut the bottom portion of another marker to extend the container. This proved to be my easiest task, because the true assemblage took many tries. Since I’ve only tried soldering a few times before, I definitely wasn’t skilled enough to complete the detailed work I was looking for. In addition, wires kept breaking. I thought maybe assembling it outside of the container first and then putting it inside would work, but that was also a flop. Eventually I got it light using copper tape and funny curls to make electric connections.

Final thoughts:

This was a seemingly simple task that proud to be very challenging for me. My biggest pitfall was just fighting my perfectionism. It doesn’t look as nice as I want it to look, and I know there are many ways to improve the actual electronic mechanisms. I understand very generally how the circuit is working, but would love to delve further. Overall, I’m proud that it lights up and resembles pretty closely to my design. Now…off to pray to the ITP and Circuitry Gods that it’ll work for class tomorrow!

Resources:

https://flashlightfinder.com/how-does-a-flashlight-produce-light/

INTRO TO COMPUTATIONAL MEDIA: WEEK ONE

How does computation relate to your interests?

Before thinking about the applications of computation, I think that its important to define 'computation', so here is its meaning according to the dictionary: 

com·pu·ta·tion (ˌkämpyəˈtāSH(ə)n/) noun

1. the action of mathematical calculation.

   • the use of computers, especially as a subject of research or study.

2. a system of reckoning

I particularly like the second definition. Computation is a way of understanding, mainly using mathematical calculation or computers. Makes sense why in orientation ICM was called "fancy programing". To sum this up, computation and computer programming mean to me, that you can be creative, using math as a method or tool for that creation. Tasks can be automated, we can take complicated actions and reduce them to simple logic. It is another way of thinking. 

In my quest to combine art and science, I think animation is a perfect blend of the two. The art of story telling, illustration, etc illuminated by algorithms that produce 3D models, actions, and graphics. Whether for a movie or a simple gif on a website, I can see coding applying heavily in those creations, and I want to learn how to do them. 

This term, I hope to start exploring 3D animation, game design, AR and VR. On a less artistic side, I am also really interested in how to use coding to organize and collect data, i.e. to make sense of the results of an experiment.

____

HW #1: Sketch

For this assignment we had to create any sort of sketch using p5.js. While not limited to 2D primitive shapes, I tried to stay within this constraint. I began by coming up with my idea, which took a while! For things like this, it is often best to just pick something and commit.

I was inspired by the awesome instagram feed of @henrythecoloradodog, which features adorable images of an adventurous cat and dog pair. The cat, Baloo, enjoys laying on Henry’s head. *heart eyes* Go follow!

I started by sketching out a simple drawing of “Cat as Hat”, mocking a rudimentary grid. I picked a point and just took off from there. Usually I am one to really figure things out by mapping it out on paper first, but because the p5.js wed editor has an “Auto-refresh” feature, I found I was able to quickly trial and error. I plugged in numbers, did simple math, and could see the drawing change as I was thinking. My biggest considerations while sketching, were the order of each shape so that things were properly overlapped or hidden, and color choices - the fun part. This is a link to the RGB Color Codes I used.

This feature of the web editor is a great example of strong UX in and of itself. It is so interactive and efficient that I can see the results of code changes instantly. I’m learning how functions work and evolving my image simultaneously.

Below is a screen recording of my process: [UNCENSORED: all typos exposed]

The biggest pitfall for me was that I didn’t really have a great plan for execution. For a drawing as symmetrical as mine, I feel there are probably much faster ways to create identical (but mirrored) shapes. Without delving too deep into more sophisticated functions, I felt I had to compromise my image a lot, or change things because I couldn’t get it exactly how I wanted. I feel like coding should make things easier. Looking forward to repeatability and automation! Bring on the loops!