Randomization Part 1

Unit Progress: Unit 2: Build your Creativity

Randomization Part 1

Click here to load the P5JS editor with this program. 

Here is the source code you can copy and paste into your P5JS Editor. Or you can preview it below. 

function setup() {
  createCanvas(600, 600);
  drawSetup();
}

function draw() {
  // Empty draw loop – waiting for user interaction or further drawing
}

function drawSetup() {
  console.log("I am in the drawSetup function!");

  // Setup configuration for drawSetup
  background('#FFFFCD');
  strokeWeight(5);
  stroke('#6e6e6e');
  
  let numOfShapes = 50; // the number of shapes to draw

  // Create randomly placed circles on the canvas with randomized RGB values / alpha values
  // (loop body not shown in the Processing code)
  for (let i = 0; i < numOfShapes; i++) {
    // (Add code here if needed)
  }

  // Data
  let xPosition = 50;
  let yPosition = 50;
  let shapeWidth = 50;
  let shapeHeight = 50;
  let shapeColor = "8,129,249";
  let shapeOutline = "5,6,7";

  // Function calls - send arguments
  drawShape(xPosition, yPosition, shapeWidth, shapeHeight, shapeColor, shapeOutline);
  drawShape(xPosition + 20, yPosition + 20, shapeWidth + 20, shapeHeight + 20, shapeColor, shapeOutline);
}

function drawShape(xPOS, yPOS, shapeWidth, shapeHeight, shapeColor, shapeOutline) {
  console.log("I am in the drawShape function! and xPOS = " + xPOS);
  // Currently, shapeColor and shapeOutline are not used in this function.
  // You can add code to utilize these parameters if needed.
  
  rect(xPOS, yPOS, shapeWidth, shapeHeight);
}

Previous Next