User:Rnewkirk7954/ENES-100/project 3

From Wikiversity
Jump to navigation Jump to search

Previous pages:

Current pages:


Week1 Narrative

This week will be a direct continuation of Week4 Narrative from Project 2.

So far I have created 8 versions of the working code, with a constantly updated file I use to play around with the code.

Most of the changes I made to each version are written in the comments!

functional_1

Extended content
void setup(){
   setupSD();
   setupCG();

  }
  
  void draw(){
    drawSD();
    drawCG();
  }

float y = 100;

void setupSD() {
  size(640, 360);  // Size must be the first statement
  stroke(255);     // Set line drawing color to white
  frameRate(100);
}

void drawSD() { 
  background(000);   // Set the background to black
  y = y - 1; 
  if (y < 0) { 
    y = height; 
  } 
  line(0, y, width, y);  
} 

PGraphics pg;

void setupCG(){
  size(640, 360);
  pg = createGraphics(400, 200);
}

void drawCG(){
  fill(0, 12);
  rect(0, 0, width, height);
  fill(255);
  noStroke();
  ellipse(mouseX, mouseY, 60, 60);
  
  pg.beginDraw();
  pg.background(51);
  pg.noFill();
  pg.stroke(255);
  pg.ellipse(mouseX-120, mouseY-60, 60, 60);
  pg.endDraw();
  
  // Draw the offscreen buffer to the screen with image() 
  image(pg, 120, 60); 
}

Video

functional_2

Extended content
void setup(){
   setupSD();
   setupCG();
  }
  
  void draw(){
    drawSD();
    drawCG();
  }

float y = 100;

void setupSD() {
  size(360, 640);  // inverted
  stroke(255);     // moving line color
  frameRate(100);
}

void drawSD() { 
                   // background();    blank reveals fading circles
  y = y - 1; 
  if (y < 0) { 
    y = height; 
  } 
  line(0, y, width, y);  
} 

PGraphics pg;

void setupCG(){
  size(360, 640);    //inverted
  pg = createGraphics(1, 1);  //minimized grey box, now virtually invisible
}

void drawCG(){
  fill(0, 12);
  rect(0, 0, width, height);
  fill(255);                  
  noStroke();
  ellipse(mouseX, mouseY, 60, 60);    //dimensions of circle
  
  pg.beginDraw();
                   //pg.background(51);    hope to make background transparent
  pg.noFill();
  pg.stroke(255);
  pg.ellipse(mouseX-120, mouseY-60, 60, 60);
  pg.endDraw();
  
  // Draw the offscreen buffer to the screen with image() 
  image(pg, 120, 60); 
}

Video

functional_3

Extended content
void setup(){
   setupSD();
   setupCG();
  }
  
  void draw(){
    drawSD();
    drawCG();
  }

float y = 100;

void setupSD() {
  size(360, 640);  // inverted
  stroke(255);     // moving line color
  frameRate(100);
}

void drawSD() { 
                       // background();    blank reveals fading circles
  y = y - 1; 
  if (y < 0) { 
    y = height; 
  } 
  line(0, y, width, y);  
} 

PGraphics pg;

void setupCG(){
  size(360, 640);    //inverted
  pg = createGraphics(1, 1);  //minimized grey box, now virtually invisible
}

void drawCG(){
  fill(0, 12);
  rect(0, 0, width, height);
  fill(255);                  
  stroke(255);                        //white line
  ellipse(mouseX, mouseY, 60, 60);    //dimensions of circle
  
  pg.beginDraw();
                   //pg.background(51);    hope to make background transparent
  pg.noFill();
  pg.stroke(255);
  pg.ellipse(mouseX-120, mouseY-60, 60, 60);
  pg.endDraw();
  
  // Draw the offscreen buffer to the screen with image() 
  image(pg, 120, 60); 
}

Video

functional_4hue

This was the first version of the code into which i introduced the "Hue" sketch from Processing's list of examples. I defined a new set of functions for it, setupH and drawH. I want to find a way to incorporate the position-sensitive colorful flashing bars into the circle from CreateGraphics.

Extended content
void setup(){
   setupSD();
   setupCG();
   setupH();
  }
  
  void draw(){
    drawSD();
    drawCG();
    drawH();
  }

float y = 100;

void setupSD() {
  size(360, 640);  // inverted
  stroke(255);     // moving line color
  frameRate(200);
}

