ICM

This contains all posts related to Intro to Computational Media

prjkt3_10

Breath Deep

Breath Deep

Sometimes I find myself staring out into space to relive stress and re-center however, lately staring into space hasn’t been enough. So I decided to make my final project an interactive distraction. I wanted to focus on user interaction, making it easy for the user to adjust the output and understand how the changes they were making effected the end result. The ability to re-start the graphic was also important.

Since the UI was an import aspect of this project I wanted to focus on making it easily understandable. My first iteration was not the most user friendly.

In the above version all of the sliders for the starting position of four shapes were grouped together, followed by two sliders that control global variables, followed by sliders for color and stroke for each of the shapes. The order didn’t really make any sense. The other aspect of this interface that I disliked, and pointed out by John Henry, was that the user had to have all the shapes actively on screen. Adding a check-box to allow the user to select what shapes were seen made it so the user had more control over the graphic that was produced.

In the final UI global variables and the ability to re-size and reset the graphic are located at the top of the UI, each shape and all sliders associated with it are grouped together. A check-box turns the shapes on and off. The value is displayed to the right of each slider for those that control the shape’s position.  I didn’t feel like it was necessary to display the vale for the color and stroke since those elements don’t change the way the shapes behave, and the values aren’t important for the user to really understand how the changes to the sliders effect the position and size of the shapes.

Breath Deep
Breath Deep
Breath Deep

The images above show some of the combinations produced with the adjustment of various sliders. The first image is “in-set” with the UI showing under it. The other two images show the graphic as “full-screen”.

I would like to continue the development of this sketch there are a few different ides I would like to implement.

  • I want to be able to mirror the graphic produced into the four quadrants or even make it so the use can determine how many mirrors of the graphic are produced.
  • The ability to save the graphic as an .svg and then plot it out would be a nice added feature. That would enable the user to create permanent works of generated art and not just use this as a tool for relaxation.
  • I would like ta add a slider for each shape that would change the spacing between each new object in the series, to open up the patterning a bit.
  • Add line(), beginShape() and endShape().

The code is long so feel free to skip it and head over to the working sketch found here. https://editor.p5js.org/phil-in-a-can/sketches/d4J4kzzvH

This is the main sketch.

let x1 = 0;
let y1 = 0;
let x2 = 50;
let y2 = 50;
let x3 = 25;
let y3 = 25;
let x4 = 30;
let y4 = 75;
let rep = 2;
let col1 = 10;
let col2 = 100;
let col3 = 200;
let col4 = 300;
let strk1 = 1;
let strk2 = 1;
let strk3 = 1;
let strk4 = 1;
let frmRt = 30
let shape1 = false;
let shape2 = false;
let shape3 = false;
let shape4 = false;
let deg1 = 0.33
let deg2 = 0.33
let deg3 = 0.33
let deg4 = 0.33

function setup() {
  createCanvas(400, 400);
  background(0, 0, 0);
  angleMode(DEGREES);
  colorMode(HSB, 360, 100, 100, 100);
  // rectMode(CENTER);
  // frameRate(frmRt);
  create_ui();
}

function draw() {
  frameRate(frmRt);
  slider_value('Rep', rep);
  slider_value('frmRt', frmRt);
  slider_value('x1', x1);
  slider_value('y1', y1);
  slider_value('Degrees1', deg1);
  slider_value('x2', x2);
  slider_value('y2', y2);
  slider_value('Degrees2', deg2);
  slider_value('x3', x3);
  slider_value('y3', y3);
  slider_value('Degrees3', deg3);
  slider_value('x4', x4);
  slider_value('y4', y4);
  slider_value('Degrees4', deg4);
  noFill();
  translate(width / 2, height / 2);
  // push();

  // rectMode(CENTER);
  if (shape1) {
    ellipseMode(CENTER);
    push();
    // stroke(0, random(0, 85), 0);
    // stroke(85, random(0, 85), 85);
    strokeWeight(strk1);
    stroke(col1, 100, 100, 50);
    rotate(x1 / deg1);
    // rect(x, y, rep * (random(1, 10)), rep * (random(1, 10)));
    // ellipse(t1, t2, 10, t1 + 45);
    ellipse(x1, y1, 10, x1 + 45);
    // rect(x, y, rep * x + 1, y + 5);
    // x = x + 5
    pop();

    x1 = x1 + rep;
    if (x1 > width) {
      x1 = 0;
      y1 = y1 + rep;
    }
  } else {}

  if (shape2) {
    push();
    ellipseMode(CENTER);
    // translate(x*0.33,random(10,200));
    // translate(0, 0);
    rotate(x2 / deg2);
    // fill(0,random(0, 255), 255,0);
    // stroke(85, random(85, 170), 170);
    // stroke(0, random(85, 170), 0);
    strokeWeight(strk2);
    stroke(col2, 100, 100, 50);
    // rotate(x1 / 0.33);
    // ellipse(x1, y1, 10, x1 + 45);
    // circle(x, y, rep * (random(1, 10)));
    ellipse(x2, y2, 20, x2 + 45);
    pop();

    x2 = x2 + rep;
    if (x2 > height) {

      x2 = 0;
      y2 = y2 + rep
    }

  } else {}

  if (shape3) {
    push();
    ellipseMode(CENTER);
    // translate(x*0.33,random(10,200));
    // translate(0, 0);
    rotate(x3 / deg3);
    // fill(0,random(0, 255), 255,0);
    // stroke(0, random(170, 255), 0);
    // stroke(170, random(170, 255), 255);
    strokeWeight(strk3);
    stroke(col3, 100, 100, 50);
    // rotate(x1 / 0.33);
    ellipse(x3, y3, 40, x3 + 45);
    // circle(x, y, rep * (random(1, 10)));
    pop();


    x3 = x3 + rep;
    if (x3 > height * 1.5) {

      x3 = 0;
      y3 = y3 + rep
    }

  } else {}

  if (shape4) {
    push();
    rotate(x4 / deg4);
    strokeWeight(strk4);
    stroke(col4, 100, 100, 50);
    // triangle(0, 0,x4, 20, y4, 75);
    // triangle(30, 75, x2 + 58, y + 20, y1 + 86, y2 + 75);
    triangle(x4, y4, x4 + 100, y4 + 150, x4 + 200, y4 + 250);
    pop();

    x4 = x4 + rep;
    if (x4 > height) {

      x4 = 0;
      y4 = y4 + rep
    }

  } else {}
}

