Month: December 2019

sketch

//Mihika Bansal 
//mbansal@andrew.cmu.edu 
//Section E 
//Project 12

var ripples = []; 
var color = []; 
var b = 238;
var g = 238;  
//color for background 


function setup() {

    createCanvas(480, 480); 

}
   
function draw() {

	background(175, g, b); // randomization of background

	if (mouseIsPressed){ 
		//when new ripple is created
		var newRip = makeRipple(mouseX, mouseY); 
		//ripple based on mouse position
		ripples.push(newRip); 
		b = random(200, 250); 
		g = random(200, 240); 
		//background color changes based on mouse color
	}
   	
   	for(var i = 0; i < ripples.length; i++){
   		//for the length of the array draw each of the ripples 
   		var r = ripples[i]; 
   		r.display(); 
   		//display the ripple
   	} 
   	if(ripples.length > 35){ 
   	// makes it so that when ripples are displayed, they will be removed from array 
   		ripples.shift();
   		ripples.shift();
   		ripples.shift();
   		ripples.shift();//removes 4 ripples  
   	}

}

//making the ripples objects 
function makeRipple(rX, rY){
	var ripple = { x: rX, 
				y: rY,
				diam: 0, 
				out: 0,  
				fade: 0, 
				colorR: generateRandom(0, 75), 
				colorG: generateRandom(100, 200), 
				colorB: generateRandom(50, 200), //color stays in blue range
				display: drawRipple}; 

	return ripple; 
}

function drawRipple(){ // how to display ripple 

	for (var i = 0; i < 5; i++){
		 this.diam = this.out - 25 * i; // makes circle size increase

		if(this.diam > 0){ 
			// fading out fill and stroke 
			this.fade = map(this.diam, 0, 300, 255, 100); 
			//mapping the fill to part of the canvas, so it fades in a certain time 
			push(); 
			strokeWeight(1); 
			//stroke will be background color 
			stroke(175, g, b, this.fade);  
			fill(this.colorR, this.colorG, this.colorB, this.fade);
			//fill is based on the color of the ripple object  
			ellipse(this.x, this.y, this.diam); 
			//multiple ripples made from the ellipse 
			pop(); 
		}

	}
	// when more ripples in the array/screen, more waves and speed 
	if(ripples.length > 25){ 
		this.out += 4; // amount ripple changes 
	}
	else {
		this.out += 2; //slower speed of ripples 
	}
	 
	
}

function generateRandom(x, y){
	var r = floor(random(x, y)); 
	//creates random variable + returns it 
	return r;
}

For my final project, I created a program that creates and animates ripples based on where your mouse touches. The color of the ripples changes randomly but stays in the blue range. The background color also changes randomly. The ripples fade using the map function, and if there are more ripples on the water, they move together faster.

I created an interactive clock that includes two modes that the user can switch between: normal, and Christmas. Each of the two modes draws a green tree and a snowy Christmas tree. In the beginning, the user wouldn’t know what the wiggly lines are drawing, but as they wait, the tree images begin to appear. The drawing refreshes when they switch between the two modes.

The time is displayed quantitatively as numbers and more visually with bars on the tree trunk, and mouse movement creates variant colors for certain features.

sketch

/* Youie Cho
   Section E
   minyounc@andrew.cmu.edu
   Final-Project*/

// Set up turtles to draw paths. Two draw their own paths simultaneously.
var ttl;
var ttl2;
var currIter = 0;

// Sets color for tree, outside area, text, and background
var rTree = 0;
var gTree = 100;
var bTree = 0;
var rOutside = 64;
var gOutside = 147;
var bOutside = 255;
var rText = 255;
var gText = 255;
var bText = 255;
var backgroundCol = 255;

// Ball colors (Christmas mode)
var ballcolors = ["red", "green", "pink", "orange", 'rgb(18, 89, 52)',
                'rgb(140, 0, 0)', 'rgb(252, 186, 3)', 'rgb(217, 86, 30)'];