void drawSD() { 
                       // background();    blank reveals fading circles
  y = y - 1; 
  if (y < 0) { 
    y = height; 
  } 
  line(0, y, width, y);  
} 

PGraphics pg;

void setupCG(){
  size(360, 640);    //inverted
  pg = createGraphics(1, 1);  //minimized grey box, now virtually invisible
}

void drawCG(){
  fill(0, 12);
  rect(0, 0, width, height);
  fill(255);     
  stroke(255);
  ellipse(mouseX, mouseY, 60, 60);    //dimensions of circle
  
  pg.beginDraw();
                   //pg.background(51);    hope to make background transparent
  pg.noFill();
  pg.stroke(255);
  pg.ellipse(mouseX-120, mouseY-60, 60, 60);
  pg.endDraw();
  
  // Draw the offscreen buffer to the screen with image() 
  image(pg, 120, 60); 
}


 
 
int barWidth = 20;
int lastBar = -10;

void setupH() 
{
  size(360, 640);                              //inverted
  colorMode(HSB, height, height, height);  
  noStroke();                                //altered from noStroke();
                                 //background();
}

void drawH() 
{
  int whichBar = mouseX / barWidth;
  if (whichBar != lastBar) {
    int barX = whichBar * barWidth;
    fill(mouseY, height, height);
    rect(barX, 0, barWidth, height);
    lastBar = whichBar;
  }
}

Video

functional_5hue

Extended content
void setup(){
   setupSD();
   setupCG();
   setupH();
  }
  
  void draw(){
    drawSD();
    drawCG();
    drawH();
  }

float y = 100;

void setupSD() {
  size(360, 640);  // inverted
  stroke(255);     // moving line color
  frameRate(200);
}

void drawSD() { 
                       // background();    blank reveals fading circles
  y = y - 1; 
  if (y < 0) { 
    y = height; 
  } 
  line(0, y, width, y);  
} 

PGraphics pg;

void setupCG(){
  size(360, 640);    //inverted
  pg = createGraphics(1, 1);  //minimized grey box, now virtually invisible
}

void drawCG(){
  fill(0, 12);
  rect(0, 0, width, height);
  fill(255);     
  stroke(255);
  ellipse(mouseX, mouseY, 60, 60);    //dimensions of circle
  
  pg.beginDraw();
                   //pg.background(51);    hope to make background transparent
  pg.noFill();
  pg.stroke(255);
  pg.ellipse(mouseX-120, mouseY-60, 60, 60);
  pg.endDraw();
  
  // Draw the offscreen buffer to the screen with image() 
  image(pg, 120, 60); 
}


 
 
int barWidth = 20;
int lastBar = -10;

void setupH() 
{
  size(360, 640);                              //inverted
  colorMode(HSB, height, height, height);  
  noStroke();                                //altered from noStroke();
                                 //background();
}

void drawH()                             //need to change bar to horizontal
{
  int whichBar = mouseX / barWidth;
  if (whichBar != lastBar) {
    int barX = whichBar * barWidth;
    fill(mouseY, height, height);
    rect(barX, 0, barWidth, height);
    lastBar = whichBar;
  }
}

Video

functional_6hue

Extended content
void setup(){
   setupSD();
   setupCG();
   setupH();
  }
  
  void draw(){
    drawSD();
    drawCG();
    drawH();
  }

float y = 100;

void setupSD() {
  size(360, 640);  // inverted
  stroke(255);     // moving line color
  frameRate(200);
}

void drawSD() { 
                       // background();    blank reveals fading circles
  y = y - 1; 
  if (y < 0) { 
    y = height; 
  } 
  line(0, y, width, y);  
} 

PGraphics pg;

void setupCG(){
  size(360, 640);    //inverted
  pg = createGraphics(1, 1);  //minimized grey box, now virtually invisible
}

void drawCG(){
  fill(0, 12);
  rect(0, 0, width, height);
  fill(600);     //white
  stroke(600);    //white
  ellipse(mouseX, mouseY, 90, 90);    //dimensions of circle 60 -> 90
  
  pg.beginDraw();
                   //pg.background();    hope to make background transparent
  pg.noFill();
  pg.stroke(600);
  pg.ellipse(mouseX-120, mouseY-60, 60, 60);
  pg.endDraw();
  
  // Draw the offscreen buffer to the screen with image() 
  image(pg, 120, 60); 
}


 
 
