My Sketch - OpenProcessing

mySketch
xxxxxxxxxx
 
// Exercise 3-1 Assignment Starter Sketch
// Requirements for the Exercise:
// 1. 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 is
//      a great source: https://reasonstobecheerful.world
// 2. 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"
//      (i.e. when you go beyond the end of the array, it should start back at the beginning; when
//      you go before the beginning of the array, it should start showing headlines from the end)
// 3. Make it look like a news ticker on a news channel
​
let headlineXPosition = 0;
let headline = "The Small Country Where Women in Tech Are Flourishing";
let headlineArray = [
  "The Small Country Where Women in Tech Are Flourishing",
  "How a Hotel Is Empowering Locals in Cambodia",
  "Living Well With Diabetes — With Help From a Peer",
  "How One Indian State Went 100% Organic",
  "More California Schools Than Ever Are Embracing Vegan Meals",
  "What We’re Reading: Protecting Yellowstone’s Wolves by Listening"
]; 
let headlineIndex = 0;
//STEP 2: CREATE AN ARRAY WITH INDEX VARIABLES SET TO 0
​
let colors = [
  "red",
  "orange",
  "yellow",
  "green",
  "cyan",
  "blue",
  "purple",
  "magenta",
  "black",
  "grey",
];
let colorIndex = 0;
​
function setup() {
  createCanvas(600, 400);
}
​
function draw() {
  background(220);
​
  //STEP 1: CREATE A FOR LOOP
  for (let i = 0; i < 10; i++) {
    //STEP 4: ADD SELECTION INDICATOR
    if (i === colorIndex) {
      strokeWeight(4);
      stroke("white");
    } else {
      strokeWeight(4);
      stroke("black");
    }
    //STEP 3: COMBINE FOR LOOP AND ARRAY
    fill(colors[i]);
    circle(i * 60 + 30, 30, 50);
  }
​
  //STEP 6: DISPLAY HEADLINE
  textSize(20);
  strokeWeight(1);
  stroke("black");
  textStyle(BOLD);
  fill(colors[colorIndex]);
  text(headlineArray[headlineIndex], headlineXPosition, height - 20);
​
  headlineXPosition -= 2.5;
  if (headlineXPosition < -textWidth(headlineArray[headlineIndex])) {
    headlineXPosition = width;
  }
}
​
//STEP 5: ADD INTERACTION
function keyPressed() {
  if (keyCode === LEFT_ARROW) {
    colorIndex--;
    if (colorIndex < 0) {
      colorIndex = colors.length - 1;
    }
  } else if (keyCode === RIGHT_ARROW) {
    colorIndex++;
    if (colorIndex > colors.length - 1) {
      colorIndex = 0;
    }
  }
  // Change which headline is displaying by changing the headlineIndex
  if (keyCode === DOWN_ARROW) {
    headlineIndex--;
    if (headlineIndex < 0) {
      headlineIndex = headlineArray.length - 1;
    }
  } else if (keyCode === UP_ARROW) {
    headlineIndex++;
    if (headlineIndex > headlineArray.length - 1) {
      headlineIndex = 0;
    }
  }
}
​