Category: Uncategorized

var dx2;
var dy2;
var dy3;
var numLines = 30;

function setup() {
    createCanvas(400, 300);
    background(220);
    text("p5.js vers 0.9.0 test.", 10, 15);
    noStroke();
    line(200, 50, 200, 250);    //vertical guide line
    line(100, 50, 300, 250);    //diagonal guide line
    dx2 = (200)/numLines;
    dy2 = (200)/numLines;
    dy3 = (300)/numLines;
}

function draw() {
    background(0);

    // outer ring
    push();
    translate(200, 150); //origin in the middle
    for (let i = 1; i <= 200; i += 1) {
        rotate(2);      //rotating around the origin
        stroke(184, 156, 46, 70)
        line(-50, -130, 200, -150);
    }

    pop();
    //  the middle square
    var x1 = 100;
    var y1 = 250;
    var x2 = 100;
    var y2 = 50;
    for (let i = 0; i <= numLines; i += 1) {
        stroke(111, 162, 179, 150);
        line(x1, y1, x2, y2);
        line(x1+200, y1-200, x2, y2);
        x2 += dx2;
        y2 += dy2;
    }

    var x1 = 100;
    var y1 = 150;
    var x2 = 200;
    var y2 = 50;
    for (let i = 0; i <= numLines; i += 1) {
        //biggest diamond
        stroke(40, 77, 89);
        line(x1-100, y1, x2, y2-100);
        line(x1-100, y1, x2, y2+100);
        line(x1+300, y1, x2, y2-100);
        line(x1+300, y1, x2, y2+100);

        //smallest diamond
        stroke(111, 162, 179);
        line(x1, y1, x2, y2);
        line(x1+200, y1, x2, y2)
        y2 += dy2;
    }
    noLoop();
}

//Stefanie Suk
//15-104 Section D

var ax1;
var ay1;
var ax2;
var ay2;      //variable for top left white strings 

var bx1;
var by1;
var bx2;
var by2;      //variable for top right white strings 

var cx1;
var cy1;
var cx2;
var cy2;      //variable for bottom right white strings 

var dx1;
var dy1;
var dx2;
var dy2;      //variable for bottom left white strings 

var fx1;
var fy1;
var fx2;
var fy2;      //variable for top bottom orange strings 

var gx1;
var gy1;
var gx2;
var gy2;      //variable for left right orange strings 

var numLines = 40;
var numLines2 = 50;

function setup() {
    createCanvas(400, 300);
    background(25, 44, 108);

    //base lines for top left white strings
    line(0, 300, 0, 0);
    line(0, 0, 400, 0);
    ax1 = (0-0)/numLines;
    ay1 = (0-300)/numLines;
    ax2 = (400-0)/numLines;
    ay2 = (0-0)/numLines;

    //base lines for top right white strings
    line(0, 0, 400, 0);
    line(400, 0, 400, 300);
    bx1 = (400-0)/numLines;
    by1 = (0-0)/numLines;
    bx2 = (400-400)/numLines;
    by2 = (300-0)/numLines;

    //base lines for bottom right white strings
    line(400, 0, 400, 300);
    line(400, 300, 0, 300);
    cx1 = (400-400)/numLines;
    cy1 = (300-0)/numLines;
    cx2 = (0-400)/numLines;
    cy2 = (300-300)/numLines;

    //base lines for bottom left white strings
    line(400, 300, 0, 300);
    line(0, 300, 0, 0);
    dx1 = (0-400)/numLines;
    dy1 = (300-300)/numLines;
    dx2 = (0-0)/numLines;
    dy2 = (0-300)/numLines;

    //base lines for top bottom orange strings
    line(200, 0, 400, 0);
    line(200, 300, 0, 300);
    fx1 = (400-200)/numLines2;
    fy1 = (0-0)/numLines2;
    fx2 = (0-200)/numLines2;
    fy2 = (300-300)/numLines2;

    //base lines for left right orange strings
    line (0, 0, 0, 150);
    line(400, 300, 400, 150);
    gx1 = (0-0)/numLines2;
    gy1 = (150-0)/numLines2;
    gx2 = (400-400)/numLines2;
    gy2 = (150-300)/numLines2;
}

