Project-03-Dynamic-Drawing – Page 4 – [OLD SEMESTER] 15-104 • Introduction to Computing for Creative Practice

Project-03: Dynamic Drawing

function setup() {
    createCanvas(600, 450);
    background(100);
    fade = 0;
}

function draw() {
    var xmousePos = max(min(mouseX, 600), 0);
    var ymousePos = max(min(mouseY, 450), 0);
    var color = dist(300, 225, xmousePos, ymousePos);


    stroke(255, color, 0);
    //strokeweight increases as cursor moves further away from center
    strokeWeight(dist(300, 225, (xmousePos), (ymousePos))); 
    //drawing line that follows the cursor
    line(300, 225, xmousePos, ymousePos);
    //
    line(300, 225, xmousePos, -ymousePos);




    





}

I wanted to work with gradually changing colors particularly in projects to create a smooth gradient brush effect. Next time I want to try making curved lines as well.

Project-03: Dynamic Drawing

sketch

var angle = 0;
function setup() {
    createCanvas(600, 450);
    rectMode(CENTER);
}

function draw() {
    background(0);
    fill(255, 255, mouseY);
    // restrict mouseX to 0-400
    var m = max(min(mouseX, 400), 0);
    var size = m * 350.0 / 400.0;
    if (mouseX < width/2) {
        push(); 
        translate(150,200);
        rotate(radians(angle)); 
        rectMode(CENTER);
        rect(10 + m * 190.0 / 400.0, 200.0,
         size, size);
        pop();
        angle += 5;
} 

    else {
        rect(10 + m * 190.0 / 400.0, 200.0,
         size, size);
}

    fill(mouseX, 0, 255);
    size = 350 - size;
    rect(200 + m * 190.0 / 400.0, 200.0,
         size, size);


// } else if (mouseX > width/2) {background (0,0,200)}

}

Project 3: Dynamic Drawing

var maxHue = 70;
var currentHue = maxHue;


function setup() {
  createCanvas(800,400);
  background(100);

  colorMode(HSB, 350, 110, 110);
  var skyHue = currentHue;
  background(22, 0, 20);
}

function draw() {


  var c = width / 2;
  background(255);
  noStroke();
  var skyHue = currentHue;
  skyHue = map(mouseX, 0, width, 0, 270);
  for (var rectY = 0; rectY < 700; rectY += 10) {
    fill(skyHue, 50, map(mouseX, 0, width, 100, 0));
    rect(0, rectY, width, 250);
    skyHue++;
    fill(212, 0, 79, 0.08);
    rect(0, 400, width, 300);


  }

  sun();    

    fill(192,192,192);
    triangle(-200, 475, 170, 180, 700, 475);
    fill(160, 160, 160);
    triangle(80, 400, 680, 230, 900, 400);
    
}

function sun() {
  var diameter = height + 100;
  S = map(mouseX, 0, width, 45, 10);
  var mouseangle = map(mouseX, 0, width, PI, TWO_PI+ QUARTER_PI);
  var d1 = 10 + (sin(mouseangle) * diameter / 2) + diameter / 2;
  fill(50, 100, 175);
  ellipse(mouseX, d1 - 90, 90, 90);
  fill(0, 0, 0,);
  
}

Project 3: Dynamic Drawing

dynamic drawing

var angle = 0;

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

