Fab Wk 1: Flashlight

Final Result: 


For this first assignment to make a flashlight, I knew I wanted to do something boxy and minimal. This is partly due to my current skill limitations in the woodshop ( i have yet to learn how make anything remotely round using wood) and my preference for clean-looking aesthetics. I also wanted to give myself the design constraint of spending under $15 on this. And with these goals in mind, I started my flashlight!


1.) First I started out sketching my circuit schematic and some rough sketches of what I wanted it to look like. I included a potentiometer as a dial in my piece.

I also decided on using the top of the water bottle as my flashlight’s top. I liked the round dome like shape of the water bottle, and I have so many water bottles at home waiting to be used or recycled. So I decided on this sketch below.

This slideshow requires JavaScript.

2.) The I went to Tinkersphere to get the lamp bulb holder, the led lamp, and the dial cap for the potentiometer. These all ended up being $11! The rest of the materials (wood and acyrlic) I both found in the junk shelf and also had scraps of wood from a previous pcomp project.

3.) Next was prototyping using cardboard and the water bottle. My process for this was to a.) get precise measurements of the potentiometer dial, dimension of the bulb holder top, b.) mocking the box up in illustrator, c.) laser cutting it using cardboard

See photos below for process on prototyping:

4.) Next was testing out the water bottle flashlight top idea. It ended up looking to rough and imperfect for me. See photos below

This slideshow requires JavaScript.

5.) It was very helpful to prototype because I realized I had put the circle hole for the potentiometer dial in the wrong spot. It was on the bottom when it should’ve been on the side. Another realization was that the water bottle looked cheap and not great. Instead I went with another design I had in mind. I decided to use some scrap acrylic to make a clear top for the box. I made readjustments to the illustrator file, then laser cut the wood and acrylic, and assembled it all together with wood glue and acrylic glue. See images below.

This slideshow requires JavaScript.

6.) During this time of waiting for the glue to dry I also soldered my wires. (Forgot to take a picture of this, but here is a picture of the full circuit soldered together.)


6.) As a test ( I don’t spray paint often), I tried out spray painting the wooden box. Oi! This didn’t look good. I don’t think I should’ve used white spray paint. It shows the flaws of the box and the teeth more. Also the spray paint I was using was not coming out properly, it was very leaky and was more liquid-y than I’d like. So I think I will need to sand it off tomorrow and respray paint. See images below of how ugly the box now looks with the white spray paint.

8.) I sanded the top acrylic to create a diffuse effect.

9.) I sanded off the spray paint and respray paint it with a new spray paint I bought. Unfortunately this brings up the cost of my total project to be a little more than $15.

PCM Wk 8.5: Final Project Reflections


Since the last class (before meeting with Professor Tom for office hours), I felt lost about what to do with this idea. I knew I wanted to deal with the topic of solar energy as it is a topic I feel compelled to better understand. One of the best part about designing is being able to learn about new subject matters that I am not an expert on but am interested in. This is what I was hoping to do with this project – use this as an excuse to learn about an important, , fascinating and extremely relevant subject. However, I am still in the process of learning about how they work.

For next steps, I definitely need to do more research by collaborating with more experts on this topic, figure out what should be addressed in this interactive? Who is this for? What do I want the interactive to communicate? And then figure out the technology and visuals for it.

After doing a little more research and talking with helpful ITP resident Jasmine (someone whose focus is on energy), she brought up the interesting challenge of solar energy is their storage. She mentioned the duck curve (see videos below for reference). Apparently, solar energy is being wasted because these traditional power plants and power grids don’t have enough storage to handle the peak times when the sun is shining the most (which is midday). However, a solution could be having local energy storages like batteries that can hold the excess energy that is received during the day and be able to output this energy at night (when the solar panels are not in use).

Option A: 

Maybe the final project could present this solution of storing solar energy in a residential batter and also explain the challenge of storage within solar energy. Quick sketch of an idea below:



Resources + Research: 

