I want to draw a fixed horizontal line (or a ruler) that gives info about size/distance or zooming factor like the one in Google Maps (see here).
Here is the another example with different zoom levels and camera used is orthographic
I try to implement the same with perspective camera but I would not able do it correctly
Below is the result I am getting with perspective camera
The logic that i am using to draw the ruler is
var rect = myCanvas.getBoundingClientRect();
var canvasWidth = rect.right - rect.left;
var canvasHeight = rect.bottom - rect.top;
var Canvas2D_ctx = myCanvas.getContext("2d");
// logic to calculate the rulerwidth
var distance = getDistance(camera.position, model.center);
canvasWidth > canvasHeight && (distance *= canvasWidth / canvasHeight);
var a = 1 / 3 * distance,
l = Math.log(a) / Math.LN10,
l = Math.pow(10, Math.floor(l)),
a = Math.floor(a / l) * l;
var rulerWidth = a / h;
var text = 1E5 <= a ? a.toExponential(3) : 1E3 <= a ? a.toFixed(0) : 100 <= a ? a.toFixed(1) : 10 <= a ? a.toFixed(2) : 1 <= a ? a.toFixed(3) : .01 <= a ? a.toFixed(4) : a.toExponential(3);
Canvas2D_ctx.lineCap = "round";
Canvas2D_ctx.textBaseline = "middle";
Canvas2D_ctx.textAlign = "start";
Canvas2D_ctx.font = "12px Sans-Serif";
Canvas2D_ctx.strokeStyle = 'rgba(255, 0, 0, 1)';
Canvas2D_ctx.lineWidth = 0;
var m = canvasWidth * 0.01;
var n = canvasHeight - 50;
Canvas2D_ctx.beginPath();
Canvas2D_ctx.moveTo(m, n);
n += 12;
Canvas2D_ctx.lineTo(m, n);
m += canvasWidth * rulerWidth;
Canvas2D_ctx.lineTo(m, n);
n -= 12;
Canvas2D_ctx.lineTo(m, n);
Canvas2D_ctx.stroke();
Canvas2D_ctx.fillStyle = 'rgba(255, 0, 0, 1)';
Canvas2D_ctx.fillText(text + " ( m )", (m) /2 , n + 6)
Can any one help me ( logic to calculate the ruler Width) in fixing this issue and to render the scale meter / ruler correctly for both perspective and orthographic camera.
Related
I'm building an isometric map tile image in Node and I'm stuck at the second layer rendering, I can't figure out how to adjust items in the y axis
Here's my code so far:
let i = 0;
for (let layer of map) {
const xTiles = layer.length;
const yTiles = layer[0].length;
for (let Xi = xTiles - 1; Xi >= 0; Xi--) {
for (let Yi = 0; Yi < yTiles; Yi++) {
const imgIndex = layer[Xi][Yi];
if (imgIndex == null || imgIndex == -1) {
continue;
}
const tile = tiles[imgIndex];
const offX = (Xi * tileColOffset / 2 + Yi * tileColOffset / 2 + originX) + (i * ((tileColOffset - tile.width) / 2));
const offY = (Yi * tileRowOffset / 2 - Xi * tileRowOffset / 2 + originY) - (i * ((tileRowOffset / 2)));
ctx.drawImage(tile, offX, offY);
}
}
i++;
}
I can center the sprite on the x axis but not on the y one, probably because sprites have different heights. The code above reproduces this
As you can see the taller sprites are quite centered, but the small ones are not. Any suggestion?
Thanks!
Just found out that I have to calculate the difference between the half height of the ground tile and the height of the sprite:
let i = 0;
for (let layer of map) {
const xTiles = layer.length;
const yTiles = layer[0].length;
for (let Xi = xTiles - 1; Xi >= 0; Xi--) {
for (let Yi = 0; Yi < yTiles; Yi++) {
const imgIndex = layer[Xi][Yi];
if (imgIndex == null || imgIndex == -1) {
continue;
}
const tile = tiles[imgIndex];
let offX, offY
if (i === 0) {
offX = (Xi * tileColOffset / 2 + Yi * tileColOffset / 2 + originX);
offY = (Yi * tileRowOffset / 2 - Xi * tileRowOffset / 2 + originY);
} else {
offX = (Xi * tileColOffset / 2 + Yi * tileColOffset / 2 + originX) + (i * ((tileColOffset - tile.width) / 2));
offY = (Yi * tileRowOffset / 2 - Xi * tileRowOffset / 2 + originY) + ((i * (tileRowOffset / 2 - tile.height)));
}
ctx.drawImage(tile, offX, offY);
}
}
i++;
}
int main()
{
const auto console = ::GetConsoleWindow();
const auto context = ::GetDC(console);
constexpr auto red = RGB(255, 0, 0);
constexpr auto yellow = RGB(255, 255, 0);
RECT rectClient, rectWindow;
GetClientRect(console, &rectClient);
GetWindowRect(console, &rectWindow);
int posx, posy;
posx = GetSystemMetrics(SM_CXSCREEN) / 2 - (rectWindow.right - rectWindow.left) / 2;
posy = GetSystemMetrics(SM_CYSCREEN) / 2 - (rectWindow.bottom - rectWindow.top) / 2;
const int radius = 150;
for (int y = -radius; y <= radius; y++)
for (int x = -radius; x <= radius; x++)
if (x * x + y * y <= radius * radius)
SetPixel(context, posx + x, posy + y, red);
}
It gives me this result img
it looks good but i saw this weird pixels at sides (up, down, right, left)
img
and this is what I want (I added some pixels at the top so it looks better)
enter image description here
Your "what I want" looks anti-aliased. So draw anti-aliased.
If the original condition is not met, but x*x + y*y <= (radius+1)*(radius+1) is met then you need a partially-shaded pixel.
Another way to do anti-aliasing is to test not the center of each pixel but the four corners (x \plusminus 0.5, y \plusminus 0.5). If more than zero but fewer than four corners are inside the circle, you need a partially-shaded pixel.
I'm using Processing to get a webcam feed from my laptop. In the top left corner, I have drawn a rectangle over the displayed feed. I'm trying to get the average color of the webcam, but only in the region contained by that rectangle.
I keep getting color (0, 0, 0), black, as the result.
Thank you all!
PS sorry if my code seems messy..I'm new at Processing and so I don't know if this might be hard to read or contain bad practices. Thank you.
import processing.video.*;
Capture webcam;
Capture cap;
PImage bg_img;
color bgColor = color(0, 0, 0);
int rMargin = 50;
int rWidth = 100;
color input = color(0, 0, 0);
color background = color(255, 255, 255);
color current;
int bgTolerance = 5;
void setup() {
size(1280,720);
// start the webcam
String[] inputs = Capture.list();
if (inputs.length == 0) {
println("Couldn't detect any webcams connected!");
exit();
}
webcam = new Capture(this, inputs[0]);
webcam.start();
}
void draw() {
if (webcam.available()) {
// read from the webcam
webcam.read();
image(webcam, 0,0);
webcam.loadPixels();
noFill();
strokeWeight(2);
stroke(255,255, 255);
rect(rMargin, rMargin, rWidth, rWidth);
int yCenter = (rWidth/2) + rMargin;
int xCenter = (rWidth/2) + rMargin;
// rectMode(CENTER);
int rectCenterIndex = (width* yCenter) + xCenter;
int r = 0, g = 0, b = 0;
//for whole image:
//for (int i=0; i<bg_img.pixels.length; i++) {
// color c = bg_img.pixels[i];
// r += c>>16&0xFF;
// g += c>>8&0xFF;
// b += c&0xFF;
//}
//r /= bg_img.pixels.length;
//g /= bg_img.pixels.length;
//b /= bg_img.pixels.length;
//CALCULATE AVG COLOR:
int i;
for(int x = 50; x <= 150; x++){
for(int y = 50; y <= 150; y++){
i = (width*y) + x;
color c = webcam.pixels[i];
r += c>>16&0xFF;
g += c>>8&0xFF;
b += c&0xFF;
}
}
r /= webcam.pixels.length;
g /= webcam.pixels.length;
b /= webcam.pixels.length;
println(r + " " + g + " " + b);
}
}
You're so close, but missing out one important aspect: the number of pixels you're sampling.
Notice in the example code that is commented out for a full image you're dividing by the full number of pixels (pixels.length).
However, in your adapted version you want to compute the average colour of only a subsection of the full image which means a smaller number of pixels.
You're only sampling an area that is 100x100 pixels meaning you need to divide by 10000 instead of webcam.pixels.length (1920x1000). That is why you get 0 as it's integer division.
This is what I mean in code:
int totalSampledPixels = rWidth * rWidth;
r /= totalSampledPixels;
g /= totalSampledPixels;
b /= totalSampledPixels;
Full tweaked sketch:
import processing.video.*;
Capture webcam;
Capture cap;
PImage bg_img;
color bgColor = color(0, 0, 0);
int rMargin = 50;
int rWidth = 100;
int rHeight = 100;
color input = color(0, 0, 0);
color background = color(255, 255, 255);
color current;
int bgTolerance = 5;
void setup() {
size(1280,720);
// start the webcam
String[] inputs = Capture.list();
if (inputs.length == 0) {
println("Couldn't detect any webcams connected!");
exit();
}
webcam = new Capture(this, inputs[0]);
webcam.start();
}
void draw() {
if (webcam.available()) {
// read from the webcam
webcam.read();
image(webcam, 0,0);
webcam.loadPixels();
noFill();
strokeWeight(2);
stroke(255,255, 255);
rect(rMargin, rMargin, rWidth, rHeight);
int yCenter = (rWidth/2) + rMargin;
int xCenter = (rWidth/2) + rMargin;
// rectMode(CENTER);
int rectCenterIndex = (width* yCenter) + xCenter;
int r = 0, g = 0, b = 0;
//for whole image:
//for (int i=0; i<bg_img.pixels.length; i++) {
// color c = bg_img.pixels[i];
// r += c>>16&0xFF;
// g += c>>8&0xFF;
// b += c&0xFF;
//}
//r /= bg_img.pixels.length;
//g /= bg_img.pixels.length;
//b /= bg_img.pixels.length;
//CALCULATE AVG COLOR:
int i;
for(int x = 0; x <= width; x++){
for(int y = 0; y <= height; y++){
if (x >= rMargin && x <= rMargin + rWidth && y >= rMargin && y <= rMargin + rHeight){
i = (width*y) + x;
color c = webcam.pixels[i];
r += c>>16&0xFF;
g += c>>8&0xFF;
b += c&0xFF;
}
}
}
//divide by just the area sampled (x >= 50 && x <= 150 && y >= 50 && y <= 150 is a 100x100 px area)
int totalSampledPixels = rWidth * rHeight;
r /= totalSampledPixels;
g /= totalSampledPixels;
b /= totalSampledPixels;
fill(r,g,b);
rect(rMargin + rWidth, rMargin, rWidth, rHeight);
println(r + " " + g + " " + b);
}
}
Bare in mind this is averaging in the RGB colour space which is not the same as perceptual colour space. For example, if you average red and yellow you'd expect orange, but in RGB, a bit of red and green makes yellow.
Hopefully the RGB average is good enough for what you need, otherwise you may need to convert from RGB to CIE XYZ colour space then to Lab colour space to compute the perceptual average (then convert back to XYZ and RGB to display on screen). If that is something you're interested in trying, you can find an older answer demonstrating this in openFrameworks (which you'll notice can be similar to Processing in simple scenarios).
What I am doing now is, I am getting all pixels with var getPixels = require("get-pixels"), then I am looping over the array of pixels with this code:
var pixelation = 10;
var imageData = ctx.getImageData(0, 0, img.width, img.height);
var data = imageData.data;
for(var y = 0; y < sourceHeight; y += pixelation) {
for(var x = 0; x < sourceWidth; x += pixelation) {
var red = data[((sourceWidth * y) + x) * 4];
var green = data[((sourceWidth * y) + x) * 4 + 1];
var blue = data[((sourceWidth * y) + x) * 4 + 2];
//Assign
for(var n = 0; n < pixelation; n++) {
for(var m = 0; m < pixelation; m++) {
if(x + m < sourceWidth) {
data[((sourceWidth * (y + n)) + (x + m)) * 4] = red;
data[((sourceWidth * (y + n)) + (x + m)) * 4 + 1] = green;
data[((sourceWidth * (y + n)) + (x + m)) * 4 + 2] = blue;
}
}
}
}
}
The problem with this method is that the result image is too sharp.
What I am looking for is something, similar to this one which has been done with ImageMagick -sale
The command which I've used for the second one is
convert -normalize -scale 10% -scale 1000% base.jpg base2.jpg
the problem with this method is that I don't know how to specify the actual pixel size.
So is it possible to get the second result with that for loop. Or is better to use imagemagick -scale but if some one can help with the math, so I can have actual pixel size would be great.
Not sure what maths you are struggling with, but if we start with a 600x600 image like this:
Then, if you want the final image to have just 5 blocky pixels across and 5 blocky pixels down the page, you can scale it down to 5x5 and then scale it back up to its original size:
convert start.png -scale 5x5 -scale 600x600 result.png
Or, if you want to go to 10x10 blocky pixels:
convert start.png -scale 10x10 -scale 600x600 result2.png
The way you've written this, the image is processed into pixels of size nxn where n is specified by your pixelation variable. Increasing pixelation will provide the desired "coarseness".
I am creating two elements (1. arrow shape and 2. dotted line) using path (Raphael and SVG) and I want to drag these two together but I am only able to drag it independently. Here is my code for this:
gaugeSvg = Raphael("gauge");
$(document).ready( function () {
redraw();
});
function redraw() {
//Add a Arrow and line
var rect = gaugeSvg.path('M 0 0 L 40 -34 L 40 -14 L 80 -14 L 80 14 L 40 14 L 40 34 Z');
rect.attr({
"stroke": "black",
"fill" : "black",
"enable" : "true",
}).translate(left + width, goalY);
var txt = gaugeSvg.path('M 0 0 L ' + width + " 0");
txt.attr({
"stroke": "black",
"stroke-width": 12,
"stroke-dasharray": "-",
"stroke-linecap": "round"
}).translate(left, goalY);
//Create a set so we can move the
//arrow and line at the same time
var g = gaugeSvg.set();
g.push(rect, txt);
// var g = gaugeSvg.set(rect, txt);
var me = this,
lx = 0,
ly = 0,
ox = 0,
oy = 0,
moveFnc = function(dx, dy) {
this.translate(dx-ox, dy-oy);
ox = dx;
oy = dy;
},
startFnc = function() {},
endFnc = function() {
ox = lx;
oy = ly;
};
g.drag(moveFnc, startFnc, endFnc);
}
I have'nt used Rapheal . But i have achieved this Drag functionlaity with SVG amd Javascript.
In order to move multiple elements, you need to group them. Means put these elements in 'g' group and then apply drag function on this 'g'. and once finished, you need to 'ungroup' them.
you can see demo here http://jsfiddle.net/rehankhalid/5t5pX/
var mainsvg = document.getElementsByTagName('svg')[0];
function mousemove(event) {
var svgXY = getSvgCordinates(event);// get current x,y w.r.t to your svg.
dx = svgXY.x - mx;// mx means x cordinates of mouse down
dy = svgXY.y - my;
draggroup.setAttribute('transform', 'translate(' + dx + ',' + dy + ')');
}
function getSvgCordinates(event) {
var m = mainsvg.getScreenCTM();
var p = mainsvg.createSVGPoint();
var x, y;
x = event.pageX;
y = event.pageY;
p.x = x;
p.y = y;
p = p.matrixTransform(m.inverse());
x = p.x;
y = p.y;
x = parseFloat(x.toFixed(3));
y = parseFloat(y.toFixed(3));
return {x: x, y: y};
}