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

To store a contact into the json file from server.js file using a class in NodeJS

Image
0 I have created three files -contactPresentation.js, contactService.js, contacts.json. I will run the contactService.js file. And it will navigate to contactPresentation.js file that will only choose an option to either add or display a file. If add(), then add the data into add of service file.And the data will be added to the contacts.json file . And if display(), then display the display() of service file. And the display will take the data from contacts.json file. However, i know my code is flawed. Please correct it . I am also getting an error - this.contacts.push(new ContactService(userName, contactNumber, emailId)); ^ TypeError: Cannot read property 'push' of undefined at ContactService.add (e:NodeJSProjectcontactManager2contactService.js:57:23) at new C
Read more

Redirect URL with Chrome Remote Debugging Android Devices

Image
1 How can i redirect an URL with Chrome Remote Debugging Android Devices? like Requestly Chrome extension on desktop. google-chrome debugging url redirect testing share | improve this question edited Nov 24 '18 at 8:16 sachinjain024 14.7k 23 73 129 asked Nov 23 '18 at 16:09 Momen Momen 91 10
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