Tag: Project-03-Dynamic-Drawing

dynamic drawing

I wanted to explore the spinning of an object and see if I could control it or alter it in some way by using the location of the mouse.

sketch
function setup() {
    createCanvas(400, 400);
    rectMode(CENTER);
}

var g = 5;
var angle = 0;

function draw() {
    background(0);
    var r = g + mouseX
    fill(r, 255, 0);
    // restrict mouseX to 0-400
    var m = max(min(mouseX, 400), 0);
    var size = m * 350.0 / 400.0;
    circle(10 + m * 190.0 / 400.0, 200.0,
         size);
    fill(255, 0, r);
    size = 350 - size;
    circle(200 + m * 190.0 / 400.0, 200.0,
         size);
    //heres some confetti yay
    
    var confettiDimention1 = 100;
    var confettiDimension2 = 150;
    var confettiDimension3 = 120;
    var confettiDimension4 = 142;
    var angleSpangle = map(mouseX,0,width,3,300);
    push();
    fill('magenta');
    translate(m / 2,200 + size);
    rotate(radians(angle));
    square(confettiDimention1,confettiDimention1,50);
    fill('green');
    square(confettiDimention1,confettiDimention1,50);
    fill('cyan');
    square(confettiDimension2,confettiDimention1,10);
    square(confettiDimension3,confettiDimension4,30);
    pop();
    angle += angleSpangle;
    //if not then square probably

}

Project – 03

right click to refresh

sketch

//grid lines vertical
var x1 = 30
var y1 = 30
var x2 = 30
var y2 = 60

//grid lines horizontal
var Ax1 = 60
var Ay1 = 30
var Ax2 = 90
var Ay2 = 30

//orange square
var Sx1 = 60
var Sy1 = 60
var d = 30

//purple square
var PSx1 = 240
var PSy1 = 300
var Pd = 30

//yellow square
var YSx1 = 420
var YSy1 = 210
var Yd = 30


var gap = 30
var scolor = 0
var slant = 0
function setup() {
    createCanvas(600, 450);
    background(0);
    //text("p5.js vers 0.9.0 test.", 10, 15);
}



function draw() {

//orange square
strokeWeight(0)
fill('orange')
square(Sx1,Sy1,d)

//purple square
strokeWeight(0)
fill('purple')
square(PSx1,PSy1,Pd)

//yellow square
strokeWeight(0)
fill('yellow')
square(YSx1,YSy1,Yd)

// scaling square orange
if(dist(mouseX,mouseY,Sx1+d/2,Sy1+d/2)<d){
    //squaresscale
    d+=10
}if(d==width/2-15 || d==height/2-15){
    strokeWeight(0);
    fill(0)
    square(0,0,1000);
    strokeWeight(0);
    fill(random(200,255));
    square(Sx1,Sy1,d);
    d=60;
}

// scaling square purple
if(dist(mouseX,mouseY,PSx1+d/2,PSy1+Pd/2)<Pd){
    //squaresscale
    Pd+=30
}if(Pd==width/4 || Pd==height/4){
    strokeWeight(0);
    fill(0)
    square(0,0,1000);
    strokeWeight(0);
    fill(random(200,255));
    square(PSx1,PSy1,Pd);
    Pd=60;
}

// scaling square yellow
if(dist(mouseX,mouseY,YSx1+d/2,YSy1+Yd/2)<Yd){
    //squaresscale
    Yd+=1
}if(Yd==width/4 || Yd==height/4){
    strokeWeight(0);
    fill(0)
    square(0,0,1000);
    strokeWeight(0);
    fill(random(200,255));
    square(YSx1,YSy1,Yd);
    Yd=60;
}



//grid lines vertical left to right
//color
if(scolor==0){
stroke('red');
strokeWeight(3);
line(x1,y1,x2,y2);
}if(scolor==1){
stroke('green');
strokeWeight(3);
line(x1,y1,x2,y2);
}if(scolor==2){
stroke('blue');
strokeWeight(3);
line(x1,y1,x2,y2);
}if(scolor>2){
    scolor=0;
} 




//grid creation animation
x1+=gap
x2+=gap

//lines hit edge of canvas
if(x1>=width-60){
    //move down a row
    y1+=gap*2;
    y2+=gap*2;
    //reset x values
    x1=gap;
    x2=gap;
//loop lines across screen
}if(y2>=height){
    x1=30;
    x2=30;
    y1=30;
    y2=60;
    scolor +=1
}

//grid lines horizontal color top down
//color
if(scolor==2){
stroke('red');
strokeWeight(3);
line(Ax1,Ay1,Ax2,Ay2);
}if(scolor==1){
stroke('green');
strokeWeight(3);
line(Ax1,Ay1,Ax2,Ay2);
}if(scolor==0){
stroke('blue');
strokeWeight(3);
line(Ax1,Ay1,Ax2,Ay2);
}if(scolor>2){
    scolor=0;
}

//grid creation animation
Ay1+=gap
Ay2+=gap

//lines hit edge of canvas
if(Ay1>=height){
    //move across a row
    Ax1+=gap*2;
    Ax2+=gap*2;
    //reset y values
    Ay1=gap + slant;
    Ay2=gap;
//loop lines across screen
}if(Ax2>width){
    Ax1=60;
    Ax2=90;
    Ay1=30;
    Ay2=30;
    scolor +=1
}



//refresh page
if(mouseIsPressed){
    if(mouseButton == RIGHT){
    
    fill(0)
    rect(0,0,width,height);
    //orange square
    Sx1 = 60
    Sy1 = 60
    d = 30

    //purple square
    PSx1 = 240
    PSy1 = 300
    Pd = 30

    //yellow square
    YSx1 = 420
    YSy1 = 210
    Yd = 30
}
}

//slant
if(mouseX>width/2){
    //slant for vertical
    x1=x1+gap;

}
if(mouseY>height/2){
    //slant for horizontal
    Ay1=Ay1+gap;

}

}