Helpful reading material on solar energy: https://www.pveducation.org/
(It’s taking me a while to get through this material, but I’m hoping to chip away at it bit by bit).

Video research on solar energy:


Some Inspiration:


PCM Wk 8: Final Project Proposal

Idea: Solar Energy Learning Table

I aim to create an interactive learning table and display that helps myself and others better understand how solar panels work and how energy is converted into electricity.


1.) Learn about the science of solar cells: how light is turned into electrical energy through the use of semiconductors.

2.) Show that solar energy is sustainable and green.

3.) Create a hands-on instructional display to show the effect of light intensity on power generation of solar cells by altering the intensity of light through (polarizing/ neutral density/ color) filters and rotation of light.

Description of rough idea:

On the right side of the display is an interactive that that has a white LED light source at the top. The LED light will shine on the Neutral Density Filter (NDF), which will then shine on the solar panel. These filters reduce the amount of light passing through without changing the color. Depending on the transmittance of the NDF, the amount of light that passes through will differ; this will effect the amount of current generated by the solar cell. We will measure the current using analog read. This sensor reading will effect the diagram drawn on p5.js sketch that is running on a website. The p5.js sketch will show that when there is more light shining on the solar panel, a  larger number of charge carriers is generated and flowing through the circuit.

Bonus feature: After a certain number of seconds, the screen will change to reveal how much energy is generated in that time span when using the specific filter chosen by the user. For example, the screen may say: ” Using this solar panel, you have generated enough energy to power a lightbulb/ cell phone.”

Still trying to work out this bonus feature. Perhaps the timer is counted when the LED light switch is turned on.

Sketches + Diagrams:

a.) Rough sketch of the display’s form with short descriptions of each component (all is subject to change)

pcomp final sketch of display

b.) Sketch of each component with more detailed descriptions

sketch of each component and its function

c.) Diagram of how a solar cell absorbs light and converts it into energy.


d.) Solar panel will be my light intensity sensor.

solar panel

Resources + References:

PCM Wk 8: Transistors, Relay, Motors

Controlling High-Current Loads


  • For controlling devices that need more electrical current than micro controllers can supply, we can use 1.) relays, 2.) transistors, 3.) optoisolator
  • Relays – devices that control a switch through magnetism; a little slower to close ( a few miliseconds delay)
    • 2 types of relays: electromechanical, solid states
      • solid state relays: metal contact switch; able to control AC
      • electromechanical: using magnetic field to close the switch
  • Transistors: used for switching a higher current circuit rapidly; they are electronic devices that can work as a switch; faster than relays
    • allows control of larger current by a smaller current
    • 3 connections: 1.) base, 2.) collector, 3.) emitter
  • 3 differences between relays & transistors:
    • motor as load; motors are inductive loads –> creates a reverse voltage when spinning
    • protection diode: in parallel with transistors; protection diodes routs any reverse voltage around the transistor to protect it
    • microcontroller : attached to the base/gate. transistor’s emitters and base must have a common ground
  • Helpful Tip: ” if you are switching DC motors, solenoids, or other high-current DC devices which create motion, it’s better to use a switching transistor than a relay”


  • It says ” One of the main differences between MOSFETS and bipolar transistors is that MOSFETS require negligible current on the base in order to activate.” What does “negligible current” mean?
  • Need to better understand transistors and how the base, collector, emitter work.
  • Why are MOSFETS using the term “drain”, “source” instead of “emitter” or “collector” like the bipolar transistors? Why the different names if they are doing the same thing? Are they doing the same thing?
  • When do I know when I should use a transistor versus a relay switch? Is there a best practice for when to use which?


