Is there a way to rotate the ellipse in PlotlyJS? To draw a circle/ellipse in Plotly, you define the center and the radii in the positive and negative x and y directions. Is there a way to define an angle at which the ellipse is rotated around its center or perhaps defining the 4 outermost points of the ellipse instead perhaps rather than having plotly deducing them through the radii values?
You can "manually" construct the points of the ellipse:
var center_x = 0;
var center_y = 0;
var a = 3; // major radius
var b = 1; // minor radius
var alpha = Math.PI / 4; // angle of rotation;
var X = [];
var Y = [];
var npoints = 100;
for(var i = 0; i <= npoints; i++) {
var t = 2 * Math.PI * i / npoints;
var x = a * Math.cos(t);
var y = b * Math.sin(t);
X.push(center_x + Math.cos(alpha)*x - Math.sin(alpha)*y);
Y.push(center_y + Math.sin(alpha)*x + Math.cos(alpha)*y);
}
Then plot it with a line type.
Related
my script isn't working. It was supposed to create random circles all touching the bottom of the canvas, with their radius shrinking each circle by the number of circles.
Here is the code:
for (var i = 0; i < NUM_CIRCLES; i++){
var circle = new Circle(radius);
circle.setPosition(CENTER_X,CENTER_Y);
circle.setColor(color);
add(circle);
radius /= i;
CENTER_Y = getHeight() - radius;
color = Randomizer.nextColor();
}
Ok so here is the full code:
var NUM_CIRCLES = 30;
var BIG_RADIUS = 180;
var color = Randomizer.nextColor();
var radius = BIG_RADIUS;
var CENTER_X = getWidth() / 2;
var CENTER_Y = getHeight() - radius;
function start(){
for (var i = 0; i < NUM_CIRCLES; i++){
var circle = new Circle(radius);
circle.setPosition(CENTER_X,CENTER_Y);
circle.setColor(color);
add(circle);
radius /= i;
CENTER_Y = getHeight() - radius;
color = Randomizer.nextColor();
}
}
as far as i understand you are trying to produce circles from bigger to smaller reducing radius of them by number of circles
to achive that do eachReduce = radius / numberofcircles and use it as eachReduce constant to reduce each circle by that number to achieve bigger to smaller size till zero
take a look at below example
let numofcir = 10,
radius = 80,
reduceEachBy = radius / numofcir,
offset = radius / 2
function setup() {
createCanvas(640, 360);
noLoop()
}
function draw() {
background(0)
stroke(255)
noFill()
for(let i=0;i < numofcir;i++){
// in p5 ellipse creates circle by x and y radius
ellipse(offset + (i * offset),150,radius,radius)
radius -= reduceEachBy
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.min.js" integrity="sha512-N4kV7GkNv7QR7RX9YF/olywyIgIwNvfEe2nZtfyj73HdjCUkAfOBDbcuJ/cTaN04JKRnw1YG1wnUyNKMsNgg3g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
I have roulette wheel (as an image) without numbers. I want to dynamically fill the numbers of a roulette wheel at the right positions and with the right angle. I want to absolute position the numbers on that image.
My wheel image is 1000 x 1000 pixel.
I try to set the positions and angles with a loop, but the positions are not linear and (in my non-mathematical eyes) to random.
const roulette_arr = []; //contains als numbers in right order. 0..32..15..19...
for (let i = 0; i < roulette_arr.length; i++) {
let degree = 10 + (i * 10); //360 degree / 36 Numbers
let position_x=...
let position_y=...
//function do all the stuff later
setNumber(roulette_arr[i], degree, position_x, position_y);
}
I think angle works, but position is still a problem. What can I do?
It's trigonometry. Is there a bigger problem?
var can = document.getElementById("can");
var ctx = can.getContext("2d");
var numbers = "0-32-15-19-4-21-2-25-17-34-6-27-13-36-11-30-8-23-10-5-24-16-33-1-20-14-31-9-22-18-29-7-28-12-35-3-26".split("-");
var cx = can.width / 2;
var cy = can.height / 2;
var cr = Math.min(cx, cy) * 0.9;
//
for (var i = 0; i < numbers.length; i++) {
var angle = i / numbers.length * 360;
var rad = i / numbers.length * Math.PI * 2 - Math.PI / 2;
var x = cx + Math.cos(rad) * cr;
var y = cx + Math.sin(rad) * cr;
ctx.fillText(numbers[i], x, y);
}
<canvas width="400" height="400" id="can">oh no</canvas>
I'd like to evenly devide a n number of chairs around a round table.
Tried several solutions that involve animation an object around a circle, but I'm not able to convert any of them to a solution for my problem.
(http://jsfiddle.net/m1erickson/dFctW/ and http://jsfiddle.net/Cu6Zv/1/)
The project I'm working on involves a chosen amount of chairs that need to be devided among a chosen amount of tables. I managed to sort of build a prototype, but the chairs are not evenly devided and not rotated toward the center of the table.
var step = 360 / chairs;
for(var count = 0; count < chairs; count++){
angle += Math.acos(1-Math.pow(step/radius,2)/2);
var x = cx + radius * Math.cos(angle);
var y = cy + radius * Math.sin(angle);
ctx.rect(x-5,y-5,10,10);
ctx.stroke();
}
I created a jsfiddle of what I've got so far.
Hopefully someone can explain me how to:
Translate the chairs evenly around the circle
Rotate each chair to line up with the table (pointed towards the center of the table)
Perhaps explain the math behind it, so I can understand what it's doing and how it could be adapted if needed.
Thanks in advance.
You're almost at right track with the code. Simply use radians instead and drop the acos line:
var ctx = c.getContext("2d");
var angle = 0;
var chairs = 6;
var cx = c.width>>1, cy = c.height>>1, radius = (c.height>>1)-10;
var step = Math.PI * 2 / chairs;
for(var count = 0; count < chairs; count++){
var x = cx + radius * Math.cos(angle);
var y = cy + radius * Math.sin(angle);
ctx.rect(x-5,y-5,10,10);
angle += step;
}
ctx.stroke();
<canvas id=c></canvas>
Now, all the chairs will face the same direction. If you want to rotate them so they face center of tables it's perhaps easier to use transforms instead of manually calculating the position:
var ctx = c.getContext("2d");
var angle = 0;
var chairs = 6;
var cx = c.width>>1, cy = c.height>>1, radius = (c.height>>1)-10;
var step = Math.PI * 2 / chairs;
// translate to center
ctx.translate(cx, cy);
for(var count = 0; count < chairs; count++){
// rotate around center (0,0)
ctx.rotate(step);
// draw using radius as offser on x-axis only
ctx.rect(radius -5,-5,10,10);
ctx.rect(radius -5, -1, 4,2);
}
ctx.stroke();
<canvas id=c></canvas>
For your first problem, try changing:
var step = 360 / chairs;
to
var step = 360 / (chairs + 1);
for a data visualization im aligning n-circels on a circle.
That just works fine - but i dont't know how to stop the circles
overlapping each other. Anybody here knows howto?
The result should work like this sketch:
Link: http://www.xup.to/dl,79345003/sketch.jpg
So i dont know how to calculate the angle for the second node
- based on the radius an position of the first node - and the
radius of the second ...
JSFIDDLE to show what i mean: http://jsfiddle.net/0z9hyvxk/
var canvas = document.getElementById("canvas");
var stage = new createjs.Stage(canvas);
canvas.width = 500;
canvas.height = 500;
var midx = 250;
var midy = 250;
var radius = 200;
var angle = 0;
var count = 30;
var step = 2 * Math.PI / count;
var xpos;
var ypos;
var nodeSize;
var node = function(size){
var dot = new createjs.Shape();
dot.graphics.beginFill("#000").drawCircle(0, 0, size);
dot.x = dot.y = -5;
dot.alpha = .25;
return dot
};
for(var i = 0; i<count; i++)
{
xpos = radius * Math.cos(angle) + midx;
ypos = radius * Math.sin(angle) + midx;
nodeSize = i;
var n = new node(nodeSize);
n.x = xpos;
n.y = ypos;
stage.addChild(n)
angle += step;
}
stage.update();
thanks in advance
simon
Your program does not make corrections based on circle sizes and angle. Smaller circles are too far from each other, bigger ones are too close.
r1 = radius of the n-th small circle
r2 = radius of the (n+1)-th small circle.
r3 = radius of the (n+2)-th small circle
r1<r2<3, so angle between 1 and 2 is smaller than between 2 and 3.
Try to tangentially increase angle correction. I can't test code at work :(
So I have this code:
var points = 6;
var width = w;
var height = h;
var angle = ((2 * Math.PI) / points);
var hexagon = [];
for (i = 0; i < points; i++) {
hexagon.push({
x: width * Math.cos(angle * i),
y: height * Math.sin(angle * i)
})
}
Which will produce 6 points/locations and if I draw a line between them I get a hexagon, but I want to rotate the points or generate the points differently so that the first point is always center-top, like so:
How would I go about doing that?
You could just swap sin and cos.