function draw() {

	//center pink strings
	for (var i = 0; i < 300; i += 8) {
		stroke(255, 161, 231); //pink
		strokeWeight(1);
		line (width/2, i + 0, i + width/2, height/2); //top right
		line(width/2, height - i, i + width/2, height/2); //bottom right
        line(width/2, i + 0, width/2 - i, height/2); //top left
        line(width/2, height - i, width/2 - i, height/2); //bottom left
	}

	//top left white strings
	var x1a = 0;
	var y1a = 300;
	var x2a = 0;
	var y2a = 0;
	for (var i = 0; i <= numLines; i +=1) {
		stroke(255);
		strokeWeight(1);
		line(x1a, y1a, x2a, y2a);
		x1a += ax1;
		y1a += ay1;
		x2a += ax2;
		y2a += ay2;
	}

	//top right white strings
	var x1b = 0;
	var y1b = 0;
	var x2b = 400;
	var y2b = 0;
	for (var i = 0; i <= numLines; i +=1) {
		line(x1b, y1b, x2b, y2b);
		x1b += bx1;
		y1b += by1;
		x2b += bx2;
		y2b += by2;
	}

	//bottom right white strings
	var x1c = 400;
	var y1c = 0;
	var x2c = 400;
	var y2c = 300;
	for (var i = 0; i <= numLines; i +=1) {
		line(x1c, y1c, x2c, y2c);
		x1c += cx1;
		y1c += cy1;
		x2c += cx2;
		y2c += cy2;
	}

	//bottom left white strings
	var x1d = 400;
	var y1d = 300;
	var x2d = 0;
	var y2d = 300;
	for (var i = 0; i <= numLines; i +=1) {
		line(x1d, y1d, x2d, y2d);
		x1d += dx1;
		y1d += dy1;
		x2d += dx2;
		y2d += dy2;
	}

	//center circle yellow strings
	for (var e = 120; e <= 240; e++) {
		stroke(247, 241, 117);
		strokeWeight(1.5);
		noFill();
		ellipse(width/2, height/2, e, e);
		e += 4; //spacing
	}

	//top bottom orange strings
	var x1f = 200;
	var y1f = 0;
	var x2f = 200;
	var y2f = 300;
	for (var i = 0; i <= numLines2; i +=1) {
		stroke(255, 134, 4, 70);
		line(x1f, y1f, x2f, y2f);
		x1f += fx1;
		y1f += fy1;
		x2f += fx2;
		y2f += fy2;
	}

	//left right orange strings
	var x1g = 0;
	var y1g = 0;
	var x2g = 400;
	var y2g = 300;
	for (var i = 0; i <= numLines2; i +=1) {
		line(x1g, y1g, x2g, y2g);
		x1g += gx1;
		y1g += gy1;
		x2g += gx2;
		y2g += gy2;
	}

	noLoop();
}

//First line art
var dx1;
var dy1;
var dx2;
var dy2;

//Second line art
var dx3;
var dy3;
var dx4;
var dy4;

//Third line art
var dx5;
var dy5;
var dx6;
var dy6;

//Fourth line art
var dx8;
var dy8;
var dx9;
var dy9;

var numLines = 50;
var numLines2 = 20;
var numLines3 = 60;
var numLines4 = 40;
function setup() {
    createCanvas(400, 300);
    background(100, 105, 200);

    //First line art placement
    line(0, 0, 0, 300);
    line(0, 300, 350, 300);

    //Second line art placement
    line(0, 300, 150 ,300);
    line(400, 300, 400, 240);

    //Third line art placement
    line(0, 300, 400, 300);
    line(400, 300, 400, -100);

    //Fourth line art placement
    line(-50, 0, 0, 400);
    line(450, 40, 400, -400);

    //First line art deltas
    dx1 = (0 - 0)/numLines;
    dy1 = (300 - 0)/numLines;
    dx2 = (350 - 0)/numLines;
    dy2 = (300 - 300)/numLines;

    //Second line art deltas
    dx3 = (150 - 0)/numLines2;
    dy3 = (300 - 300)/numLines2;
    dx4 = (400 - 400)/numLines2;
    dy4 = (240 - 300)/numLines2;

    //Third line art deltas
    dx5 = (400 - 0)/numLines3;
    dy5 = (300 - 300)/numLines3;
    dx6 = (400 - 400)/numLines3;
    dy6 = (-100 - 300)/numLines3;

    //Fourth line art deltas
    dx7 = (0 - -50)/numLines4;
    dy7 = (400 - 0)/numLines4;
    dx8 = (400 - 450)/numLines4;
    dy8 = (-400 - 40)/numLines4;

}

function draw() {
    var x1 = 0;
    var y1 = 0;
    var x2 = 0;
    var y2 = 300;

    var x3 = 0;
    var y3 = 300;
    var x4 = 400;
    var y4 = 300;

    var x5 = 0;
    var y5 = 300;
    var x6 = 400;
    var y6 = 300;

    var x7 = -50;
    var y7 = 0;
    var x8 = 450;
    var y8 = 400;


    stroke(245, 255, 184);
    for (var i = 0; i <= numLines4; i += 1) {
        line(x7, y7, x8, y8);
        x7 += dx7;
        y7 += dy7;
        x8 += dx8;
        y8 += dy8;
    }

    stroke(254, 189, 255);
    for (var i = 0; i <= numLines3; i += 1) {
        line(x5, y5, x6, y6);
        x5 += dx5;
        y5 += dy5;
        x6 += dx6;
        y6 += dy6;
    }
    stroke(191, 255, 251);
    for (var i = 0; i <= numLines; i += 1) {
        line(x1, y1, x2, y2);
        x1 += dx1;
        y1 += dy1;
        x2 += dx2;
        y2 += dy2;
    }

    for (var i = 0; i <= numLines2; i += 1) {
        line(x3, y3, x4, y4);
        x3 += dx3;
        y3 += dy3;
        x4 += dx4;
        y4 += dy4;
    }
    noLoop();
}