DC Motors: The Basics


  • H-bridge to control a DC motor from a micro controller. H-bridge chip includes diodes to protect the transistor from back voltage
  • DC Motor’s speed is proportional to the supplied voltage
  • Best way to adjust speed is by using PWM (~ on the Arduino)


  • Regarding: “The top two transistors above are P-channel, meaning that they allow current to pass when and the bottom two are N-channel, so that the proper two transistors always switch together. When the left control pin is high, transistor 1 (labeled Q1) turns off because it’s a P-channel and Q2 turns on because it’s an N-channel.  The same happens with Q3 and Q4. If you were using this circuit, you’d want to make sure that the control pins are always reversed; when one is high, the other is low” , I don’t think I understand this.

Meet the Motors


  • all motors mentioned in the video use electromagnetism
  • Actuators: devices that turn energy into motion (i.e. motors)
    1. solenoids:
      • converts electricity to motion
      • coils are concentrated electromagnetism
      • “a cylindrical coil of wire acting as a magnet when carrying electric current.”
    2. DC motors:
      • rotor inside; the wires are makes sure polarity is always alternating
      • generally, high speed, low torque
      • reversing polarity –> reverses direction
    3. Gear head (another type of DC Motor):
      1. slow speed, head torques
    4. Stepper Motor (another type of DC Motor):
      • inside out DC motors
      • permanent magnets on the shaft
      • coils arranged on outside
      • moving by steps
      • controlled motion / able to move 360 degrees
    5. Servo Motors:
      • limited range
      • Duration of pulse corresponds with the position we want servos to take

Controlling Stepper Motors


  • stepper motors rotate a full 360 degrees, but unlike dc motors, they can be positioned at a particular angle
  • stepper motor: a motor controlled by a series of electromagnetic coils; center shaft has a series of magnets mounted on it
    • coils surrounding the shaft are alternatively given current or not–> this creates magnetic fields which repulse or attract magnets on a shaft
  • 2 types of stepper motors:
    1. unipolar stepper motors:
      1. 5/6 wires
      2. 4 wires = 4 coils connected by 1 pole
    2. bipolar stepper motors:
      1. 6 wire motors: 2 coils divided by center connections on each coil
      2. 4 wires coming out of it
  • Stepper motors receive more power than micro controllers can give them (like other motors)
  • H-Bridge Control of Stepper Motors:
    • apply voltage to each coils in a specific sequence in order to control the stepper
  • Both uni and bipolar motors can be controlled with an H-bridge
  • to know the position, just need to count how many steps and how many degrees (Ex: 1.8 degrees stepper X 200 steps = 360 degrees)
  • 2 wire controls: 2 wires are always set to opposite polarities



  • Don’t understand the schematic for the unipolar stepper to an H-bridge.
  • Don’t understand 2 wire controller. What is an NPN transistor?

Animation Wk 6-7

When the user shows this hand drawn x symbol to the screen, which is often seen when the console shows an error in your code, a coding syntax character will appear. Associated with each character is a little blurb about the syntax and some helpful reminders when using it. This AR piece is intended to be a educational tool and hopefully a momentary relief from the troubleshooting process of coding.

Below are some videos that show how this piece would work.

Curly Brackets character rendered in HD.

cinema4d curly brackets dood


1.) Sketches of the idea, which changed significantly from the original concept that used the 3d text. Instead of having 3d text over the image tracker that said “Class not making any sense?”, there would be a 3d character of a syntax character. Below are some sketches of various characters I was hoping to model.

2.) Next was modeling the character in Cinema4d. I am happy I got a chance to use this program, but I am still familiarizing myself with it. So this step took a little longer than I had hoped. Nonetheless, it was fun and I was able to model my character. Below are some screenshots of this process.

Screen Shot 2018-10-29 at 6.46.33 PM.png

3.) Simultaneously, I was following along with the roll a ball unity tutorial (see video below). This was so helpful and helped me a lot. Most importantly, it was good to see that it was possible to do text. However, this would prove harder than expected to get text to animate.

4.) I then wrote script for the character.

5.) Next was animating the text. I attempted many different things to try to get animated text. It was easy to get text, but I wanted to create a animated dialogue, so that each line would appear one at a time.

Steps I tried:

a.) I tried the TextMeshPro and followed along with a tutorial: https://www.youtube.com/watch?v=xfo0NrLJe_k

b.) I even got this TextFx animation plugin and wrote the script for it by following along with this tutorial: https://www.youtube.com/watch?time_continue=36&v=I1ZGTID995A, but I still couldn’t get it to work.

c.) Also, found this tutorial online (https://unity3d.com/learn/tutorials/topics/user-interface-ui/ui-text?playlist=17111), which was helpful to know the capabilities of Unity, but still didn’t help me achieve the animated dialogue text that I was looking for.

Eventually, I decided to just use 3d text and just have the dialogue be in a short paragraph.

6.) Next step will be to do another 2 characters. This is still in progress. Plan to update this blog with the results soon!

ICM Wk 7: Data


For this week’s assignment to create a sketch that uses an external data source. I decided to proceed by finding dataset regarding suicide rates in different countries and use the table function of p5.js to help visualize the rates.

Here is the final code: https://editor.p5js.org/elinsterz/sketches/r1Zh07EnQ

Below is a video that shows the final results:




1.) I knew I wanted to focus on data that dealt with death, mental health or happiness levels. Eventually, I decided to focus on visualizing the data about suicide rates in different countries. I found the data set on this github account: https://github.com/liadkeller/Suicides-Data-Analysis-DSE200X

Dataset looks like this:

data set from github

I specifically decided to use this csv file: https://github.com/liadkeller/Suicides-Data-Analysis-DSE200X/blob/master/suicide-rates-by-country.csv because it had multiple years (which date back to the 1950s) and a rate for each year. It also had many countries to work with. After reviewing this set, I thought it would be great to map the change in suicide rate over the years for different countries.

Then I sketched out the idea and wrote a to do list for tackling this. See sketch below.


2.) After I decided what type of data I would be working with and how I wanted to display it, I followed along with the 12.2 Ortiz Table Example in “Make: Getting Started with p5.js”. Since the 12.2 example deals with loading tables, I knew this exercise would help me when working on my own sketch. This was an extremely helpful example as it covered how to create the lines for the graph and how to map the data to the graph. It was also extremely helpful to know the specific syntax for working tables (i.e. getRowCount(), getNum()) Here is the code for that: https://editor.p5js.org/elinsterz/sketches/rJm0d1Vn7

12.2 ortiz example
This example was using vertex, and I knew I wanted to use bar charts for my sketch. So I changed this to be a bar chart instead of a line graph. Here is the code for that:  https://editor.p5js.org/elinsterz/sketches/BJRh5G42Q

12.2 ortiz bar chart

3.) After better understanding how csv and the loadTable() works, I imported the suicide rate data to the ortiz example that I just worked with. A couple of elements I had to change were the mapping coordinates and adjusting it to fit the larger canvas.

Code here: https://editor.p5js.org/elinsterz/sketches/H12R7bVhX
The sketch below is showing the
v2 sketch

4.)  The sketch above is not interactive at all; it displays all the suicide rates of all the countries over with all the years available. So for my next step, I worked on just displaying the data set for 1 country first: Australia. I also tried to use the button feature so that when you press on the button, the data for Australia will show.

In order to do this I had to create a variable for the button. Then “createHeader()” function was made to store the createButton dom function. A callback function was created so that when the button is pressed, it will perform “function aus()”.

The function “aus()” was created for the Australia button. The function has a for loop that goes through each row of column 1 (the country code column). If the loop runs into a string called “AUS” it will get the number of each row in column 3 (suicide rate). Using the data retrieved in column 3, it will draw an ellipse randomly.  ( I just did ellipses at random places as a test ).


5.) Then I tried to use this Australia button sketch to make the bar chart (that maps each year from 1955 – 2005), instead of randomly placing ellipses. This was no doubt the most frustrating and challenging part. After many sad attempts, I eventually realized that I needed 2 for statements. The for statement from before that finds the rate for all the codes with “AUS”. There is another for statement that does the mapping function from the ortiz example.

