ICM

This contains all posts related to Intro to Computational Media

Grey rectangle, three blue sliders under rectangle, mint green circle in upper left quad.

Interfacing is fun!!

First I made a bouncing ball, second I made the fill() change from (0, 255) based on the X position and Y position, then I made the background() change from (0, 255) based on the ball’s X, Y position, finally I added three sliders to change the RGB values independently.

I’m still having to refer back to the reference material to get the syntax correct but most of the terms and thinking through the actions of the code are making sense. I feel like there is a pretty steep learning curve associated with any coding. I find it interesting to be a beginner again, I haven’t had that opportunity in a long time, and it feels good to be challenged again. I see this skill as such an integral building block for many of the projects I have the desires to work on.

see the live sketch here

let xspeed = 2;
let xpos = 0;
let yspeed = 4;
let ypos = 200;
let bgColor = (255, 255, 255);

function setup() {
  createCanvas(600, 400);
  create_slider_1();
  create_slider_2();
  create_slider_3();
}

function draw() {
  background(bgColor);
  let col1 = slider_1.value();
  let col2 = slider_2.value();
  let col3 = slider_3.value();

  noStroke();
  ellipse(xpos, ypos, 25, 25);
  fill(col1, col2, col3);

  bgColor = map(xpos, 0, 400, 0, 255)

  if ((xpos > width) || (xpos < 0)) {
    xspeed = xspeed * -1;
  }
  if ((ypos > height) || (ypos < 0)) {
    yspeed = yspeed * -1;
  }

  xpos += xspeed;
  ypos += yspeed;
}


function mousePressed() {
  ballColor = (0, random(0, 255), 0);
}

let slider_1;

function create_slider_1() {
  createSpan('slider_1').style('font-size', '20px');
  // createSlider(min, max, [value], [step])
  slider_1 = createSlider(0, 255, 0);
  // slider.position(10, 10);
  slider_1.style('width', '100px');
}
let slider_2;

function create_slider_2() {
  createSpan(' slider_2').style('font-size', '20px');
  // createSlider(min, max, [value], [step])
  slider_2 = createSlider(0, 255, 0);
  // slider.position(10, 10);
  slider_2.style('width', '100px');
}
let slider_3;

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

 

Sreenshot1

Random on Random

Variables, expressions, and random() Oh My!!

I’m starting to see how the building blocks of p5.js will enable the creation of systems and thusly enable more complex programs to be written.  There are however, a few concepts that still are a bit fuzzy. One of those is random(), I understand how this function works but I’m a bit lost as to why I can put it before the setup() so that it can have an affect on the code after it. I was able to find a work around  unfortunately this creates a very long program to something I believe should be able to be done with far fewer lines of code.

You can see in the code below the video lines 22-41 and lines 52-70 are devoted to assigning a random color to the four circles. This seems like a lot of code to produce these changes. This is where I’m sure this is a better more compact way to do this.

The video is a screen recording of the behavior produced by this code. The circles which have an origin at the four corners has a random() assignment operation for location. The color of each circle is also is random() unless the (mouseButtonPressed) is used which changes each of the circles to red, green, blue, or black.

Run the program in p5.js 
var circleObject1 = {
  x: 0,
  y: 0,
  d: 25
}
var circleObject2 = {
  x: 599,
  y: 0,
  d: 25
}
var circleObject3 = {
  x: 0,
  y: 599,
  d: 25
}
var circleObject4 = {
  x: 599,
  y: 599,
  d: 25
}

var col1 = {
  r: 50,
  g: 50,
  b: 50
}
var col2 = {
  r: 10,
  g: 10,
  b: 10
}
var col3 = {
  r: 100,
  g: 100,
  b: 100
}
var col4 = {
  r: 225,
  g: 225,
  b: 225
}

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


