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;
}
Related
I writed 3 functions for drawing line and rectangle and a function for animated circle. But I can't render all this together. if i render line and rectangle are working very well ,or i render only (animate function) its working . if i render all this functions together there are not working and It gives me lots of errors(The number of errors is increasing) from inside the functions I wrote, which I am sure are correct. I think the problem is related to writing uselayoutٍEffect dependencies. what can i do for having this all functions together?
import React, { useRef, useLayoutEffect, useEffect, useState, } from 'react'
import rough from "roughjs/bundled/rough.esm";
const Canvas = () => {
const canvasRef = useRef(null);
const ctxRef = useRef(null);
var circleArray = [];
const [RC, setRC] = useState(null)
useLayoutEffect(() => {
const canvas = document.getElementById("Canvas");
const ctx = canvas.getContext("2d");
console.log(ctx);
ctxRef.current = ctx;
canvasRef.current.width = window.innerWidth - 10;
canvasRef.current.height = window.innerHeight;
console.log(ctxRef.current);
const roughCanvas = rough.canvas(canvasRef.current);
setRC(roughCanvas)
animate();
// rect(roughCanvas);
// Line(roughCanvas);
}, [setRC,animate])
function animate() {
requestAnimationFrame(animate);
ctxRef.current.clearRect(0, 0, canvasRef.current.width, canvasRef.current.height);
// circle.update();
for (var i = 0; i < circleArray.length; i++) {
circleArray[i].update();
}
rect(RC);
Line(RC);
}
function rect(roughCanvas) {
roughCanvas.rectangle(350, 100, 100, 100, { roughness: 2.8, stroke: "#0077b6", fill: "#0077b6" })
roughCanvas.path('M80 80 A 45 45, 0, 0, 0, 125 125 L 125 80 Z', { fill: 'green', stroke: 'green' });
roughCanvas.path('M230 80 A 45 45, 0, 1, 0, 275 125 L 275 80 Z', { fill: 'purple', stroke: 'purple' });
roughCanvas.path('M80 230 A 45 45, 0, 0, 1, 125 275 L 125 230 Z', { fill: 'red', stroke: 'red' });
roughCanvas.path('M230 230 A 45 45, 0, 1, 1, 275 275 L 275 230 Z', { fill: 'blue', stroke: 'blue' });
roughCanvas.rectangle(100, 300, 100, 100, { roughness: 2.8, stroke: "#57cc99", fill: "#57cc99" })
roughCanvas.path('M230 70 A 90 40, 5, 10, 5, 120 20 L 125 20 Z', { fill: 'red', stroke: 'red' });
roughCanvas.rectangle(400, 400, 100, 100, { roughness: 2.8, stroke: "#b392ac", fill: "#b392ac" })
roughCanvas.rectangle(900, 30, 100, 100, { roughness: 2.8, stroke: "#4ecdc4", fill: "#4ecdc4" })
roughCanvas.rectangle(1200, 100, 100, 100, { roughness: 2.8, stroke: "#d4d700", fill: "#d4d700" })
roughCanvas.rectangle(1000, 300, 100, 100, { roughness: 2.8, stroke: "#ff206e", fill: "#ff206e" })
roughCanvas.rectangle(1300, 400, 100, 100, { roughness: 2.8, stroke: "#affc41", fill: "#affc41" })
roughCanvas.rectangle(650, 125, 100, 100, { roughness: 2.8, stroke: "#b392ac", fill: "#b392ac" })
roughCanvas.rectangle(600, 300, 100, 100, { roughness: 2.8, stroke: "#ff206e", fill: "#ff206e" })
roughCanvas.rectangle(600, 300, 100, 100, { roughness: 2.8, stroke: "#ff206e", fill: "#ff206e" })
roughCanvas.rectangle(900, 450, 100, 100, { roughness: 2.8, stroke: "#d4d700", fill: "#d4d700" })
roughCanvas.rectangle(1100, 500, 100, 100, { roughness: 2.8, stroke: "#e76f51", fill: "#e76f51" })
roughCanvas.rectangle(650, 450, 100, 100, { roughness: 2.8, stroke: "#386641", fill: "#386641" })
roughCanvas.rectangle(100, 550, 100, 100, { roughness: 2.8, stroke: "#540d6e", fill: "#540d6e" })
}
function Line(roughCanvas) {
roughCanvas.line(80, 120, 300, 100, { stroke: "#0f4c5c", fill: "#0f4c5c" });
roughCanvas.line(120, 220, 500, 600, { stroke: "#0f4c5c", fill: "#0f4c5c" });
roughCanvas.line(45, 80, 800, 600, { stroke: "#0f4c5c", fill: "#0f4c5c" });
roughCanvas.line(300, 100, 45, 100, { stroke: "#0f4c5c", fill: "#0f4c5c" });
roughCanvas.line(250, 45, 150, 250, { stroke: "#0f4c5c", fill: "#0f4c5c" });
roughCanvas.line(500, 320, 300, 100, { stroke: "#0f4c5c", fill: "#0f4c5c" });
roughCanvas.line(590, 460, 20, 400, { stroke: "#0f4c5c", fill: "#0f4c5c" });
roughCanvas.line(750, 550, 900, 200, { stroke: "#0f4c5c", fill: "#0f4c5c" });
roughCanvas.line(750, 250, 1000, 20, { stroke: "#0f4c5c", fill: "#0f4c5c" });
roughCanvas.line(450, 250, 1000, 90, { stroke: "#0f4c5c", fill: "#0f4c5c" });
roughCanvas.line(450, 600, 1200, 300, { stroke: "#0f4c5c", fill: "#0f4c5c" });
roughCanvas.line(950, 600, 300, 550, { stroke: "#0f4c5c", fill: "#0f4c5c" });
roughCanvas.line(400, 300, 600, 450, { stroke: "#0f4c5c", fill: "#0f4c5c" });
roughCanvas.line(1300, 300, 400, 450, { stroke: "#0f4c5c", fill: "#0f4c5c" });
roughCanvas.line(1500, 200, 800, 150, { stroke: "#0f4c5c", fill: "#0f4c5c" });
roughCanvas.line(1500, 300, 800, 250, { stroke: "#0f4c5c", fill: "#0f4c5c" });
roughCanvas.line(1500, 100, 800, 350, { stroke: "#0f4c5c", fill: "#0f4c5c" });
roughCanvas.line(1500, 400, 800, 150, { stroke: "#0f4c5c", fill: "#0f4c5c" });
roughCanvas.line(1500, 500, 800, 250, { stroke: "#0f4c5c", fill: "#0f4c5c" });
roughCanvas.line(1500, 150, 800, 350, { stroke: "#0f4c5c", fill: "#0f4c5c" });
roughCanvas.line(1500, 250, 800, 350, { stroke: "#0f4c5c", fill: "#0f4c5c" });
roughCanvas.line(1500, 550, 800, 550, { stroke: "#0f4c5c", fill: "#0f4c5c" });
roughCanvas.line(1500, 550, 800, 550, { stroke: "#0f4c5c", fill: "#0f4c5c" });
}
const arcColor = ["#f07167", "#0077b6", "#57cc99", "#b392ac", "#4ecdc4", "#d4d700", "#ff206e", "#affc41"]
var count = 0;
function Circle(x, y, dx, dy, radius, colorcircle) {
this.x = x;
this.y = y;
this.dx = dx;
this.dy = dy;
this.radius = radius;
this.colorcircle = colorcircle;
this.draw = function () {
ctxRef.current.beginPath();
ctxRef.current.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false);
// console.log(count%2===0);
if (count % 2 === 0) {
ctxRef.current.fill();
ctxRef.current.fillStyle = colorcircle;
}
else {
ctxRef.current.strokeStyle = colorcircle;
}
count += 1;
ctxRef.current.stroke();
}
// this.update();
this.update = function () {
if (this.x + this.radius > window.innerWidth || this.x - this.radius < 0) {
this.dx = -this.dx;
}
if (this.y + this.radius > window.innerHeight || this.y - this.radius < 0) {
this.dy = -this.dy;
}
this.x += this.dx;
this.y += this.dy;
this.draw();
}
}
for (var i = 0; i < 70; i++) {
var radius = 30;
var dx = (Math.random() - 0.5) * 2;
var dy = (Math.random() - 0.5) * 2;
var x = Math.random() * (window.innerWidth - radius * 2) + radius;
var y = Math.random() * (window.innerHeight - radius * 2) + radius;
var arcColorcount = Math.floor((Math.random() * 8) + 1);
var colorcircle = arcColor[arcColorcount];
circleArray.push(new Circle(x, y, dx, dy, radius, colorcircle))
}
const width = (window.innerWidth - 30)
const height = (window.innerHeight)
return (
<canvas
ref={canvasRef}
id='Canvas'
>
</canvas>
)
}
export default Canvas
I have been making a simple platformer using phaser 3. The level is designed with a tile map from an array and the only sprite is the player itself. When the player presses the right arrow key the x velocity of the player increases. What I would like to do is have friction between the ground and the player so that our player stops once they let go of the key. I know that you can do this with other sprites but can you do it with tilemaps?
With arcade physics it is abit difficult to do this (or more or less impossible). I personally would fake the friction by setting a callback with the method map.setTileLocationCallback, this callback sets the drag of the player (or if you have multiple layers, you could even define a layer for this case).
With matter physics engine it should be possible, checkout this demo and/or the documentation.
Here is a short Demo for arcade physics:
In this small demo, the player is moved with the cursor-keys.
(the player should slide less on the left side = more friction)
document.body.style = 'margin:0;';
let player;
let cursors;
let playerStateText;
let config = {
type: Phaser.AUTO,
width: 12 * 16,
height: 6 * 16,
zoom: 2,
physics: {
default: 'arcade',
arcade: {
gravity: { y: 100 },
debug: true
}
},
scene: { create, preload, update },
banner: false
};
function preload () {
this.load.image('mario-tiles', 'https://labs.phaser.io/assets/tilemaps/tiles/super-mario.png');
}
function create () {
playerStateText = this.add.text(10, 10, 'Playerstate: ???', {color: '#ffffff', fontSize: 10})
.setDepth(10);
// Load a map from a 2D array of tile indices
let level = [
[ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 ],
[ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 ],
[ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 ],
[ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 ],
[ 35, 36, 37, 0, 0, 0, 0, 0, 0, 0, 0, 0 ],
[ 39, 39, 39, 39, 39, 39, 14, 14, 14, 14, 14, 14 ]
];
// When loading from an array, make sure to specify the tileWidth and tileHeight
let map = this.make.tilemap({ data: level, tileWidth: 16, tileHeight: 16 });
let tiles = map.addTilesetImage('mario-tiles');
let layer = map.createLayer(0, tiles, 0, 0);
map.setCollision([ 39, 14], true, true, layer);
player = this.add.rectangle(10, 10, 8, 8, 0xffffff);
this.physics.add.existing(player);
player.body.setCollideWorldBounds(true);
// Just to be sure that the player doesn't get too fast
player.body.setMaxSpeed(160);
// Tweak this value to define how far/long the player should slide
player.body.setDrag(120, 0);
this.physics.add.collider(player, layer);
map.setTileLocationCallback(0, 4, 6, 1, _ => player.body.setDrag(1000, 0) )
map.setTileLocationCallback(6, 4, 6, 1, _ => player.body.setDrag(100, 0) )
cursors = this.input.keyboard.createCursorKeys();
}
function update(){
let currentState = 'Playerstate: running';
if (cursors.left.isDown){
player.body.setAccelerationX(-160);
} else if (cursors.right.isDown) {
player.body.setAccelerationX(160);
}
else {
player.body.setAccelerationX(0);
if(Math.abs(player.body.velocity.x) > 3) {
currentState = 'Playerstate: sliding';
} else if(Math.abs(player.body.velocity.y) > 3) {
currentState = 'Playerstate: falling';
} else {
currentState = 'Playerstate: stopped';
}
}
if(player.x > 400){
player.x = -20;
}
if(player.x < -20){
player.x = 400;
}
playerStateText.setText(currentState);
}
new Phaser.Game(config);
<script src="//cdn.jsdelivr.net/npm/phaser#3.55.2/dist/phaser.js"></script>
I get an array of polygons from a database. Each shape may be a triangle, a rectangle, a square, or any polygon.
I want to draw text at the center of each polygon. Font size must be dynamic according to the size of each polygon. Text color should match the line color.
Example from database:
Here is my code:
var polygons = [
{
text: "ROI", color: "#00ff00",
jointLength: 5, lineWidth: 3,
X: [890, 893, 409, 21, 27], Y: [658, 205, 199, 556, 659],
}, {
text: "Lane 3", color: "#ff0000",
jointLength: 4, lineWidth: 3,
X: [915, 911, 643, 879], Y: [5, 682, 683, 2],
}, {
text: "Lane 4", color: "#ff0000",
jointLength: 4, lineWidth: 3,
X: [888, 656, 170, 701], Y: [2, 680, 682, 1],
}, {
text: "Lane 5", color: "#ff0000",
jointLength: 5, lineWidth: 3,
X: [712, 182, 4, 4, 590], Y: [1, 681, 682, 532, 1],
}, {
text: "Speed", color: "#0000ff",
jointLength: 4, lineWidth: 3,
X: [290, 911, 873, 5], Y: [367, 357, 668, 664],
}
];
polygons.forEach((polygon) => {
const ctx = document.getElementById("canvas").getContext("2d");
ctx.strokeStyle = polygon.color;
ctx.lineWidth = polygon.lineWidth;
ctx.beginPath();
ctx.moveTo(polygon.X[0], polygon.Y[0]);
for (let i = 1; i < polygon.jointLength; i++) {
ctx.lineTo(polygon.X[i], polygon.Y[i]);
}
ctx.closePath();
ctx.stroke();
});
<canvas id="canvas" width=999 height=999></canvas>
Explanation of main logic:
The center of polygon I calculated by the formula of the arithmetic mean
The size of font I calculated by getting the width of text with font-size = 300 (but you can change the first check size as you want) and then check if text with is more than the smallest distance between 2 nearest dots (I think that this is good limit if text will be at the center of polygon). If yes then I start to find correct font-size with binary search algorithm
Because of this logic the text in second polygon is smaller than it can be because we have 2 dots at the top which are very close to each other
There is a code (open in full page for better visibility):
const polygons = [
{
text: "ROI",
color: "red",
jointLength: 5,
lineWidth: 3,
X: [890, 893, 409, 21, 27],
Y: [658, 205, 199, 556, 659],
},
{
text: "Lane 3",
color: "blue",
jointLength: 4,
lineWidth: 3,
X: [915, 911, 643, 879],
Y: [5, 682, 683, 2],
},
{
text: "Lane 4",
color: "green",
jointLength: 4,
lineWidth: 3,
X: [888, 656, 170, 701],
Y: [2, 680, 682, 1],
},
{
text: "Lane 5",
color: "orange",
jointLength: 5,
lineWidth: 3,
X: [712, 182, 4, 4, 590],
Y: [1, 681, 682, 532, 1],
},
{
text: "Speed",
color: "purple",
jointLength: 4,
lineWidth: 3,
X: [290, 911, 873, 5],
Y: [367, 357, 668, 664],
},
];
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext("2d");
canvas.width = 1000;
canvas.height = 1000;
class Polygon {
#ctx;
#dots = [];
#text;
#color;
#lineWidth;
#dotsCount;
constructor(ctx, data) {
this.#ctx = ctx;
this.#text = data.text;
this.#color = data.color;
this.#lineWidth = data.lineWidth;
this.#dotsCount = data.jointLength;
for (let i = 0; i < this.#dotsCount; ++ i) {
this.#dots.push({x: data.X[i], y: data.Y[i]})
}
}
#getCenterCoords() {
const x = this.#dots.reduce((sum, dot) => sum += dot.x, 0) / this.#dotsCount;
const y = this.#dots.reduce((sum, dot) => sum += dot.y, 0) / this.#dotsCount;
return {x, y};
}
#distance = (dot1, dot2) => Math.sqrt((dot1.x - dot2.x) ** 2 + (dot1.y - dot2.y) ** 2);
#getMinimalDistanceBetweenDots() {
let minDist = Infinity;
for (let i = 0; i < this.#dotsCount; ++i) {
const dot1 = this.#dots[i];
for (let j = i + 1; j < this.#dotsCount; ++j) {
const dot2 = this.#dots[j];
const dist = this.#distance(dot1, dot2);
if (dist < minDist) minDist = dist;
}
}
return minDist;
}
#getTextSize() {
const minAvailableWidth = this.#getMinimalDistanceBetweenDots();
let rightBound = 300;
let leftBound = 0;
let fontSize = rightBound;
while (rightBound - leftBound > 1) {
fontSize = Math.round((leftBound + rightBound) / 2);
this.#ctx.font = `${fontSize}px verdana`;
const textSize = this.#ctx.measureText(this.#text).width;
if (textSize > minAvailableWidth) {
rightBound = fontSize;
continue;
}
if (textSize < minAvailableWidth) {
leftBound = fontSize;
continue;
}
if (textSize === minAvailableWidth) {
break;
}
}
return fontSize;
}
draw() {
const path = new Path2D();
const firstDot = this.#dots[0];
const center = this.#getCenterCoords();
this.#dots.forEach(dot => path.lineTo(dot.x, dot.y));
path.lineTo(firstDot.x, firstDot.y);
this.#ctx.strokeStyle = this.#color;
this.#ctx.lineWidth = this.#lineWidth;
this.#ctx.lineCap = 'round';
this.#ctx.lineJoin = 'round';
this.#ctx.stroke(path);
this.#ctx.font = `${this.#getTextSize()}px verdana`;
this.#ctx.fillStyle = this.#color;
this.#ctx.textAlign = 'center';
this.#ctx.fillText(this.#text, center.x, center.y);
}
}
polygons.forEach((polygon) => new Polygon(ctx, polygon).draw());
<canvas id="canvas"></canvas>
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
);
}
i want to make a textbox and a dropdown list together. when i run code it executes only one(either that textbox or dropdown)
here's my code:
let button;
let sel;
let sel2;
var text;
var x = 10;
var y = 230;
var img;
function setup() {
createCanvas(windowWidth, 600);
background(0);
img = loadImage("audi.jpg");
sel = createSelect();
sel.position(20, 150);
sel.option('FERARI');
sel.option('MERCEDES');
sel.option('TOYOTA');
sel.option('AUDI');
sel.option('BMW');
sel2 = createSelect();
sel2.position(300, 150);
sel2.option('FERARI');
sel2.option('MERCEDES');
sel2.option('TOYOTA');
sel2.option('AUDI');
sel2.option('BMW');
button = createButton('COMPARE');
button.position(550, 150);
button.mousePressed(display);
text = createInput();
text.pos(300, 300);
}
function display() {
textSize(16);
fill(255, 215, 0);
let index = sel.value();
text(index, 20, 430);
let number = sel2.value();
text(number, 300, 430);
if(sel.value() === 'BMW') {
text('MILEAGE: 14-20 km/l', 20, 460);
text('COST: 41.7-48.5 LAKH', 20, 490);
text('FUEL TYPE: PREMIUM FUEL', 20, 520);
}
if(sel.value() === 'AUDI') {
text('MILEAGE: 9 km/l', 20, 460);
text('COST: 1.345 CORE', 20, 490);
text('FUEL TYPE: PETROL', 20, 520);
}
if(sel.value() === 'FERARI') {
text('MILEAGE: 9 km/l', 20, 460);
text('COST: 3.5 CORE', 20, 490);
text('FUEL TYPE: PETROL', 20, 520);
}
if(sel.value() === 'MERCEDES BENZ C CLASS') {
text('MILEAGE: 10-19 km/l', 20, 460);
text('COST: 40.9 LAKHS', 20, 490);
text('FUEL TYPE: UNLEADED FUEL', 20, 520);
}
if(sel.value() === 'TOYOTA') {
text('MILEAGE: 7-10 km/l', 20, 460);
text('COST: 28.66-36.88 LAKH', 20, 490);
text('FUEL TYPE: MID GRADE GASOLINE', 20, 520);
}
if(sel2.value() === 'AUDI') {
text('MILEAGE: 9 km/l', 300, 460);
text('COST: 1.345 CORE', 300, 490);
text('FUEL TYPE: PETROL', 300, 520);
}
if(sel2.value() === 'BMW') {
text('MILEAGE: 14-20 km/l', 300, 460);
text('COST: 41.7-48.5 LAKH', 300, 490);
text('FUEL TYPE: PREMIUM FUEL', 300, 520);
}
if(sel2.value() === 'TOYOTA') {
text('MILEAGE: 7-10 km/l', 300, 460);
text('COST: 28.66-36.88 LAKH', 300, 490);
text('FUEL TYPE: MID GRADE GASOLINE', 300, 520);
}
if(sel2.value() === 'FERARI') {
text('MILEAGE: 9 km/l', 300, 460);
text('COST: 3.5 CORE', 300, 490);
text('FUEL TYPE: PETROL', 300, 520);
}
if(sel2.value() === 'MERCEDES BENZ C CLASS') {
text('MILEAGE: 10-19 km/l', 300, 460);
text('COST: 40.9 LAKHS', 300, 490);
text('FUEL TYPE: UNLEADED FUEL', 300, 520);
}
}
(don't laugh at the design.)
when i do some arranging, then sometimes the textbox appears and when i click the compare button nothing happens.
pls help and thnx in advance.
There are two problems in your code.
You have a variable named var text. Because p5.js is already using that name for a function, you have to rename it to something like var textBox. (Don't forget to change the lines in your setup() as well)
textBox.pos() is not a valid function. Change it to textBox.position();