Another addition (that took forever to get to ) was adding “i++” after the first for loop. This is to make sure that every time the code runs through the if statement, the code will go to the next index in the array.

The code is saying: find the strings in column 1 that has “AUS”. If it is “AUS” then get the number in column 3, which is called “suicideAus[]”. Then go the next row that has “AUS” and perform the same task. If the first for loop is complete, go to the second for loop and run through the array of “suicideAus[]”. Map the item in “suicideAus[]” to the x and y coordinates on the canvas. The x maps the number of items (column 1, years) in “suicideAus[]” the x coordinate. The y maps the suicide rate (column 3) to the y coordinate. Draw a rectangle using the x and y coordinate of the map function.

Here is the codehttps://editor.p5js.org/elinsterz/sketches/SJHkB7VhX

Below is the sketch: 


6.) Last step is making 4 -5 buttons for all the different countries. I ended up choosing only the countries that went back enough years. Also I wanted to keep the years consistent between  1955-2005, so I had to delete some years of some countries that had data before 1955. Last and easiest step is styling the page a little more by adding a different color for each country and creating a title.

Here is the final code! https://editor.p5js.org/elinsterz/sketches/r1Zh07EnQ


This week I definitely felt like I was not completely getting the material. After following along with all the Coding Train videos I still felt like I would not be able to write any of the data code from scratch. I’m hoping that with more practice I will get much better and be able to not rely so much on other people’s/ example codes when I work on my own sketches. For the homework assignment, I was really just taking bits of code from the book, bits of code from the coding train example, bits of code from someone else’s sketch to try to make it work for myself. At some point, I had all the elements I wanted in 3 different sketches and was trying to compile it all, which took a lot of head banging to figure out. It is rewarding when it does come together, but I’m just constantly self doubting myself. And when I couldn’t make my original idea work, I kept switching ideas, trying to find new data that was perhaps easier, more simple. This is a problem. I need to stick with it. In this case I did go back to my original idea, but I wasted so much time just trying to find simpler data and brainstorming ideas (that I didn’t even end up using).

Another thought: I am understanding the csv and loadTable() a little more, but I still need so much practice with using APIs and JSON. Because I only tackled the Table for my homework sketch, I missed out on familiarizing myself with APIs and JSON, which is definitely equally interesting and helpful to know. I will have to find time to go back to this section and review.

Questions + Notes: 

I feel like there are so many questions and random notes that I stumble across, so I’m trying to record my findings and confusions in a more organized way. Therefore, I’ve created this google doc so that I can remember for myself. It’s also helpful for when I meet with the residents for help, so I know exactly which questions I need clarification on: https://docs.google.com/document/d/1SxqH8ZKcj5BHDhj6kd7POKk8_rkW7q4olZZwaDr6cwU/edit

PCM Wk 7: Serial Output From P5.js

Followed along with the lab:


a.) Set up breadboard

bread board set up for lab

b.) Program p5.js for serial communication
See video below for example of the keyPressed() function and mouseDragged() function

c.) Mousedragged() function in p5js to change the values displayed on the p5.js canvas and the LED brightness.


d.) keyPressed() function in p5js reading the pressed keys 0-9 and the LED changes depending on the # pressed.


e.) keyPressed function to read H or L in order to effect the LED.


Notes for self:

1.) “println” doesn’t work in p5.js. It has to be “print”.

2.) “serial.read line()” in p5.js works with “println()” in Arduino. p5.js reads ASCII and arduino prints ASCII.

3.) “parseInt()” in Arduino: converts p5.js string into an Arduino integer. It parses out the ones that are not integers.


1.) For the keyPressed() function, why is the “outByte” defined as a “byte” and not “int”, like the mouseDragged() function? I will try both and update the results.

2.) Tried sending ASCII encoded strings with Arduino and I think I need more clarification with parseInt(). Why and when do we use parseInt()?