Category: Project-03-Dynamic-Drawing

This was inspired by an app I used to use on my mom’s iPod as a kid. I’m not very good at drawing, so I figured I would give the user a chance to draw. I’ve created a program based on degrees of symmetry that lets you alter the size of the brush, number of brushes, color of the brush, color of the background, and movement of the drawn elements. You can also save your creation by pressing p.

symmedraw2

// variable definitions
var degOfSymmetry = 36;
var curAngle = 0;
var diameter = 10;
let drawnCircs = [];
var radiate = false;
var radiateVelocity = 1;
var showRef = true;
let currentColor = ["red", "green", "blue"];
let colorVals = [255, 255, 255];
let backgroundCols = [0, 0, 0];
var colorIndex = 0;
var currentSelect = "Currently selected: " + currentColor[colorIndex];
var whatKey = "";
var rainbowMode = false;
var rainbowCtr = 0;
var freq = 0.01;

function setup() {
    createCanvas(600, 600);
    background(220);
    text("p5.js vers 0.9.0 test.", 10, 15);
}

function draw() {
    // define background based on color arrays
    background(backgroundCols[0], backgroundCols[1], backgroundCols[2]);
    noStroke();

    // set circle color based on user choice
    let c = color(colorVals[0], colorVals[1], colorVals[2]);
    if (rainbowMode) {
        var rr = sin(rainbowCtr) * 127 + 128;
        var rg = sin(rainbowCtr + (2*PI/3)) * 127 + 128;
        var rb = sin(rainbowCtr + (4*PI/3)) * 127 + 128;
        c = color(rr, rg, rb);
    }
    fill(c);

    // self explanatory
    getAngle();

    // define a center, get relative mouse radius
    var centerX = width / 2;
    var centerY = height / 2;
    var radX = mouseX - centerX;
    var radY = mouseY - centerY;
    var mouseRad = sqrt(pow(radX, 2) + pow(radY, 2));
    
    // draw a circle for each degree of symmetry 
    for (i = 0; i < degOfSymmetry; i++) {
        var loopAngle = curAngle - (i * 2*PI / degOfSymmetry)
        var tX = centerX + mouseRad * cos(loopAngle);
        var tY = centerY + mouseRad * sin(loopAngle);
        circle(tX, tY, diameter);
        
        // add to circle history if clicked
        if (mouseIsPressed) {
            drawnCircs.push([tX, tY, diameter, c, loopAngle]);
        }
    }

    // draw each circle from history
    for (i = 0; i < drawnCircs.length; i++) {
        fill(drawnCircs[i][3]);
        circle(drawnCircs[i][0], drawnCircs[i][1], drawnCircs[i][2]);

        // if radiating, begin changing circle positions
        if (radiate) {
            drawnCircs[i][0] += radiateVelocity * cos(drawnCircs[i][4]);
            drawnCircs[i][1] += radiateVelocity * sin(drawnCircs[i][4]);
            if (drawnCircs[i][0] > width || drawnCircs[i][0] < 0) {
                drawnCircs.splice(i, 1); // remove circles for speed
            } else if (drawnCircs[i][1] > height || drawnCircs[i][1] < 0) {
                drawnCircs.splice(i, 1); // remove circles for speed
            }
        }
    }

    // increment counter for rainbow mode
    rainbowCtr = (rainbowCtr + freq) % (2*PI); 

    // display onscreen reference
    if (showRef) {
        fill(255);
        text("ref: c=change color, d=change degrees of symmetry " +
                "s=change circle size, b=background color \n" +
                "o=clear screen, r=radiate outwards, p=save screen as png " +
                "v=set radiate velocity\n q=rainbow color cycle, " +
                "up/down arrow=color/velocity val+-1, right/left arrow=+-10\n" +
                "i=change selected color, enter=hide ref, y=rainbow speed", 
                10, height - 50);
        text(currentSelect, 10, 15);
        text("RGB: " + (colorVals.toString(10)), 10, 30);
        text("Radiate Velocity " + radiateVelocity.toString(10), 10, 45);
        text("Background RGB: " + (backgroundCols.toString(10)), 10, 60);
        text("Circle Size: " + (diameter.toString(10)), 10, 75);
        text("Degrees of Symmetry: " + (degOfSymmetry.toString(10)), 10, 90);
        text("Rainbow Frequency: " + (freq.toString(10)), 10, 105);
    }
}

// gets angle from mouse pos
function getAngle() {
    curAngle = atan2(mouseY - height / 2, mouseX - width / 2);
    if (mouseX - width / 2 == 0) {
        if (mouseY - height / 2 > 0) {
            curAngle = HALF_PI;
        } else {
            curAngle = 3 * HALF_PI;
        }
    }
}