function draw() {
    // change the background color from light -> dark blue as mouse top -> bottom of canvas
    if (mouseY < height/7) { 
        background (188, 210, 232); //lightest blue
    } else if (mouseY < (height/7)*2) {
        background (145, 186, 214);
    } else if (mouseY < (height/7)*3) {
        background (115, 165, 198);
    } else if (mouseY < (height/7)*4) {
        background (82, 138, 174);
    } else if (mouseY < (height/7)*5) {
        background (46, 89, 132);
    } else if (mouseY < (height/7)*6) {
        background (30, 63, 102);
    } else {
        background (23, 47, 77); //darkest blue
    }

    //a box at the center of the canvas
    stroke(0);
    strokeWeight(3);
    line(250, 175, 250, 275); //left border of box
    line(250, 175, 350, 175); //top border of box
    line(350, 175, 350, 275); //right border of box
    line(250, 275, 350, 275); //bottom border of box
    fill(79, 37, 37); //brown color for box
    rect(250, 175, 100, 100);

    //open side of box if mouse touches border
    if (mouseX < 250 & mouseY > 175 && mouseY < 275) { //if open left side
        line(200, 150, 250, 175);
        line(200, 300, 250, 275);
        var r = 255; //pink fill
        var g = 180;
        var b = 200;
        fill(r, g, b);
        circle(mouseX, mouseY, 300-mouseX); //small circle attached to mouse
        fill(r-mouseX, g-mouseX, b-mouseX); //opposite color from small circle
        circle(0, mouseY, mouseX); //large circle on the side of canvas

    } else if (mouseX > 350 & mouseY > 175 && mouseY < 275) { //if open right side
        line(350, 175, 400, 150);
        line(350, 275, 400, 300);
        //rectangle spin on center, change size and spin angle 
        if(mouseX > 350 & mouseX <450) {
            fill(235, 207, 52); //yellow
        } else {
            fill(52, 235, 116); //green
        }
        push();
        translate(350, 225);
        rotate(radians(angle));
        rectMode(CENTER);
        rect(50, 50, mouseX-300, mouseX-300); //size of rect increases as mouse goes to the right
        pop();
        if (mouseX > 350 & mouseX < 450){ //if on left side
            angle += 3; //rotate clock-wise
        } else { //if on right side
            angle -= 3; //rotate counter clock-wise
        }

    } else if (mouseY < 175 & mouseX > 250 && mouseX < 350) { //if open top side
        line(200, 150, 250, 175);
        line(350, 175, 400, 150);
        var circleX = 300;
        var circleY = 150;
        //let circle size depend on how close mouse is to circles
        var size = constrain(dist(mouseX, mouseY, circleX, circleY),0, 30); 
        fill(115, 105, 205); //fill purple
        circle(circleX, circleY, size); //first circle
        circle(circleX, circleY-30, size*2); //2nd circle
        circle(circleX, circleY-60, size); //3rd circle
        circle(circleX, circleY-90, size*2); //4th circle
        circle(circleX, circleY-120, size); //5th circle

    } else if (mouseY > 275 & mouseX > 250 && mouseX < 350) { //if open bottom side
        line(200, 300, 250, 275);
        line(350, 275, 400, 300);
        //random neon spike of lines that follows the mouse 
        stroke(255, 230, 0); //bright yellow
        line(287.5, 362.5, mouseX, mouseY);
        line(287.5, 362.5, mapx, mapy+180);
        line(287.5, 362.5, mapx+40, mapy);
        line(287.5, 362.5, mapx, mapy+200);

        var mapx = map(mouseX, 250, 350, 210, 310); //map to a shorter length
        var mapy = map(mouseY, 275, 450, 235, 410); //map to a shorter length
        
        stroke(122, 255, 105); //bright green
        line(287.5, 362.5, mapx, mapy);
        line(287.5, 362.5, mapx-130, mapy-50);
        line(287.5, 362.5, mapx-40, mapy-20);
        line(287.5, 362.5, mapx-130, mapy+150);
        line(287.5, 362.5, mapx-150, mapy-39);

        stroke(248, 59, 255); //bright purple
        line(287.5, 362.5, mapx*2, mapy*2);
        line(287.5, 362.5, mapx*1.1, mapy);
        line(287.5, 362.5, mapx, mapy+220);
        line(287.5, 362.5, mapx+50, mapy);
        line(287.5, 362.5, mapx-80, mapy);

        stroke(150, 255, 250); //bright blue
        line(287.5, 362.5, mapx*1.5, mapy);
        line(287.5, 362.5, mapx-195, mapy+239);
        line(287.5, 362.5, mapx-230, mapy+180);
        line(287.5, 362.5, mapx+10, mapy+50);
        line(287.5, 362.5, mapx, mapy+190);
        line(287.5, 362.5, mapx*0.2, mapy*2);

        stroke(255, 150, 217); //bright pink
        line(287.5, 362.5, mapx-20, mapy);
        line(287.5, 362.5, mapx-100, mapy);
        line(287.5, 362.5, mapx-170, mapy+20);
    }

}