// Coordinates and opacity for drawing star at top (Christmas mode)
var x = [300, 311, 333, 319, 321, 300, 279, 281, 267, 289];
var y = [48, 67, 73, 90, 112, 103, 112, 90, 73, 67];

// Opacity for star (Christmas mode)
var opacity = 0;

function setup() {
    createCanvas(600, 600);
    background("white");

    // Create turtles
    ttl = makeTurtle(0, 300);
    ttl.setWeight(1);
    ttl2 = makeTurtle(600, 300);
    ttl2.setWeight(1);
}

function draw() {
    time(); // Displays time witn numbers
    trunk(); // Trunk displays time with bars
    star(); // Star displays in Christmas mode
    ttl1Mvt(); // ttl1 settings
    ttl2Mvt(); // ttl2 settings

    // Turtle movement per frame
    currIter ++;
    ttl.forward(10);
    ttl.right(random(-50, 50));
    ttl2.forward(10);
    ttl2.left(random(-50, 50));

    buttons(); // Buttons used to switch between modes
}

function time() {
    // Text box
    noStroke();
    fill(rTree, gTree, bTree);
    rectMode(CENTER);
    rect(width / 2, 293, 140, 32);

    // Display hours with AM/PM mode, minutes, and seconds
    noStroke();
    fill(rText, gText, bText);
    if (hour() > 12) {
        textSize(20);
        text(hour() - 12, 245, 300);
        textSize(10);
        text("PM", 345, 300);
    } else {
        textSize(20);
        text(hour(), 245, 300);
        textSize(10);
        text("AM", 345, 300);
    }
    textSize(20);
    text(minute(), 280, 300);
    text(second(), 315, 300);
}

function trunk() {
    rectMode(CORNER);
    strokeWeight(0.5);
    stroke(128, 70, 13);
    fill(backgroundCol, backgroundCol, backgroundCol);
    rect(259.5, 370, 81, 120);
    fill(128, 70, 13);

    // Progression of brown bars display time
    var prgH = map(hour(), 0, 23, 0, 120);
    rect(259.5, 370, 25, prgH);
    var prgM = map(minute(), 0, 59, 0, 120);
    rect(287.5, 370, 25, prgM);
    var prgS = map(second(), 0, 59, 0, 120);
    rect(315.5, 370, 25, prgS);
}

function star() {
    var nPoints = x.length;
    noStroke();

    // Star color changes according to mouseX
    var starCol = map(mouseX, 0, width, 130, 220);
    fill(255, starCol, 100, opacity);
    beginShape();
    for (var i = 0; i < nPoints; i++) {
        vertex(x[i], y[i]);
    }
    endShape(CLOSE);
    noStroke();
}

function ttl1Mvt() {
    // Turtle does not go outside of the canvas
    if (ttl.x >= width || ttl.x <= 0 || ttl.y >= height || ttl.y <= 0) {
        ttl.penUp();
        ttl.goto(300, 300);
        ttl.penDown();
    }

    // Color settings for tree area and outside area
    if ((ttl.x > 280 & ttl.x < 320 && ttl.y > 90 && ttl.y < 110) ||
        (ttl.x > 260 && ttl.x < 340 && ttl.y > 110 && ttl.y < 150) ||
        (ttl.x > 240 && ttl.x < 360 && ttl.y > 150 && ttl.y < 200) ||
        (ttl.x > 200 && ttl.x < 400 && ttl.y > 200 && ttl.y < 260) ||
        (ttl.x > 150 && ttl.x < 450 && ttl.y > 260 && ttl.y < 370)) {
        ttl.setColor(color(rTree, gTree, bTree));
    } else {
        ttl.setColor(color(rOutside, gOutside, bOutside));
    }
}