Project 03

sketchDownload
// Ilia Urgen
// Section B

var angle = 0;

var color_1;
var color_2;

var background_lines = 0;

var triangle_1 = 1;
var triangle_2 = 2;
var triangle_3 = 3;
var triangle_4 = 4;
var triangle_5 = 5;
var triangle_6 = 6;


function setup() {
    stroke (2);
    createCanvas (800, 800);
    color_1 = color (255,140,0);
    color_2 = color (63,191,191);

    for (var y = 0; y < height; y++ ) {
        n = map (y,0, height, 0, 1);
        var color_3 = lerpColor (color_1, color_2, n);
        stroke (color_3);
        line (0, y, width, y);
    }
}                                                                  
function draw() {
    
    delta_x = mouseX/6;
    delta_y = mouseY/6;

    frameRate(30);

    stroke (2);
    push();

    translate(400, 400);
    rotate(radians(angle));

    if (background_lines == 0) {
        line (0,0, width, height);
        line (width, 0, 0, height);
        angle += 25; 
    }

    if (triangle_1 == 1) {
        // changes 1st darkest color gradient
        fill (132-mouseX/4, 0, 132-mouseY/4);
        // changes thickness and width of triangle
        triangle (0,0, -(delta_x + 100), delta_y + 150, (delta_x + 100), delta_y + 150);
        angle += 5;
    }

    if (triangle_2 == 2) {
        // changes 2nd darkest color gradient
        fill (152-mouseX/4, 0, 152-mouseY/4);
        // changes thickness and width of triangle
        triangle (0,0, -(delta_x + 80), delta_y + 120, (delta_x + 80), delta_y + 120);
        angle -= 15;
    }

    if (triangle_3 == 3) {
        // changes 3rd darkest color gradient
        fill (176-mouseX/4,0,176-mouseY/4);
        // changes thickness and width of triangle
        triangle (0,0, -(delta_x + 60), delta_y + 90, (delta_x + 60), delta_y + 90);
        angle += 200;
    }

    if (triangle_4 == 4) {
        // changes 4th darkest color gradient
        fill (204-mouseX/4, 0, 204-mouseY/4);
        // changes thickness and width of triangle
        triangle (0,0, -(delta_x + 40), delta_y + 60, (delta_x + 40), delta_y + 60);
        angle -= 150;
    }
    
    if (triangle_5 == 5) {
        // changes 5th darkest color gradient
        fill (232-mouseX/4,0,232-mouseY/4);
        // changes thickness and width of triangle
        triangle (0,0, -(delta_x + 20), delta_y + 30, (delta_x + 20), delta_y + 30);
        angle += 100;
    }

    if (triangle_6 == 6) {
        // changes 6th darkest color gradient
        fill (255-mouseX/4,0,255-mouseY/4);
        // changes thickness and width of triangle
        triangle (0,0, -(delta_x), delta_y, (delta_x), delta_y);
        angle -= 55;
    }

    pop();
}