The idea behind this drawing is a box that reveals different changing elements depending on where you put your mouse. The most challenging part of this project was figuring out how to make the elements change based on their interaction with mouseX and mouseY. I had to do some trial-and-error to get the effects that I wanted.

Project 3 Dynamic Drawing

sketch

//Michelle Dang (mtdang) section D
var r = 0; //red
var g = 0; //green
var b = 0; //blue 
var s = 2; //stroke weight

var f = 0; //fill color black

function setup() {
    createCanvas(450, 600);
    background(0);


    }

function draw() {
    translate(width/2, height/2); // center origin
    fill(f, 50);
    stroke(r, g, b, 100); 
    strokeWeight(s);
    rotate(mouseX); //rotate ellipse
    ellipse(0, 0, mouseY, mouseX); //elipse size based on mouse
    ellipse(0, 0, mouseX, mouseY); //elipse size based on mouse
    ellipse(0, 0, 30,30); // center ellipse for clear indication of stroke weight change

    mouseX -= .5;




    if (mouseX < 450 & mouseX > 0 && mouseY < 600 && mouseY > 0) { //when mouse is farthest form center, make ellipse purple
        r=127;
        g=0;
        b = 255;
    }
        if (mouseX<405 & mouseX > 45 && mouseY < 540 && mouseY > 60 ) { //blue stroke
        r = 0;
        g = 0;
        b = 255;
    }
    if (mouseX < 360 & mouseX > 90 && mouseY < 480 && mouseY > 120) { //green stroke
        r = 0;
        g = 255;
        b = 0;
 }  if (mouseX < 315 & mouseX > 135 && mouseY < 420 && mouseY > 180) { //orange stroke
        r = 255;
        g = 128;
        b = 0;
    }
    if (mouseX < 270 & mouseX > 180 && mouseY < 360  && mouseY > 240) { // when mouse is closest to center, make ellipses red 
        r = 255;
        g = 0;
        b = 0;
    
    }
}

    function mousePressed() {
      s = random(1, 20); // if mouse is pressed, randomly change strokeWeight
    }

Project 3: Dynamic Drawing

sketch

//Anthony Pan
//Section C
var size;
var colorRect; 
var wave;

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

function draw() {
    scale(0.5); //zoom out
    translate(300, 200); //moves origin of canvas
    background(0);
    fill(255,0,0); //fills rectangles red
    rotate(radians(30)); //rotates canvas clockwise 30 degrees 
    mouseX = constrain(mouseX, 20, width); //constraining mouseX to canvas
    mouseY = constrain(mouseY, 0, height - 100); //constraining mouseY to canvas
    

    //rectangles created with for loop because of repeating pattern.
    for (let x = 0; x < 100; x++) {
        //initial rectangle 
        var position1 = (750 - 15 * x) + 200;
        var position2 = (-300 + x * 10) - 200;
        var rectWidth = 10;
        var rectHeight = 120;

        // size (further away from mouse, longer rectangle gets)(mouseX)
        size = dist(mouseX, 0, position1, position2); 
        position2 -= size/2; 
        rectHeight += size;

        //color (mouseY)
        //distance of mouseY from each rectangle gives color a value
        color = dist(0, mouseY, position1, position2); 
        //color creates a gradient from red to white
        color = (color/2.8 - 150) % 510
        //color = abs(255 - (color % 510)); // used so that there is a smooth transition from red to white to red again.
        fill(255, color, color);

        //wave (mouseX)
        wave = sin((PI/7) * x); //shifts the position of rectangles into a sin() wave
        position2 += wave * mouseX/3; //adjusting posiition based off of mouseX/3

        //twist (mouseY)
        rotate(radians(mouseY/100)); //reduces sensitivity of mouseY, also rotates canvas based on position of mouseY

        rect(position1, position2, rectWidth, rectHeight); //draws rectangle

    }
}

Using a for loop, I was able to create a rectangle and iterate it multiple times without having to repeatedly create every rectangle.

