I'm a beginner in p5.js, this is my code till now:
function setup() {
createCanvas(600, 600);
}
function draw() {
background(50, 168, 82);
road();
house();
}
function road() {
fill(54, 59, 55);
noStroke();
rect(200, 0, 220, 600);
fill(197, 222, 202);
rect(300, 50, 40, 70);
fill(197, 222, 202);
rect(300, 200, 40, 70);
fill(197, 222, 202);
rect(300, 350, 40, 70);
fill(197, 222, 202);
rect(300, 500, 40, 70);
}
function house() {
fill(209, 207, 61);
rect(50, 50, 100, 100);
}
<script src="https://cdn.jsdelivr.net/npm/p5#1.3.1/lib/p5.js"></script>
And this is the result:
code result
Instead of that yellow rectangle, I wanted a top-view house that looks like a house ;)
I tried, but I couldn't get a house. I'd be happy if someone could do that for me.
If you don't understand what top-view house means, you can see this image:
The house can be the shape of any of these houses.
If you want just a simple house, you can make two halves of the square different colors (to show the light hitting the two sides of the roof differently):
function setup() {
createCanvas(400, 400);
background(0);
noStroke();
fill(125);
rect(100, 100, 200, 100);
fill(200);
rect(100, 200, 200, 100);
}
If you want it to be less simple, you'll need to at least use triangle(), probably also quad(). For both of these commands, you specify the x and y coordinates of each point in the shape. Here's an example of a slightly more complicated house:
function setup() {
createCanvas(400, 400);
background(0);
noStroke();
fill(100);
quad(50, 100,
350, 100,
300, 200,
100, 200
);
fill(200);
quad(100, 200,
300, 200,
350, 300,
50, 300
);
fill(125);
triangle(50, 100,
125, 200,
50, 300
);
triangle(350, 100,
275, 200,
350, 300
);
}
Related
I'm trying to stretch an image dynamically so it expands in one direction in my Phaser 3 game. I've tried using a Tween with scaleX but there's a problem.
The first one is what I have. An image object in Phaser that I want to stretch. The second bar is what happens when I use scaleX. I guess it's what normally should happen, but not what I need. I need it like bar three. The left side of the image should stay aligned and only the right side should stretch. ALso I want to do this in an animation, so it should be something I can use with tweens or similar solutions. It needs to be possible to do it on any angle, so I can't just change the x-position. It has to be possible at any angle, when I don't know what the angle is going to be.
Does anyone know how to do that?
I'm not sure how your code looks like, but here is how I would solve it:
(If I would have to use scaleX and tween)
Although I don't know: what you want/need/mean with the "...on any angle..., here to know/see your code would be good.
just set the origin of the gameObject to 0 since the default is center
adjust the x position to compensate for the new origin position.
Here a runnable example:
(Tween starts a scaleX = 0 to better illustrate, where the origin is)
var config = {
type: Phaser.AUTO,
parent: 'phaser-example',
width: 800,
height: 600,
backgroundColor: '#ffffff',
scene: {
create: create
}
};
var game = new Phaser.Game(config);
function create ()
{
var original = this.add.rectangle(225, 75, 200, 50, 0x0);
var defaultOrigin = this.add.rectangle(225, 150, 200, 50, 0x0);
// calculate the offset -100 = half width
var setOrigin = this.add.rectangle(225 - 100, 200, 200, 50, 0x0).setOrigin(0);
var setOriginAtAnAngle = this.add.rectangle(225 - 100, 275, 200, 50, 0x0)
.setOrigin(0)
.setAngle(25);
var setOriginAtAnAngle2 = this.add.rectangle(225 - 100, 375, 200, 50, 0x0)
.setOrigin(0, .5)
.setAngle(25);
// rotation in degrees
//setOriginAtAnAngle.angle = 25;
/* origin point */
this.add.rectangle(225, 75, 5, 5, 0xFFA701).setOrigin(0.5);
this.add.rectangle(225, 150, 5, 5, 0xFFA701).setOrigin(0.5);
this.add.rectangle(225 - 100, 200, 5, 5, 0xFFA701).setOrigin(0.5);
this.add.rectangle(225 - 100, 275, 5, 5, 0xFFA701).setOrigin(0.5);
this.add.rectangle(225 - 100, 375, 5, 5, 0xFFA701).setOrigin(0.5, 1);
/* Just code to improve the display */
this.add.line(0, 0, 150, 25, 150, 400, 0x0000ff).setOrigin(0);
this.add.text(150, 75, ' Base Box', { fontFamily: 'Arial', fontSize: '20px', color: '#fff' }).setOrigin(0, .5);
this.add.text(150, 150, ' Origin: default (Center)', { fontFamily: 'Arial', fontSize: '20px', color: '#f00' }).setOrigin(0, .5);
this.add.text(150, 200, ' Origin: 0 (TopLeft)', { fontFamily: 'Arial', fontSize: '20px', color: '#0f0' }).setOrigin(0, -.5);
this.add.text(150, 290, ' Origin: 0 (TopLeft) with angle', { fontFamily: 'Arial', fontSize: '20px', color: '#0f0' })
.setOrigin(0, -.5)
.setAngle(25);
this.add.text(150, 360, ' Origin: 0 (CenterLeft) with angle', { fontFamily: 'Arial', fontSize: '20px', color: '#0f0' })
.setOrigin(0, -.5)
.setAngle(25);
this.text = this.add.text(100, 12, 'Click to replay tween!', { fontFamily: 'Arial', fontSize: '20px', color: '#0000ff', backgroundColor: '#ffffff', fontStyle:'Bold' });
this.tween = this.tweens.add({
targets: [defaultOrigin, setOrigin, setOriginAtAnAngle, setOriginAtAnAngle2],
duration: 3000,
scaleX:{from:0, to:2},
ease: 'Power0',
onStart: _ => this.text.setText('Tween is running!'),
onActive: _ => this.text.setText('Tween is running!'),
onComplete: _=> this.text.setText('Click to replay tween!')
});
this.input.on('pointerdown', _=> {
if(!this.tween.isPlaying()){
this.tween.restart();
}
})
}
canvas {
transform: scale(.5) translate(-50%, -50%)
}
<script src="//cdn.jsdelivr.net/npm/phaser#3.55.2/dist/phaser.min.js"></script>
Update:
Origin's are now marked in the example, with a yellow point, for clarity.
I want to press one time to display all the elements,
why I should press two times to display the 0 elements?
I try to order the if statements but I didn't figure it out.
here is the link fiddle
var words = ['rainbow', 'heart', 'purple', 'friendship', 'love'];
function setup() {
createCanvas(400, 400);
}
function draw() {
background(0);
textSize(32);
text(words[i]);
}
function mousePressed() {
for (let i = 0; i < words.length; i++) {
text(words[i], 100, i * 50 + 50);
if (i == 0) {
fill(255, 0, 0);
}
if (i == 1 ) {
fill(0, 50, 100, 300);
}
if (i == 2) {
fill(0, 165, 300, 200);
}
if (i == 3) {
fill(0, 50, 100, 300);
}
if (i == 4) {
fill(0, 50, 100, 300);
}
}
}
Because fill() was not called before the first text(). By the way, drawing code should reside in draw().
const words = ['rainbow', 'heart', 'purple', 'friendship', 'love'],
colors = [
[255, 0, 0],
[0, 50, 100, 300],
[0, 165, 300, 200],
[0, 50, 100, 300],
[0, 50, 100, 300],
];
let isMousePressed = false;
function setup() {
createCanvas(400, 400);
}
function draw() {
background(0);
textSize(32);
if (isMousePressed)
words.forEach((w, i) => {
fill.call(null, colors[i]);
text(w, 100, (i + 1) * 50);
});
}
function mousePressed() {
isMousePressed = true;
}
Credits for solving goes to #TimTimWong, I am just explaining a comment I made.
const words = [
{
word: 'rainbow',
colors: [255, 0, 0],
},
{
word: 'heart',
colors: [0, 50, 100, 300],
},
{
word: 'purple',
colors: [0, 165, 300, 200],
},
{
word: 'friendship',
colors: [0, 50, 100, 300],
},
{
word: 'love',
colors: [0, 50, 100, 300],
}
];
let isMousePressed = false;
function setup() {
createCanvas(400, 400);
}
function draw() {
background(0);
textSize(32);
if (isMousePressed) {
words.forEach(({ word, color }, i) => {
fill.call(null, color);
text(word, 100, (i + 1) * 50);
});
}
}
function mousePressed() {
isMousePressed = true;
}
I'm facing an issue where the hover label of multiple traces overlaps with the x-axis's hover label when all the trace values are close to 0.
In the example below, you can see the overlap when you mouseover x=1000
const data = []
const x = [100, 200, 300, 400, 500, 600, 700, 800, 900, 1000];
data.push({
x: x,
y: [100, 105, 132, 150, 130, 103, 2, 200, 301, 1],
});
data.push({
x: x,
y: [200, 205, 232, 250, 230, 193, 1, 100, 201, 0],
})
data.push({
x: x,
y: [0, 205, 232, 250, 230, 193, 10, 100, 0, 0],
})
const layout = {
height: 350,
xaxis: {
// tickformat: ',.2r',
},
hoverlabel: {
font: {
family: 'Helvetica Neue',
size: 11,
}
}
}
Plotly.plot('graph', data, layout);
<head>
<!-- Plotly.js -->
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>
<body>
<div id="graph"></div>
</body>
https://codepen.io/anon/pen/RBpQPg
Any workarounds would be appreciated. For example, would it be possible to combine all the hover labels into 1 label somehow?
I am new to C3 chart. I found the zoom functionality in the documentation for C3 . It will work for the mouse wheel scroll. But what I want is to implement the zoomin and zoomout in two seperate buttons. Can anyone direct me to the right track.
Thanks in advance.
Here below is an example of zoom in/out managed with buttons.
However unlike mouse wheel you have to decide which starting point to use.
var chart = c3.generate({
data: {
columns: [
['sample', 30, 200, 100, 400, 150, 250, 150, 200, 170, 240, 350, 150, 100, 400, 150, 250, 150, 200, 170, 240, 100, 150, 250, 150, 200, 170, 240, 30, 200, 100, 400, 150, 250, 150, 200, 170, 240, 350, 150, 100, 400, 350, 220, 250, 300, 270, 140, 150, 90, 150, 50, 120, 70, 40]
]
},
zoom: {
enabled: true,
rescale: true,
onzoom: function (domain) {
console.log("zoom", domain);
}
}
});
var zoom = 1;
var zoom_factor = 1.1;
var min = 0;
var max = chart.data()[0].values.length;
$("#zoom-in").click(function() {
if (zoom<5) zoom *= zoom_factor;
console.log("zoom-in", min, max, zoom);
chart.zoom([min, max/zoom]);
});
$("#zoom-out").click(function() {
if (zoom>1) zoom /= zoom_factor;
console.log("zoom-out", min, max, zoom);
chart.zoom([min, max/zoom]);
});
$("#zoom-reset").click(function() {
zoom = 1;
console.log("zoom-reset", min, max, zoom);
chart.zoom([min, max/zoom]);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<link href="https://rawgit.com/masayuki0812/c3/master/c3.css" rel="stylesheet"/>
<script src="https://rawgit.com/masayuki0812/c3/master/c3.js"></script>
<button id="zoom-in">zoom-in</button>
<button id="zoom-out">zoom-out</button>
<button id="zoom-reset">zoom-reset</button>
<div id="chart"></div>
Here is a a solution to this that works in conjonction with mouse whell and preserves current scroll position.
var chart = c3.generate({
data: {
columns: [
['sample', 30, 200, 100, 400, 150, 250, 150, 200, 170, 240, 350, 150, 100, 400, 150, 250, 150, 200, 170, 240, 100, 150, 250, 150, 200, 170, 240, 30, 200, 100, 400, 150, 250, 150, 200, 170, 240, 350, 150, 100, 400, 350, 220, 250, 300, 270, 140, 150, 90, 150, 50, 120, 70, 40]
]
},
zoom: {
enabled: true,
rescale: true,
onzoom: function (domain) {
console.log("zoom", domain);
}
}
});
var zoom_factor = 3;
var min = 0;
var max = chart.data()[0].values.length;
$("#zoom-in").click(function() {
const zoom = chart.zoom();
const newZoom = [zoom[0] + zoom_factor , zoom[1] - zoom_factor];
if (newZoom[1] - newZoom[0] > 0) chart.zoom(newZoom);
});
$("#zoom-out").click(function() {
const zoom = chart.zoom();
// Bound zoom to min and max
chart.zoom([Math.max(zoom[0] - zoom_factor, min), Math.min(zoom[1] + zoom_factor , max)]);
});
$("#zoom-reset").click(function() {
console.log("zoom-reset", min, max);
chart.zoom([min, max]);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.7.13/c3.min.css" media="screen" rel="stylesheet" type="text/css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.15.0/d3.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.7.13/c3.min.js" type="text/javascript"></script>
<button id="zoom-in">zoom-in</button>
<button id="zoom-out">zoom-out</button>
<button id="zoom-reset">zoom-reset</button>
<div id="chart"></div>
I need to have two red colors on my gauge, like this:
$scope.gauge1.options = {
width: 200,
height: 90,
redFrom: 0,
redTo: 10,
yellowFrom: 10,
yellowTo: 20,
greenFrom: 20,
greenTo: 30,
redFrom: 30,
redTo: 100,
minorTicks: 5
};
But when I duplicate the red color my first red color does not appear.
The same color does not appeat two times on the gauge.
There is some way to do it or add one more color to the gauge?
Thanks!
use the overlapping colors
https://jsfiddle.net/cenee32j/
$scope.gauge1.options = {
width: 200,
height: 90,
redFrom: 30,
redTo: 60,
greenFrom: 0,
greenTo: 100,
yellowFrom:10,
yellowTo: 90,
minorTicks: 5
};