function ttl2Mvt() {
    // Turtle does not go outside of the canvas
    if (ttl2.x >= width || ttl2.x <= 0 || ttl2.y >= height || ttl.y <= 0) {
        ttl2.penUp();
        ttl2.goto(300, 300);
        ttl2.penDown();
    }

    // Color settings for tree area and outside area
    if ((ttl2.x > 280 & ttl2.x < 320 && ttl2.y > 90 && ttl2.y < 110) ||
        (ttl2.x > 260 && ttl2.x < 340 && ttl2.y > 110 && ttl2.y < 150) ||
        (ttl2.x > 240 && ttl2.x < 360 && ttl2.y > 150 && ttl2.y < 200) ||
        (ttl2.x > 200 && ttl2.x < 400 && ttl2.y > 200 && ttl2.y < 260) ||
        (ttl2.x > 150 && ttl2.x < 450 && ttl2.y > 260 && ttl2.y < 370)) {
        ttl2.setColor(color(rTree, gTree, bTree));
    } else {
        ttl2.setColor(color(rOutside, gOutside, bOutside));
    }
}

function buttons() {
    noStroke();
    fill(mouseY / 5 + 200, mouseX / 5 + 200, mouseX / 5 + 100);
    rect(13, 558, 100, 33);
    rect(487, 558, 100, 33);
    strokeWeight(0.5);
    fill(rOutside, gOutside, bOutside);
    textSize(15);
    text("Normal", 40, 580);
    text("Christmas", 505, 580);
}

function mousePressed() {
    // NORMAL MODE ////////////////////////////////////////////////////////////
    if (mouseX >= 13 & mouseX <= 113 && mouseY >= 558 && mouseY <= 691) {
        // Turtle drawing refreshes upon cliking the button
        noStroke();
        clear();
        backgroundCol = 255;
        background(backgroundCol, backgroundCol, backgroundCol);
        opacity = 0;

        // Color settings
        rTree = 0; // Green tree
        gTree = 100;
        bTree = 0;
        rOutside = 64; // Blue outside
        gOutside = 147;
        bOutside = 255;
        rText = 240; // Light green text
        gText = 247;
        bText = 218;
    }

    // CHRISTMAS MODE /////////////////////////////////////////////////////////
    if (mouseX >= 487 & mouseX <= 587 && mouseY >= 558 && mouseY <= 691) {
        // Turtle drawing refreshes upon cliking the button
        clear();
        backgroundCol = 0;
        background(backgroundCol, backgroundCol, backgroundCol);
        opacity = 100; // Displays star only in Christmas mode

        // Color settings
        rTree = 255; // White tree
        gTree = 255;
        bTree = 255;
        rOutside = 255; // Yellow outside
        gOutside = 213;
        bOutside = 28;
        rText = 248; // Dark yellow text
        gText = 178;
        bText = 41;

        // Ornaments (Christmas mode)
        noStroke();
        for (var i = 0; i < ballcolors.length; i++) {
            for (var j = 0; j < ballcolors.length; j++) {
            fill(ballcolors[i]);
            }
        ellipse(random(280, 320), random(150, 250), 12, 12);
        ellipse(random(170, 450), random(250, 370), 18, 18);
        }
    }
}

// TURTLE FUNCTIONS ///////////////////////////////////////////////////////////
function turtleLeft(d) {
    this.angle -= d;
}

function turtleRight(d) {
    this.angle += d;
}

function turtleForward(p) {
    var rad = radians(this.angle);
    var newx = this.x + cos(rad) * p;
    var newy = this.y + sin(rad) * p;
    this.goto(newx, newy);
}

function turtlePenDown() {
    this.penIsDown = true;
}

function turtlePenUp() {
    this.penIsDown = false;
}

function turtleGoTo(x, y) {
    if (this.penIsDown) {
      stroke(this.color);
      strokeWeight(this.weight);
      line(this.x, this.y, x, y);
    }
    this.x = x;
    this.y = y;
}

function turtleSetColor(c) {
    this.color = c;
}

function turtleSetWeight(w) {
    this.weight = w;
}