mouseX controls the size/length and the position of each rectangle through a sin() wave function as you move from left to right.

mouseY controls the color gradient from red to white as you move from top to bottom of the canvas. It also controls the rotation of the canvas.

Project 3: Dynamic Drawing

Dynamic Drawing

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

function draw() {

    //setting up the background color
    let firstColor = color(45,0,85); //first color to be blended from
    let secondColor = color(219,146,7); //second color to be blended from
    bldval = map(mouseX, 0,width,0,1,true); //the blending proportion 
    bColor = lerpColor(firstColor,secondColor,bldval); // the background color based on mouseX
    background(bColor); //setting background 

    //vertical and horizontal rectangle
    noStroke()
    rectColor = lerpColor(secondColor,firstColor,bldval);
    move = map(mouseY,0,height,300,320,true); //constraining the position of the horizintal rectangle
    fill(rectColor);
    rect(mouseX-40,0,80,height); //vertical rectangle
    rect(0,move-40,width,80); //horizontal rectangle

    //circle on top right moving to top left
    fill(255);
    ellipse(450 - mouseX,100,30,30);
    fill(rectColor);
    crcWidth = 100 - mouseX/2;
    crcHeight = 200 - mouseX/2;
    push();
    translate(450 - mouseX,100);
    rotate(0+mouseX);
    ellipse(0,0,crcWidth,crcHeight);
    pop();
      
    //rotating white circles around mouse X and mouse Y
    push();
    fill(255)
    translate(mouseX,mouseY);
    rotate(mouseX/10);
    ellipse(0,-30,+10,10);
    ellipse(0,30,-10,10);

}

I enjoyed doing this. The hardest idea was possibly to start the project. After that it was pretty quick.

Project 03: Dynamic Drawing

dynamic drawing

//Max Stockdale, Section D

var R = 50; //color   
var G = 100;
var B = 255;

var angle = 0; 

var xs = 15; //scale
var ys = 20;

var circlesize = 80;

function setup() {
    createCanvas(600, 450);
    rectMode(CENTER);
}


function draw() {

    if (mouseX < (width / 2) & mouseY < (height / 2)){   //background changes color in different quadrants 
        background(251,215,90);
    } else if (mouseX < (width / 2) & mouseY > (height / 2)){
        background(156,158,251);
    } else if (mouseX > (width / 2) & mouseY < (height / 2)){
        background(198,149,198);
    } else {
        background(36,110,237);
    }

    noStroke();


    var m = max(min(mouseX, 600), 0);  //maintaing size of ellipses
    var size = m * 300 / 600;


    fill(R + mouseX / 2, G + mouseX / 2, B + mouseX / 2); //ellipses
    ellipse(width / 2, height / 2, size, size);

    fill(R + mouseX / 2, G + mouseX / 2, B + mouseX);
    ellipse(width / 2, height / 2, size * 0.9 , size * 0.9);

    fill(R + mouseX, G + mouseX / 2, B + mouseX / 2);
    ellipse(width / 2, height / 2, size * 0.7 , size * 0.7);

    fill(R + mouseX / 2, G + mouseX, B + mouseX / 2);
    ellipse(width / 2, height / 2, size * 0.5 , size * 0.5);

    fill(R + mouseY / 2, G + mouseY, B + mouseX / 2);
    ellipse(550, 225, size * 0.1 , size * 0.1);

    fill(R + mouseY /2, G + mouseY, B + mouseX /2);
    ellipse(30, 225, size * 0.1, size * 0.1);
    
    fill(255);
    rect(mouseX, mouseY, 50, 50); //x,y position square 1


    //side circle_1
    translate(-150, + 100);
    
    fill(R + mouseX / 2, G + mouseX / 2, B + mouseX / 2);//ellipses
    ellipse(width / 2, height / 2, size, size);

    
    fill(R + mouseX / 2, G + mouseX / 2, B + mouseX);
    ellipse(width / 2, height / 2, size * 0.9 , size * 0.9);

    
    fill(R + mouseX, G + mouseX / 2, B + mouseX / 2);
    ellipse(width / 2, height / 2, size * 0.7 , size * 0.7);


    fill(R + mouseX / 2, G + mouseX, B + mouseX / 2);
    ellipse(width / 2, height / 2, size * 0.5 , size * 0.5);
    
    fill(255);
    rect(mouseX , mouseY, 50, 50); //x, y position square 2
    
    


    //side circle_2
    translate(+300, -200);
    //ellipse 1
    fill(R + mouseX / 2, G + mouseX / 2, B + mouseX / 2);
    ellipse(width / 2, height / 2, size, size);

    //ellipse 2
    fill(R + mouseX / 2, G + mouseX / 2, B + mouseX);
    ellipse(width / 2, height / 2, size * 0.9 , size * 0.9);

    //ellipse 3
    fill(R + mouseX, G + mouseX / 2, B + mouseX / 2);
    ellipse(width / 2, height / 2, size * 0.7 , size * 0.7);

    //ellipse 4
    fill(R + mouseX / 2, G + mouseX, B + mouseX / 2);
    ellipse(width / 2, height / 2, size * 0.5 , size * 0.5);


    fill(255);
    rect(mouseX, mouseY, 50, 50); //x,y position square 3


    fill(36,110,237); //spinning square(blue)
    push();
    translate(-75,+175);
    rotate(radians(angle));
    rectMode(CENTER); 
    rect(0,0,50,50);
    pop();
    angle += 5;  

    fill(251,215,90); //spinning square(yellow)
    push();
    translate(+375,+475);
    rotate(radians(angle));
    rectMode(CENTER); 
    rect(0,0,50,50);
    pop();
    angle += 5;  

    
    angle = angle + 0.5;  
    xs = width - (0.5 * mouseX); //scale based on x
    ys = height - (0.5 * mouseY); //scale based on y

}

