The DOM and Style Elements

Week 6 required students to either create their own webpage using HTML, CSS, and Javascript elements. After some thought I wanted to attempt to make a page similar to the 90s type informational pages. Basically, something similar to this. I wanted to keep with the use of generative and parabolic art so I figured making an informational page about the artists that I enjoy and have some graphics I have created on there.

Planning and scheduling time to work on this assignment was a failure on my part this week so when it came to actually working with the CSS and HTML portion later on I realized that I was over my head for the time remaining. This being so I scaled back to a basic functionality project.

Here is a screenshot of the final piece:

Screen Shot 2018-10-16 at 8.37.13 AM.png

The piece ended up having two main DOM elements. The first being the checkbox on the left hand portion. This checkbox was used in the previous homework involving this graphic as well. The other was the button to invert the graphic on the right side. Full functionality of this button was not achieved.

Implementing basic CSS and HTML elements was more fairly simple and satisfying. Most of this involved using <div> classes and ids for the text. I worked within the javascript file itself to edit the DOM elements and use callbacks to get them to function properly.

Overall, I need to spend more time going over the DOM and the proper syntax for CSS and HTML. My time management skills were lacking on this project and it showed in the final product. It is easy to see the power of the DOM and all its elements and that it is something I am going to need to work on to understand better.

Here is a link to the final piece to try for yourself: link.

CODE:

Main Javascript Sketch Code including DOM creation:
/*
ICM Homework 6, 10/15/18
This weeks ICM Homework took inspiration on computer art from 
John Whitney. 
-As the user scrolls their mouse across the 
screen, the number of lines being created from the moving 
objects increases.

-When the user clicks the screen the shapes invert

-Finally, the checkbox at the top left of the screen the shape
changes from a line to a rectangle.

*/
let t = 0;
let divOne;
let divTwo;
let divThree;
let button;
//object to translate the start point of the lines 
//and set basic functionality

let trans = {
  numLines: 25,
  x: 2,
  y: 2,
};

function setup() {
  createCanvas(500, 500);
  background(0);

  button = createButton("Invert");
  button.style("float", "right");
  button.style("background-color", "pink")

  button.style("padding", "10px");
  //button.style("border","10px");
  button.mousePressed(mouseIsPressed);

  //create a checkbox for changing the shape to rectangles
  rectCheckbox = createCheckbox('rectangles', false);
  rectCheckbox.changed(parabolicEffect);
  rectCheckbox.style("float", "left");
  rectCheckbox.style("background-color", "pink")
  rectCheckbox.style("color", "black")

  divOne = select("#divOne");
  divOne.html("Geometric Poetry and Similar Inspiration");
  divTwo = select("#divTwo");
  divTwo.html("Artists Eusebio Sempere and John Whitney were pioneers of two different kinds of generated art.");
  divThree = select("#divThree");
  divThree.html("This piece was inspired by John Whitney and is the first in a series of generated graphic works I will be doing");
}

function draw() {
  background(0, 0, 0);

  strokeWeight(4);
  //move parabolic shape to center of screen
  translate(width / trans.x, height / trans.y);
  //call to parabolic effect function
  parabolicEffect();
  // increase the value being pushed into the function  
  t += .3;
}

function invert(t) {
  return true;

}

//parabolic function x
function x(t) {
  if (mouseIsPressed) {
    return -sin(t / 10) * 100 + -sin(t / 10) * 100;
  } else {

    return sin(t / 10) * 100 + sin(t / 10) * 100;
  }
}
//parabolic function y
function y(t) {
  if (mouseIsPressed) {
    for (let i = 0; i < 20; i++) {
      return cos(t / 10) * i;
    }
  } else {
    return -cos(t / 10) * 20;
  }
}

//parabolic function x1
function x1(t) {

  if (mouseIsPressed) {
    return -sin(t / 10) * 100 + -cos(t / 10) * 100;
  } else {
    return sin(t / 10) * 100 + cos(t / 10) * 100;
  }
}

//parabolic function y1
function y1(t) {
  if (mouseIsPressed) {
    return cos(t / 20) * 200 + sin(t / 10) * 100;
  } else {
    return -cos(t / 20) * 200 + -sin(t / 10) * 100;
  }
}

/*
The parabolicEffect function creates the shapes at different 
points mapped to the various parabolic functions.
There is an offset of i or j added to each shape that 
give speed and tracing effects

*/
function parabolicEffect() {

  //map the cursor movement to the number of lines on screen
  let deltaX = map(mouseX, 0, width, 0, trans.numLines);

  //check to see if the rectangle checkbox is true or not
  if (rectCheckbox.checked()) {

    //create the rectangle shape and add in the offset of i 
    for (let i = 0; i < deltaX; i++) {
      noFill();
      stroke(111, 195, 223, 50 + (i * 4));
      rect(x(t + i), y(t + i), x1(t + i), y1(t + i));
      rect(x1(t + i), y(t + i), x(t + i), y1(t + i));

    }
    //create the rectangle shape and add in the offset of j
    for (let j = 5; j < deltaX * 2; j++) {
      stroke(218, 112, 214, 50 + (j * 4));
      rect(x(t - j), y(t - j), x1(t - j), y1(t - j));
      rect(x(t - j), y1(t - j), x1(t - j), y(t - j));

    }
  } else {

    //create the lines and add in the offset of i
    for (let i = 0; i < deltaX; i++) {
      noFill();
      stroke(111, 195, 223, 50 + (i * 4));
      line(x(t + i), y(t + i), x1(t + i), y1(t + i));
      line(x1(t + i), y(t + i), x(t + i), y1(t + i));
    }

    //create the lines and add in the offset of j
    for (let j = 5; j < deltaX * 2; j++) {
            noFill();
      stroke(218, 112, 214, 50 + (j * 4));
      line(x(t - j), y(t - j), x1(t - j), y1(t - j));
      line(x(t - j), y1(t - j), x1(t - j), y(t - j));

    }
  }
}

HTML Code:
<!DOCTYPE html>
<html>

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.2/p5.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.2/addons/p5.dom.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.2/addons/p5.sound.min.js"></script>
  <link rel="stylesheet" type="text/css" href="style.css">
  <meta charset="utf-8" />

</head>

<body>
  <script src="parabolicEffects.js"></script>
  <script src="sketch.js"></script>
  <div id="divOne">Header text</div>
  <div class="theDiv">
  <par id="divTwo">Subtext</par>
  <par id="divThree">Subtext</par>
  </div>
  <br>
</body>
</html>

CSS Code:
html, body {
  margin: 0;
  padding-bottom: 0;
}
    #divOne {
  text-align: center;
  color: white;
  background-color:gray;
  padding: 5px;
  font-size: 30px;
}
    .theDiv {
  text-align: left;
  color: turquoise;
  padding: 5px;
  font-size: 20px;
}