Vegas Lights

Trial of Errors

After binge watching videos about Reaction Diffusion and Perlin Noise I started to brainstorm ideas for implementing one or the other in the third ICM Homework. I spent more time than I care to admit trying to figure out ways to use them within the realm of my abilities. I finally scaled back my efforts to using bezier curves to make swooping fan patterns controlled by a slider, like the rough sketch below.

Initial fanning idea.

Initial fanning idea.

Again, I spent way too long trying to get the bezier curves to act in a manner that would be algorithmically scalable. Lack of time and patience caused me to, again, abandon this idea and move on to just using straight lines. Having one set on the top of the frame and another on the bottom. I then began having difficulties making the lines fan out in the way I wanted. The screenshot below is one of the patterns created.

Finally, I decided to switch up my thinking again and make use of the bottom two fanned out sections but then to add more interactivity to the project. The gif below shows the final outcome of my multiple failed attempts at making something I liked.

The final project included a few different elements of algorithmic design, including the shapes and expanding lines. I was able to create the slider with the help of Veronica Alfaro. The Elvis face was added at the end because it felt like the graphic wasn’t quite finished without something in the center portion and all of the rainbow colors felt very Vegas-esqe to me. This homework was a challenge for me in terms of accepting that my programming skills are more limited than I thought they were and that it is necessary for me to spend time analyzing and really understanding the algorithms behind the generative art I enjoy.


ICM Homework 3 
Vegas Lights 
let padding = 50;
let slider;
let img;

//preload function to import the image
function preload() {

  img = loadImage('images/elv.png');

function setup() {
  createCanvas(400, 400);
  slider = padding;

function draw() {
  //create the slider object
  sliderPos = map(slider, padding, width - padding, 0, 20);

  //nested for loops to draw the cirlces and squares in the background
  for (let j = 0; j <= width; j += 20) {
    for (let k = 0; k <= height; k += 20) {
      //let x = random(10) * 100;

      if (sliderPos < 20) {

        ellipse(j, k, 10, 10);
        rect(j + 10, k + 10, 5, 5);

    //make elvis appear as the slider is dragged
    if (sliderPos < 20 && sliderPos > 1) {
     image(img, width / 2 - img.width / 4, height / 2 - img.height / 2,      (sliderPos * 6), (sliderPos * 6));

    //draw fanning lines at the bottom of scree
    for (let i = 0; i <= 50; i++) {
      stroke(random(255), random(255), random(255));
      if (sliderPos <= 20) {

        line(width / 2, height, 0, sliderPos / 2 * i);
        line(width / 2, height, width, sliderPos / 2 * i);


    // if the slider is < 50% then the lines begin to 
    //converge on each other, when > 50% they expand to this point
    //code to draw slider at bottom of screen
    line(padding, height - padding, width - padding, height - padding);
    ellipse(slider, height - padding, 20, 20);

    //set the slider to the mouseX position as long as it is
    //within the correct set of bounds.
    if (mouseIsPressed && mouseY >= height - padding - 10 &&
      mouseY <= height - padding + 10) {
      if (mouseX >= padding && mouseX <= width - padding) {
        slider = mouseX;