with this code I make a frame with x going from -25 to 25, y going from -25 to 25. x is pointing rightwards and y upwards.
<code>type gridRange={
xrange:{
min: number,
max: number,
},
yrange:{
min: number,
max: number,
}
};
const setCoordinateSystem =(r :gridRange,p : p5) =>{
let xscalingCoeff = window.innerWidth / (r.xrange.max - r.xrange.min);
let yscalingCoeff = window.innerHeight / (r.yrange.max - r.yrange.min) * -1; // MAKE y points upwards
let xcenter = r.xrange.max ;
let ycenter = r.xrange.min ; //NOT AN ERROR!
p.scale(xscalingCoeff, yscalingCoeff);
p.translate(xcenter, ycenter);
};
function draw(p: p5): void {
p.background(255)
const r: gridRange = {
xrange: {
min: -25,
max: 25,
},
yrange: {
min: -25,
max: 25,
},
};
setCoordinateSystem(r,p)
}
</code>
<code>type gridRange={
xrange:{
min: number,
max: number,
},
yrange:{
min: number,
max: number,
}
};
const setCoordinateSystem =(r :gridRange,p : p5) =>{
let xscalingCoeff = window.innerWidth / (r.xrange.max - r.xrange.min);
let yscalingCoeff = window.innerHeight / (r.yrange.max - r.yrange.min) * -1; // MAKE y points upwards
let xcenter = r.xrange.max ;
let ycenter = r.xrange.min ; //NOT AN ERROR!
p.scale(xscalingCoeff, yscalingCoeff);
p.translate(xcenter, ycenter);
};
function draw(p: p5): void {
p.background(255)
const r: gridRange = {
xrange: {
min: -25,
max: 25,
},
yrange: {
min: -25,
max: 25,
},
};
setCoordinateSystem(r,p)
}
</code>
type gridRange={
xrange:{
min: number,
max: number,
},
yrange:{
min: number,
max: number,
}
};
const setCoordinateSystem =(r :gridRange,p : p5) =>{
let xscalingCoeff = window.innerWidth / (r.xrange.max - r.xrange.min);
let yscalingCoeff = window.innerHeight / (r.yrange.max - r.yrange.min) * -1; // MAKE y points upwards
let xcenter = r.xrange.max ;
let ycenter = r.xrange.min ; //NOT AN ERROR!
p.scale(xscalingCoeff, yscalingCoeff);
p.translate(xcenter, ycenter);
};
function draw(p: p5): void {
p.background(255)
const r: gridRange = {
xrange: {
min: -25,
max: 25,
},
yrange: {
min: -25,
max: 25,
},
};
setCoordinateSystem(r,p)
}
If I add p.text(‘test’, -25, 0); in draw() .I get my text to be placed where I asked (on the extreme left of my frame and verticaly exactly in the middle ) . That is not completely true but this is another question
Now I want to do the same thing with a slider. But the slider get the wanted place only if the give the coordinate in pixel and with y pointing backwards.
I have to enter:
<code> slider = p.createSlider(0, 1, 0.5, 0.01); // these parameters don't give position. just the posible value of my slider. Not important in this case
slider.position(0, 1400);
</code>
<code> slider = p.createSlider(0, 1, 0.5, 0.01); // these parameters don't give position. just the posible value of my slider. Not important in this case
slider.position(0, 1400);
</code>
slider = p.createSlider(0, 1, 0.5, 0.01); // these parameters don't give position. just the posible value of my slider. Not important in this case
slider.position(0, 1400);
to have my slider at the same position than my txt