How to limit where you are drawing lines





.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}







2















I am trying to limit where I am drawing lines inside a triangle, so the lines don't overflow and disrupt other elements of the canvas, here is my code so far: 






var points = ;

var r = 500;

var lines = 30;



function setup() {

  createCanvas(1000, 1000);

  angleMode(DEGREES);

  var angle = 60;

  for (var i = 1; i < 7; i++) {

    var tempX = r * sin((angle * i + 30) % 360) + width / 2;

    var tempY = r * cos((angle * i + 30) % 360) + height / 2;

    points.push([tempX, tempY]);

  }

  noSmooth();

  noLoop();

}



function draw() {

  for (var i = 0; i < points.length; i++) {

    line(points[i][0], points[i][1], points[(i + 1) % 6][0], points[(i + 1) % 6][1]);

    var tempAngle = 240 + i * 60;

    var tempX = r * 1.1545 * sin(tempAngle) + points[i][0];

    var tempY = r * 1.1545 * cos(tempAngle) + points[i][1];

    fill(255);

    triangle(points[i][0], points[i][1], tempX, tempY, points[(i + 1) % 6][0], points[(i + 1) % 6][1]);

    stroke(0);

    for (var j = 0; j < lines + 1; j++) {

      var distance = r + (dist(points[i][0], points[i][1], tempX, tempY) - r) / lines * j;

      var tempAngle2 = tempAngle = (30 / lines * j) + 210 + i * 60;

      var tempX2 = distance * sin(tempAngle2) + points[i][0];

      var tempY2 = distance * cos(tempAngle2) + points[i][1];;

      line(points[i][0], points[i][1], tempX2, tempY2);

    }

  }

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.1/p5.js"></script>








javascript processing p5.js







share|improve this question























  • What is wrong with the solution in your question? Can you call out specifically what problem(s) is/are still outstanding?

    – Will Cain
    Nov 26 '18 at 22:34











  • @WillCain the last triangle still overflows, and I can't fix that because there will always be one overflowing with my code

    – Tudor Popescu
    Nov 26 '18 at 23:21


















2















I am trying to limit where I am drawing lines inside a triangle, so the lines don't overflow and disrupt other elements of the canvas, here is my code so far: 






var points = ;

var r = 500;

var lines = 30;



function setup() {

  createCanvas(1000, 1000);

  angleMode(DEGREES);

  var angle = 60;

  for (var i = 1; i < 7; i++) {

    var tempX = r * sin((angle * i + 30) % 360) + width / 2;

    var tempY = r * cos((angle * i + 30) % 360) + height / 2;

    points.push([tempX, tempY]);

  }

  noSmooth();

  noLoop();

}



function draw() {

  for (var i = 0; i < points.length; i++) {

    line(points[i][0], points[i][1], points[(i + 1) % 6][0], points[(i + 1) % 6][1]);

    var tempAngle = 240 + i * 60;

    var tempX = r * 1.1545 * sin(tempAngle) + points[i][0];

    var tempY = r * 1.1545 * cos(tempAngle) + points[i][1];

    fill(255);

    triangle(points[i][0], points[i][1], tempX, tempY, points[(i + 1) % 6][0], points[(i + 1) % 6][1]);

    stroke(0);

    for (var j = 0; j < lines + 1; j++) {

      var distance = r + (dist(points[i][0], points[i][1], tempX, tempY) - r) / lines * j;

      var tempAngle2 = tempAngle = (30 / lines * j) + 210 + i * 60;

      var tempX2 = distance * sin(tempAngle2) + points[i][0];

      var tempY2 = distance * cos(tempAngle2) + points[i][1];;

      line(points[i][0], points[i][1], tempX2, tempY2);

    }

  }

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.1/p5.js"></script>








javascript processing p5.js







share|improve this question























  • What is wrong with the solution in your question? Can you call out specifically what problem(s) is/are still outstanding?

    – Will Cain
    Nov 26 '18 at 22:34











  • @WillCain the last triangle still overflows, and I can't fix that because there will always be one overflowing with my code

    – Tudor Popescu
    Nov 26 '18 at 23:21














2












2








2








I am trying to limit where I am drawing lines inside a triangle, so the lines don't overflow and disrupt other elements of the canvas, here is my code so far: 






var points = ;

var r = 500;

var lines = 30;



function setup() {

  createCanvas(1000, 1000);

  angleMode(DEGREES);

  var angle = 60;

  for (var i = 1; i < 7; i++) {

    var tempX = r * sin((angle * i + 30) % 360) + width / 2;

    var tempY = r * cos((angle * i + 30) % 360) + height / 2;

    points.push([tempX, tempY]);

  }

  noSmooth();

  noLoop();

}



function draw() {

  for (var i = 0; i < points.length; i++) {

    line(points[i][0], points[i][1], points[(i + 1) % 6][0], points[(i + 1) % 6][1]);

    var tempAngle = 240 + i * 60;

    var tempX = r * 1.1545 * sin(tempAngle) + points[i][0];

    var tempY = r * 1.1545 * cos(tempAngle) + points[i][1];

    fill(255);

    triangle(points[i][0], points[i][1], tempX, tempY, points[(i + 1) % 6][0], points[(i + 1) % 6][1]);

    stroke(0);

    for (var j = 0; j < lines + 1; j++) {

      var distance = r + (dist(points[i][0], points[i][1], tempX, tempY) - r) / lines * j;

      var tempAngle2 = tempAngle = (30 / lines * j) + 210 + i * 60;

      var tempX2 = distance * sin(tempAngle2) + points[i][0];

      var tempY2 = distance * cos(tempAngle2) + points[i][1];;

      line(points[i][0], points[i][1], tempX2, tempY2);

    }

  }

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.1/p5.js"></script>








javascript processing p5.js







share|improve this question














I am trying to limit where I am drawing lines inside a triangle, so the lines don't overflow and disrupt other elements of the canvas, here is my code so far: 






var points = ;

var r = 500;

var lines = 30;



function setup() {

  createCanvas(1000, 1000);

  angleMode(DEGREES);

  var angle = 60;

  for (var i = 1; i < 7; i++) {

    var tempX = r * sin((angle * i + 30) % 360) + width / 2;

    var tempY = r * cos((angle * i + 30) % 360) + height / 2;

    points.push([tempX, tempY]);

  }

  noSmooth();

  noLoop();

}



function draw() {

  for (var i = 0; i < points.length; i++) {

    line(points[i][0], points[i][1], points[(i + 1) % 6][0], points[(i + 1) % 6][1]);

    var tempAngle = 240 + i * 60;

    var tempX = r * 1.1545 * sin(tempAngle) + points[i][0];

    var tempY = r * 1.1545 * cos(tempAngle) + points[i][1];

    fill(255);

    triangle(points[i][0], points[i][1], tempX, tempY, points[(i + 1) % 6][0], points[(i + 1) % 6][1]);

    stroke(0);

    for (var j = 0; j < lines + 1; j++) {

      var distance = r + (dist(points[i][0], points[i][1], tempX, tempY) - r) / lines * j;

      var tempAngle2 = tempAngle = (30 / lines * j) + 210 + i * 60;

      var tempX2 = distance * sin(tempAngle2) + points[i][0];

      var tempY2 = distance * cos(tempAngle2) + points[i][1];;

      line(points[i][0], points[i][1], tempX2, tempY2);

    }

  }

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.1/p5.js"></script>








var points = ;

var r = 500;

var lines = 30;



function setup() {

  createCanvas(1000, 1000);

  angleMode(DEGREES);

  var angle = 60;

  for (var i = 1; i < 7; i++) {

    var tempX = r * sin((angle * i + 30) % 360) + width / 2;

    var tempY = r * cos((angle * i + 30) % 360) + height / 2;

    points.push([tempX, tempY]);

  }

  noSmooth();

  noLoop();

}



function draw() {

  for (var i = 0; i < points.length; i++) {

    line(points[i][0], points[i][1], points[(i + 1) % 6][0], points[(i + 1) % 6][1]);

    var tempAngle = 240 + i * 60;

    var tempX = r * 1.1545 * sin(tempAngle) + points[i][0];

    var tempY = r * 1.1545 * cos(tempAngle) + points[i][1];

    fill(255);

    triangle(points[i][0], points[i][1], tempX, tempY, points[(i + 1) % 6][0], points[(i + 1) % 6][1]);

    stroke(0);

    for (var j = 0; j < lines + 1; j++) {

      var distance = r + (dist(points[i][0], points[i][1], tempX, tempY) - r) / lines * j;

      var tempAngle2 = tempAngle = (30 / lines * j) + 210 + i * 60;

      var tempX2 = distance * sin(tempAngle2) + points[i][0];

      var tempY2 = distance * cos(tempAngle2) + points[i][1];;

      line(points[i][0], points[i][1], tempX2, tempY2);

    }

  }

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.1/p5.js"></script>





var points = ;

var r = 500;

var lines = 30;



function setup() {

  createCanvas(1000, 1000);

  angleMode(DEGREES);

  var angle = 60;

  for (var i = 1; i < 7; i++) {

    var tempX = r * sin((angle * i + 30) % 360) + width / 2;

    var tempY = r * cos((angle * i + 30) % 360) + height / 2;

    points.push([tempX, tempY]);

  }

  noSmooth();

  noLoop();

}



function draw() {

  for (var i = 0; i < points.length; i++) {

    line(points[i][0], points[i][1], points[(i + 1) % 6][0], points[(i + 1) % 6][1]);

    var tempAngle = 240 + i * 60;

    var tempX = r * 1.1545 * sin(tempAngle) + points[i][0];

    var tempY = r * 1.1545 * cos(tempAngle) + points[i][1];

    fill(255);

    triangle(points[i][0], points[i][1], tempX, tempY, points[(i + 1) % 6][0], points[(i + 1) % 6][1]);

    stroke(0);

    for (var j = 0; j < lines + 1; j++) {

      var distance = r + (dist(points[i][0], points[i][1], tempX, tempY) - r) / lines * j;

      var tempAngle2 = tempAngle = (30 / lines * j) + 210 + i * 60;

      var tempX2 = distance * sin(tempAngle2) + points[i][0];

      var tempY2 = distance * cos(tempAngle2) + points[i][1];;

      line(points[i][0], points[i][1], tempX2, tempY2);

    }

  }

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.1/p5.js"></script>





javascript processing p5.js




javascript processing p5.js






share|improve this question













share|improve this question











share|improve this question




share|improve this question










asked Nov 26 '18 at 22:26









Tudor PopescuTudor Popescu

167112




167112













  • What is wrong with the solution in your question? Can you call out specifically what problem(s) is/are still outstanding?

    – Will Cain
    Nov 26 '18 at 22:34











  • @WillCain the last triangle still overflows, and I can't fix that because there will always be one overflowing with my code

    – Tudor Popescu
    Nov 26 '18 at 23:21



















  • What is wrong with the solution in your question? Can you call out specifically what problem(s) is/are still outstanding?

    – Will Cain
    Nov 26 '18 at 22:34











  • @WillCain the last triangle still overflows, and I can't fix that because there will always be one overflowing with my code

    – Tudor Popescu
    Nov 26 '18 at 23:21

















What is wrong with the solution in your question? Can you call out specifically what problem(s) is/are still outstanding?

– Will Cain
Nov 26 '18 at 22:34





What is wrong with the solution in your question? Can you call out specifically what problem(s) is/are still outstanding?

– Will Cain
Nov 26 '18 at 22:34













@WillCain the last triangle still overflows, and I can't fix that because there will always be one overflowing with my code

– Tudor Popescu
Nov 26 '18 at 23:21





@WillCain the last triangle still overflows, and I can't fix that because there will always be one overflowing with my code

– Tudor Popescu
Nov 26 '18 at 23:21












1 Answer
1






active

oldest

votes


















2














You can take advantage of the fact that the angle between the current element and the next element is always 90 °.
This results in that the length of the lines along the triangles increases with the reciprocal cosine of the angles:





Note, an angle in degrees can be converted to an angle in radians by angle_red = Math.PI * angle_degree/180.0:



var angle_degree = 30.0;

var dist_pt = r / Math.cos(Math.PI * angle_degree/180.0);


See the example, where i applied the formula for the length of the lines to your original code:






var points = ;

var r = 250;

var lines = 30;



function setup() {

    createCanvas(500, 500);

    angleMode(DEGREES);

    var angle = 60;

    for (var i = 1; i < 7; i++) {

        var tempX = r * sin((angle * i + 30) % 360) + width / 2;

        var tempY = r * cos((angle * i + 30) % 360) + height / 2;

        points.push([tempX, tempY]);

    }

    noSmooth();

    noLoop();

}



function draw() {

    for (var i = 0; i < points.length; i++) {

        line(points[i][0], points[i][1], points[(i + 1) % 6][0], points[(i + 1) % 6][1]);

        var tempAngle = 240 + i * 60;

        var angle_degree = 30.0;

        var dist_pt = r / Math.cos(Math.PI * angle_degree/180.0);

        var tempX = dist_pt * sin(tempAngle) + points[i][0];

        var tempY = dist_pt * cos(tempAngle) + points[i][1];

        fill(255, 128+i*20, 128);

        triangle(points[i][0], points[i][1], tempX, tempY, points[(i + 1) % 6][0], points[(i + 1) % 6][1]);

        stroke(0);

       

        for (var j = 0; j < lines + 1; j++) {

            var cur_angle = 30 / lines * j;

            var distance = r / Math.cos(Math.PI * cur_angle/180.0);

            var tempAngle2 = tempAngle = (30 / lines * j) + 210 + i * 60;

            var tempX2 = distance * sin(tempAngle2) + points[i][0];

            var tempY2 = distance * cos(tempAngle2) + points[i][1];;

            line(points[i][0], points[i][1], tempX2, tempY2);

        }

    }

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.1/p5.js"></script>








share|improve this answer


























  • Thanks for the detailed answer.

    – Tudor Popescu
    Nov 28 '18 at 21:23











  • @TudorPopescu You're welcome.

    – Rabbid76
    Nov 28 '18 at 21:24












Your Answer






StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});


}
});














draft saved

draft discarded


















StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53490059%2fhow-to-limit-where-you-are-drawing-lines%23new-answer', 'question_page');
}
);