And here is the code for the UI.

function create_ui() {
  createP();
  {
    let a_button = createButton('resize-full');
    a_button.mousePressed(function() {
      resizeCanvas(windowWidth, windowHeight);
      background(0, 0, 0);
    });
    // createP();
  } {
    let a_button = createButton('resize-inset');
    a_button.mousePressed(function() {
      resizeCanvas(400, 400);
      background(0, 0, 0);
    });
    // createP();
  } {
    let a_button = createButton('reset');
    a_button.mousePressed(function() {
      // translate(windowWidth/2,windowHeight/2);
      fill(0);
      rect(-windowWidth / 2, -windowHeight / 2, windowWidth, windowHeight);
    });
    createP();
  } {
    let a_span = createSpan('Rep:');
    a_span.style('font-size', '20px');
    a_span.style('color:cyan');
    let a_slider = createSlider(0, 10, rep, 0.25);
    a_slider.style('width', '200px');
    a_slider.input(function() {
      rep = a_slider.value();
    });
    // createP();
  }{
    let elm = createSpan().id('Rep');
    elm.style('font-size', '20px');
    elm.style('color:magenta');
  } {
    let a_span = createSpan('frmRt:');
    a_span.style('font-size', '20px');
    a_span.style('color:cyan');
    let a_slider = createSlider(10, 100, frmRt);
    a_slider.style('width', '200px');
    a_slider.input(function() {
      frmRt = a_slider.value();
    });
    // createP();
  }{
    let elm = createSpan().id('frmRt');
    elm.style('font-size', '20px');
    elm.style('color:magenta');
    createP();
  }

  //   X1,Y1

  {
    let a_check = createCheckbox('Shape 1', shape1);
    a_check.style('font-size', '25px');
    a_check.style('color:cyan');
    a_check.changed(function() {
      shape1 = this.checked();
    });
    createP();
  } {
    let a_span = createSpan('x1:');
    a_span.style('font-size', '20px');
    a_span.style('color:cyan');
    let a_slider = createSlider(0, 100, x1);
    a_slider.style('width', '200px');
    a_slider.input(function() {
      x1 = a_slider.value();
    });
    // createP();
  } {
    let elm = createSpan().id('x1');
    elm.style('font-size', '20px');
    elm.style('color:magenta');
  } {
    let a_span = createSpan('y1:');
    a_span.style('font-size', '20px');
    a_span.style('color:cyan');
    let a_slider = createSlider(0, 100, y1);
    a_slider.style('width', '200px');
    a_slider.input(function() {
      y1 = a_slider.value();
    });
    // createP();
  } {
    let elm = createSpan().id('y1');
    elm.style('font-size', '20px');
    elm.style('color:magenta');
    createP();
  } {
    let a_span = createSpan('Degrees:');
    a_span.style('font-size', '20px');
    a_span.style('color:cyan');
    let a_slider = createSlider(-0.99, 0.99, deg1, 0.01);
    a_slider.style('width', '200px');
    a_slider.input(function() {
      deg1 = a_slider.value();
    });
    // createP();
  } {
    let elm = createSpan().id('Degrees1');
    elm.style('font-size', '20px');
    elm.style('color:magenta');
    createP();
  } {
    let a_span = createSpan('color 1:');
    a_span.style('font-size', '20px');
    a_span.style('color:cyan');
    let a_slider = createSlider(0, 360, col1);
    a_slider.style('width', '200px');
    a_slider.input(function() {
      col1 = a_slider.value();
    });
  } {
    let a_span = createSpan('stroke 1:');
    a_span.style('font-size', '20px');
    a_span.style('color:cyan');
    let a_slider = createSlider(0, 5, strk1);
    a_slider.style('width', '200px');
    a_slider.input(function() {
      strk1 = a_slider.value();
    });
    createP();
  }


  //   x2,y2
  {
    let a_check = createCheckbox('Shape 2', shape2);
    a_check.style('font-size', '25px');
    a_check.style('color:cyan');
    a_check.changed(function() {
      shape2 = this.checked();
    });
  } {
    let a_span = createSpan('x2:');
    a_span.style('font-size', '20px');
    a_span.style('color:cyan');
    let a_slider = createSlider(0, 200, x2);
    a_slider.style('width', '200px');
    a_slider.input(function() {
      x2 = a_slider.value();
    });
    // createP();
  } {
    let elm = createSpan().id('x2');
    elm.style('font-size', '20px');
    elm.style('color:magenta');
  } {
    let a_span = createSpan('y2:');
    a_span.style('font-size', '20px');
    a_span.style('color:cyan');
    let a_slider = createSlider(0, 200, y2);
    a_slider.style('width', '200px');
    a_slider.input(function() {
      y2 = a_slider.value();
    });
    // createP();
  } {
    let elm = createSpan().id('y2');
    elm.style('font-size', '20px');
    elm.style('color:magenta');
    createP();
  } {
    let a_span = createSpan('Degrees:');
    a_span.style('font-size', '20px');
    a_span.style('color:cyan');
    let a_slider = createSlider(-0.99, 0.99, deg2, 0.01);
    a_slider.style('width', '200px');
    a_slider.input(function() {
      deg2 = a_slider.value();
    });
    // createP();
  } {
    let elm = createSpan().id('Degrees2');
    elm.style('font-size', '20px');
    elm.style('color:magenta');
    createP();
  } {
    let a_span = createSpan('color 2:');
    a_span.style('font-size', '20px');
    a_span.style('color:cyan');
    let a_slider = createSlider(0, 360, col2);
    a_slider.style('width', '200px');
    a_slider.input(function() {
      col2 = a_slider.value();
    });
    // createP();
  } {
    let a_span = createSpan('stroke 2:');
    a_span.style('font-size', '20px');
    a_span.style('color:cyan');
    let a_slider = createSlider(0, 5, strk2);
    a_slider.style('width', '200px');
    a_slider.input(function() {
      strk2 = a_slider.value();
    });
    createP();
  }


  // x3,y3
  {
    let a_check = createCheckbox('Shape 3', shape3);
    a_check.style('font-size', '25px');
    a_check.style('color:cyan');
    a_check.changed(function() {
      shape3 = this.checked();
    });
  } {
    let a_span = createSpan('x3:');
    a_span.style('font-size', '20px');
    a_span.style('color:cyan');
    let a_slider = createSlider(0, 500, x3);
    a_slider.style('width', '200px');
    a_slider.input(function() {
      x3 = a_slider.value();
    });
    // createP();
  } {
    let elm = createSpan().id('x3');
    elm.style('font-size', '20px');
    elm.style('color:magenta');
  } {
    let a_span = createSpan('y3:');
    a_span.style('font-size', '20px');
    a_span.style('color:cyan');
    let a_slider = createSlider(0, 500, y3);
    a_slider.style('width', '200px');
    a_slider.input(function() {
      y3 = a_slider.value();
    });
    // createP();
  } {
    let elm = createSpan().id('y3');
    elm.style('font-size', '20px');
    elm.style('color:magenta');
    createP();
  } {
    let a_span = createSpan('Degrees:');
    a_span.style('font-size', '20px');
    a_span.style('color:cyan');
    let a_slider = createSlider(-0.99, 0.99, deg3, 0.01);
    a_slider.style('width', '200px');
    a_slider.input(function() {
      deg3 = a_slider.value();
    });
    // createP();
  } {
    let elm = createSpan().id('Degrees3');
    elm.style('font-size', '20px');
    elm.style('color:magenta');
    createP();
  } {
    let a_span = createSpan('color 3:');
    a_span.style('font-size', '20px');
    a_span.style('color:cyan');
    let a_slider = createSlider(0, 360, col3);
    a_slider.style('width', '200px');
    a_slider.input(function() {
      col3 = a_slider.value();
    });
    // createP();
  } {
    let a_span = createSpan('stroke 3:');
    a_span.style('font-size', '20px');
    a_span.style('color:cyan');
    let a_slider = createSlider(0, 5, strk3);
    a_slider.style('width', '200px');
    a_slider.input(function() {
      strk3 = a_slider.value();
    });
    createP();
  }


  //x4,y4
  {
    let a_check = createCheckbox('Shape 4', shape4);
    a_check.style('font-size', '25px');
    a_check.style('color:cyan');
    a_check.changed(function() {
      shape4 = this.checked();
    });
  } {
    let a_span = createSpan('x4:');
    a_span.style('font-size', '20px');
    a_span.style('color:cyan');
    let a_slider = createSlider(0, 100, x4);
    a_slider.style('width', '200px');
    a_slider.input(function() {
      x4 = a_slider.value();
    });
    // createP();
  }{
    let elm = createSpan().id('x4');
    elm.style('font-size', '20px');
    elm.style('color:magenta');
  } {
    let a_span = createSpan('y4:');
    a_span.style('font-size', '20px');
    a_span.style('color:cyan');
    let a_slider = createSlider(0, 100, y4);
    a_slider.style('width', '200px');
    a_slider.input(function() {
      y4 = a_slider.value();
    });
    // createP();
  }{
    let elm = createSpan().id('y4');
    elm.style('font-size', '20px');
    elm.style('color:magenta');
    createP();
  } {
    let a_span = createSpan('Degrees:');
    a_span.style('font-size', '20px');
    a_span.style('color:cyan');
    let a_slider = createSlider(-0.99, 0.99, deg4, 0.01);
    a_slider.style('width', '200px');
    a_slider.input(function() {
      deg4 = a_slider.value();
    });
    // createP();
  }{
    let elm = createSpan().id('Degrees4');
    elm.style('font-size', '20px');
    elm.style('color:magenta');
    createP();
  } {
    let a_span = createSpan('color 4:');
    a_span.style('font-size', '20px');
    a_span.style('color:cyan');
    let a_slider = createSlider(0, 360, col4);
    a_slider.style('width', '200px');
    a_slider.input(function() {
      col4 = a_slider.value();
    });
    // createP();
  } {
    let a_span = createSpan('stroke 4:');
    a_span.style('font-size', '20px');
    a_span.style('color:cyan');
    let a_slider = createSlider(0, 5, strk4);
    a_slider.style('width', '200px');
    a_slider.input(function() {
      strk4 = a_slider.value();
    });
  }
}

