Week 4- Loading Data, Displaying text Elyazia Abbas

Concept:

The goal of this sketch is to generate daily affirmations in the form of “I am …” statements. Each click on the canvas refreshed the draw function to bring a new affirmation assembled from a CSV file of positive words. The affirmations are placed on top of a sunset-inspired Perlin noise background using snippets of code from the decoding nature class.

Daily Doses of Positive are the Best Prevention for the Blues!

Code:

//here i am splitting these global variables to make each map to a spot or place in the phrase 
let SUBJECT = 0;
let QUALITY = 1;
let VERB = 2;
let ACTION = 3;
let PLACE = 4;




let strings = []; //this array holds all thre lines from the csv file 
let zoff = 0; // this is the third dimensionw e are using for the perlin noise


let sunsetPalettes = [ // this is the color pallette i use to make a sunset theme 
  ["#FF9E80", "#FF6E40", "#FF3D00", "#DD2C00"], 
  ["#FFB74D", "#FF8A65", "#F06292", "#BA68C8"], 
  ["#FFD180", "#FFAB40", "#FF7043", "#8E24AA"], 
  ["#FFE082", "#FFB74D", "#F48FB1", "#9575CD"]  
];

let currentPalette;

function preload(){ //preloading the csv file holding the words before setup
  strings = loadStrings("words.csv"); 
}

function setup() {//setting the canvas size and the font for the writing 
  createCanvas(600, 400);
  textFont("Georgia");
  textAlign(CENTER, CENTER);
  noLoop();
  pickPalette();
}

function draw() {
  background(255);
  noStroke();
  // this nested for loop will step between every 20 pixels +- horizontally and vertically
  for (let y = 0; y < height; y += 20) {
    for (let x = 0; x < width; x += 20) {
      let n = noise(x * 0.01, y * 0.01, zoff);// in that position we call the noise function and store th eresult in n 
      let c = color(random(currentPalette)); // get a  random sunset color
      c.setAlpha(90); // adding transparency using Alpha
      fill(c); // fill with the random color
      ellipse(x, y, n * 40, n * 40); //draw the ellipse here 
    }
  }
  zoff += 0.02; //editing the noise dimension after the draw

  
  
  //here we are randomly choosing a line to work with

  let line = "";
  do {
    line = strings[int(random(strings.length))]; // once we get a line that is not empty 
  } while (line.trim().length === 0); 

  let row = split(line, ','); // split the chosen line into n arrray of 5 tokens 

  let subject = row[SUBJECT];
  let quality = row[QUALITY];
  let verb = row[VERB];
  let action = row[ACTION];
  let place = row[PLACE];


  
  
  
  
  fill(30);
  textSize(32);
  text(subject + " " + quality, width / 2, height / 2 - 40); // here we put togehter the affirmation text 

  textSize(22);// here we put togehter the affirmation text 
  text(subject.replace("I am","I") + " " + verb + " to " + action + " in the " + place, width / 2, height / 2 + 20);


  textSize(14); // this si the footer that just asks sht euser to click 
  fill(60);
  text("Click anywhere on the screan for a new affirmation", width / 2, height - 30);
}

function mouseClicked() {
  pickPalette(); // picking. a new color pallette 
  redraw(); //draw again or call the drae function again 
}

function pickPalette() {
  currentPalette = random(sunsetPalettes); // pick random color to 
}

Embedded Skecth:

Conclusion: 

In the future, I’d like to refine grammar for more natural phrases. Maybe even make the array that holds the sentences longer so that we can get more complex phrases. I also want to let the Perlin noise flow continuously, and change colors for future sketches possibly.

 

Creative Reading Response:

  • What’s something (not mentioned in the reading) that drives you crazy and how could it be improved?

One thing that always drives me crazy is traditional TV remotes. There are so   many small buttons that all look the same, and most of them I never even touch. When I just want to change the volume or switch channels, I end up pressing the wrong thing and I’m stuck in some random settings menu. It feels like the design makes everything equally important, when really most people only use a few basic functions. If remotes had bigger, clearly marked buttons for the essentials and maybe hid the less-used ones, plus some simple feedback like a backlight, they’d be so much easier to use.

  • How can you apply some of the author’s principles of design to interactive media?

Norman’s design principles fit really naturally into interactive media because the whole field is about making technology feel intuitive and meaningful. Take affordances and signifiers, for example—these are really important when we design an interface. If a button actually looks like it can be clicked, or an arrow or sign shows you that you should swipe, users don’t have trouble guessing what to do next. In projects like games, apps, or interactive installations, these little cues make the experience smooth instead of frustrating. It’s basically about letting the design speak to the user so they can focus on enjoying the content rather than fighting with the controls. When people don’t have to think too hard about how to use something, they can actually connect with the creative side of the project.

 

 

Leave a Reply