Category: Section E

sketch

/* Miranda Luong
Section E
mluong@andrew.cmu.edu
Project-03-Dynamic Drawing
*/


function setup() {
    createCanvas(640, 480);
}

function draw() {
    background(170, 190, 200);
    noStroke();

    // Translate the origin point to the center of the screen
	translate(width/2, height/2);

    // Size of circles 
    var size = 60
    //position of circles 
    var pos = 1
    //color of all shapes
    var color = 0
	

	// Restrict mouseX and mouse Y within a 400 x 400 square 
	// positioned at center of canvas
    var mX = max(min(mouseX, 520), 120);
    var mY = max(min(mouseY, 440),40);

    // Change attributes of circles according to distance
    // of mouse from center
	size = dist(320,240,mX,mY) * 60/200;
	pos = dist(320,240,mX,mY) / 250;
	color = dist(320,240,mX,mY);

    // North circle
	var northY= -150*pos;

    fill(color,100,100);
    ellipse(0,-150*pos,size,size);

    // Northeast circle
 
    var northeastX = 150/sqrt(2)*pos;
	var northeastY = -150/sqrt(2)*pos;

	fill(color,100,100);
	ellipse(northeastX,northeastY,size,size);

	// East circle

	var eastX = 150*pos;

	fill(color,100,100);
	ellipse(eastX,0,size,size);

	// Southeast circle
	var southeastX = 150/sqrt(2)*pos;
	var southeastY = 150/sqrt(2)*pos;

	fill(color,100,100);
	ellipse(southeastX,southeastY,size,size);

	// South circle

	var southY = 150*pos;

	fill(color,100,100);
	ellipse(0,southY,size,size);

	// Southwest circle

	var southwestX = -150/sqrt(2)*pos;
	var southwestY = 150/sqrt(2)*pos;

	fill(color,100,100);
	ellipse(southwestX,southwestY,size,size);

	// West circle

	var westX = -150*pos;

	fill(color,100,100);
	ellipse(westX,0,size,size);

	// Northwest circle

	var northwestX = -(150/sqrt(2))*pos;
	var northwestY = -(150/sqrt(2))*pos;

	fill(color,100,100);
	ellipse(northwestX,northwestY,size,size);

	// Center square

	// Change angle of square's rotation according to distance
    // of mouse from center
	angle = dist(320,240,mX,mY)*.01;
    
    // Use cosine to get a smooth CW and CCW motion
  	var c = cos(angle);

    fill(color,100,100);
    rectMode(CENTER);
    rotate(c);
    rect(0,0,60,60);
	
}

I tried to challenge myself but coding movements that radiated from the center. After changing the origin of the canvas to the center, I wonder if it’s possible to set the canvas to a normal cartesian grid. I also wonder as to why mouseX and mouseY do not follow my new grid system even after I changed the origin.

sketch

I had a good time coding these drawings and loved the creative freedom.

sketch

/*
Yingying Yan
Waitlist for Section E
yingyiny@andrew.cmu.edu
Assignment-02-A
*/

//this code allow you do draw flowers! hold you mouse
//still and see what you get!

var k =4;
var R = 255;

//setup background and allow drawing to show
function setup() {
  createCanvas(480, 640);
  background(230);
}

function draw() {
  //the graphic of the lower right eraser box
  push();
  strokeWeight(0);
  fill(255);
  rect(340, 480, 140,160);
  pop();
  text("erase", 360,520);

  //color of the stokes of the flower
  stroke(R,100,100);
  // position of the drawing = position of the mouse
  translate(mouseX, mouseY);
  // the mouse controls how fast you can draw the flower
  //e.g. smaller x = draw faster
  var speed = frameCount / mouseX;
  // rose formula from Wekipedia and allow the computer
  //to draw the flower
  var x = cos(k*speed) * sin(speed);
  var y = cos(k*speed) * cos(speed); 
  // how big the drawing depends on the Y coordinate of the mouse
  scale(mouseY / 5, mouseY / 5);

  
  // controls the color of the drawing 0f the flower
  R -= .5;
  if (R < 0) {
    R = 255;
  }

  //the circles that draw the flower
  ellipse(x , y,.001,.001);

  //lower right corner of the canvas and clear the 
  //background of the canvas = erase
  if (mouseX > 340 & mouseY > 480) {
    background (230);
  }
}

I wanted to draw something geometrical, so I went online and search for a flower formula. This drawing is based on the rose formula. It took me forever to figure everything out but I am glad that I somehow finished it. I think this project is very interesting, and I wish I have more time and know more code for this.

