Category: Project-04-String-Art

>sketch

												//Bennett Goeke
var angle = 0	

function setup() {
    createCanvas(400, 400);
    background(50);
    
}

function draw() {
	strokeWeight(10)								// background lines
	stroke(255, 0, 255)								// pink
	for (x = 0; x <= width; x += 30)
		line(x, 0 , x, height)						//repeating lines in loop

	noFill();
	stroke(0);										// black
	push();
	translate(200, 200)								// origin moved to center
	rotate(radians(angle));							// rotates record
	strokeWeight(1);
	for (var r = 100; r <= 250; r += 4){			// repeating circles 
		circle( 0, 0, r)
	}
	strokeWeight(10)
	fill(27);							// shade of black
	circle(0, 0, 100);					// inner fill circle of record
	
	translate(-200, -200);						// origin back to 0,0
	stroke(255, 255, 0);					//yellow				
	for (var y = 180; y <= 220; y += 5){
		line(180, y, 200, 200)				// yellow V-shape
	}
	push();
	translate( 200, 200);				// origin back to center			
	fill( 255, 0, 0);					// red				
	rect( 10, -20, 15, 40);				// yellow label with red inside
	pop();						

	angle += 3						// rotataing angle increases 3 degrees per frame
	pop();   

}

I decided to make a spinning record with a gold label and then kind of transformed into into a logo of sorts.

sketch

// Xander Fann xmf Section B
var bx = 0
var len = 10
var up = 0
function setup() {
    createCanvas(400, 300);
    background(0);
}

function draw() {
  push()
    translate(0,up)
    background(255)
    stroke(200,200,255)
      for (var y = -5000; y <= 5000; y += 5){
        line(bx,y,bx+width,y);
      }
    //balloon
      noFill()
      stroke(255,0,0) // red
      for(var arcH = 0; arcH <= 130; arcH += 3){
        arc(200,180,arcH,130,-PI/2,PI/2)
      }


      noFill()
      stroke(0,255,0) // green
      for(var arcH = 0; arcH <= 130; arcH += 3){
        arc(200,180,arcH,130,PI/2,-PI/2)
      }

      noFill()
      stroke(0,0,255,70) // blue
      for(var arcH =- 70; arcH <= 0; arcH += 1){
        arc(200,180,arcH,130,PI/2,-PI/2);arc(200,180,arcH,130,-PI/2,PI/2)
      }
    //basket
    //basket horizontal
      stroke(214, 174, 56)
      for(var y = 260; y<= 290; y += 2){
        line(180,y,220,y)
      }
    //basket vertical
      stroke(214, 174, 56)
      for(var x = 180; x <= 220; x += 2){
        line(x,260,x,290)
      }
    //connection strings
      stroke(0)
      for(var x = 160; x <= 240; x += 20){
        line(x,230,200,260)
    }
    //movement
      up -= 3
      if (mouseIsPressed) {up += 10}
    pop()

    //moutains
    noFill()
    stroke(100,255,0)
    for(r = 200; r<= 300; r += 3)
    ellipse(200,400,800,r)
}

I started by thinking about how the density of strings can affect each other and how overlapping strings is similar to the idea of hatching make an object look 3 dimensional like a sphere. I thought of a hot air balloon where multiple colors can also be used to show the roundness of the balloon. When the screen is pressed the balloon also moves downwards.

let yPerl = 0.0;

function setup() {
  createCanvas(400, 300);
  
  pinkSky = color(252, 224, 217);
  blueSky = color(190, 228, 235);
  mountainColor = color(46, 130, 129);
  treeColor = color(162, 179, 137);
  sunColor = color(255, 181, 181);
}

function draw() {
    background(0);

    //the sky
    let changeSky = map(mouseY, 0, height, 0, 1);
    var skyColor = lerpColor(pinkSky, blueSky, changeSky);
    fill(skyColor);
    rect(0, 0, width, height/1.5);

    //the sun
    noStroke();
    ellipseMode(CENTER);
    fill(sunColor);
    var stopMouseX = constrain(mouseX, 100, 300);
    var stopMouseY = constrain(mouseY, 0, 300);
    let sunX = map(stopMouseX, 0, width, 0, 400);
    let sunY = map(stopMouseY, 0, height, 0, 300);
    ellipse(sunX, sunY, 90, 90);
  
    //generative mountains
    fill(mountainColor);
    beginShape();
    let xPerl = 0;
    for (let x = 0; x<= width; x += 10) {
        let y = map(noise(xPerl), 0, 1, 200, 50);
        vertex(x, y);
        xPerl += 0.2;
    }
  
    yPerl += 0.2;
    vertex(width, height);
    vertex(0, height);
    endShape(CLOSE);
  
    //trees
    push();
    for (var i = 0; i <= 400; i += 1) {
        stroke(treeColor);
        strokeWeight(0.5);
        line(50, i + 50, i, height); //1st tree from the left
        line(100, i + 20, i + 50, height + 25); //2nd tree
        line(150, i + 70, i + 70, height + 50); //3rd tree
        line(225, i + 80, i + 200, height + 50); //4th tree
        line(width/2, i + 125, i + 150, height); //5th tree
        line(300, i + 60, i + 250, 300); //6th tree
        line(350, i + 100, i + 300, 350); //7th tree
        line(400, i + 100, i + 350, 400); //8th tree on far right
  }
    pop();
}

I was loosely inspired by the sunrises and sunsets at Yosemite National Park. The mountains regenerate randomly every time the page is reloaded.