Project 03: Dynamic Drawing

  1. Size of large circle changes
  2. Shade of large circle changes
  3. Rotation of smaller circle changes
  4. Stroke of smaller circles changes 

var uniX = 0;
var uniY = 0;


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

function draw() {
    uniX = mouseX;
    uniY = mouseY;
    background(0);
    push();
    fill(255);
    ellipse (uniX,uniY,200);
    pop();
    for (let i = 25; i <= 575; i+=50)
    {
        for (let j = 25; j <= 425; j+=50)
        {
            circleChange(i,j);
        }
    }
}

function circleChange(Cx,Cy) {
    distanceO = Math.sqrt((uniX-Cx)*(uniX-Cx) + (uniY-Cy)*(uniY-Cy));
    distance = constrain(distanceO, 10, 200);
    var diameter = distance/4;
    var angle = Math.atan2((uniY-Cy),(uniX-Cx));
    push();
    strokeWeight(1);
    stroke(0,0,255,255);
    noFill();
    arc(Cx, Cy, diameter, diameter, -0.25*PI, 0.75*PI);
    pop();
    push();
    strokeWeight(1);
    stroke(255,0,0,255);
    arc(Cx, Cy, diameter, diameter, 0.75*PI, 1.75*PI);
    pop();

    push();
    strokeWeight(0);
    fill(distance/200*255);
    ellipse (Cx,Cy,diameter-2);
    pop();

    fill(255);
    strokeWeight(distanceO/60);
    ellipse((Cx+diameter*Math.cos(angle)/3),(Cy+diameter*Math.sin(angle)/3),diameter/3);

}

Project 03-Dynamic Drawing

I went poking around the p5js reference library and found a really intriguing example in the randomGaussian() object so I decided to run with that and see what I could do with that. mouseX controls the properties of the yellow burst, and mouseY the blue. Click to randomize the burst lines, and click and drag to shade the background along greyscale.

sketchDownload
// Bridget Doherty, bpdohert, 104 Section C
 
// Click to randomize burst density
// mouse X position changes yellow burst
// mouse Y position changes blue burst
// Clicking & dragging changes background color along greyscale

// Base code for bursts from p5js reference >> randomGaussian() object

let distribution = new Array(360);
var Burst1 = 200;
var Burst2 = 200;
let bkgColor = 0;

function setup() {
  createCanvas(600, 450);
  for (let i = 0; i < distribution.length; i++) {
    distribution[i] = floor(randomGaussian(0, Burst1));
  }
  for (let i2 = 0; i2 < distribution.length; i2++) {
    distribution[i2] = floor(randomGaussian(0, Burst2));
  }
}

function draw() {
  background(bkgColor);
  translate(width / 2, height / 2);
  for (let i = 0; i < distribution.length; i++) {
    rotate(TWO_PI / distribution.length);
    strokeWeight(1.5);
    stroke(color(243, 197, 101));
    let dist = abs(distribution[i]);
    line(0+mouseX, 0, dist, 0);
  }
  for (let i2 = 0; i2 < distribution.length; i2++) {
    rotate(TWO_PI / distribution.length);
    stroke(color(158, 182, 187));
    let dist = abs(distribution[i2]);
    line(0, 0+mouseY, dist, 0);
  }
}

function mousePressed(){
  let Burst1 = mouseX;
  let Burst2 = mouseY;
  print (Burst1 +", " + Burst2);
  for (let i = 0; i < distribution.length; i++) {
    distribution[i] = floor(randomGaussian(0, Burst1));
  }
  for (let i2 = 0; i2 < distribution.length; i2++) {
    distribution[i2] = floor(randomGaussian(0, Burst2));
  }
}

function mouseDragged() {
  bkgColor = bkgColor - 0.7;
  if (bkgColor<=0) {
    bkgColor = 255;
  }
}