var button = document.querySelectorAll('button');
var drumCount = button.length;
button.addEventListener('click', function(){
this.style.color = '#'+Math.floor(Math.random()*16777215).toString(16));
this.style.backgroundColor = '#'+Math.floor(Math.random()*16777215).toString(16)
});
I have code that creates a random color, but I am wondering how to generate two random colors on the opposite side of the color wheel.
I know it seems trivial, but I have been at it for a while now, trying to figure this out. Any help is greatly appreciated
Related
I have 2 obj meshes.
They both have some common areas but not completely.
I displayed them both by adding them to screen ..
Just like a mesh on top of another.
But the lower mesh overlaps the top mesh
But what I want to acheive is the lower mesh should always stay below without overlapping and giving the space to the entire top mesh.
I went through this fiddle..Fiddle with renderorder
And I tried something with this like..
var objLoader1 = new OBJLoader2();
objLoader1.load('assets/object1.obj', (root) => {
root.renderOrder = 0;
scene.add(root);
});
var objLoader2 = new OBJLoader2();
objLoader2.load('assets/object2.obj', (root) => {
root.renderOrder = 1;
scene.add(root);
});
But I don't know for what reason the overlap still stays ..
I tried...
var objLoader1 = new OBJLoader2();
objLoader1.load('assets/object1.obj', (root) => {
objLoader1.renderOrder = 0;
scene.add(root);
});
var objLoader2 = new OBJLoader2();
objLoader2.load('assets/object2.obj', (root) => {
objLoader2.renderOrder = 1;
scene.add(root);
});
Then I tried going through this Fiddle .. Another Fiddle
But when I run in I get only the lower or the upper mesh .
But I want to see both without any overlaps..
var layer1 = new Layer(camera);
composer.addPass(layer1.renderPass);
layer1.scene.add(new THREE.AmbientLight(0xFFFFFF));
var objLoader1 = new OBJLoader2();
objLoader1.load('assets/object1.obj', (root) => {
layer1.scene.add(root);
});
var layer2 = new Layer(camera);
composer.addPass(layer2.renderPass);
layer2.scene.add(new THREE.AmbientLight(0xFFFFFF));
var objLoader2 = new OBJLoader2();
objLoader2.load('assets/object2.obj', (root) => {
layer2.scene.add(root);
});
I made the material depthTest to False
But Nothing Helped..
Can anyone help me achieve what I wanted ..
If anyone couldn't figure what I mean by overlapping see the image below..
And Thanks to anyone who took time and effort to go through and help me...
You can use polygonOffset to achieve your goal, which modifies the depth value right before a fragment is written to help move polygons off of eachother without visually changing the position:
material.polygonOffset = true;
material.polygonOffsetUnit = 1;
material.polygonOffsetFactor = 1;
Here is a fiddle demonstrating the solution:
https://jsfiddle.net/5s8ey0ad/1/
Here is what the OpenGL Docs have to say about polygon offset:
When GL_POLYGON_OFFSET_FILL, GL_POLYGON_OFFSET_LINE, or GL_POLYGON_OFFSET_POINT is enabled, each fragment's depth value will be offset after it is interpolated from the depth values of the appropriate vertices. The value of the offset is factor×DZ+r×units, where DZ is a measurement of the change in depth relative to the screen area of the polygon, and r is the smallest value that is guaranteed to produce a resolvable offset for a given implementation. The offset is added before the depth test is performed and before the value is written into the depth buffer.
You're experiencing z-fighting, which is when two or more planes occupy the same space in the depthBuffer, so the renderer doesn't know which one to render on top of the other. Render order alone doesn't fix this because they're both still on the same plane, regardless of which one gets drawn first. You have a few options to resolve this:
Move one of the beams ever so slightly up in the y-axis. A tiny fraction would give one priority over the other, and this distance may not be noticeable to the eye.
I saw your fiddle, and you forgot to add depthTest: false to your material. However, this will cause issues when depth-testing the rest of the shape, since some white is on top of the red, but also some red is on top of the white. The approach in the fiddle works only when it's a simple plane, not more complex geometries.
You can use a boolean operation that removes one shape from the other, like CSG.
I think you'd save yourself a lot of headache by using approach #1.
Quick version: I’m having trouble displaying a d3 element on a static image displayed by Leaflet. It works if I use d3noob’s (http://bl.ocks.org/d3noob/9211665) example…but I’m having trouble extending it. I’m guessing it’s because of the lang and long translation or the projection but I’m not sure what I need to change. I’m trying to display the geoJSON in the centre of the image (my code on JSFiddle: https://jsfiddle.net/g_at_work/qyhf0qz0/12/)
Longer version:
I'm trying to extend d3noob’s example so that I can display geoJSON on static images using Leaflet and D3 (an requirement from my boss unfortunately). I was able to reproduce d3noob’s tile based example but I've had trouble with the static version.
I've been able to display the static image but I've not been able to display the blue rectangle on the image. I'm not sure what I need to do to manipulate the position of the blue rectangle described in the JSON.
I've tried playing around with setting the coordinates in the projectPoint function but no luck:
function projectPoint(x, y) {
var point = map.latLngToLayerPoint(new L.LatLng(y, x));
this.stream.point(point.x, point.y);
}
At this stage I’m thinking I need to describe a new projection but I’m not sure what.
Here is the code which I’m using to display the static image:
var map = new L.Map("map", {maxZoom:1,center: [0,0], zoom: 3,crs:L.CRS.Simple});
var southWest = map.unproject([0,882],map.getMaxZoom());
var northEast = map.unproject([1085,0],map.getMaxZoom());
var imageBounds = new L.LatLngBounds(southWest,northEast);
L.imageOverlay('http://www.w3schools.com/css/trolltunga.jpg',imageBounds).addTo(map);
map.fitBounds(imageBounds);
It would be great if someone could suggest a strategy for maniuplating the position of the rectangle (I’m new to d3 and leaflet)
Thanks a bunch
G
so after some tinkering I found that creating a new projection enabled me to set the location and scale the map so I could place it where I needed it to be :
var center = d3.geo.centroid(geoShapeInstance);
var scale = [800000];
var offset = [175, 1];
var projection = d3.geo.mercator().scale(scale).center(center).translate(offset);
var path = d3.geo.path().projection(projection);
Fiddling with the 'offset' variable allowed me to set the location and playing with the 'scale' variable allowed me to resize the map (scale is a [x,x] value)
Hope this helps someone.
Sorry for this silly question, but I am lost and hope any other expert can help me.
I need to draw a bar chart, but the x axis is NOT time series, it is discrete values.
var ndx = crossfilter( self.getStatus( contracts ));
var skuDim = ndx.dimension( function(d){
return d.sku;
});
var skuDimCount = skuDim.group().reduceCount();
var chartLineContractSku= dc.barChart("#chart-line-contract-sku");
chartLineContractSku
.width(500)
.height(200)
.dimension(skuDim)
.group(skuDimCount)
.x(d3.scale.linear().domain(skus))
.legend(dc.legend());
the skus is:
array of sku:
["PAR-ND-SRX1-SPCNPC", "SVC-ND-M10i", "SVC-CP-SRX3400", "SVC-ND-SRX3400", "SVC-ND-SRX3-IOC", "SVC-CP-SRX3-IOC", "SVC-CP-SRX3-NPC", "SVC-3-ND-SRX3-IOC", "SVC-CP-SRX3-SPC", "SVC-ND-SRX3-SPC"]
which is used to group dimension the input data.
But the output graph is always empty.
Can anyone tell me how to fix this? And how to generate the barChart with discrete value? Also, another question is how to make the label vertical? as we have quite a lot skus.
Thanks
Gordon is correct in saying that you should use ordinal scale to get your desired result. Replace your d3.scale.linear code with
x(d3.scale.ordinal().domain(skus))
Look at this as an example
http://bost.ocks.org/mike/bar/3/
Before, there is image:
I am totally new in Titanim(Appcelerator). There is task: I must draw or import and select the definite regions of circle. When clicked, it must change colour. Your help will be appreciated.
With regards
Plz Keep two images one with new background and one with original background.Just change the image path and you would be good to go.Something like this
Ti.UI.backgroundColor = 'white';
var win = Ti.UI.createWindow();
var image = Ti.UI.createImageView({
image:'/images/myimage.png'
});
image.addEventListener('click',function(e){
image.image="images/newimage";
});
win.add(image);
win.open();
I am playing with kineticjs with a draggable and zoomable stage and I'd like to know if there is a way to get the stage.getAbsoluteMousePosition() as we can have the absolutePosition of a Node.
Here is the jsfiddle showing a use case, note the position of the tooltip when you zoom in/out.
The interesting part is here:
circle.on('mouseover mousemove',function(){
var mousePos = stage.getMousePosition();
tooltip.setPosition(mousePos.x-stage.getAbsolutePosition().x,mousePos.y-stage.getAbsolutePosition().y);
tooltip.setVisible(true);
tooltip.moveToTop();
layer.draw();
});
I am having trouble to make it work and I believe with the getAbsoluteMousePosition would fix it.
Best,
Edit: This question is outdated.
Outdated Answer
Ok, fixed it myself even thought I don't use the absoluteposition I wanted to.
Here is the jsfiddle, the proper way of doing it was like this:
circle.on('mouseover mousemove', function () {
var mousePos = stage.getMousePosition();
tooltip.setPosition(mousePos.x/ui.scale-stage.getAbsolutePosition().x/ui.scale+stage.getOffset().x,
mousePos.y/ui.scale-stage.getAbsolutePosition().y/ui.scale+stage.getOffset().y);
tooltip.setVisible(true);
tooltip.moveToTop();
layer.draw();
});
If I understand correctly, if you want to get the absolute position of your mouse pointer to the screen this is how you could do it:
circle.on('mouseover mousemove', function (e) {
var mousePos = stage.getMousePosition();
var absoluteX = e.screenX;
var absoluteY = e.screenY;
tooltip.setPosition(mousePos.x - absoluteX, mousePos.y - absoluteY);
tooltip.setVisible(true);
tooltip.moveToTop();
layer.draw();
});
This doesn't solve your answer though as the (x,y) coordinate of the mouse should be relative to the canvas, not your screen. I'm not exactly sure why tooltip.setPosition(mousePos.x, mousePos.y); wouldn't work, the zoom must be messing up the mousePos coordinates relatively somehow.
Anyways, if you only need the tooltip to hover above the correct node, and not follow the mouse position, than this should work for you:
tooltip.setPosition(this.getX(), this.getY());
And if you need, you could offset it by a certain amount for example half the height (radius).
tooltip.setPosition(this.getX(), this.getY()-this.getHeight()/2);
http://jsfiddle.net/projeqht/nDpYr/