Coding Exploration with the Random Function
A p5.js Case Study
My Proposal and Original Plan
I wanted to learn how to create a random animation of pre-loaded images using the random function in the p5js web editor. I wanted to effectively post this project on social media (Instagram) as a fourth post in a 3-part series for Planned Parenthood awareness.
How My Plan Changed
I originally was going to use my teacher’s Autumn Harvest p5.js code (random pumpkin image maker) as a base. I realized this wouldn’t work for my idea because her pumpkins were being drawn and literally made in p5js, as where I was uploading previously drawn imagery. I needed to do it this way to create visual elements in Illustrator that matched my previous posts, such as dot overlays and inner glows, as well as very specific color pallets.
Narrowing Down Imagery to Types of Contraceptives
- Condom (in and out of a square pack)
- IUD Implant
- Birth control pill (round and square pack)
- Arm Patch
- Vaginal Ring
Sources I used
Code train Tutorial: The Random Function
Processing with the Random Function Video
Progress
I watched “the random() function” and “importing objects and images” Coding Train videos multiple times. Unfortunately, they just weren’t clicking with me. I tried to upload my 14 pre-made images and use the preload function but it was not successful. I also used Jenny’s “array of names” example to look and base some code off of.
Illustration Results
Coding Progress
With the help of creative director Jenny Kowalski, we used the preload function to preload an array of images, jpgs which I uploaded into the sidebar of the p5.js editor. It cycled through the array but the images fluctuated in size, so I resized them, saved them as pngs, and uploaded the pngs instead but the code stopped working. I ended up having a typo in my code, an extra () around an i, a very simple fix.
Revisions:
My revisions included making sure everything was named exactly correctly, spacing and symbols and all (very tedious but necessary).
My Code:
let array = []
let img;function preload () {
//array [0] = loadImage ('images/image0.png')
for(let i=0; i<13; i++) {
array[i] = loadImage ( 'images/' + 'image' + i + '.png');
}
}function setup() {
createCanvas(400, 400);
}function draw() {
background(220);
frameRate(1);
console.log (Math.floor(random(array.length)))
let r = Math.floor(random(array.length));
scale(.25);
image (array[r], 0.5, 0);
}
See An Animation of my Illustration:
This project was completed as a part of the Spring 2021 Creative Coding class at Tyler School of Art and Architecture. For more projects from this class, visit the Creative Coding medium feature page.