For this project, I wanted to play around with the scale of circles and the gradient of the colors. I also wanted to include a background that changes color based on the mouse position, with spinning squares on the corners.

lmattson-project-03

lmattson-03-project

//Luke Mattson
//section A


function setup() {
    createCanvas(600, 450);
    background(120)
}

function draw() {
// draw a face in the background
    background(173,216,230)
    fill(167,199,231);
    strokeWeight(1);
    stroke(140,170,220);
    triangle(0,0,600,600,0,600);
    stroke(0);                  
    fill(223,180,130);      
    ellipse(300,250,230,320);
    fill(250,231,218);          
    ellipse(412,276,30,60);
    ellipse(188,276,30,60);
    fill(250,231,218);          
    ellipse(300,300,230,320);
    fill(245,245,245);         
    stroke(0);
    strokeWeight(2);
    circle(265,245,40,40);
    circle(335,245,40,40);
    fill(0,0,200,30);
    circle(270,250,18,18);
    circle(330,250,18,18);
    line(300,260,310,300);      
    line(310, 300,290, 295);
    fill(255,160,160);          
    ellipse(300,350,25,35);
    line(310,230,350,215);      
    line(290,230,250,215);
    stroke(255,160,160,40);      
    fill(255,160,160,40);
    ellipse(240,325,30,50);
    ellipse(360,325,30,50);
    noFill();                    
    strokeWeight(2);
    stroke(0);
    arc(300,425,70,40, 2*PI+1/8*PI, PI-1/8*PI);
    stroke(255,255,255);        
    line(300,500, 300, 460);
    line(300,500, 310, 510);
    line(300,500,290,510);
    line(300,480,310,470);
    line(300,480,290,470);

// the text "Hi" comes onto the canvas when the mouse is on the right side
     text("Hi", 1175 - mouseX, mouseY)

//use for loops to draw the hexagons
    var hexX = 20
    var hexY = 30
    for (let hexX = 0; hexX <= 600; hexX += 20){									
        for(let hexY = -10; hexY <= 500; hexY+= 20){

            // variables to determine each hexagon's color
            var hexR = (dist(hexX, hexY, mouseX, mouseY)/150)*100
            var hexG = (dist(hexX, hexY, mouseX, mouseY)/150)*20
            var hexB = (dist(hexX, hexY, mouseX, mouseY)/150)*120

            // variable to determine each hexagon's size
            var size = constrain((dist(hexX, hexY, mouseX, mouseY)/150),.3,1.5)

            // drawing a hexagon
            fill(hexR,hexG,hexB)
            beginShape()
            vertex(hexX,hexY)
            vertex(hexX-size*10,hexY-size*5)
            vertex(hexX-size*10,hexY-size*15)
            vertex(hexX,hexY-size*20)
            vertex(hexX+size*10,hexY-size*15)
            vertex(hexX+size*10,hexY-size*5)
            endShape(CLOSE)
        }
    }

// angular movement of the circles
    push()
    translate(300,225);

    // positioning and opacity variables
    var circleX = 100;
    var circleY = 100;
    var circleOpacity = mouseX/2

    fill(0,0,0,circleOpacity)

    // rotating the origin based on mouseX positioning
    var rotationrr = radians(mouseX);
    rotate(rotationrr);

    //drawing each circle
    ellipse(circleX,circleY,20);
    ellipse(circleX+50,circleY+50,20)
    ellipse(circleX+100,circleY+100,20)
    ellipse(circleX+150,circleY+150,20)
    ellipse(circleX-50,circleY-50,20)
    ellipse(circleX-100,circleY-100,20)
    ellipse(circleX-150,circleY-150,20)
    ellipse(circleX-200,circleY-200,20)
    ellipse(circleX-250,circleY-250,20)
    ellipse(circleX-300,circleY-300,20)
    ellipse(circleX-350,circleY-350,20)
    
    // returning the origin to the default
    pop()

    
   
}