function slider_value(label, num) {
  let elm = select('#' + label);
  num = round(num, 2);
  // elm.html('[' + label + ' ' + num + '] ');
  elm.html('[' + num + '] ');
}

If you have stuck around this long you aerie a champion, as always please share your thoughts in the comments.

prjkt3_3

A whirlwind of color

The time has come, to pay the re… I mean for the final project. I’ve struggled with a concept for this project. Final projects can be a real stress and that’s when it hit me, maybe I should make something that relaxes me. Color, movement, and the ability to control a number of different parameters in order to change the visual to match my mood. I started with basic shapes with noFill() in order to create patterns that change over time. I’m still looking at different ways to change the patterns. 

let x = 0;
let y = 0;
let x1 = 150;
let y1 = 150;
let x2 = 300;
let y2 = 300;
let x3 = 450;
let y3 = 450
let rep = 2;
let col1 = 10;
let col2 = 100;
let col3 = 200;
let col4 = 300;
let strk1 = 1;
let strk2 = 1;
let strk3 = 1;
let strk4 = 1;
let frmRt = 30

function setup() {
  createCanvas(400, 400);
  background(0);
  angleMode(DEGREES);
  colorMode(HSB,360,100,100,100);
  // rectMode(CENTER);
  // frameRate(frmRt);
  create_ui();
}

