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:






P004 → Week 4 - Pattern




For this assignment I was inspired by Ryoji Ikeda’s visual representations of binary code, and thought it would be interesting to make a pattern that looks like the p5.js code editor. 

I like the colors of the web editor and felt like the blocks of code could be abstracted in a recognizable way. Most p5 code blocks are dominated by white and gray, with splashes of yellow, pink, and blue for different conditionals, system functions, and variables.


I started by drawing out one line of “code.” For variation, each line could contain between 2 - 10 “blocks” (10 is a lot, but it’s to accomodate longer canvas sizes) and each block can be between 20-120 pixels long.  

Colors are randomly pulled from an an array of hex numbers (’colors’), with grey and white outnumbering the blue, yellow, and pink to more accurately reflect the typical ratio of colors in a block of code. 

The x coordinate is updated at the end of each loop to the end of the the previous block, plus 8 pixels for spacing. 
for (let i = random(2, 10); i < 10; i++) {
  hex = colors[int(random(0, 9))];
  fill(hex);
  blockLength = random(20, 120);
  rect(blockX, blockY, blockLength, 12);
  blockX = blockX + blockLength + 8;
}




I then added another for loop to add multiple lines of code. I didn’t like how the code could go beyond the right and bottom edges of the screen, and added in some conditionals to fix this 

if (blockLength + blockX > width - 20) {
        //check if the block is going to go off the screen, and if so make it invisible
        noFill();
      }
      if (blockY > width - 20) {
        noFill();
     }

I’m sure there’s a better way to do this by preventing the blocks from being drawn altogether instead of just removing the fill... 
let lineBreakTrigger = int(random(0, 5));
    if (lineBreakTrigger == 2) {
      blockY += 36;
   } else blockY += 20;


One last thing - in real code, there’s going to be line breaks. I added this mechanism to randomly add more spacing between some of the lines 

I’m happy with the overall effect, but I did have to turn off looping to prevent the rectangles from constantly being rewritten. It’s fine for the purpose of this sketch, but if I wanted to add interactivity it would be an issue. Is there a better way to keep the code looping without each rectangle being rewritten (i.e. constantly redraw the -same- rectangles each time it’s run)? 


The final result: 

 


BESbswy