Fishburn-3-1 starter sketch

mySketch
xxxxxxxxxx
 
//This is the exercise 3-1 starter sketch. 
//It gives you some arrays to add to, and some interactivity to add
//PLEASE READ THROUGH ALL THE COMMENTS!!!!!
​
//Your job is to:
//1. add headlines to the headlines array and add colors to the color array, 
//2. extrapolate the "cycling through" mechanic to work with the headlines array
//3. stylize your news ticker to present your headlines in a creative way
​
// Instructions
// Choose at least five more headlines, and following the example set by the colors, put them in an array. If the news is stressing you out, Reasons to Be Cheerful
// Links to an external site. is a great source :)
// Again following the example of the colors array, add interaction to "cycle through" the headlines in the array. Use the up and down arrows, and the headlines should "wrap”. In other words:
​
//     Pressing the down arrow should decrease the index of the headlines array by one. If that would go below zero (i.e., past the beginning of the array), it should “wrap around” to the end of the array.
//     Pressing the up arrow should increase the index of the headlines array by one. If that would go beyond the length of the array, it should “wrap around” to the beginning of the array.
​
// Make it look like a news ticker on a news channel
​
// Questions
// - Import pictures into an array
// - Looping through arrays
// - What does the colors.length portion mean?
​
//Step 1: add your headlines. if the news is too depressing today, we recommend checking out
//reasonstobecheerful.com for something hopefully less upsetting. 
//or just make some up to fit your theme.
let headlineX;
let headlineIndex = 0;
let headlines = [
  "headline 1",
  "headline 2",
  "headline 3",
  "headline 4",
  "headline 5"
];
​
//Step 2: add your colors.
let colorIndex = 0;
let colors = [
  "red",
  "orange",
  "yellow",
  "green",
  "purple"
];
​
function setup() {
  createCanvas(windowWidth, windowHeight);
  headlineX = width; //set our headlineX to the maximum to start
  strokeWeight(5)
}
​
function draw() {
  background(200)
  for (let i = 0; i < colors.length; i++) {
      if (i === colorIndex) { //this "selects" the current position in the array with a white stroke
      stroke("white");
    } else {
      stroke("black");
    }
      //this for loop draws the colored circles at the top of the screen. 
      //"colors.length" is an integer equal to the number of elements within the array, 
      //in this case it starts at 3, because there are three entries inside of the colors array
      //when more colors are added to the array, more circles will be drawn
    fill(colors[i]);
      //this fill command sets the individual color of the circle to the slot in the array with the same number
      //for example, the first circle is linked to the first entry in the array, second to the second, etc.
    circle(i * (width / (colors.length)) + 50, 30, 50)
  }
​
  textSize(50)
  fill(colors[colorIndex])
  headlineX -= 2 
  //We're subtracting this amount from the headline's X position every frame.
  //think of this as the "speed" the headline moves at. 
​
  noStroke()
  text(headlines[headlineIndex], headlineX, height/2) 
  //this line draws your headlines on the canvas
​
  if (headlineX < -textWidth(headlines[headlineIndex])) {
    headlineX = width;
  }
    //this is a relatively simple if statement that resets the position of the headline to the right side
    //the if statement checks if the headlineX position is greater than the length of the headline's text box past 0
    //example: if the headline is 100px long, this if statement will reset the headlineX to 0 when its less than -100
  
​
​
  //add your news ticker features here, at the (current) end of the draw function
}
​
function keyPressed() {
  if (keyCode === RIGHT_ARROW) {
    colorIndex++;
    if (colorIndex > (colors.length - 1)) {
      colorIndex = 0
    }
  }
  //this nested if statement is what allows for us to cycle through the array. 
  //By adding 1 to the colorIndex variable, we've changed which element in the array is "selected"
  
  //your job is to take that code and extrapolate how to add the opposite, 
  //subtracting one from the colorIndex
    if (keyCode === LEFT_ARROW) {
colorIndex--;
      if (colorIndex < 0) {
      colorIndex = colors.length - 1;
    }
  }
  
  //then, take that same if statement block, and use it to add UP and DOWN arrow 
  //interaction to cycle through the headlines array
  //make sure your array loops properly!
  //HINT: it should look very similar to the skeleton above
  if (keyCode === UP_ARROW) {
    headlineIndex--;
    if (headlineIndex < 0) {
      headlineIndex = headlines.length - 1;
    }
  }
  
  if (keyCode === DOWN_ARROW) {
    headlineIndex++;
    if (headlineIndex > headlines.length - 1) {
      headlineIndex = 0;
    }
  }
  
}