function draw() {
  frameRate(frmRt);
  noFill();
  translate(width / 2, height / 2);
  // push();

  // rectMode(CENTER);
  ellipseMode(CENTER);
  push();
   // stroke(0, random(0, 85), 0);
  // stroke(85, random(0, 85), 85);
  strokeWeight(strk1);
  stroke(col1,100,100,50);
  rotate(x / 0.33);
  // rect(x, y, rep * (random(1, 10)), rep * (random(1, 10)));
  // ellipse(t1, t2, 10, t1 + 45);
  ellipse(x, y, 10, x + 45);
  // rect(x, y, rep * x + 1, y + 5);
  // x = x + 5
  pop();


  push();
  ellipseMode(CENTER);
  // translate(x*0.33,random(10,200));
  // translate(0, 0);
  rotate(x1 / 0.33);
  // fill(0,random(0, 255), 255,0);
  // stroke(85, random(85, 170), 170);
  // stroke(0, random(85, 170), 0);
  strokeWeight(strk2);
  stroke(col2,100,100,50);
  // rotate(x1 / 0.33);
  // ellipse(x1, y1, 10, x1 + 45);
  // circle(x, y, rep * (random(1, 10)));
  ellipse(x1, y1, 20, x1 + 45);
  pop();


  push();
  ellipseMode(CENTER);
  // translate(x*0.33,random(10,200));
  // translate(0, 0);
  rotate(x2 / 0.33);
  // fill(0,random(0, 255), 255,0);
  // stroke(0, random(170, 255), 0);
  // stroke(170, random(170, 255), 255);
  strokeWeight(strk3);
  stroke(col3,100,100,50);
  // rotate(x1 / 0.33);
  ellipse(x, y, 40, x2 + 45);
  // circle(x, y, rep * (random(1, 10)));
  pop();

  push();
  rotate(x3 / 0.33);
  strokeWeight(strk4);
  stroke(col4,100,100,50);
  triangle(30, 75, x + 58, y + 20, y1 + 86, y2 + 75);
  pop();
  
  x = x + rep;
  if (x > width) {
    x = 0;
    y = y + rep;
  }

  x1 = x1 + rep;
  if (x1 > height) {

    x1 = 0;
    y1 = y1 + rep
  }
  x2 = x2 + rep;
  if (x2 > height) {

    x2 = 0;
    y2 = y2 + rep
  }
   x3 = x3 + rep;
  if (x3 > height) {

    x3 = 0;
    y3 = y3 + rep
  }
}

