I managed to create a hexagon with Raphel, gave it a stroke and a fill image, then (with help from StackOverFlow) managed to create a flip animation on the hexagon.
But I am facing a problem. When the hexagon flips, the background image does not flip with it. How can I make the hexagon shape flip, but as it is flipping, show the background image flipping too.
Here is what I currently have:
function polygon(x, y, size, sides, rotate) {
var self = this;
self.centrePoint = [x,y];
self.size = size;
self.sides = sides;
self.rotated = rotate;
self.sizeMultiplier = 50;
self.points = [];
for (i = 0; i < sides; i++) {
self.points.push([(x + (self.size * self.sizeMultiplier) * (rotate ? Math.sin(2 * 3.14159265 * i / sides) : Math.cos(2 * 3.14159265 * i / sides))), (y + (self.size * self.sizeMultiplier) * (rotate ? Math.cos(2 * 3.14159265 * i / sides) : Math.sin(2 * 3.14159265 * i / sides)))]);
}
self.svgString = 'M' + self.points.join(' ') + ' L Z';
}
$(document).ready(function() {
var paper = Raphael(0, 0, 450, 450);
var path1 = new polygon(100, 100, 2, 6, false);
var hex1 = paper.path(path1.svgString);
hex1.node.id = "hex1";
hex1.attr("fill", "url('http://i49.tinypic.com/23ma7pt.jpg')");
hex1.attr("stroke", "#aceace");
/* flip animation */
hex1.click(function() {
hex1.animate({transform: "S0,1"},500,'easeIn', function()
{
hex1.attr("fill","url('http://i49.tinypic.com/23ma7pt.jpg')");
hex1.animate({transform: "S-1,1"},500,'easeOut');
});
});
});
Related
In my app, I just want to print Bitmaps on PDF document and save it.
I can did that without any error.
But the thing is file size is too large like 20/30 MB.
Therefore I just try with Grayscale Bitmaps. After that file size is reduce somewhat (10 MB), but still it's very large.
My problem is how I can reduce the PDF File size in Android Studio.
if (img_SetImage) {
BitmapFactory.Options opt = new BitmapFactory.Options();
opt.inScaled = false;
Bitmap bmp = BitmapFactory.decodeFile(img_Uri.getPath(), opt);
int[] xyImg = xy(bmp.getWidth(), bmp.getHeight(), 298, 175);
PdfDocument.PageInfo myPageInfo = new PdfDocument.PageInfo.Builder(595, 842, 1).create();
PdfDocument.Page myPage = myPDFDoc.startPage(myPageInfo);
Canvas myCanvas = myPage.getCanvas();
Paint paint = new Paint();
paint.setAntiAlias(true);
float wScale, hScale, scaleFactor;
wScale = xyImg[0] / (float) bmp.getWidth();
hScale = xyImg[1] / (float) bmp.getHeight();
if (wScale >= hScale) {
scaleFactor = hScale;
} else {
scaleFactor = wScale;
}
myCanvas.scale(scaleFactor, scaleFactor);
ColorMatrix cm = new ColorMatrix();
cm.setSaturation(0);
ColorMatrixColorFilter f = new ColorMatrixColorFilter(cm);
paint.setColorFilter(f);
myCanvas.drawBitmap(bmp, xyImg[2]/scaleFactor, xyImg[3]/scaleFactor, paint);
myPDFDoc.finishPage(myPage);
bmp.recycle();
}
private int[] xy(float width, float height, float left, float top) {
int finalWidth, finalHeight, finalLeft, finalTop;
float wScale, hScale, scaleFactor;
wScale = (436 / width);
hScale = (270 / height);
if (wScale >= hScale) {
scaleFactor = hScale;
} else {
scaleFactor = wScale;
}
finalWidth = (int) (width * scaleFactor);
finalHeight = (int) (height * scaleFactor);
finalLeft = (int) (left - (finalWidth / 2));
finalTop = (int) (top - (finalHeight / 2));
int[] returnValues = {finalWidth, finalHeight, finalLeft, finalTop};
return returnValues;
}
I recreated the scrolling text box tutorial in my game. However, it is running a bit glitchy on mobile. For example, if I swipe up, the text first goes down for a second and then follows my finger up. You’ll see the problem if you open the tutorial on mobile. Any thoughts? I copied my code below.
var graphics = scene.make.graphics();
graphics.fillRect(x, y + 10, width, height - 20);
var mask = new Phaser.Display.Masks.GeometryMask(scene, graphics);
var text = scene.add.text(x + 20, y + 20, content, {
fontFamily: 'Assistant',
fontSize: '28px',
color: '#000000',
wordWrap: { width: width - 20 }
}).setOrigin(0);
text.setMask(mask);
var minY = height - text.height - 20;
if (text.height <= height - 20) {
minY = y + 20;
}
// The rectangle they can 'drag' within
var zone = scene.add.zone(x, y - 3, width, height + 6).setOrigin(0).setInteractive({useHandCursor: true});
zone.on('pointermove', function (pointer) {
if (pointer.isDown) {
text.y += (pointer.velocity.y / 10);
text.y = Phaser.Math.Clamp(text.y, minY, y + 20);
}
});
I had the same issue. My solution is using "pointer.y" instead of "pointer.velocity.y".
Here is my code:
var previousPointerPositionY;
var currentPointerPositionY;
zone.on('pointerdown', function (pointer) {
previousPointerPositionY = pointer.y;
});
zone.on('pointermove', function (pointer) {
if (pointer.isDown) {
currentPointerPositionY = pointer.y;
if(currentPointerPositionY > previousPointerPositionY){
text.y += 5;
} else if(currentPointerPositionY < previousPointerPositionY){
text.y -= 5;
}
previousPointerPositionY = currentPointerPositionY;
text.y = Phaser.Math.Clamp(text.y, -360, 150);
}
});
I'm trying to render a simple discrete-time signal using a canvas element. However, the representation seems to be inaccurate. As you can see in the code snippet the signal appears to be amplitude modulated after the frequency reaches a certain threshold. Even though it's well below the Nyquist limit of <50Hz (assuming a sampling rate of 100Hz in this example).
For very low frequencies like 5Hz it looks perfectly fine.
How would I go about rendering this properly? And does it work for more complex signals (say, the waveform of a song)?
window.addEventListener('load', () => {
const canvas = document.querySelector('canvas');
const frequencyElem = document.querySelector('#frequency');
const ctx = canvas.getContext('2d');
const renderFn = t => {
const signal = new Array(100);
const sineOfT = Math.sin(t / 1000 / 8 * Math.PI * 2) * 0.5 + 0.5;
const frequency = sineOfT * 20 + 3;
for (let i = 0; i < signal.length; i++) {
signal[i] = Math.sin(i / signal.length * Math.PI * 2 * frequency);
}
frequencyElem.innerText = `${frequency.toFixed(3)}Hz`
render(ctx, signal);
requestAnimationFrame(renderFn);
};
requestAnimationFrame(renderFn);
});
function render(ctx, signal) {
const w = ctx.canvas.width;
const h = ctx.canvas.height;
ctx.clearRect(0, 0, w, h);
ctx.strokeStyle = 'red';
ctx.beginPath();
signal.forEach((value, i) => {
const x = i / (signal.length - 1) * w;
const y = h - (value + 1) / 2 * h;
if (i === 0) {
ctx.moveTo(x, y);
} else {
ctx.lineTo(x, y);
}
});
ctx.stroke();
}
#media (prefers-color-scheme: dark) {
body {
background-color: #333;
color: #f6f6f6;
}
}
<canvas></canvas>
<br/>
Frequency: <span id="frequency"></span>
It looks right to me. At higher frequencies, when the peak falls between two samples, the sampled points can be a lot lower than the peak.
If the signal only has frequencies < Nyquist, then the signal can be reconstructed from its samples. That doesn't mean that the samples look like the signal.
As long as your signal is oversampled by 2x or more (or so), you can draw it pretty accurately by using cubic interpolation between the sample points. See, for example, Catmull-Rom interpolation in here: https://en.wikipedia.org/wiki/Cubic_Hermite_spline
You can use the bezierCurveTo method in HTML Canvas to draw these interpolated curves. If you need to use lines, then you should find any maximum or minimum points that occur between samples and include those in your path.
I've edited your snippet to use the bezierCurveTo method with Catmull-Rom interpolation below:
window.addEventListener('load', () => {
const canvas = document.querySelector('canvas');
const frequencyElem = document.querySelector('#frequency');
const ctx = canvas.getContext('2d');
const renderFn = t => {
const signal = new Array(100);
const sineOfT = Math.sin(t / 1000 / 8 * Math.PI * 2) * 0.5 + 0.5;
const frequency = sineOfT * 20 + 3;
for (let i = 0; i < signal.length; i++) {
signal[i] = Math.sin(i / signal.length * Math.PI * 2 * frequency);
}
frequencyElem.innerText = `${frequency.toFixed(3)}Hz`
render(ctx, signal);
requestAnimationFrame(renderFn);
};
requestAnimationFrame(renderFn);
});
function render(ctx, signal) {
const w = ctx.canvas.width;
const h = ctx.canvas.height;
ctx.clearRect(0, 0, w, h);
ctx.strokeStyle = 'red';
ctx.beginPath();
const dx = w/(signal.length - 1);
const dy = -(h-2)/2.0;
const c = 1.0/2.0;
for (let i=0; i < signal.length-1; ++i) {
const x0 = i * dx;
const y0 = h*0.5 + signal[i]*dy;
const x3 = x0 + dx;
const y3 = h*0.5 + signal[i+1]*dy;
let x1,y1,x2,y2;
if (i>0) {
x1 = x0 + dx*c;
y1 = y0 + (signal[i+1] - signal[i-1])*dy*c/2;
} else {
x1 = x0;
y1 = y0;
ctx.moveTo(x0, y0);
}
if (i < signal.length-2) {
x2 = x3 - dx*c;
y2 = y3 - (signal[i+2] - signal[i])*dy*c/2;
} else {
x2 = x3;
y2 = y3;
}
ctx.bezierCurveTo(x1,y1,x2,y2,x3,y3);
}
ctx.stroke();
}
#media (prefers-color-scheme: dark) {
body {
background-color: #333;
color: #f6f6f6;
}
}
<canvas></canvas>
<br/>
Frequency: <span id="frequency"></span>
I code ommidirectional shadow mapping by c++ directx 11. I took algorithm from book: "HLSL Development Cookbook" by Doron Feinstein. But if my screen resolution and all dependences are different with resolution of shadow map, the shadows are in wrong place and projected incorectly. How I can fix it?
XMMATRIX* PointLight::GetCubeViewProjection()
{
XMMATRIX lightProjection, positionMatrix, spotView, toShadow;
RebuildWorldMatrixPosition();
XMFLOAT3 worldPosition = this->GetWorldPosition();
positionMatrix = XMMatrixTranslation(-worldPosition.x, -worldPosition.y, -worldPosition.z);
lightProjection = XMMatrixPerspectiveFovLH(XM_PIDIV2, 1.0f, SHADOW_NEAR_PLANE, m_radius);
// Cube +X
spotView = XMMatrixRotationY(XM_PI + XM_PIDIV2);
toShadow = positionMatrix * spotView * lightProjection;
m_cubeViewProjection[0] = XMMatrixTranspose(toShadow);
// Cube -X
spotView = XMMatrixRotationY(XM_PIDIV2);
toShadow = positionMatrix * spotView * lightProjection;
m_cubeViewProjection[1] = XMMatrixTranspose(toShadow);
// Cube +Y
spotView = XMMatrixRotationX(XM_PIDIV2);
toShadow = positionMatrix * spotView * lightProjection;
m_cubeViewProjection[2] = XMMatrixTranspose(toShadow);
// Cube -Y
spotView = XMMatrixRotationX(XM_PI + XM_PIDIV2);
toShadow = positionMatrix * spotView * lightProjection;
m_cubeViewProjection[3] = XMMatrixTranspose(toShadow);
// Cube +Z
toShadow = positionMatrix * lightProjection;
m_cubeViewProjection[4] = XMMatrixTranspose(toShadow);
// Cube -Z
spotView = XMMatrixRotationY(XM_PI);
toShadow = positionMatrix * spotView * lightProjection;
m_cubeViewProjection[5] = XMMatrixTranspose(toShadow);
return m_cubeViewProjection;
}
cbuffer WorldMatrixBuffer : register( b0 )
{
matrix worldMatrix;
};
//vertex shadow gen shader
float4 PointShadowGenVS(float4 Pos : POSITION) : SV_Position
{
Pos.w = 1.0f;
return mul(Pos, worldMatrix);
}
//geometry shadow gen shader
cbuffer ShadowMapCubeViewProj : register( b0 )
{
float4x4 cubeViewProj[6] : packoffset(c0);
};
struct GS_OUTPUT
{
float4 Pos: SV_POSITION;
uint RTIndex : SV_RenderTargetArrayIndex;
};
[maxvertexcount(18)]
void PointShadowGenGS(triangle float4 InPos[3] : SV_Position, inout TriangleStream<GS_OUTPUT> OutStream)
{
for (int iFace = 0; iFace < 6; ++iFace)
{
GS_OUTPUT output;
output.RTIndex = iFace;
for (int v = 0; v < 3; ++v)
{
output.Pos = mul(InPos[v], cubeViewProj[iFace]);
OutStream.Append(output);
}
OutStream.RestartStrip();
}
}
//point light pixel shader
float PointShadowPCF(float3 toPixel)
{
float3 toPixelAbs = abs(toPixel);
float z = max(toPixelAbs.x, max(toPixelAbs.y, toPixelAbs.z));
float depth = (lightPerspectiveValues.x * z + lightPerspectiveValues.y) / z;
return pointShadowMapTexture.SampleCmpLevelZero(PCFSampler, toPixel, depth).x;
}
float shadowAttenuation = PointShadowPCF(worldPosition - lightPosition);
Problem was in incorrect viewport. It must have the same width and height as shadow map. I created it incorrect.
I'm working on a web application that allows you to send from the server to the client a picture made with VTK. But how do you know the speed of the Internet depends on the speed, well, the file system. And to speed up the work, I decided to add to the client webGL. And now the question arose in the data synchronization. In VTK rotates the camera around the object, after many attempts, I could not do on the client side, the camera works well (with the change of coordinates the camera), but was able to make correct the rotation of the object. In this some questions:
1. is any ideas with camera?
2. or it will be easy to change rotation in vtk?
Update:
I make a camera and it's synchroniz with vtk, but know i have a problem with viewUp vector, on client after rising phi more than 90 it's became (0,-1,0) and when i make SetViewUp(0,-1,0) nothing changed
Javascript:
renderer.domElement.addEventListener('mousemove', function(e) {
e.preventDefault();
if ( paused ) {
return;
}
if ( !moving ) {
lastLeft = e.clientX;
lastTop = e.clientY;
moving = true;
}
// horizontal
theta = - ( ( event.clientX - lastLeft ) * 360 /window.innerWidth ) + onMouseDownTheta;
phi = ( ( event.clientY - lastTop ) * 360 /window.innerHeight ) + onMouseDownPhi;
//phi = Math.min( 90, Math.max( -90, phi ) );
var cosPhi = Math.cos( phi * Math.PI / 180 );
var sinPhi = Math.sin( phi * Math.PI / 180 );
var sinTheta = Math.sin( theta * Math.PI / 180 );
var cosTheta = Math.cos( theta * Math.PI / 180 );
//trace('data_move');trace(radious);trace(theta);trace(phi);trace(camera.up);
camera.position.x = radious * cosTheta * cosPhi;
camera.position.y = radious * sinPhi;
camera.position.z = radious * sinTheta * cosPhi;
var u;
if (phi<0) phi=2*180+phi;
if (phi>2*180) phi=phi-2*180;
if ((phi>180/2)&&(phi<3*180/2))
u=-1;
else
u=1;
camera.up = new THREE.Vector3(0, u, 0);
camera.lookAt(new THREE.Vector3(FocalPoint[0],FocalPoint[1],FocalPoint[2]))
trace('data_move');trace(FocalPoint);trace(camera.up);
camera.updateMatrix();
});
renderer.domElement.addEventListener('mousedown', function(e) {
paused = false;
lastLeft = e.clientX;
lastTop = e.clientY;
onMouseDownTheta = theta;
onMouseDownPhi = phi;
});
renderer.domElement.addEventListener('mouseup', function(e) {
moving = paused = true;
counter = 0
trace('data_move');trace(camera.position);trace(camera.up);
comm.makeRequest("vtk", {
mode: curVtkConf.mode,
command: "set_camera",
up: {'x': camera.up.x,'y': camera.up.y,'z': camera.up.z},
position: {'x': camera.position.x,'y': camera.position.y,'z': camera.position.z},
});
});
Phyton:
def set_camera(self, position, up):
'''
Поворот в жестко заданную позицию.
'''
self.move_to_origin()
bounds = self.src_actor.GetBounds()
camera = self.renderer.GetActiveCamera()
x, y, z = camera.GetPosition()
edge = None
camera.SetPosition(position['x'], position['y'], position['z'])
camera.SetViewUp(up['x'], up['y'], up['z'])
self.world_coords_to_pixel_ratio = self._get_world_coords_to_pixel_ratio()
camera.OrthogonalizeViewUp()
camera.SetRoll(0)
self.renderer.ResetCameraClippingRange()
self.renderer.ResetCamera()
Update2:
Now also i have some problems with rotation. The model just changed it size while rotating
Solved: by moving model to the center
Solved at all))