int barWidth = 90;                //adjust bar width to fit 4
int lastBar = -1;

void setupH() 
{
  size(360, 640);                              //inverted
  colorMode(HSB, height, height, height);  
  noStroke();                                //altered from noStroke();
                                 //background();
}

void drawH()                             //need to change bar to horizontal
{
  int whichBar = mouseX / barWidth;
  if (whichBar != lastBar) {
    int barX = whichBar * barWidth;
    fill(mouseY, height, height);
    rect(barX, 0, barWidth, height);
    lastBar = whichBar;
  }
}

functional_7hue

Extended content
void setup(){
   setupSD();
   setupCG();
   
  }
  
  void draw(){
    drawSD();
    drawCG();
    
  }


float y = 100;

void setupSD() {
  size(360, 640);  // inverted
  stroke(255);     // moving line color
  frameRate(200);
}

void drawSD() { 
                       // background();    blank reveals fading circles
  y = y - 1; 
  if (y < 0) { 
    y = height; 
  } 
  line(0, y, width, y);  
} 

PGraphics pg;
int barWidth = 90;                //adjust bar width to fit 4
int lastBar = -1;

void setupCG(){
  size(360, 640);    //inverted
  pg = createGraphics(1, 1);  //minimized grey box, now virtually invisible
}

void drawCG(){
  fill(0, 10);                  //duration of circle fade
  rect(0, 0, width, height);
  colorMode(HSB, height, height, height);      //attempts to give circle hue behavior
  stroke(HSB, height, height, height);    //attempts to give stroke hue behavior
  ellipse(mouseX, mouseY, 90, 90);    //dimensions of circle 60 -> 90
  
  pg.beginDraw();
                   //pg.background();    hope to make background transparent
  int ellipse = mouseX / barWidth;      //insert drawH() here, replacing the fill() function of drawCG(). 
    if (ellipse != lastBar) {            //replaced whichBar with ellipse, no change.
    int barX = ellipse * barWidth;
    fill(mouseY, height, height);
    rect(barX, 0, barWidth, height);
    lastBar = ellipse;
  }
  pg.stroke(HSB, height, height, height);        //attempts to give stroke hue behavior
  pg.ellipse(mouseX-120, mouseY-60, 60, 60);
  pg.endDraw();
  
  // Draw the offscreen buffer to the screen with image() 
  
  
  
  
}

functional_8hue

Extended content
void setup(){
   setupSD();
   setupCG();
   
  }
  
  void draw(){
    drawSD();
    drawCG();
    
  }


float y = 100;

void setupSD() {
  size(360, 640);  // inverted
  stroke(255);     // moving line color
  frameRate(200);
}

void drawSD() { 
                       // background();    blank reveals fading circles
  y = y - 1; 
  if (y < 0) { 
    y = height; 
  } 
  line(0, y, width, y);  
} 

PGraphics pg;
int barWidth = 90;                //adjust bar width to fit 4
int lastBar = -1;

void setupCG(){
  size(360, 640);    //inverted
  pg = createGraphics(1, 1);  //minimized grey box, now virtually invisible
}

void drawCG(){
  fill(0, 10);                  //duration of circle fade
  rect(0, 0, width, height);
  colorMode(HSB, height, height, height);      //attempts to give circle hue behavior
  stroke(HSB, height, height, height);    //attempts to give stroke hue behavior
  ellipse(mouseX, mouseY, 90, 90);    //dimensions of circle 60 -> 90
  
  pg.beginDraw();
                   //pg.background();    hope to make background transparent
  int ellipse = mouseX / barWidth;      //insert drawH() here, replacing the fill() function of drawCG(). 
    if (ellipse != lastBar) {            //replaced whichBar with ellipse, no change.
    int barX = ellipse * barWidth;
    fill(mouseY, height, height);
    rect(barX, 0, barWidth, height);
    lastBar = ellipse;
  }
  pg.stroke(HSB, height, height, height);        //attempts to give stroke hue behavior
  pg.ellipse(mouseX-120, mouseY-60, 60, 60);
  pg.endDraw();
  
  // Draw the offscreen buffer to the screen with image() 
  
  
  
  
}

Appearance:

functional_8hue looks identical to functional_7hue.

Week2 Narrative

Week3 Narrative

Week4 Narrative

Retrieved from "https://en.wikiversity.org/w/index.php?title=User:Rnewkirk7954/ENES-100/project_3&oldid=1103496"