This is the main body of code, there is a second file for the UI elements. I really like working this way, where the UI elements or DOMs are not in the main code. It makes it much easier to read and work though.

In this example changes were made to the color of each of the 4 objects and changes made to the stroke of each object as well.
In this example changes were made to the color of each of the 4 objects and changes made to the stroke of each object as well.
A whirlwind of color
A whirlwind of color

All of the above images are from the same sketch using the sliders to change the different parameters for the objects drawn to the canvas.

A working version of the sketch can be found here

https://editor.p5js.org/phil-in-a-can/sketches/ab8S48rIi

I’ve also been playing with a particle system using Perlin Noise however, it feels very iterative on some existing code. I like the way it looks and I have been thinking about adding slider to control many of the variables. Not sure which direction I want to go. Here are two examples of the output. The values as of now are hard coded so changes have to be made manually.

A whirlwind of color
A whirlwind of color
A whirlwind of color

A working version of the sketch can be found here

https://editor.p5js.org/phil-in-a-can/sketches/jwy8zrns7

Final with code

Sound-Viz

How does one visualize sound? Is it through color? Through shape? Through line? What about the sound is being visualized? Quality? Pitch? Amplitude? Volume? These are all good questions, and I will answer none of them. But what I will do is tell you how I took sound, in this case a song, and visualized the fft.analyze() which returns an array of amplitude values. These values range between 0 and 255; I decided to use HSB color space making it a bit easier to have a varied range of colors represented. 

However, let me start by saying working with sound and trying to visualize it is extremely frustrating. I could never achieve what I was looking to do. I was not successfully able to make each square a different color representing a different index position in the fft.analyze() array. I’m sure it has something to do with the way this block of code is written.