function makeTurtle(tx, ty) {
    var turtle = {x: tx, y: ty,
                  angle: 0.0,
                  penIsDown: true,
                  color: color(128),
                  weight: 1,
                  left: turtleLeft, right: turtleRight,
                  forward: turtleForward,
                  penDown: turtlePenDown, penUp: turtlePenUp,
                  goto: turtleGoTo,
                  setColor: turtleSetColor, setWeight: turtleSetWeight,
                 };
    return turtle;
}

sketch

// Joseph Zhang
// 15-104 Final Project
// Section E

var rectangles = [];
var gutter = 30;
var totalRows = 15;
var totalCols = 15;
var centerCol = totalCols / 2;
var centerRow = totalRows / 2;
var rectH = 70;

function setup() {
    createCanvas(450, 450, WEBGL);
    // PUT RECTANGLES INTO ARRAY
    for( x = 0; x < totalRows; x++) {
        for ( y = 0; y < totalCols; y++) {
            rectangles.push(createCube(x * gutter, y * gutter, x, y));
        }
    }
}

var bgColor;
var bg = 0;

function draw() {

    rotateY(map(mouseX, 0, height, -.15, .15));
    rotateX(map(mouseY, 0, height, .15, -.15));
    translate(map(mouseX / 10 , 0, width / 10, -10, 10), map(mouseY / 10 , 0, height / 10, -10, 10), 0);

    //INTERACTIVE CONTROLS - UP AND DOWN
    if( keyIsPressed &  keyCode === LEFT_ARROW) {
        if( rectH > -200) {
            rectH -= 3;
            print(rectH);
        }
    }

    else if( keyIsPressed &  keyCode === RIGHT_ARROW) {
        if( rectH < 100) {
            rectH += 3;
            print(rectH);
        }
    }

    // COLOR BACKGROUND
    if(bgColor) {
        if ( bg > 0) {
            bg -= 20;
        }
    }

    else{
        if( bg < 255) {
            bg += 20;
        }
    }
    background(bg);

    rectMode(CENTER);  
    rotateX(radians(40));
    translate( - width / 2, - height / 2 + 15, 0);

    // REPEATEDLY DRAW EVERY PRISM IN DRAW
    for( i = 0; i < rectangles.length; i++) {
        rectangles[i].drawRect();
        rectangles[i].raiseRect();
    }
}

// CUBE OBJECT
function createCube(row, col, r, c) {
    var rectObj = {
        w: 19,
        xPos: row,
        yPos: col,
        offset: dist(r, c, centerCol, centerRow),
        currentHeight: this.offset,
        // UPDATES THE HEIGHT OF RECTANGLE
        drawRect: function() {
            if (this.currentHeight > 0) {
                fill(map(this.currentHeight, 10, 70, 0, 255));
            }
            else{
                fill(map(this.currentHeight, 10, 70, 0, -255));
            }

            push();
            translate(this.xPos, this.yPos , this.currentHeight);
            box(this.w, this.w, this.currentHeight);
            pop();
        },
        // CHANGES THE HEIGHT THROUGH MAPPING CANVAS
        raiseRect: function() {
            this.currentHeight = map( sin(this.offset), -1, 1, 10, rectH);
            this.offset += .1;
        }  
    }
    return rectObj;
}

// IF ENTER KEY IS PRESSED, CHANGE BACKGROUND
function keyPressed() {
        if( keyCode === ENTER) {
            bgColor = !bgColor;
        }
}

INTERACTIVE CONTROLS (click on canvas first):

LEFT ARROW: Decrease wave amplitude

RIGHT ARROW: Decrease wave amplitude

ENTER: Change background color

***IF LAGGING, VISIT https://editor.p5js.org/jxsephz/sketches/9Dqxil-1P

————————

For this project, I wanted to experiment with manipulating forms in three dimensional space. As someone who loves mathematical patterns, I explored ways that I could utilize the oscillation of a Sine wave.

My project was inspired by single-line drawings and line-drawing tools, like etch a sketch. I always had a desire to draw something only using one line, but I did not have the talent to do so. I also never had the patience to draw using etch a sketch. Therefore, I created a p5js drawing tool that allows you to create single-line drawings. In order to draw, use the arrow keys. You can change the color of the line by pressing on the space bar (the circle on the bottom will indicate the current color status), change the line weight by clicking on the arrows (numbers indicate the line weight), and clear canvas by clicking on the “clear” button. I hope you have fun as much as I had while I was coding for this project!

Plus, try drawing a diagonal line by pressing onto two arrow keys at the same time! 🙂

sketch

/* Jamie Park (jiminp)             Section E
   15 - 104                     Final Project */

var ttl; //global variable for the turtle
var colors = ["Coral", "DarkTurquoise", "DarkGrey", "blue",
"FireBrick", "Gold", "Lavender", "LightPink", "PowderBlue"]; //global variable for color values
var col = 0; //color index value
var strokeThickness = 2; //strokethickness as global value
var bgCol = 255;

function preload(){
    //preload image into the canvas
    var overlayURL = "https://i.imgur.com/5dpuHCX.png";
    overlay = loadImage(overlayURL);
}

function setup(){
    //creates a canvas
    createCanvas(500, 400);
    //sets the background color on white
    background(250);
    //makes the turtle at random parts of the canvas
    ttl = makeTurtle(random(150, 300), random(100, 300));
    ttl.setWeight(strokeThickness);
    ttl.setColor("coral");
}

function draw(){
    //display the image on the canvas
    image(overlay, 0, 0, 500, 400);
    //allows the user to draw the lines
    drawLines();
    //allows the user to change the color of lines
    displayStrokeWeight();
    drawTriangleButtons();
    displayCurrentColor();
    clearButton();
    boundTurtle();

}

function mousePressed(){
    //redraw when clicked on clear button
    clearCanvas();
    //when tou click the buttons, the thickness of the turtle stroke changes
    changeThickness();
}

function boundTurtle(){
    //set up local variables that wound bound the turtles
    var boundaries = 28;
    var bottomBoundaries = 58;

    //if turtle x is smaller than a set number, the turtle is the set number
    //set number due to the frame around the canvas
    if(ttl.x < boundaries){
        ttl.x = boundaries;
    }
    //if turtle y is smaller than a set number...
    if(ttl.y < boundaries + 2){
        ttl.y = boundaries + 2;
    }
    //if turtle x is greater than the set number...
    if(ttl.x > width - boundaries - 5){
        ttl.x = width - boundaries - 5;
    }
    //if turtle y is greater than the set number...
    if(ttl.y > height - bottomBoundaries){
        ttl.y = height - bottomBoundaries;
    }
}

function keyPressed(){
    //when spacebar is pressed, the color of the turtle changes
    //you can "find" your desired color by pressing on the space bar multiple times
    changeColor();
}

function changeColor(){
    if(keyCode === 32){
        //keyCode 32 is the space bar
        col = (col + 1) % colors.length;
        //you change the color by adding one into the color index above
        ttl.setColor(colors[col]);
    }
}

function drawLines(){
    //function that draws the lines when key is pressed accordingly
    //local variable that goes forward by 1.5 pixels every time key is pressed
    var distDraw = 1.5;
        //draws the line leftwards
    if(keyIsDown(LEFT_ARROW)){
        ttl.face(180);
        ttl.forward(distDraw);
    }
        //draws the line rightwards
    if(keyIsDown(RIGHT_ARROW)){
        ttl.face(0);
        ttl.forward(distDraw);
    }
        //draws an upward line
    if(keyIsDown(UP_ARROW)){
        ttl.face(270);
        ttl.forward(distDraw);
    }
        //draws a downward line
    if(keyIsDown(DOWN_ARROW)){
        ttl.face(90);
        ttl.forward(distDraw);
    }
}

function changeThickness(){
    //thickness of the stroke increases / decreases when the button is clicked
    if(mouseX < 450 & mouseX > 430 && mouseY > 280 && mouseY < 300){
        strokeThickness = strokeThickness + 1;
        //strokeweight increases by 1
    }
        //when mouseisPressed within the range of the triangular buttons, reduce the stroke weight by 0.05
    if(mouseX < 450 & mouseX > 430 && mouseY > 310 && mouseY < 340){
        strokeThickness = strokeThickness - 1;
        //strokeweight decreases by 1
    }
    //constrains the thickness of the stroke in value between 1 and 13
    strokeThickness = constrain(strokeThickness, 1, 13);
    //implements the weight to the turtle
    ttl.setWeight(strokeThickness);
}

function drawTriangleButtons(){
    //draws the triangle buttons on the bottm right corner of the canvas
    noStroke();
    fill("LightSalmon");
    //local variables that set height and width of the triangle to avoid magic nunbers
    var triangleW = 430;
    var triangleH = 300;
    //top triangle that increases the thickness
    triangle(triangleW, triangleH, triangleW + 20, triangleH, triangleW + 10, triangleH - 20);
    //bottom triangle to reduce the thickness
    triangle(triangleW, triangleH + 10, triangleW + 20, triangleH + 10, triangleW + 10, triangleH + 30);
}

function clearButton(){
    //draws the "clear" button on the top left corner
    fill("orange");
    noStroke();
    ellipse(50, 50, 25, 25);
    fill("white");
    text("clear", 40, 53);
    //informative text
    fill("gray");
    text("press on arrow keys to draw & space bar to change color,", 73, 50);
    text("and click on the arrow to change stroke thickness", 73, 60);
}

function clearCanvas(){
    //if mouse is within the proximity of the clear button, the canvas is cleared
    if(mouseX > 37.5 & mouseX < 62.5 && mouseY > 37.5 && mouseY < 62.5){
        clear();
        background(255);
        //strokeThickness and color index restart
        strokeThickness = 2;
        col = 8;
    }
}

function displayCurrentColor(){
    //displays current turtle color in a circle
    fill(colors[col]);
    ellipse(width * .815, height * .8, 10, 10)
}

function displayStrokeWeight(){
    //displays the strokeweight
    noStroke();
    fill("white");
    rect(430, 300, 18, 10);
    textSize(10);
    fill("SlateGray")
    textFont("GillSans");
    text(strokeThickness, 435, 308.5);
}

//------------------------------turtle code--------------------------------
function turtleLeft(d){this.angle-=d;}function turtleRight(d){this.angle+=d;}
function turtleForward(p){var rad=radians(this.angle);var newx=this.x+cos(rad)*p;
var newy=this.y+sin(rad)*p;this.goto(newx,newy);}function turtleBack(p){
this.forward(-p);}function turtlePenDown(){this.penIsDown=true;}
function turtlePenUp(){this.penIsDown = false;}function turtleGoTo(x,y){
if(this.penIsDown){stroke(this.color);strokeWeight(this.weight);
line(this.x,this.y,x,y);}this.x = x;this.y = y;}function turtleDistTo(x,y){
return sqrt(sq(this.x-x)+sq(this.y-y));}function turtleAngleTo(x,y){
var absAngle=degrees(atan2(y-this.y,x-this.x));
var angle=((absAngle-this.angle)+360)%360.0;return angle;}
function turtleTurnToward(x,y,d){var angle = this.angleTo(x,y);if(angle< 180){
this.angle+=d;}else{this.angle-=d;}}function turtleSetColor(c){this.color=c;}
function turtleSetWeight(w){this.weight=w;}function turtleFace(angle){
this.angle = angle;}function makeTurtle(tx,ty){var turtle={x:tx,y:ty,
angle:0.0,penIsDown:true,color:color(128),weight:1,left:turtleLeft,
right:turtleRight,forward:turtleForward, back:turtleBack,penDown:turtlePenDown,
penUp:turtlePenUp,goto:turtleGoTo, angleto:turtleAngleTo,
turnToward:turtleTurnToward,distanceTo:turtleDistTo, angleTo:turtleAngleTo,
setColor:turtleSetColor, setWeight:turtleSetWeight,face:turtleFace};
return turtle;}