Post as a guest















Required, but never shown

























1 Answer
1






active

oldest

votes








1 Answer
1






active

oldest

votes









active

oldest

votes






active

oldest

votes









2














You can take advantage of the fact that the angle between the current element and the next element is always 90 °.
This results in that the length of the lines along the triangles increases with the reciprocal cosine of the angles:





Note, an angle in degrees can be converted to an angle in radians by angle_red = Math.PI * angle_degree/180.0:



var angle_degree = 30.0;

var dist_pt = r / Math.cos(Math.PI * angle_degree/180.0);


See the example, where i applied the formula for the length of the lines to your original code:






var points = ;

var r = 250;

var lines = 30;



function setup() {

    createCanvas(500, 500);

    angleMode(DEGREES);

    var angle = 60;

    for (var i = 1; i < 7; i++) {

        var tempX = r * sin((angle * i + 30) % 360) + width / 2;

        var tempY = r * cos((angle * i + 30) % 360) + height / 2;

        points.push([tempX, tempY]);

    }

    noSmooth();

    noLoop();

}



function draw() {

    for (var i = 0; i < points.length; i++) {

        line(points[i][0], points[i][1], points[(i + 1) % 6][0], points[(i + 1) % 6][1]);

        var tempAngle = 240 + i * 60;

        var angle_degree = 30.0;

        var dist_pt = r / Math.cos(Math.PI * angle_degree/180.0);

        var tempX = dist_pt * sin(tempAngle) + points[i][0];

        var tempY = dist_pt * cos(tempAngle) + points[i][1];

        fill(255, 128+i*20, 128);

        triangle(points[i][0], points[i][1], tempX, tempY, points[(i + 1) % 6][0], points[(i + 1) % 6][1]);

        stroke(0);

       

        for (var j = 0; j < lines + 1; j++) {

            var cur_angle = 30 / lines * j;

            var distance = r / Math.cos(Math.PI * cur_angle/180.0);

            var tempAngle2 = tempAngle = (30 / lines * j) + 210 + i * 60;

            var tempX2 = distance * sin(tempAngle2) + points[i][0];

            var tempY2 = distance * cos(tempAngle2) + points[i][1];;

            line(points[i][0], points[i][1], tempX2, tempY2);

        }

    }

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.1/p5.js"></script>








share|improve this answer


























  • Thanks for the detailed answer.

    – Tudor Popescu
    Nov 28 '18 at 21:23











  • @TudorPopescu You're welcome.

    – Rabbid76
    Nov 28 '18 at 21:24
















2














You can take advantage of the fact that the angle between the current element and the next element is always 90 °.
This results in that the length of the lines along the triangles increases with the reciprocal cosine of the angles:





Note, an angle in degrees can be converted to an angle in radians by angle_red = Math.PI * angle_degree/180.0:



var angle_degree = 30.0;

var dist_pt = r / Math.cos(Math.PI * angle_degree/180.0);


See the example, where i applied the formula for the length of the lines to your original code:






var points = ;

var r = 250;

var lines = 30;



function setup() {

    createCanvas(500, 500);

    angleMode(DEGREES);

    var angle = 60;

    for (var i = 1; i < 7; i++) {

        var tempX = r * sin((angle * i + 30) % 360) + width / 2;

        var tempY = r * cos((angle * i + 30) % 360) + height / 2;

        points.push([tempX, tempY]);

    }

    noSmooth();

    noLoop();

}



function draw() {

    for (var i = 0; i < points.length; i++) {

        line(points[i][0], points[i][1], points[(i + 1) % 6][0], points[(i + 1) % 6][1]);

        var tempAngle = 240 + i * 60;

        var angle_degree = 30.0;

        var dist_pt = r / Math.cos(Math.PI * angle_degree/180.0);

        var tempX = dist_pt * sin(tempAngle) + points[i][0];

        var tempY = dist_pt * cos(tempAngle) + points[i][1];

        fill(255, 128+i*20, 128);

        triangle(points[i][0], points[i][1], tempX, tempY, points[(i + 1) % 6][0], points[(i + 1) % 6][1]);

        stroke(0);

       

        for (var j = 0; j < lines + 1; j++) {

            var cur_angle = 30 / lines * j;

            var distance = r / Math.cos(Math.PI * cur_angle/180.0);

            var tempAngle2 = tempAngle = (30 / lines * j) + 210 + i * 60;

            var tempX2 = distance * sin(tempAngle2) + points[i][0];

            var tempY2 = distance * cos(tempAngle2) + points[i][1];;

            line(points[i][0], points[i][1], tempX2, tempY2);

        }

    }

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.1/p5.js"></script>








share|improve this answer


























  • Thanks for the detailed answer.

    – Tudor Popescu
    Nov 28 '18 at 21:23











  • @TudorPopescu You're welcome.

    – Rabbid76
    Nov 28 '18 at 21:24














2












2








2







You can take advantage of the fact that the angle between the current element and the next element is always 90 °.
This results in that the length of the lines along the triangles increases with the reciprocal cosine of the angles:





Note, an angle in degrees can be converted to an angle in radians by angle_red = Math.PI * angle_degree/180.0:



var angle_degree = 30.0;

var dist_pt = r / Math.cos(Math.PI * angle_degree/180.0);


See the example, where i applied the formula for the length of the lines to your original code:






var points = ;

var r = 250;

var lines = 30;



function setup() {

    createCanvas(500, 500);

    angleMode(DEGREES);

    var angle = 60;

    for (var i = 1; i < 7; i++) {

        var tempX = r * sin((angle * i + 30) % 360) + width / 2;

        var tempY = r * cos((angle * i + 30) % 360) + height / 2;

        points.push([tempX, tempY]);

    }

    noSmooth();

    noLoop();

}



function draw() {

    for (var i = 0; i < points.length; i++) {

        line(points[i][0], points[i][1], points[(i + 1) % 6][0], points[(i + 1) % 6][1]);

        var tempAngle = 240 + i * 60;

        var angle_degree = 30.0;

        var dist_pt = r / Math.cos(Math.PI * angle_degree/180.0);

        var tempX = dist_pt * sin(tempAngle) + points[i][0];

        var tempY = dist_pt * cos(tempAngle) + points[i][1];

        fill(255, 128+i*20, 128);

        triangle(points[i][0], points[i][1], tempX, tempY, points[(i + 1) % 6][0], points[(i + 1) % 6][1]);

        stroke(0);

       

        for (var j = 0; j < lines + 1; j++) {

            var cur_angle = 30 / lines * j;

            var distance = r / Math.cos(Math.PI * cur_angle/180.0);

            var tempAngle2 = tempAngle = (30 / lines * j) + 210 + i * 60;

            var tempX2 = distance * sin(tempAngle2) + points[i][0];

            var tempY2 = distance * cos(tempAngle2) + points[i][1];;

            line(points[i][0], points[i][1], tempX2, tempY2);

        }

    }

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.1/p5.js"></script>








share|improve this answer















You can take advantage of the fact that the angle between the current element and the next element is always 90 °.
This results in that the length of the lines along the triangles increases with the reciprocal cosine of the angles:





Note, an angle in degrees can be converted to an angle in radians by angle_red = Math.PI * angle_degree/180.0:



var angle_degree = 30.0;

var dist_pt = r / Math.cos(Math.PI * angle_degree/180.0);


See the example, where i applied the formula for the length of the lines to your original code:






var points = ;

var r = 250;

var lines = 30;



function setup() {

    createCanvas(500, 500);

    angleMode(DEGREES);

    var angle = 60;

    for (var i = 1; i < 7; i++) {

        var tempX = r * sin((angle * i + 30) % 360) + width / 2;

        var tempY = r * cos((angle * i + 30) % 360) + height / 2;

        points.push([tempX, tempY]);

    }

    noSmooth();

    noLoop();

}



function draw() {

    for (var i = 0; i < points.length; i++) {

        line(points[i][0], points[i][1], points[(i + 1) % 6][0], points[(i + 1) % 6][1]);

        var tempAngle = 240 + i * 60;

        var angle_degree = 30.0;

        var dist_pt = r / Math.cos(Math.PI * angle_degree/180.0);

        var tempX = dist_pt * sin(tempAngle) + points[i][0];

        var tempY = dist_pt * cos(tempAngle) + points[i][1];

        fill(255, 128+i*20, 128);

        triangle(points[i][0], points[i][1], tempX, tempY, points[(i + 1) % 6][0], points[(i + 1) % 6][1]);

        stroke(0);

       

        for (var j = 0; j < lines + 1; j++) {

            var cur_angle = 30 / lines * j;

            var distance = r / Math.cos(Math.PI * cur_angle/180.0);

            var tempAngle2 = tempAngle = (30 / lines * j) + 210 + i * 60;

            var tempX2 = distance * sin(tempAngle2) + points[i][0];

            var tempY2 = distance * cos(tempAngle2) + points[i][1];;

            line(points[i][0], points[i][1], tempX2, tempY2);

        }

    }

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.1/p5.js"></script>








var points = ;

var r = 250;

var lines = 30;



function setup() {

    createCanvas(500, 500);

    angleMode(DEGREES);

    var angle = 60;

    for (var i = 1; i < 7; i++) {

        var tempX = r * sin((angle * i + 30) % 360) + width / 2;

        var tempY = r * cos((angle * i + 30) % 360) + height / 2;

        points.push([tempX, tempY]);

    }

    noSmooth();

    noLoop();

}



function draw() {

    for (var i = 0; i < points.length; i++) {

        line(points[i][0], points[i][1], points[(i + 1) % 6][0], points[(i + 1) % 6][1]);

        var tempAngle = 240 + i * 60;

        var angle_degree = 30.0;

        var dist_pt = r / Math.cos(Math.PI * angle_degree/180.0);

        var tempX = dist_pt * sin(tempAngle) + points[i][0];

        var tempY = dist_pt * cos(tempAngle) + points[i][1];

        fill(255, 128+i*20, 128);

        triangle(points[i][0], points[i][1], tempX, tempY, points[(i + 1) % 6][0], points[(i + 1) % 6][1]);

        stroke(0);

       

        for (var j = 0; j < lines + 1; j++) {

            var cur_angle = 30 / lines * j;

            var distance = r / Math.cos(Math.PI * cur_angle/180.0);

            var tempAngle2 = tempAngle = (30 / lines * j) + 210 + i * 60;

            var tempX2 = distance * sin(tempAngle2) + points[i][0];

            var tempY2 = distance * cos(tempAngle2) + points[i][1];;

            line(points[i][0], points[i][1], tempX2, tempY2);

        }

    }

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.1/p5.js"></script>





var points = ;

var r = 250;

var lines = 30;



function setup() {

    createCanvas(500, 500);

    angleMode(DEGREES);

    var angle = 60;

    for (var i = 1; i < 7; i++) {

        var tempX = r * sin((angle * i + 30) % 360) + width / 2;

        var tempY = r * cos((angle * i + 30) % 360) + height / 2;

        points.push([tempX, tempY]);

    }

    noSmooth();

    noLoop();

}



function draw() {

    for (var i = 0; i < points.length; i++) {

        line(points[i][0], points[i][1], points[(i + 1) % 6][0], points[(i + 1) % 6][1]);

        var tempAngle = 240 + i * 60;

        var angle_degree = 30.0;

        var dist_pt = r / Math.cos(Math.PI * angle_degree/180.0);

        var tempX = dist_pt * sin(tempAngle) + points[i][0];

        var tempY = dist_pt * cos(tempAngle) + points[i][1];

        fill(255, 128+i*20, 128);

        triangle(points[i][0], points[i][1], tempX, tempY, points[(i + 1) % 6][0], points[(i + 1) % 6][1]);

        stroke(0);

       

        for (var j = 0; j < lines + 1; j++) {

            var cur_angle = 30 / lines * j;

            var distance = r / Math.cos(Math.PI * cur_angle/180.0);

            var tempAngle2 = tempAngle = (30 / lines * j) + 210 + i * 60;

            var tempX2 = distance * sin(tempAngle2) + points[i][0];

            var tempY2 = distance * cos(tempAngle2) + points[i][1];;

            line(points[i][0], points[i][1], tempX2, tempY2);

        }

    }

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.1/p5.js"></script>






share|improve this answer














share|improve this answer



share|improve this answer








edited Nov 28 '18 at 6:07

























answered Nov 27 '18 at 19:56









Rabbid76Rabbid76

44.2k123354




44.2k123354













  • Thanks for the detailed answer.

    – Tudor Popescu
    Nov 28 '18 at 21:23











  • @TudorPopescu You're welcome.

    – Rabbid76
    Nov 28 '18 at 21:24



















  • Thanks for the detailed answer.

    – Tudor Popescu
    Nov 28 '18 at 21:23











  • @TudorPopescu You're welcome.

    – Rabbid76
    Nov 28 '18 at 21:24

















Thanks for the detailed answer.

– Tudor Popescu
Nov 28 '18 at 21:23





Thanks for the detailed answer.

– Tudor Popescu
Nov 28 '18 at 21:23













@TudorPopescu You're welcome.

– Rabbid76
Nov 28 '18 at 21:24





@TudorPopescu You're welcome.

– Rabbid76
Nov 28 '18 at 21:24




















draft saved

draft discarded




















































Thanks for contributing an answer to Stack Overflow!


  • Please be sure to answer the question. Provide details and share your research!

But avoid …



  • Asking for help, clarification, or responding to other answers.

  • Making statements based on opinion; back them up with references or personal experience.


To learn more, see our tips on writing great answers.




draft saved


draft discarded














StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53490059%2fhow-to-limit-where-you-are-drawing-lines%23new-answer', 'question_page');
}
);

Post as a guest















Required, but never shown





















































Required, but never shown














Required, but never shown












Required, but never shown







Required, but never shown

































Required, but never shown














Required, but never shown












Required, but never shown







Required, but never shown







-

Popular posts from this blog

Wiesbaden

Image
Wappen Deutschlandkarte 50.0825 8.24 117 Koordinaten: 50° 5′  N , 8° 14′  O Basisdaten Bundesland: Hessen Regierungsbezirk: Darmstadt Höhe: 117 m ü. NHN Fläche: 203,93 km 2 Einwohner: 278.654 (31. Dez. 2017) [1] Bevölkerungsdichte: 1366 Einwohner je km 2 Postleitzahlen: 65183–65207, 55246, 55252 Vorlage:Infobox Gemeinde in Deutschland/Wartung/PLZ enthält Text Vorwahlen: 0611, 06122, 06127, 06134 Kfz-Kennzeichen: WI Gemeindeschlüssel: 06 4 14 000 LOCODE: DE WIB NUTS: DE714 Stadtgliederung: 26 Ortsbezirke Adresse der Stadtverwaltung: Schlossplatz 6 65183 Wiesbaden Webpräsenz: www.wiesbaden.de Oberbürgermeister: Sven Gerich (SPD) Lage der Landeshauptstadt Wiesbaden in Hessen und im Regierungsbezirk Darmstadt Offizielles Logo der Landeshauptstadt Wiesbaden Flagge der Landeshauptstadt Wiesbaden Wiesbaden is
Read more

Marschland

Image
Kilometerweite Marsch in den Vier- und Marschlanden am Elbdeich Die Wedeler Marschlandschaft in Schleswig-Holstein Der Hadelner Kanal zur Entwässerung der Marsch Die tief gelegene Marsch und ein Entwässerungskanal Das Schöpfwerk Otterndorf im Land Hadeln zur Entwässerung der Medem verfügte damals bereits über die größte Kreiselpumpe Europas. Das Schöpfwerk in Neuhaus für die Aue und des Neuhaus-Bülkauer Kanals Als Marsch(land) (v. niederdt., altsächs. mersc ) – auch Masch , Mersch oder Schwemmland genannt – bezeichnet man eine nacheiszeitlich entstandene geomorphologische Landform im Gebiet der nordwestdeutschen Küsten und Flüsse sowie vergleichbare Landformen weltweit. Inhaltsverzeichnis 1 Landschaft 2 Entstehung 3 Marschböden 4 Nutzung 5 Marschgebiete in Deutschland 6 Siehe auch 7 Literatur 8 Weblinks 9 Einzelnachweise Landschaft | Marschen sind generell flache Landstriche ohne natürliche Erhebungen. Si
Read more

Dieringhausen

Image
Dieringhausen Stadt Gummersbach 50.982777777778 7.5316666666667 165 Koordinaten: 50° 58′ 58″  N , 7° 31′ 54″  O Höhe: 165  (160–245)  m Einwohner: 5055  (30. Jun. 2016) Postleitzahl: 51645 Vorwahl: 02261 Lage von Dieringhausen in Gummersbach Im Hohl ca. 1927–1930 Ansicht von Südwesten bei Bünghausen Dieringhausen (im örtlichen Dialekt Dierkesen ) ist ein Ortsteil von Gummersbach im Oberbergischen Kreis, Regierungsbezirk Köln, Nordrhein-Westfalen (Deutschland). Inhaltsverzeichnis 1 Geographie 2 Geschichte 3 Kultur 3.1 Sehenswürdigkeiten 3.2 Regelmäßige Veranstaltungen 4 Infrastruktur und Wirtschaft 4.1 Verkehr 4.1.1 Schienen- und Busverkehr 4.1.2 Straßen 4.2 Öffentliche Einrichtungen 4.2.1 Schulen und Bildungseinrichtungen 4.2.2 Kirchliche Einrichtungen 5 Persönlichkeiten 5.1 In Dieringhausen geboren 5.2 In Dieringhausen gelebt 6 Einzelnachweise 7
Read more