This is an update on the progress I’ve made thus far on the schematic and website of the solar project.

1.) First things first was to just quickly mockup in Illustrator and Sketch what I wanted the design to look like. I tackled it in Illustrator initially since I’m faster there and because it is somewhat difficult to illustrate shapes in Sketch. Then I copy and pasted the vector shapes into Sketch to be able to get the exact coordinates. Small design changes were made to help me be more accurate.

2.) My next important step was to make a list of to do items to tackle for the weekend.

3.) I then got to work on my first step: drawing the solar cell schematic. Using the coordinates off of sketch I was able to have a rough estimate of where to put the shapes based on the canvas size of a tablet (1024 x 768 px). Some coordinates for the shape were still unknown so I still needed to calculate and map them out.

4.) I decided to work on Atom this time, because I wanted to get comfortable with using a text editor and being able to connect to the site through the local host. I also added text for the coordinates as a guide to help me with drawing. See below for sketch.

5.) I also tried to center the drawing on the canvas using this positioning your canvas code I found: https://github.com/processing/p5.js/wiki/Positioning-your-canvas. I also used beginShape(), endShape() so that in case I need to move or scale the schematic I could easily do so even though I hard coded coordinates.

6.) After finishing the drawing, I tried to make the animated waves for the photons coming from the sun. I did this in a separate sketch file. I refracted the code from a codepen piece: https://codepen.io/xhepigerta/pen/EWZMLE

7.) I made a separate sketch just to get an animated moving arrow: https://editor.p5js.org/elinsterz/full/SJvNQTJC7

Here it is combined: https://editor.p5js.org/elinsterz/full/Hyu3g0yAX 

7.) A separate sketch for the part where the electron moves through the circuit: https://editor.p5js.org/elinsterz/sketches/rkecEHER7

8.) A separate sketch for the part of the animation that requires the electrons (placed in different locations) to travel to the beginning of the circuit that is on the front contact. I just focused on the code for “tweening”, since I would need to change the start and stop coordinates once I combine the sketch.

Code: https://editor.p5js.org/elinsterz/sketches/HyS4EEIRm 

9.) Now that all the animation elements are in their own sketch files, it is time to combine them all into one code. In order to have my code be easier to manage, I transferred the files onto Atom and am coding from there now.

I first created a class for the photon, the electron, the sun, and the cell drawing. the electron class has multiple functions, such as tweening, generate and circuit.

Then, I strung the sequences together in the “sketch.js” file using boolean statements that trigger a bunch of if statements.

 

 

10.) The hard next step was trying to get the animation to loop through after one round. I had to reset the variables and have the boolean statement return back to true. Below is the result of that:

 

11.) Next, is trying to create a slider version that will loop. This requires a lot of revisiting classes and trying to read where the photon position lands in order to generate the electron hole pairs. The struggle is currently still continuing, but so far I have the slider generating more photons. Next step is having each photon that is generated also create an electron hole pair that loops through the circuit.