for (y_pos = 0; y_pos <= height; y_pos += a_size * 1.5) {
   for (x_pos = 0; x_pos <= width; x_pos += a_size * 1.5) {

     var spectrum = fft.analyze();
     for (var i = 0; i < spectrum.length; i++) {
       // var spec2 = spectrum[i];
       // var col = map(spec2, 0, 255, 0, 360)
       var col = map(spectrum[3], 0, 255, 0, 360)

       noStroke();
       fill(col, 100, 100);

       rect(x_pos, y_pos, a_size, a_size);
     }
   }

But hey, this is what learning is all about; fail often and fail early so to set yourself up for success in the future. All in all I was able to produce something that is interesting and visualizes the sound in a unique way. I was also able to work on adding doms through the use of a secondary .js file as well as making the whole sketch responsive to window size.

This video uses standard RGB colorspace, from the colors generated it seems as though the first three indexes of the array are being used to get the color however, I have not had a chance to confirm my suspicions.
In this example I used HSB colorspace in order to have a broader spectrum of colors. I also change the background to black to make the more saturated colors pop.

The single color working sketch can be found here

https://editor.p5js.org/phil-in-a-can/sketches/XYvmTBJPv

As always I welcome feedback in the comments section and if you figure out how to make each square a different color, please let me know!!

UPDATE

Well what can I say, “I get by with a little help from some friends”. After reaching out to my cohort and having a few discussions a solution to my issue came to the surface.

The updated and working sketch can be found here

https://editor.p5js.org/phil-in-a-can/sketches/aqFqyHpnz

The function draw() was updated with the following code.

function draw() {
  background(0);
  var spectrum = fft.analyze();
  for (let x = 0; x < 13; x++) {
    for (let y = 0; y < 13; y++) {
      if (spectrum[x + y *13]) {
        var col = map(spectrum[x + y * 13], 0, 255, 0, 360)
        noStroke();
        fill(col, 100, 100);
      }
      rect(x*width/19*2, y*height/19*2, width / 19, width / 19);
    }
  }
}

Thanks to David Currie for the help with this.

This shows the same song as the above videos with the adjusted code.
And this video is a different song with the adjusted code.
test-3

Sounds, Good

This week I dive into the wide world of sound in p5.js. Sound can be input into p5.js via recording, .mp3, .wav, etc.; or via a microphone. In this case I’m using the later and more specifically the microphone embedder in my webcam. P5 sound is a vast topic and has almost as many functions () as does the regular p5 library. At this point I’ve only really looked into using a few: p5.SoundFile, p5.Amplitude, p5.AdioIn, and p5.FFT.  I’ve been just using these basics to start to understand how p5 processes sound, most notably many of these functions() return an array of data which can be accessed and used as data points. 

Project 2 focuses on using graphical elements to represent or visualize the sound from either a recording or p5.AudioIn().

let fft;
let mic;
let spectrum;

let x_pos;
let y_pos;
let a_size = 40;
let rect_alpha = 255;

var snapshots = [];
var counter = 0;
var total = 49;

function setup() {
  createCanvas(400, 400);

  fft = new p5.FFT();
  mic = new p5.AudioIn();
  mic.start();
  fft.setInput(mic);

}

function draw() {
  background(220);

  spectrum = fft.analyze();

  // let col = map(s/4,0,spectrum.length,0,360);
  fill(spectrum);
  // fill(col);
  for (y_pos = 0; y_pos <= height; y_pos += a_size * 1.5) {
    for (x_pos = 0; x_pos <= width; x_pos += a_size * 1.5) {
      rect(x_pos, y_pos, a_size, a_size);
    }
  }
  // console.log(col);
  // console.log(spectrum);
}
// }

The above code is what I have been able to produce thus far for this project. The Idea is to use fft.analyze() to get an array of amplitude values and use them to change the color of a matrix of squares. As of now I am able to pass in the same vale to each square, my goal is to make each square a different color based on the different indices in the fft.analyze() array.  I believe my next step is to first map the values the array holds which range from 0-255 to 0-360 so it matches with the HSB color space. Then I need to find a way to assign each square a different value from the array.

The working p5 sketch can be found here:

https://editor.p5js.org/phil-in-a-can/sketches/xQhpObKQS

Questions, comments, or tips always welcome in the comments section of this post.

Sounds, Good
Sounds, Good
Sounds, Good
Sounds, Good
Sounds, Good
Image2

More PictXels…

This is the continuation and conclusion of Project 1. Last we I talked about the nature of the pixel[] array and how to access and manipulate it. There were some major performance issues with the way I wrote the preliminary code, namely trying to use the slider.value directly in the context of a for loop to manipulate the pixels[]. Top fix this performance issue I created            function create_ui. And using a variable I stored the slider.value to use in the pixels[]. After making this change there was no noticeable lag when adjusting the sliders.

function create_ui() {
  createP();

  // createSlider(min, max, [value], [step])
  let = slider1 = createSlider(0, 255, slider_r);
  slider1.input(function() {
    slider_r = slider1.value();
  });
  createP();

  // createSlider(min, max, [value], [step])
  let = slider2 = createSlider(0, 255, slider_g);
  slider2.input(function() {
    slider_g = slider2.value();
  });
  createP();

  // createSlider(min, max, [value], [step])
  let = slider3 = createSlider(0, 255, slider_b);
  slider3.input(function() {
    slider_b = slider3.value();
  });
  createP();

  // createSlider(min, max, [value], [step])
  let = slider4 = createSlider(0, 255, 128);
  slider4.input(function() {
    slider_lum = slider4.value();
  });
}

The above code shows the function create_ui, there are four sliders controlling Red, Green, Blue, and Alpha of any image loaded into the sketch.

Below is the important part of the code in terms of performance and where the manipulation of the image takes place.

a_vid.pixels[index + 0] = slider_r;
a_vid.pixels[index + 1] = slider_g;
a_vid.pixels[index + 2] = slider_b;      
a_vid.pixels[index + 3] = random(0, slider_lum);

After the changes were made everything worked as expected using an image.

More PictXels…
More PictXels…
More PictXels…
More PictXels…

One very important note is this line of code.

bg = loadImage('images/PPC_3141-2.JPG');

Followed by this line.

background(bg);

These two lines of code load the image as the background() color, this allows all four element (Red, Green, Blue, and Alpha) of the original image to be adjusted.

When I ported the code over to use the webcam instead it work…kind of. I’m note sure as to why the right portion of the image was unaffected by the manipulations in the code. This is the next thing I would like to tackle. The code is basically the same except for the needed lines to createCapture(VIDEO). Left is an image showing the results of the code.

 

Image based sketch

https://editor.p5js.org/phil-in-a-can/sketches/WWDafDYLU

WebCam based sketch

https://editor.p5js.org/phil-in-a-can/sketches/WdNJzVlnD

 

testShot2

PictXels…

Pictures, or video for that matter, are just pixels…lots of pixels in fact if we talk in terms of an array[] there are FOUR times as many index positions as there are pixels. This isn’t really an issue when we think about how to access each of those positions. 

for (let y = 0; y < height; y += 1) {
   for (let x = 0; x < width; x += 1) {
     let index = (y + x * width) * 4;

The nested for loop allows the pixels to load to the canvas in the way we would expect and the resulting image is identical copy of the image we loaded into the sketch.

By loading the image into the canvas this way it enables direct access to each individual aspect of each individual pixel–red, green, blue and alpha.

For project 1 I wanted to take an image or set of images and manipulate the RGB and alpha values using the DOM createSlider() element. I was able to accomplish this fairly easily. There are a few issues I’m working through though.

  • At a some combinations of RGBA values the slider become unresponsive and moving the slider has no affect on the image.
  • Trying to add a window that allows the area of the image that the RGBA is applied to.
  • In order to have three sliders effect the RGB values individually I had to add o copy of the image as the background(), this isn’t necessarily a problem, just looking for a different solution.
  • Trying to using the web cam for this is almost impossible due to the lag, I plan on trying to use Visual Studio and run this sketch with a web cam and see if there are any changes.

More to come before this is finished, stay tuned for next week same bat-channel, same bat-time.

Check out the working sketch.

https://editor.p5js.org/phil-in-a-can/sketches/irCLxfpOZ

Wk7TitleImage

I’ve got a DOM

The DOM, sounds scary but really it’s just like everything else in coding, with a little practice it’s not too bad at all. I had very little issue with this section of the class, mostly because it builds on the previous sections. Prior to this I had been using createSlider to alter different values for given elements in a sketch like color or diameter. Including other types DOM’s is pretty straight forward remembering to create a var to hold the information the DOM is providing is the key to making everything play nicely. Once the basic structure is setup, passing the information in is painless.

 

function addItem() {
  // Create an li element
  var li = createElement('li', itemInput.value());
  // set li's parent to an element with id "todolist"
  li.parent("todolist");
  li.style('color', 'cyan')
}

I first used createP which didn’t take advantage of the <ol id='orderedlist'></ol> so I switched to createElement and that did the trick.

Overall adding DOM’s top p5.js is pretty intuitive and i can see how there are many possible scenarios that the will be useful in the future.

 

I’ve got a DOM
I’ve got a DOM
I’ve got a DOM
I’ve got a DOM
I’ve got a DOM
I’ve got a DOM
I’ve got a DOM
arrayIsolation2

A Ray…Array

So I’ve started using class() for defining objects, got it. And now let’s put those objects into an array, no problem got it. Now let’s make it so they all move independently of each other….don’t got it.

move() {

  if ((this.x > width) || (this.x < 0)) {
    speedx = speedx * -1;
  }
  this.x = this.x + speedx;

  if ((this.y > height) || (this.y < 0)) {
    speedy = speedy * -1;
  }
  this.y = this.y + speedy;
  // this.y = slider_speedY.value()
}

See here is the problem, the block of code is pretty straight forward, when used on one object no problem however, if that object is in an array the issue rears it’s evil little head. When any of the objects in the array meet the criteria for this.x or this.y the value is inverted because it is multiplied by -1.  So instead of each object independently meeting the criteria and changing the value by (*-1), ALL objects in the array are assigned this value at the same time. How can the object only be effected by the condition logic in the aforementioned block of code only when that object meets the criteria?

A Ray…Array

Here is the code in it’s entirety

let speedx = 3;
let speedy = 5;
let speedx1 = 2;
let speedy1 = 1;
let squares = [];
let spots = [];

function setup() {
  createCanvas(600, 600);
  frameRate(10);
}

function mousePressed() {
  if (random(1) < 0.5) {
    let s = new Square(mouseX, mouseY, 50, 50, 5);
    squares.push(s);
  } else {
    let s2 = new Spot(mouseX, mouseY, 50, 50);
    spots.push(s2);
  }
}

function draw() {
  background(0);
  for (let square of squares) {
    // push();
    square.show();
    square.move();
    // pop();
    for (let i = 0; i < squares.length; i++) {
      squares[i].move();
      squares[i].show();
    }
  }
  for (let spot of spots) {
    // push();
    spot.show();
    spot.move();
    // pop();

    for (let i = 0; i < spots.length; i++) {
      spots[i].move();
      spots[i].show();
    }
  }
}

class Square {
  constructor(tempX, tempY, tempH, tempW) {
    this.x = tempX;
    this.y = tempY;
    this.h = tempH;
    this.w = tempW;
  }
  move() {
    if ((this.x > width) || (this.x < 0)) {
      speedx = speedx * -1;
    }
    this.x = this.x + speedx;

    if ((this.y > height) || (this.y < 0)) {
      speedy = speedy * -1;
    }
    this.y = this.y + speedy;
  }
  show() {
    push();
    rectMode(CENTER);
    stroke(255);
    strokeWeight(1);
    noFill();
    rect(this.x, this.y, this.w, this.h);
    pop();
    // p;rint(this.x);
  }
}

class Spot {
  constructor(spotX, spotY, spotH, spotW) {
    this.x = spotX;
    this.y = spotY;
    this.h = spotH;
    this.w = spotW;
  }
  move() {
    push();
    if ((this.x > width) || (this.x < 0)) {
      speedx1 = speedx1 * -1;
    }
    this.x = this.x + speedx1;
    if ((this.y > height) || (this.y < 0)) {
      speedy1 = speedy1 * -1;
    }
    this.y = this.y + speedy1;
    pop();
  }
  show() {
    // push();
    ellipseMode(CENTER);
    stroke(255, 0, 0);
    strokeWeight(1);
    noFill();
    ellipse(this.x, this.y, this.h, this.w);
    // pop();
    // print(this.x);
  }
}

Here is a link to the working sketch

https://editor.p5js.org/phil-in-a-can/sketches/Wvvi3YRkm

hwWk5

I Guess I Have Class Now

class descriptiveName() seems to be a very powerful aspect of p5.js however, there are parts about that I do not understand. I can create a sketch not using class descriptiveName() and make it do what I want like in the example that follows, rotate() a Line() around a location.

Just using  function draw() I get this, which is the outcome I was looking for.

When I use a class descriptiveName() I get this:

let inner = [];

function setup() {
  createCanvas(400, 400);

  // inner1 = new Inner(0, 0, -200, -200 );

  for (let i = 0; i < 50; i++) {
    let vx = random(0, width);
    let vy = random(0, height);
    inner[i] = new Inner(0, 0, vx, vy)
  }
}

function draw() {
  background(0);

  translate(width / 2, height / 2);
  for (let i = 0; i < inner.length; i++) {
    inner[i].show();

    push();
    let rep = 15;
    angleMode(DEGREES);
    rotate(rep);
    pop();
    rep = rep * 2;

  }

}

class Inner {

  constructor(x1, y1, x2, y2) {
    this.x = x1;
    this.y = y1;
    this.a = x2;
    this.b = y2;
  }

  show() {

    // let rep = 15;
    // angleMode(DEGREES);

    // translate(width / 2, height / 2);
    // push();
    // rotate(rep);

    stroke(255);
    line(this.x, this.y, this.a, this.b);
    // rep = rep*2;
    // pop();

  }
}

The above code shows my experimentation with trying to get the same result from class descriptiveName() and placing everything in draw().

After spending some time on this I decide to try another sketch to fulfill the week five excursive. 

Sliders control the size of the rect()  as well as the RGB fill() values.

Play with the working sketh:

https://editor.p5js.org/phil-in-a-can/sketches/IklWzR6ME

let speedx = 1;
let speedy =25;
let speedx1 = 25;
let speedy1 = 1;
let slider_R;
let slider_G;
let slider_B;
let slider_Width;


function setup() {
  createCanvas(600, 600);

  square1 = new Square(0, 0, 20, 20);
  spot1 = new Spot(width , height ,50, 50);
  create_slider_1();
  create_slider_2();
  create_slider_3();
  create_slider_4();
  background(0);
}

function create_slider_1() {
  createSpan('RED').style('font-size', '10px');
  // createSlider(min, max, [value], [step])
  slider_R = createSlider(0, 255, 0);
  // slider.position(10, 10);
  slider_R.style('width', '75px');
}

function create_slider_2() {
  createSpan(' GREEN').style('font-size', '10px').style(style = 'font-family:verdana');
  // createSlider(min, max, [value], [step])
  slider_G = createSlider(0, 255, 0);
  // slider.position(10, 10);
  slider_G.style('width', '75px');
}

function create_slider_3() {
  createSpan(' BLUE').style('font-size', '10px');
  // createSlider(min, max, [value], [step])
  slider_B = createSlider(0, 255, 0);
  // slider.position(10, 10);
  slider_B.style('width', '75px');
}

function create_slider_4() {
  createSpan(' WIDTH').style('font-size', '10px');
  // createSlider(min, max, [value], [step])
  slider_Width = createSlider(0, 50, 10);
  // slider.position(10, 10);
  slider_Width.style('width', '75px');
}

function draw() {
  // background(0);
  square1.show();
  square1.move();
  spot1.show();
  spot1.move();
  
}

class Square {
  constructor(tempX, tempY, tempH, tempW) {
    this.x = tempX;
    this.y = tempY;
    this.h = tempH;
    this.w = tempW;
 
  }

  move() {

    if ((this.x > width) || (this.x < 0)) {
      speedx = speedx * -1;
    }
    this.x = this.x + speedx;

    if ((this.y > height) || (this.y < 0)) {
      speedy = speedy * -1;
    }
    this.y = this.y + speedy;
  }

  show() {
    
    rectMode(CENTER);
    stroke(255);
    strokeWeight(1);

    fill(slider_R.value(), slider_G.value(), slider_B.value());
    rect(this.x, this.y, slider_Width.value(), slider_Width.value());
    print(this.x);
  }

}

class Spot {
  constructor(spotX, spotY, spotH, spotW) {
    this.x = spotX;
    this.y = spotY;
    this.h = spotH;
    this.w = spotW;

  }

  move() {

    if ((this.x > width) || (this.x < 0)) {
      speedx1 = speedx1 * -1;
    }
    this.x = this.x + speedx1;

    if ((this.y > height) || (this.y < 0)) {
      speedy1 = speedy1 * -1;
    }
    this.y = this.y + speedy1;
  }

  show() {
    ellipseMode(CENTER);
    stroke(255);
    strokeWeight(1);

    fill(slider_R.value() * 0.25, slider_G.value() * 0.25, slider_B.value() * 0.25);
    ellipse(this.x, this.y, this.h, this.w);
    // print(this.x);
  }

}

 

circleGetsTheSquare

Circle Gets the Square

I feel a bit lost down a deep deep hole, slowly climbing towards what seems the top longing for the daylight to strike me directly however each time a the top appears the hole seemingly grows, endlessly slowing the progress that just happened. I suppose that this feeling will continue for sometime, there are clear objectives in my head but producing these outcomes has proven more difficult than at first anticipated. Time. Time is the answer, but not just time, time spent with what is new and there in lies the root of the issue, it’s all new therefore, the time needed to fully grasp the ideas is exponential since each concept builds on the last.

10PRINT is in theory fairly easy to understand however, when applying more complex functions to this code things change rapidly. The following examples are all based on the same code with VERY slight adjustments, the outputs are VERY different.

 

So my question is this: Are these all considered iterations of 10PRINT?

https://editor.p5js.org/phil-in-a-can/sketches/z7D_Ft0FJ

Load More

Back to top