Looking into a stained glass window

Objective: To create a drawing using p5.js.

Computer programming, to me, means freedom and independence. Programming is like having a pen with unlimited ink. I can use my computations skill in any setting – at home, at work, or at school – for any purpose – to calculate statistics of dataset, to draw an image, or to design a website. When I was pursuing my biology degree during my undergraduate studies, I often felt constricted by the tedious procedures of scientific experimentation and endless memorization. Lectures and examinations were the focal point of my courses. If I wanted to practice my skills or newly acquired knowledge, I needed access to a lab, classroom, or other academic facility. With computer science, everything is different. I am no longer restricted by the confines of a laboratory or classroom. I decide where I hypothesize and create solutions to unanswered questions.

Growing up, I was not exposed to computer science. It never seemed like a career option that was accessible to me. When I enrolled into a computer programming course in college, I fell in love with the diversity of possibilities and applications of this one skill. Now as a master’s student, my favorite part of computation is being able to combine it with my interest of biology and sustainability. One of my long term goals is to increase accessibility of these two fields in disadvantaged communities. I want more children and young adults to discover the possibility of computer science early on in their academic careers. Computer science is an extremely powerful tool, a pen with many colors. It is highly stigmatized in society as intimidating, difficult, and strictly catered to men. As a result, the projects I want to create this term will highlight visibility and education on issues of recycling, waste disposal, consumer dynamics as well as creative coding projects whose sole purpose is to instill child-like wonder. I want my projects to be a talking point and an experience for the audience, not one or the other.

What are my projects going to look like? Well, I am still brainstorming ideas. I am not quite sure and am keeping an open mind. I still have lot of material that I would like to learn. Some projects from the NYU ITP Inspiration Wiki page I really enjoy are:




The result: I made a stained glass window (left) inspired by stained glass artwork by Laurie Cardinali Kester (right).

I first focused on assessing what shapes I would need to begin and what would need to be drawn first to take into account that what is drawn last will overlap anything drawn before. I started by drawing a large circle for the window’s outline and a smaller circle for the outline of the moon/sun. Using the arc function, I played around with the radians to create the moon’s arc.

Next, I drew another circle to create a visual reference of where each of the sun’s waves should end. Each wave was made with 3 curves. Creating the sun’s waves using the curve function was definitely the hardest and most time consuming part of this sketch. The curve function was not intuitive to me and I struggled estimating what were the appropriate values to use to create the line I was aiming for. My solution to the issue was to use the online curve stimulator on p5’s curve() reference page and try to find a relationship in the position of the 4 points that is needed for the parameters of the curve function. I wrote comments alongside my code that shows the mathematical operations I performed to the x, y coordinates of the curve.

Once I found an equation that worked, I continued to draw 5 of the sun’s waves.

Then, I used two final curves to create the lines to the left of the moon.

Next, I colored the image. Since some of the shapes I made were irregular, I had to be creative and use multiple 2D primitive shapes to fill in an area.

Lastly, I added stars to my sketch. The stars were created by overlapping two triangles! I believe it adds a nice touch to the overall sketch.

To read my full code, please go to my sketch here.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s