stringArt1
/*
Emma Nicklas-Morris
Section B
enicklas
Project-04
String Art
*/
var x1StepSize = 4;
var y1StepSize = 1;
var x2StepSize = -2;
var y2StepSize = -20;
var x1;
var x2;
var y1;
var y2;
function setup() {
createCanvas(400, 300);
background("black");
x1 = 0;
y1 = 0;
x2 = width/3 + 100;
y2 = height/3 + 50;
}
function draw() {
for (var i = 0; i < 350; i += 5) {
push();
translate(width/2, height);
stroke(23, 233, 250);
line(x1, y1, x2, y2);
x1 += x1StepSize;
y1 += y1StepSize;
// x2 += x2StepSize;
// y2 += y2StepSize;
pop();
stroke("hotpink");
push();
translate(width, height/2);
rotate(degrees(90));
line(x1, y1, x2, y2);
// x1 += x1StepSize;
// y1 += y1StepSize;
x2 += x2StepSize;
y2 += y2StepSize;
pop();
push();
translate(0, 0);
rotate(degrees(10));
stroke("yellow");
line(x1, height, width, y2);
x1 += x1StepSize;
pop();
if (i % 25 === 0) {
stroke("limegreen");
line(0, y1, width-x2*2, height);
}
}
}
I started with playing around with different x and y positions, but then I didn’t like how static and boring it looked. So I moved to making circles with only lines.
stringArt2
/*
Emma Nicklas-Morris
Section B
enicklas
Project-04
String Art
*/
var midpoinX;
var midpointY;
var r;
var ai;
var slope;
var b;
var x3;
var y3;
var x4;
var y4;
var k;
var cosAg;
var sinAg;
var sinAi;
var scaledR;
function setup() {
createCanvas(400, 300);
}
function draw() {
background("black");
var maxInc = 90; // maximum step increase in the for loop
var minInc = 3; // minimum step increase in the for loop
var d = (maxInc - minInc)/width; // value to change mouse position to a smaller value
// keeps the mouse value inside the canvas
if (mouseX >= width) {
mouseX = width;
}
else if (mouseX < 0) {
mouseX = 0;
}
if (mouseY > height) {
mouseY = height;
}
else if (mouseY < 0) {
mouseY = 0;
}
var r1 = mouseY/6 + 50; // as mouseY increases, radius increases (max radius = 100, min radius = 50)
var r2 = 100 - mouseY/6; // as mouseY increases, radius decreases (max radius = 100, min radius = 50)
var change1 = int(d * mouseX) + minInc; // mouseX changes the amount of lines to make the cirlce (max lines = 120, min lines = 4)
var change2 = maxInc - int(d * mouseX); // mouseX changes the amount of lines to make the cirlce (max lines = 120, min lines = 4)
// draws pink circle
push();
translate(width/3, height/2);
circles(r2, 8, change1, "hotpink");
pop();
// draws light green circle
push();
translate(2 * width/3, height/2);
circles(r1, 8, change2, "lightgreen");
pop();
// draws yellow circle
push();
translate(width/6, height - change1);
circles(r1, 8, change1, "yellow");
pop();
// draws blue circle
push();
translate(width - change2, height/6);
circles(r2, 8, change2, "aqua");
pop();
}
function circles(r, k, inc, hue) {
for (var ag = 0; ag <= 360; ag += inc) {
angleMode(DEGREES);
ai = 90 - ag; // 3rd angle in the triangle created from the tangent line and x axis
cosAg = cos(ag);
sinAg = sin(ag);
sinAi = sin(ai);
scaledR = k * r; // makes the line longer (or shorter)
midpointX = r * cosAg; // line's midpoint x position
midpointY = r * sinAg; // line's midpoint y position
if ((ag === 0) || (ag === 180)) { // verticle lines
x3 = r * cosAg;
y3 = -scaledR;
x4 = r * cosAg;
y4 = scaledR;
}
else if ((ag === 90) || (ag === 270)) { // horizontal lines
x3 = -scaledR;
y3 = r * -sinAg;
x4 = scaledR;
y4 = r * -sinAg;
}
// not a verticle or horizontal line
// uses geometry, law of sines, and unit circle to get end points of line
else {
slope = ((r * -sinAg) / (r * cosAg - (r / sinAi)));
b = -slope * (r / sinAi);
x3 = r * cosAg - scaledR;
y3 = (slope * x3) + b;
x4 = r * cosAg + scaledR;
y4 = (slope * x4) + b;
}
stroke(hue);
line(x3, y3, x4, y4);
}
}
It took a while to get the lines to move around tangential to the circle. There was a lot of math and geometry that I needed a refresher on to get the lines to make a circle. Once the circles were drawn statically, I then used the mouse position to make the circle change in various ways.
![[OLD FALL 2019] 15-104 • Introduction to Computing for Creative Practice](../../../../wp-content/uploads/2020/08/stop-banner.png)