function keyPressed() {
    // checks what key is pressed, performs an action, or sets a flag
    if (key == "c") {
        whatKey = "c";
        currentSelect = "Currently selected: " + currentColor[colorIndex];
    }
    if (key == "o") {
        drawnCircs = [];
    }
    if (key == "s") {
        whatKey = "s";
        currentSelect = "Currently selected: circle size";
    }
    if (key == "b") {
        whatKey = "b";
        currentSelect = "Currently selected: background color";
    }
    if (key == "d") {
        whatKey = "d";
        currentSelect = "Currently selected: degrees of symmetry";
    }
    if (key == "r") {
        radiate = !radiate;
    }
    if (key == "q") {
        rainbowMode = !rainbowMode;
    }
    if (key == "v") {
        whatKey = "v";
        currentSelect = "Currently selected: velocity"
    }
    if (key == "p") {
        save("canvas_drawing.png");
    }
    if (key == "i") {
        colorIndex = (colorIndex + 1) % 3;
        currentSelect = "Currently selected: " + currentColor[colorIndex];
    }
    if (key == "Enter") {
        showRef = !showRef;
    }
    if (key == "y") {
        whatKey = "y";
        currentSelect = "Currently selected: Rainbow Cycle Speed";
    }

    // changing parameters that affect drawing and motion
    if (keyCode == UP_ARROW) {
        if (whatKey == "d") {
            degOfSymmetry += 1;
        }
        if (whatKey == "c") {
            colorVals[colorIndex] += 1;
        }
        if (whatKey == "v") {
            radiateVelocity += 1;
        }
        if (whatKey == "b") {
            backgroundCols[colorIndex] += 1;
        }
        if (whatKey == "s") {
            diameter += 1;
        }
        if (whatKey == "y") {
            freq += 0.01;
        }
    }
    if (keyCode == DOWN_ARROW) {
        if (whatKey == "d") {
            degOfSymmetry -= 1;
        }
        if (whatKey == "c") {
            colorVals[colorIndex] -= 1;
        }
        if (whatKey == "v") {
            radiateVelocity -= 1;
        }
        if (whatKey == "b") {
            backgroundCols[colorIndex] -= 1;
        }
        if (whatKey == "s") {
            diameter -= 1;
        }
        if (whatKey == "y") {
            freq -= 0.01;
        }
    }
    if (keyCode == RIGHT_ARROW) {
        if (whatKey == "d") {
            degOfSymmetry += 10;
        }
        if (whatKey == "c") {
            colorVals[colorIndex] += 10;
        }
        if (whatKey == "v") {
            radiateVelocity += 10;
        }
        if (whatKey == "b") {
            backgroundCols[colorIndex] += 10;
        }
        if (whatKey == "s") {
            diameter += 10;
        }
        if (whatKey == "y") {
            freq += 0.10;
        }
    }
    if (keyCode == LEFT_ARROW) {
        if (whatKey == "d") {
            degOfSymmetry -= 10;
        }
        if (whatKey == "c") {
            colorVals[colorIndex] -= 10;
        }
        if (whatKey == "v") {
            radiateVelocity -= 10;
        }
        if (whatKey == "b") {
            backgroundCols[colorIndex] -= 10;
        }
        if (whatKey == "s") {
            diameter -= 10;
        }
        if (whatKey == "y") {
            freq -= 0.10;
        }
    }

    return false;
}

Getting the symmetry correct was a little difficult, as well as figuring out how to deal with user input.

Is the code more complicated than it needs to be? Yes. Did it still take me way too long to figure out? Also Yes.

//Iris Yip
//15104 Section D

var wwidth = 600,
    wheight = 600,
    ballsize, //radius
    ballx, 
    bally, 
    hvelocity, 
    vvelocity,
    clickdistance,
    rvalue,greenvalue,bluevalue;

function setup() {
  
  createCanvas(wwidth, wheight);
  
  // starting point
  ballx = wwidth/2;
  bally = wheight/2;
  
  // starting velocity
  hvelocity = random(-5,5);
  vvelocity = random(-5,5);
  
  // starting ball size
  ballsize = random(10,150);
  
  // ball color
  redvalue = random(100,255);
  greenvalue = random(100,255);
  bluevalue = random(100,255);
  
};

function draw() {
  
  
  //background
  background(0)
  let rectBlue = map(mouseY, 0, height, 0, 255);
  fill(255, rectBlue, 200);
  rect(0,0, 600, 600);
  
  
  fill(redvalue, greenvalue, bluevalue);
  ellipse(mouseX, mouseY, 100, 100);


    
  // ball bounce-back conditions
  if(ballx >= width - ballsize || ballx <= ballsize){
    hvelocity = -hvelocity;
  };
  if(bally >= height - ballsize || bally <= ballsize){
    vvelocity = -vvelocity;
  };
  
  // ball location change
  ballx += hvelocity;
  bally += vvelocity;
  
  // render ball
  noStroke();
  fill(redvalue, greenvalue, bluevalue);
  ellipse(ballx, bally, ballsize * 2, ballsize * 2);
  
  
};
  
function mouseClicked() {
  {
    
    clickdistance = dist(mouseX, mouseY, ballx, bally);
    
    if(clickdistance <= ballsize) {
      
      // change velocity if clicked on the ball
      hvelocity = random(-5,5);
      vvelocity = random(-5,5);
      
      // change ball color
      redvalue = random(100,255);
      greenvalue = random(100,255);
      bluevalue = random(100,255);
      
      //changing ball size
      ballsize = random(50,100);
      
    };
  
  };

  
};