View on GitHub

idmd

Bush School Interactive Digital Media Design Course

A solution for Dynamic rectangles

// Dynamic Rectangles
// Learn to code visually!
// text following // are help comments !!
// Make Change to lines below starting with ***AND ALL CAPS LETTERS like this
// HIT THE PLAY BUTTON IN YOUR EDITOR TO SEE CHANGES

let loc1 = 0; // set up a variable pixel location for rect1
let loc2 = 0; // set up a variable pixel location for rect2

function setup() { // this function is run once.   
  // canvas size in pixels
  // width is set to 600, and height to 200
  createCanvas(400, 200);
}

function draw() { // this function is run repeatedly.  

  // set the background color to cyan
  background("cyan");
  
  // ***SAY HELLO BY UNCOMMENTING LINE BELOW BY DELETING THE 2 SLASHES
  sayHello();

  // ***UNCOMMENT LINE BELOW BY DELETING THE 2 SLASHES TO SEE WHAT HAPPENS!
  drawRect1();
  
  // ***UNCOMMENT LINE BELOW BY DELETING THE 2 SLASHES TO INCLUDE YOUR MODIFIED CODE!
  drawRect2();
  
}

function sayHello() {
  // ***SAY HELLO TO YOUR FRIENDS - MODIFY TEXT BELOW!! 
  // use input parameters: quoted text, x, y loc in pixels
  fill("black");
  textSize(20);
  text("Welcome to the new Bush Students!", 70, 30);  
}

function drawRect1() {
  // draw a moving orange rectangle using input parameters:
  // x loc, y loc, width, and height 
  fill("orange");
  rect(loc1, 50, 100, 50);

  // move loc1 over to by 5 pixels
  // reset to 0 if width of canvas is exceeded!
  if (loc1 < width) {
    loc1 = loc1 + 5;
  } else {
    loc1 = 0;
  }  
}

function drawRect2() {
// ***DRAW A VERICAL RECT WITH A DIFFERENT COLOR
// MOVING FROM TOP TO BOTTOM AT ANOTHER SPEED?
// YOU WILL NEED COPY CONTENTS OF drawRect1() FUNCTION 
// BETWEEN OUTER BRACKETS BELOW
// MODIFY THE fill COMMAND TO CHANGE COLOR
// MODIFY THE rect COMMAND (Hint: switch height & width parameters)
// MODIFY OTHER LINES (Hint: SWAP ALL REFERNCES TO loc1 WITH loc2)
// CHANGE THE INCREMENT OF loc2 TO A DIFFERENT VALUE 

}

A solution for Dynamic sticks

// Dynamic Sticks
// Learn to code visually!
// Anything following "//" are help comments !!

let loc = 0;  // set up a variable pixel location

function setup() {  // this function is run once.   
    // canvas size in pixels
    // width is set to 600, and height to 200
    createCanvas(600, 200); 

    // set the background color
    background("pink");  
    
    // limit the number of frames per second
    frameRate(10);
    
    // draw smooth lines
    smooth();

    // ***UNCOMMENT LINE BELOW TO SAY HELLO!
    sayHello();
} 

function draw() {  // this function is run repeatedly.  
  // ***UNCOMMENT ONE LINE BELOW TO SEE WHAT HAPPENS!
  drawSticks1();

  // ***UNCOMMENT ONE LINE BELOW TO RUN YOUR CUSTOM CODE!
  drawSticks2();   
  
  // dynamically move location for next draw loop
  moveLoc();
}

function sayHello() {
    // ***SAY HELLO TO YOUR FRIENDS - MODIFY TEXT BELOW!! 
    // use input parameters: quoted text, x loc & y loc
    textSize(20);
    text("Welcome to the new Bush Students!", 10, height/2);
}

function drawSticks1() {
  // set the thickness of the line. 
    strokeWeight(10);
  // set a random color for the line 
    stroke(randomColor());
    
    // draw the line using input parameters:
    // 2 pairs of points: x1, y1, x2, y2 
    line(loc, 0, width/2, height); 
}

function drawSticks2() {
  // ***CAN YOU DRAW ANOTHER SET OF LINES 
  // FROM BOTTOM TO TOP? OR FROM LEFT TO RIGHT ??
  // YOU WILL NEED COPY CONTENTS OF drawSticks1() FUNCTION 
  // BETWEEN OUTER BRACKETS BELOW AND MODIFY JUST 
  // THE "line" FUNCTION CALL BELOW!
  // HINT: x1, y1 need to be fixed & x2 is var, y2 is fixed

  // set the thickness of the line. 
    strokeWeight(10);
  // set a random color for the line 
    stroke(randomColor());
    
    // draw the line using input parameters:
    // 2 pairs of points: x1, y1, x2, y2 
    line(width/2, 0, loc, height);   
}

function moveLoc() {
    // move loc over by 40 pixels
    // reset to 0 if width of canvas is exceeded!
    if (loc < width) {
        loc = loc + 40;
    } else {
        loc = 0; 
    }
}

function randomColor() {
  // return an array of random RGBA values for color
  // random(255) gives a random number 0 to 255 for each color and alpha
  return [random(255), random(255), random(255), 255];
}