Wherever the mouse is, the hexagons get smaller, colors change, and circles rotate. put your mouse as far right on the canvas as you can for a surprise!

Dynamic Drawing

file

//Georgia Miller
//15-104 Section D
//mouse controls change from moving along x axis
function setup() {
    createCanvas(450, 600);
    background(220);
    text("p5.js vers 0.9.0 test.", 10, 15);
}

function draw() {
background(0);
translate(225,mouseX); //center //mouseX changes position
var sqrWidth = 50;
if(mouseX<225){ //clockwise rotation
rectMode(CENTER);
rotate(radians(frameCount)); //typically 10 frameRate
}
if(mouseX>225){ //counterclockwise rotation
rectMode(CENTER);
rotate(radians(-frameCount)); //typically 10 frameRate
}
srqWidth = sqrWidth + 10 * mouseX; //for size change
if (mouseX<225) {//Color change to greys on left
    fill(255);
    rect(0,0,mouseX/2+120,mouseX/2+120); //mouse for size change
    fill(220);
    rect(0,0, mouseX/2+100,mouseX/2+100);
    fill(185);
    rect(0,0,mouseX/2+80,mouseX/2+80);
    fill(150);
    rect(0,0,mouseX/2+60,mouseX/2+60);
    fill(115);
    rect(0,0,mouseX/2+40,mouseX/2+40);
    fill(80);
    rect(0,0,mouseX/2+20,mouseX/2+20);
    fill(45);
    rect(0,0,mouseX/2,mouseX/2);
}
if (mouseX > 225){ //colorchange to rainbow on right
    fill(255,0,255);
    rect(0,0,mouseX/4+120,mouseX/4+120);
    fill(255,0,0);
    rect(0,0, mouseX/4+100,mouseX/4+100);
    fill(255,150,10);
    rect(0,0,mouseX/4+80,mouseX/4+80);
    fill(255,255,0);
    rect(0,0,mouseX/4+60,mouseX/4+60);
    fill(0,255,0);
    rect(0,0,mouseX/4+40,mouseX/4+40);
    fill(10,215,255);
    rect(0,0,mouseX/4+20,mouseX/4+20);
    fill(0,0,255);
    rect(0,0,mouseX/4,mouseX/4);
} 

}

I had an idea coming in and got really stuck so I decided after a while to change my idea. I struggled trying to work around my translation for a while especially when considering up and down motions. It was weird to see all my mistakes before I put my background in because everything kept looping over each other because of my frameRate, which created this cool circle around my rotating square.