sketch.js

var defaultBG = 0;
//to inverse line/background colors when key is pressed
var whiteLines = 255;
var blackLines = 0;

function setup() {
    createCanvas(640, 480);
}

function draw() {
    background(defaultBG);
    //changes background color when mouse hovers over top/bottom of page
    if (mouseY >= 3 * height / 4) {
        background(255, 0, 0);
    }else if (mouseY <= height / 4) {
        background(0, 0, 255);
    };
    noFill();
    stroke(0, 255, 0);
    strokeWeight(1);
    ellipse( width / 2, height / 2, 50, 50);
    //green rectangle going across page
    fill(0, 255, 0);
    noStroke();
    rect(mouseX - width * .75, 50, 250, 10);
    noFill();
    strokeWeight(1);
    stroke(whiteLines);
    //three swinging lines
    line(width - mouseX, 130, 30, 50);
    line(width - mouseX + 30, 140, 30, 50);
    line(width - mouseX + 60, 150, 30, 50);
    //change color of rectangle outline and make text appear
    //if mouse is pressed
    if (mouseIsPressed) {
        strokeWeight(2);
        stroke(255, 54, 258);
        stroke(whiteLines);
        strokeWeight(.5);
        textFont('Courier New');
        text("ok ok ok ok ok ok ok", 50, 100);
        stroke(255, 54, 258);
    };
    //vertical lines on top
    strokeWeight(1);
    rect(width / 4, 100, 50, 70);
    stroke(whiteLines);
    strokeWeight(1);
    line(500, mouseY, 500, mouseY + 200);
    line(505, mouseY, 505, mouseY + 200);
    line(510, mouseY, 510, mouseY + 200);
    line(515, mouseY, 515, mouseY + 200);
    line(520, mouseY, 520, mouseY + 200);
    line(525, mouseY, 525, mouseY + 200);
    line(530, mouseY, 530, mouseY + 200);
    line(535, mouseY, 535, mouseY + 200);
    line(540, mouseY, 540, mouseY + 200);
    //vertical lines on bottom
    stroke(0,255,0);
    line(502, mouseY * 1.5 + 150, 502, mouseY * 1.5 + 410);
    line(507, mouseY * 1.5 + 160, 507, mouseY * 1.5 + 480);
    line(512, mouseY * 1.5 + 170, 512, mouseY * 1.5 + 480);
    line(517, mouseY * 1.5 + 180, 517, mouseY * 1.5 + 480);
    line(522, mouseY * 1.5 + 190, 522, mouseY * 1.5 + 480);
    line(527, mouseY * 1.5 + 200, 527, mouseY * 1.5 + 510);
    line(532, mouseY * 1.3 + 50, 532, mouseY * 1.3 + 510);
    line(537, mouseY * 1.3 + 50, 537, mouseY * 1.3 + 510);
    //thin rectangle blocks moving across page on bottom
    noStroke();
    fill(whiteLines);
    rect(width - mouseX, 400, 100, 5);
    rect(width - mouseX * 1.5, 400, 60, 5);
    rect(width - mouseX * 2.5, 400, 40, 5);

    rect(width - mouseX + 70, 425, 100, 3);
    rect(width - mouseX * 1.5 + 70, 425, 60, 3);
    rect(width - mouseX * 2.5 + 70, 425, 40, 3);
    //makes text follow mouse
    text("stop following me! :((", mouseX, mouseY);
    translate(mouseX, mouseY);
    noStroke();
    //if mouse isn't clicked, text and circles will show
    if (mouseIsPressed === false) {
        fill(0, 0, 255);
        ellipse(20, 20, 20, 20);
        ellipse(40, 40, 20, 20);
        textFont('Courier New');
        fill(255, 0, 0);
        text("no no no no no", 50, 100);
        stroke(255, 54, 258);
        fill(0, 0, 255);
    }
}
//inverses black and white colors when key pressed
function keyTyped() {
    if (defaultBG > 0) {
        defaultBG = 0;
        whiteLines = 255;
    }else {
        defaultBG += 255;
        whiteLines -= 255;
        fill(defaultBG);
    }
}

Like many other people, I initially had no idea what to do since it was so open ended. I started off by making random shapes and lines, and since I naturally prefer certain colors, what I made began to resemble this (shown below!) I made for fun last week. This project ended up being a continuation and exploration of that. Since I am interested in bringing narrative elements to everything I made, I created a mini dialogue that results from mouse interaction.