function draw() {
  background(220);
  frameRate(10);

  col1.r = random(0, 255);
  col1.g = random(0, 255);
  col1.b = random(0, 255);

  col2.r = random(0, 255);
  col2.g = random(0, 255);
  col2.b = random(0, 255);

  col3.r = random(0, 255);
  col3.g = random(0, 255);
  col3.b = random(0, 255);

  col4.r = random(0, 255);
  col4.g = random(0, 255);
  col4.b = random(0, 255);

  col1.r = random(0, 255);
  col1.g = random(0, 255);
  col1.b = random(0, 255);

  circleObject1.x = random(0, 299)
  circleObject2.x = random(300, 599)
  circleObject3.x = random(0, 299)
  circleObject4.x = random(300, 599)

  noStroke()
  circle(circleObject1.x, circleObject1.y, circleObject1.d = circleObject1.d + 10);

  if (mouseIsPressed) {
    fill(0, 0, 255);
  } else {
    fill(col1.r, col1.g, col1.b);
  }

  circle(circleObject2.x, circleObject2.y, circleObject2.d = circleObject2.d + 10);

  if (mouseIsPressed) {
    fill(255, 0, 0);
  } else {
    fill(col2.r, col2.g, col2.b);
  }

  circle(circleObject3.x, circleObject3.y, circleObject3.d = circleObject3.d + 10);

  if (mouseIsPressed) {
    fill(0);
  } else {
    fill(col3.r, col3.g, col3.b);
  }

  circle(circleObject4.x, circleObject4.y, circleObject4.d = circleObject4.d + 10);

  if (mouseIsPressed) {
    fill(0, 255, 0);
  } else {
    fill(col4.r, col4.g, col4.b);
  }


}

 

Text content

a stick figure made of lines and ovals, black, green, grey, and blue.

p5.js….a start

This is week of learning to use p5.js, so far it’s not too bad. In fact I actually enjoy the process. There are some interesting features of this programming language. But we will get to that in a little bit.

Everything was fairly straight forward, starting with the body composed of lines with a

//body

background(0, 100, 66);
strokeWeight(20)
stroke(30, 30, 30)
line(300, 300, 300, 400) //body
line(250, 480, 300, 400) //left leg
line(350, 480, 300, 400) //right leg
line(300, 320, 260, 375) //left arm
line(300, 320, 340, 375) //right arm

Black Lines creating a stick figure body, with dark green background

The head and nostrils were next, again fairly straight forward code to create these.

// head
fill(100)
strokeWeight(2)
stroke(0, 0, 100)
ellipseMode(CENTER)
ellipse(300, 160, 200, 290)

//nostrils
stroke(255, 255, 255)
strokeWeight(1)
fill(0, 0, 85)
ellipse(298, 180, 5, 7)
ellipse(305, 180, 5, 7)

Black Lines creating a stick figure body, with dark green background, grey oval with blue outline on top of stick figure, two very small black ovals at center of large oval.

Now it’s time to for some oddity, remember earlier when I said “there are some interesting features to this programming language?” well take for instance rotate(), this transformation actually rotates the canvas around an object thus making all other objects after that rotate in the same manner. Using translate() in conjunction with rotate() allowed me to  get the eyes angle the way I wanted. Now I’m sure there is a way to do this in a much simpler manner however, this is the way I figured it out with a bit of using the p5.js reference page.  https://p5js.org/reference/

stroke(0)
// left eye
translate(250, 150)
rotate(290)
strokeWeight()
fill(0, 255, 100)
angleMode(DEGREES)
ellipse(0, 0, 30, 45)

// reset canvas
rotate(-290)
translate(-250, -150)
translate(350, 150)

// right eye
fill(0, 255, 100)
rotate(-290)
angleMode(DEGREES)
ellipse(0, 0, 30, 45)

two small light green ovals at inverse angles to each other centered 1/3 down a green sqaure.

Then I added some weird hairs from the side of the head and called it a day.

noFill()
stroke(255, 0, 0)
bezier(35, -65, 50, -55, 60, -60, 70, –60)
bezier(37, -60, 40, –50, 50, -55, 60, –45)
bezier(40, -55, 41, -55, 40, -50, 50, -35)
bezier(-135, -60, -145, -50, -160, -55, -165, -45)
bezier(-140, -50, -145, -53, -160, -49, -165, -65)
bezier(-135, -65, -135, -70, -160, -75, -165, -69)

a stick figure made of lines and ovals, black, green, grey, and blue.

Notice that I didn’t reset the canvas so when I added the bezier()  as the hairs the coordinates don’t follow the standard 0,0 being at the upper left had corner of the canvas.

 

Overall I found this to be a great exercise to learn some of the fundamentals of p5.js. If you want to check out the code you can find it here https://editor.p5js.org/phil-in-a-can/sketches/Q56EDhOAF

-p

Eye with scale, red hue emphasis

First Entry

First Entry

Eye with scale, red hue emphasis

Today I being a journey of self-discovery enabled by ITP at NYU. If you are so inclined please follow along here. Questions, comments, and general interaction are greatly appreciated.

Back to top