Callie’s Page


This is my blog from my first semester at ITP. I have since switched to a Notion blog which you can view here.


Fall 2024


Intro to Physical Comp:



Intro to Comp Media:



Hypercinema:






P001 → Week 1 - Self Portrait



Worksheet homework: https://docs.google.com/document/d/1eK5FnCxi-PeNlACpjQPXuUlmBBO_bACaYwijqzEZKV4/edit

For the self portrait, I wanted to represent my appreciation for both science and art while experimenting with most of the basic shapes in p5.js. Since I’m a designer at heart, I went to Figma to sketch some potential designs and settled on this one:



From top to bottom the shapes gradually transition from grayscale and grid-bound into bright, overlapping forms. I felt like this was a good way to represent how I like to think both logically/scientifically as well as colorfully/creatively (and everywhere in between)! This design also felt well-suited to the contraints of drawing in p5.js until we learn more complex methods. 


I love to think using Figma, and I also discovered several helpful Figma hacks that made translating my idea into code even easier: 

For complex shapes, especially quad shapes, it was helpful to place pixels on the Figma canvas to get its (x, y) coordinates. Figma will tell you the position of any object on the page, so this took some of the guesswork out of plugging in coordinates to p5.js
Figma’s developer mode provides RBG values in a way that is easy to copy and paste into p5.js



I started with the backround and top row of shapes, which was very simple as they all aligned to a grid with no overlapping




Things got more complicated as I moved down, as the shapes begin to break from the grid and I began experimenting with the triangle, quad, and arc shapes for the first time. 

I originally began by using hex codes from Figma as this is the color system most familiar to me, but when I started using transparency I found that the alpha parameter is not compatible with hex codes. After some research it seemed like there was no way around this, so I switched to RBG (I would love to know if there’s any hack for this however). 

The arcs were the trickiest to work with since I haven’t thought about radians since high school geometry. I sort of just played around with values until I liked what I saw, though I probably should have approached it more mathematically. Here’s an example: 




Some takeaway questions/areas of curiosity from this lab: 

  • How to set an alpha while using hex (if possible) 
  • Is there a better way to rotate simple rectangles and other shapes? I ended up creating custom quad shapes to make tilted rectangles, etc, but it seems like there should be a better way. 
  • What if you wanted to create a squiggly line? 
  • Are there other ways to use Figma with p5.js? 


The final result: