Category: Section C

sketch

function setup() 
{
    createCanvas(480,480);
    background(50);
 
    var col;
    var size;

    for( var i = 0; i < 4; i++ )
    {
        for( var j = 0; j < 4; j++ )
        {
            col = color( random(25,75), random(25,75), random(25,75) );
            size = random( 18, 28 );
            drawSpiral( 55 + i * (width - 130) / 3, 70 + j * (height - 130) / 3,
                        0, size, col );
        }
    }

    noLoop();
}

function drawSpiral( xPos, yPos, angle, size, col )
{
    if( size < 7.5 ) return;

    push();
    translate( xPos, yPos );
    rotate( radians(angle - 90) );
    fill( col );
    rect( size * 4 / 3, 0, size, size );
    pop();
    drawSpiral( xPos, yPos, angle + 30, size * 0.935, 
                color( red(col) + 7.5, green(col) + 7.5, blue(col) + 7.5 ) );
}

The prompt asked for “a balance of geometric and organic forms” aka a clear request for shrimps made out of squares.
Note that the shrimps do not merely scale in size, but also have curly tails based on their size as should be expected of any quality shrimps.

sketch

function setup() {
    createCanvas(400, 400);
    background(0);
    var tile = 50; //each tile is 50x50
    for (var y = 0; y < 8; y++) { //8 columns
        for (var x = 0; x < 8; x++) { //and 8 rows
            var py = 25 + y * tile; //move px and py into the grid spots
            var px = 25 + x * tile;
              noStroke();
              fill(256); //draw white parts
              quad(px, py - 25, px, py - 10, 
                px + 12.5, py, px + 12.5, py - 15);
              quad(px + 12.5, py, px + 12.5, 
                py + 15, px + 25, py + 25, px + 25, py + 10); 
                //only once
              push();
              translate(-25, 0); //but copy and translate them 
              quad(px, py - 25, px, py - 10, 
                px + 12.5, py, px + 12.5, py - 15);
              quad(px + 12.5, py, px + 12.5, 
                py + 15, px + 25, py + 25, px + 25, py + 10);
              pop();
              if (x % 2 == 0) { //if its an even column
                fill(256, 256, 0); //draw in yellow
                triangle(px - 25, py - 25, px, 
                  py - 25, px - 12.5, py - 15);
                push();
                scale(1, -1);
                translate(0, -400);
                triangle(px - 25, py - 25, px, 
                  py - 25, px - 12.5, py - 15);
                pop();
                push();
                translate(25, 0);
                triangle(px - 25, py - 25, px, 
                  py - 25, px - 12.5, py - 15);
                push();
                scale(1, -1);
                translate(0, -400);
                triangle(px - 25, py - 25, px, 
                  py - 25, px - 12.5, py - 15);
                pop();
                pop();
                triangle(px - 25, py - 10, 
                  px - 12.5, py, px - 25, py + 10);
                push();
                scale(-1, 1);
                translate(-400, 0);
                triangle(px - 25, py - 10, 
                  px - 12.5, py, px - 25, py + 10);
                pop();
                quad(px - 12.5, py, px, py - 10, 
                  px + 12.5, py, px, py + 10); 
                //similarly expressing triangles 
                //and copying+translating them all over the place
              } else { //if odd row do the saem in pink
                fill(256, 0, 256);
                triangle(px - 25, py - 25, px, 
                  py - 25, px - 12.5, py - 15);
                push();
                scale(1, -1);
                translate(0, -400);
                triangle(px - 25, py - 25, px, 
                  py - 25, px - 12.5, py - 15);
                pop();
                push();
                translate(25, 0);
                triangle(px - 25, py - 25, px, 
                  py - 25, px - 12.5, py - 15);
                push();
                scale(1, -1);
                translate(0, -400);
                triangle(px - 25, py - 25, px, 
                  py - 25, px - 12.5, py - 15);
                pop();
                pop();
                triangle(px - 25, py - 10, 
                  px - 12.5, py, px - 25, py + 10);
                push();
                scale(-1, 1);
                translate(-400, 0);
                triangle(px - 25, py - 10, 
                  px - 12.5, py, px - 25, py + 10);
                pop();
                quad(px - 12.5, py, px, 
                  py - 10, px + 12.5, py, px, py + 10);
              }
        }
    }
    noLoop();
}

I started this project making small edits to the dot code from  assignment b, making the tiles all line up and fit into the smaller canvas without a border. Then I started imagining what could be drawn over and over in the small boxes I created. Luckily my friend was looking at patterns on her computer and this seemed like the perfect challenge. I used a sketch I made, finding  way to replete the pattern and used that to play each triangle and quadrangle within the variable defined plane of a single tile.

sketch

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

    var lineX = 20; // x coordinate of lines
    var arrowX = 15; // y coordinates of arrows and dots
    var arrowY = 20; // y coordinates of arrows and dots

    //outermost loop has the first set of alternating x values
    for (x1 = 0; x1 <= 400; x1 += 40) { 

    	//next loop has the second set of alternating x values
    	for (x2 = 20; x2 <= 400; x2 += 40){

    		//third loop has the y values that increase each iteration
    		for (y = 0; y <= 400; y += 15) {

    			//arrows(leaves)
    			//if statement skips every 4th arrow
    			if (y % 60 != 0) {

    				//make them green
    				stroke(0,120,0);
    				strokeWeight(1);

    				//makes left side of each arrow on the x1 lines
    				line(arrowX + x1, arrowY + y - 5, lineX + x1, arrowY +  y);

    				//makes right side of each arrow on the x1 lines
    				line(lineX + x1, arrowY + y, arrowX + x1 + 10, arrowY + y - 5);

    				//makes left side of each arrow on the x2 lines
    				line(arrowX + x2, arrowY + y - 5 + 30, lineX + x2, arrowY +  y + 30);

    				//makes right side of each arrow on the x2 lines
    				line(lineX + x2, arrowY + y + 30, arrowX + x2 + 10, arrowY + y - 5 + 30);      	
    			} 

    			//dots (flowers)
    			//if statement puts them at the top of each set of arrows
    			if (y % 60 == 0) {

    				//random colors
    				fill(random(0,255), 73, 113);

    				//random sizes
    				strokeWeight(random(5,10));

    				point(lineX + x1, y + 30);
    				point(lineX + x2, y);
    			}	

    			//lines (stems)
    			//make them green
    			stroke(0,120,0);
    			strokeWeight(1);

    			//x1 lines
    			line(lineX + x1, 0, lineX + x1, height);

    			//x2 lines
    			line(lineX + x2, 0, lineX + x2, height);
    		}
    	}
    }
    noLoop();
}

function draw() {
}

I had a lot of trouble with this because I liked a lot of different designs I found online, but could not picture how to put them in p5.js. In the end, I combined two designs I liked to make a relatively simple pattern that looks kind of like flowers.

This was my sketch. It was simple but still something I could challenge myself by trying to code.

I used this as inspiration for the flower “dots”. The image was titled “Dandelion,” so I thought about just using circle shapes for my flowers.

I used this as inspiration for the leaves. I actually started with the arrow design, and then decided they looked like leaves and added to them.

sketch

function setup() {
    createCanvas(640, 480);
    background(224, 255, 255);

 	var constant = (sqrt(3)/2)*20; // value for the width
    var row = 8;
    var w = 65; //spacing
    var th = constant;
    var oy = 10; // original y
    var ox = 2; // original x

    for (var y = 0; y < 8; y++) {
        for (var x = 0; x < row; x++) {
            var py = oy + y * th;
            var px = ox + x * w;
            if (y%2 == 0){
            	noStroke();
            	fill (112, 128, 144);
            	rect(px+w*0.3, py*8, 10, 10); //smaller rectangles (top n bottom)
            	row = 10; 
            } else {
            	noStroke();
            	fill (176, 192, 222);
            	rect(px, py+119, 50, 50); //larger rectangle in middle
            	row = 10;
            }
        }
    }
    noLoop();
}

function draw(){
	for (var i =0; i<800+40; i+=30) {
		stroke (30, 144, 225);
		strokeWeight (2);
    	line(i-2, 35, i+5, 40); //shorter line top
    	line (i-2, 35, i+5, 50); //longer line bottom
    	stroke (245, 255, 250, 80);
    	line (2, 3*i, 5*i, 1);
    	stroke (30, 144, 225);
    	strokeWeight (2);
    	translate (-5, 0);
    	line (i+40, 400, i+25, 405);
    	line (i+40, 400, i+25, 420);
    }
}

This project was pretty low-key for me and I wanted to keep my project mostly geometric/basic. I liked playing around with the colors and I chose to do a blue-guided color palette. If I had more time, I definitely would want to make it a little more complex.

For this project, I took inspiration from the color gradient lab that we did on Tuesday. I wanted to experiment with more textured shapes than I had been using previously, and I think this turned out really interesting.

Jdbrown Proj 5

// Joshua Brown
// Jdbrown@andrew.cmu.edu
// Section C
// Project 5: Wallpaper

var i = 0;
var fuck = 150;
var shit = 50;
var flash = 10;

function setup () {
    createCanvas (600, 480);
    stroke (255);
    strokeWeight (3);
}

function draw () {

    background (255);
 
    for (var y = 50; y < height + 50; y += 100) {
        rect (x + 50, y - 25, 50, 50);
        
        for (var x = 50; x < width + 50; x += 100) {
            fill (y/2, x/2, 0, x*y);
            ellipse(x - 25, y - 10, 25, 150);   // vertical grid
            ellipse(x - 25, y - 10, 50, 50);    // big circles at each nexus point
            ellipse(x + 25, y + 45, 20, 20);    // little dot in the center of each square
            ellipse(x, y, 30, 30);              // lower bump
            ellipse(x - 25, y - 10, 30, 30);    // lower bump
            ellipse(x - 10, y - 10, 35, 35);    // bee body (big)
            ellipse(x - 10, y - 10, 115, 15);   // horizontal grid
            ellipse(x - 25, y - 10, 25, 25);    // central circle
        }
    }

    for (var y = 0; y < height+25; y += 50) {       // Draws columns (just Y)
        for (var x = 0; x < width+25; x += 50) {    // Draws rows (just X)
            fill(150, 200);
            ellipse(x + 1000, y, 25, 25);
        }
    }
    for (var  x = 5; x < width + 25; x += 10) {
        for (var y = 5; y < height + 25; y += 10) {
        fill(255, 120);
        ellipse(x, y, 5, 5);
        }
    }
}

I wanted to make something simple and cute that would allow for a bit of an unnaturalness to it too. By putting the smile and adding random circles around it, it creates this uneasiness.

Lrospigl Sketch

//Laura Rospigliosi
//Section C
//lrospigl@andrew.cmu.edu
//Project-04-String art

var distw = 50; // x spacing
var disth = 50; // y spacing
var circlex = 25; // x start
var circley = 25; // y start
var circle = 10; // number of circles per row
var c = (230, 180, 230);
var angle = 1;

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

function draw() {
    background(250);

    for (var row = 0; row < 9; row++) {
        if (row % 2 ===1){
            circlex +=25; //spacing of odd rows + start
            circle = 8; // number of circles

        }
        else {
            circlex = 25; //start of circles
            circle = 9; //
        }
        for (var col = 0; col < circle; col++) {
            var cx = 0;
            var cy = row * disth;
            lines (cx, cy);
        }

    for (var col = 0; col < circle; col++) {
        var px = circlex + col * distw;
        var py = circley + row * disth;
        smiley (px, py);
        }
    noLoop();
}
}

function lines(cx, cy) {
    push();
    translate (cx, cy);
    strokeWeight (10)
    stroke (100, 100, 200);
    curve (0, 0, 0, 0, 450, 10, 450, 0, 450, 0);
    pop();
}

function smiley(px, py) {
    push();
    stroke (0)
    translate(px, py);
    fill(255, 255, 0);
    ellipse (0, 0, 40, 40);
    fill (0);
    ellipse (-6,-5, 5, 5);
    ellipse (6, -5, 5, 5);
    fill (c);
    arc(0, 3, 20, 20, 0, PI);
    noFill ();
    ellipse (-2, 0, 41, 40);
    ellipse (2, 0, 40, 39);

    pop();
}