I've recently stared coding a js/html canvas file and I've noticed a big problem that I cannot solve. The problem is that the LiverSever extension suddenly stopped working. What I mean by this is out of random it just stopped working. When I try to open it, it opens in the browser but keeps on loading. I have tried many fixes but none of them seem to work. The html port "link" is," http://127.0.0.1:49423/index.html" So I was wondering if I could get some help?
html code below:
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Canvas</title>
<style>
canvas {
border: 1px solid lightyellow;
background: lightyellow;
}
body {
margin: 0;
}
.tooltip {
width: 100px;
position: absolute;
top: auto;
bottom: 800px;
right: 887px;
left: auto;
font-size: xx-large;
}
</style>
</head>
<body>
<canvas></canvas>
<script src="Main_Game.js">
</script>
<div class="tooltip">Money:
<script type="text/javascript">document.write(Moneys)</script>
</div>
</body>
</html>
js code:
var canvas = document.querySelector('canvas');
canvas.width = 1920;
canvas.height = 1080;
var middlex = canvas.width/2;
console.log(middlex + " - x");
var middley = canvas.height/2;
console.log(middley + " - y");
console.log(canvas);
var c = canvas.getContext('2d');
c.fillStyle = 'rgba(255,0,0)';
c.fillRect(25,540,940,250);
c.fillRect(25, 815, 940,250);
c.fillRect(985,540,915,250);
c.fillRect(985,815,915,250);
c.beginPath();
c.arc(200, 200, 30, 0, Math.PI*2, false);
c.strokeStyle = 'blue';
c.stroke();
var Moneys = 0;
while (true) {
Moneys += 1;
}
I do not know how to delete. I figured out that the name for the html was not the same as the js file
I am trying to draw something like shown below with Javascript and wondering how I can accomplish this.
Obviously to draw a circle, I can do:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>shapes demo</title>
</head>
<body>
<canvas class="canvas" width="400" height="200"></canvas><br />
<button class="btn">draw</button>
<script>
let canvas = document.querySelector(".canvas");
let btn = document.querySelector(".btn");
btn.addEventListener("click", () => {
var circle = canvas.getContext("2d");
circle.beginPath();
circle.arc(180, 100, 90, 0, 2 * Math.PI);
circle.stroke();
});
</script>
</body>
</html>
I am wondering maybe there is some existing drawing library, etc. which would make this easier. Any advice would be helpful. Thanks!
*I want to write some code for visualizing a few data structures. If you are wondering why anyone would want to do this 😜
Edit
I think actually, just having a way to draw a curved arrow joining two strings is enough. It is easy to draw a partial circle, but I am not sure how to add text at the end of the partial circle or add an arrow tip to the end of the partial circle.
First, I separated the circle into 4 different arcs. Second, I added the numbers. And third, using some trig, added an “arrow” function to create an arrow at a certain angle around the circle.
And here’s the finished product:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>shapes demo</title>
</head>
<body>
<canvas class="canvas" width="400" height="200"></canvas><br />
<button class="btn">draw</button>
<script>
function arrow (ang) {
circle.save();
circle.translate(180+70*Math.cos(ang), 100+70*Math.sin(ang));
circle.rotate(ang);
circle.beginPath();
circle.moveTo(-5, -5);
circle.lineTo(0, 0);
circle.lineTo(5, -5);
circle.stroke();
circle.restore();
}
let canvas = document.querySelector(".canvas");
var circle = canvas.getContext("2d");
let btn = document.querySelector(".btn");
btn.addEventListener("click", () => {
circle.beginPath();
circle.arc(180, 100, 70, Math.PI*7/12, Math.PI*11/12); // bottom left
circle.stroke();
circle.beginPath();
circle.arc(180, 100, 70, Math.PI*13/12, Math.PI*17/12); // top left
circle.stroke();
circle.beginPath();
circle.arc(180, 100, 70, Math.PI*19/12, Math.PI*23/12); // top right
circle.stroke();
circle.beginPath();
circle.arc(180, 100, 70, Math.PI*1/12, Math.PI*5/12); // bottom right
circle.stroke();
circle.beginPath();
circle.textAlign = 'center';
circle.textBaseline = 'middle';
circle.font = '20px Arial';
circle.fillText('1', 180, 30);
circle.fillText('2', 250, 100);
circle.fillText('3', 180, 170);
circle.fillText('4', 110, 100);
arrow(Math.PI*11/12);
arrow(Math.PI*17/12);
arrow(Math.PI*23/12);
arrow(Math.PI*5/12);
});
</script>
</body>
</html>
Interested in CSS arrows? ...you just need to add some more modifiers to position/rotate them well to your needs - I did three of them ready for you - all pointing the position which you state in style="left:0px;top:0px" next to the html tags:
.content {
position:relative;
width: 100%;
height: 800px;
border:1px solid red;
}
/* modifiers */
.arrow.left-from-up {
margin: -160px 0 0 120px;
transform: rotate(90deg);
}
.arrow.left-from-bottom {
margin: -160px 0 0 120px;
transform: rotate(90deg) scaleX(-1);
}
.arrow.up-from-left {
transform: rotate(180deg);
margin: 0 0 0 -20px;
}
/* Arrow */
.arrow {
position: absolute;
transform-origin: 50% 50%;
margin: 0;
width: 100px;
pointer-events:none;
}
.arrow .curve {
border: 2px solid #BE5F4B;
border-color: transparent transparent transparent #BE5F4B;
height: 360px;
width: 1200px;
border-radius: 230px 0 0 150px;
}
.arrow .point {
position: absolute;
left: 40px;
top: 315px;
}
.arrow .point:before, .arrow .point:after {
border: 1px solid #BE5F4B;
height: 25px;
content: "";
position: absolute;
}
.arrow .point:before {
top: -11px;
left: -11px;
transform:rotate(-74deg);
-webkit-transform:rotate(-74deg);
-moz-transform:rotate(-74deg);
-ms-transform: rotate(-74deg);
}
.arrow .point:after {
top: -20px;
left: 5px;
transform:rotate(12deg);
-webkit-transform: rotate(12deg);
-moz-transform:rotate(12deg);
-ms-transform: rotate(12deg);
}
<div class="content">
<div class="arrow left-from-up" style="left:0;top:50px;">
<div class="curve"></div>
<div class="point"></div>
</div>
<div class="arrow left-from-bottom" style="left:0;top:90px">
<div class="curve"></div>
<div class="point"></div>
</div>
<div class="arrow up-from-left" style="left:0;top:110px">
<div class="curve"></div>
<div class="point"></div>
</div>
</div>
original code found here: https://codepen.io/zomgbre/pen/kmCsp
Basically lol cant add videos here but with the default html color picker you can move the color picker dot if mouse is down off the colors box boundries and it moves agains the edge of the boundries but with mine it just stops moving and doesnt do good when i move the mouse fast.
I am trying to create a custom color picker where you have a slider of colors, then you have the box of the color selected and you can change the whiteness and darkness of it like this here (Like adobe xdcc color picker):
Adobe xdcc color picker example
[The code below creates this here][2]
You can drag the little color picker circle and it changes the selected color but when using canvas I can't have to color picker circle moving around the edges when the mouse leaves the canvas which i would like to change.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
<script src="app.js" defer></script>
</head>
<body>
<h2>Let's Create a Color Picker</h2>
<div class="container">
<canvas id="color-picker"></canvas>
<div class="info">
<h3>Selected Color</h3>
<div class="selected"></div>
</div>
</div>
</body>
</html>
CSS:
html, body {
width: 100%;
height: 100%;
font-family: Oxygen, sans-serif;
text-align: center; }
.container {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center; }
#color-picker {
border: .5px solid rgba(15, 15, 15, 0.2); }
.info {
width: 12em;
display: flex;
margin-left: 4em;
flex-direction: row;
justify-content: space-between; }
.selected {
width: 50px;
height: 50px;
border-radius: 100%;
border: 2px solid rgba(15, 15, 15, 0.2); }
JS:
class Picker {
constructor(target, width, height) {
this.target = target;
this.width = width;
this.height = height;
this.target.width = width;
this.target.height = height;
// Get context
this.context = this.target.getContext("2d");
// Circle
this.pickerCircle = { x: 10, y: 10, width: 10, height: 10 };
this.listenForEvents();
}
draw() {
}
build() {
let gradient = this.context.createLinearGradient(0, 0, this.width, 0);
//Color Stops
gradient.addColorStop(0, "rgb(255, 0, 0)");
gradient.addColorStop(0.15, "rgb(255, 0, 255)");
gradient.addColorStop(0.33, "rgb(0, 0, 255)");
gradient.addColorStop(0.49, "rgb(0, 255, 255)");
gradient.addColorStop(0.67, "rgb(0, 255, 0)");
gradient.addColorStop(0.84, "rgb(255, 255, 0)");
gradient.addColorStop(1, "rgb(255, 0, 0)");
//Fill it
this.context.fillStyle = gradient;
this.context.fillRect(0, 0, this.width, this.height);
//Apply black and white
gradient = this.context.createLinearGradient(0, 0, 0, this.height);
gradient.addColorStop(0, "rgba(255, 255, 255, 1)");
gradient.addColorStop(0.5, "rgba(255, 255, 255, 0)");
gradient.addColorStop(0.5, "rgba(0, 0, 0, 0)");
gradient.addColorStop(1, "rgba(0, 0, 0, 1)");
this.context.fillStyle = gradient;
this.context.fillRect(0, 0, this.width, this.height);
//Circle
this.context.beginPath();
this.context.arc(this.pickerCircle.x, this.pickerCircle.y, this.pickerCircle.width, 0, Math.PI * 2);
this.context.strokeStyle = "black";
this.context.stroke();
this.context.closePath();
}
listenForEvents() {
let isMouseDown = false;
const onMouseDown = (e) => {
this.build();
let currentX = e.clientX - this.target.offsetLeft;
let currentY = e.clientY - this.target.offsetTop;
this.pickerCircle.x = currentX;
this.pickerCircle.y = currentY;
isMouseDown = true;
}
const onMouseMove = (e) => {
if(isMouseDown) {
this.build();
let currentX = e.clientX - this.target.offsetLeft;
let currentY = e.clientY - this.target.offsetTop;
this.pickerCircle.x = currentX;
this.pickerCircle.y = currentY;
}
}
const onMouseUp = () => {
isMouseDown = false;
}
//Register
this.target.addEventListener("mousedown", onMouseDown);
this.target.addEventListener("mousemove", onMouseMove);
this.target.addEventListener("mousemove", () => this.onChangeCallback(this.getPickedColor()));
document.addEventListener("mouseup", onMouseUp);
}
getPickedColor() {
let imageData = this.context.getImageData(this.pickerCircle.x, this.pickerCircle.y, 1, 1);
return { r: imageData.data[0], g: imageData.data[1], b: imageData.data[2] };
}
onChange(callback) {
this.onChangeCallback = callback;
}
}
let picker = new Picker(document.getElementById("color-picker"), 250, 220); picker.build();
picker.onChange((color) => {
let selected = document.getElementsByClassName("selected")[0];
selected.style.backgroundColor = `rgb(${color.r}, ${color.g}, ${color.b})`; });
[1]: https://i.stack.imgur.com/MQsjs.png
[2]: https://i.stack.imgur.com/krEYa.png
Thanks in advance!
the solution is simple, dont use the if(isMouseDown){..}, because that will make your code very unresponsive, so what I did is that I declared a varable let i = 0; then on the onMouseDown, whenever that function is called, it will increment the value of i and I changed the onMouseMove from if(isMouseDown){..} to if(i % 2 === 0){..} heres my solution:
class Picker {
constructor(target, width, height) {
this.target = target;
this.width = width;
this.height = height;
this.target.width = width;
this.target.height = height;
//Get context
this.context = this.target.getContext("2d");
//Circle
this.pickerCircle = { x: 10, y: 10, width: 10, height: 10 };
this.listenForEvents();
}
draw() {
}
build() {
let gradient = this.context.createLinearGradient(0, 0, this.width, 0);
//Color Stops
gradient.addColorStop(0, "rgb(255, 0, 0)");
gradient.addColorStop(0.15, "rgb(255, 0, 255)");
gradient.addColorStop(0.33, "rgb(0, 0, 255)");
gradient.addColorStop(0.49, "rgb(0, 255, 255)");
gradient.addColorStop(0.67, "rgb(0, 255, 0)");
gradient.addColorStop(0.84, "rgb(255, 255, 0)");
gradient.addColorStop(1, "rgb(255, 0, 0)");
//Fill it
this.context.fillStyle = gradient;
this.context.fillRect(0, 0, this.width, this.height);
//Apply black and white
gradient = this.context.createLinearGradient(0, 0, 0, this.height);
gradient.addColorStop(0, "rgba(255, 255, 255, 1)");
gradient.addColorStop(0.5, "rgba(255, 255, 255, 0)");
gradient.addColorStop(0.5, "rgba(0, 0, 0, 0)");
gradient.addColorStop(1, "rgba(0, 0, 0, 1)");
this.context.fillStyle = gradient;
this.context.fillRect(0, 0, this.width, this.height);
//Circle
this.context.beginPath();
this.context.arc(this.pickerCircle.x, this.pickerCircle.y, this.pickerCircle.width, 0, Math.PI * 2);
this.context.strokeStyle = "black";
this.context.stroke();
this.context.closePath();
}
listenForEvents() {
let isMouseDown = true;
let i =0;
const onMouseDown = (e) => {
this.build();
isMouseDown = true
i++
let currentX = e.clientX - this.target.offsetLeft;
let currentY = e.clientY - this.target.offsetTop;
this.pickerCircle.x = currentX;
this.pickerCircle.y = currentY;
}
const onMouseMove = (e) => {
if(i%2 == 0) {
this.build();
let currentX = e.clientX - this.target.offsetLeft;
let currentY = e.clientY - this.target.offsetTop;
this.pickerCircle.x = currentX;
this.pickerCircle.y = currentY;
}
}
const onMouseUp = () => {
isMouseDown = false;
}
//Register
this.target.addEventListener("mousedown", onMouseDown);
this.target.addEventListener("mousemove", onMouseMove);
this.target.addEventListener("mousemove", () => this.onChangeCallback(this.getPickedColor()));
document.addEventListener("mouseup", onMouseUp);
}
getPickedColor() {
let imageData = this.context.getImageData(this.pickerCircle.x, this.pickerCircle.y, 1, 1);
return { r: imageData.data[0], g: imageData.data[1], b: imageData.data[2] };
}
onChange(callback) {
this.onChangeCallback = callback;
}
}
let picker = new Picker(document.getElementById("color-picker"), 250, 220); picker.build();
picker.onChange((color) => {
let selected = document.getElementsByClassName("selected")[0];
selected.style.backgroundColor = `rgb(${color.r}, ${color.g}, ${color.b})`; });
html, body {
width: 100%;
height: 100%;
font-family: Oxygen, sans-serif;
text-align: center; }
.container {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center; }
#color-picker {
border: .5px solid rgba(15, 15, 15, 0.2); }
.info {
width: 12em;
display: flex;
margin-left: 4em;
flex-direction: row;
justify-content: space-between; }
.selected {
width: 50px;
height: 50px;
border-radius: 100%;
border: 2px solid rgba(15, 15, 15, 0.2); }
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
<script src="app.js" defer></script>
</head>
<body>
<h2>Let's Create a Color Picker</h2>
<div class="container">
<canvas id="color-picker"></canvas>
<div class="info">
<h3>Selected Color</h3>
<div class="selected"></div>
</div>
</div>
</body>
</html>
I'm a beginner to p5js and code in general. I'm working on a (hopefully) interactive website for one of my classes that uses two separate sketches that are controlled by the DOM. I think that the 3D and 2D rendering modes are fighting each other. Both of the sketches work perfectly separate from one another. I get this error message in Chrome developer "p5.js:16124 Uncaught not supported in p2d. Please use webgl mode". Here is my code:
HTML
<html>
<head>
<meta charset="UTF-8">
<script language="javascript" type="text/javascript" src="libraries/p5.js"></script>
<script language="javascript" src="libraries/p5.dom.js"></script>
<script language="javascript" type="text/javascript" src="sketch.js"></script>
<script language="javascript" type="text/javascript" src="sketch2.js"></script>
<style> body {padding: 0; margin: 0;} </style>
</head>
<body>
<div id="text" style="background: none; position: absolute; color: white; font-family: avenir,sans-serif; width: 250px; margin-left: 140px; margin-top: 50px; line-height: 15pt; font-size: 9pt; z-index:1;">
<p>
text
</p>
</div>
<div id="myContainer" style="background:none; position:absolute; z-index:-1; width:100%;height:100%;"></div>
<div id="myContainer2" style="background:none; position:absolute; z-index:-2; width:100%;height:100%;"></div>
</body>
</html>
Sketch 1
function setup(){
var myCanvas = createCanvas(windowWidth, windowHeight,WEBGL);
myCanvas.parent('myContainer2');
}
function draw(){
background(0,0,0);
rotateY(frameCount * 0.01);
for(var j = 0; j < 50; j++){
push();
for(var i = 0; i < 80; i++){
translate(sin(frameCount * 0.02 + j) * 150, sin(frameCount * 0.1 + j) * 110, i * 0.9);
rotateZ(frameCount * 0.04);
push();
sphere(10, 15, 5);
pop();
}
pop();
}
}
Sketch 2
var input, button;
function setup() {
// create canvas
var myCanvas = createCanvas(windowWidth, windowHeight);
myCanvas.parent('myContainer');
background(255,255,255,0);
input = createInput();
input.position(140, 675);
button = createButton('Share');
button.position(280, 676);
button.mousePressed(greet);
textAlign(CENTER)
textSize(15);
}
function greet() {
var name = input.value();
for (var i=0; i<1; i++) {
push();
fill(255,255,0);
translate(random(width), random(height));
text(name, 0, 0);
pop();
}
}
This operation doesn't work with 2d (GitHub). If you want to reverse x-coordinate and create object mirroring, just set translate and use -x for all x coordinates.
line(this.mirroring*0.5*grid_step, 0, this.mirroring*0.5*grid_step, 0.5*grid_step);
line(this.mirroring*2.5*grid_step, 0, this.mirroring*2.5*grid_step, 0.5*grid_step);
line(this.mirroring*0.5*grid_step, 0.25*grid_step, this.mirroring*2.5*grid_step, 0.25*grid_step);
Where this.mirroring can be -1 or 1. When this.mirroring = -1; reverse is toggled
i just started working with scrollmagic, but i can't seem to get it functioning properly. I followed a simple tutorial to do a few animations on different sections. I'm not sure if didn't import the classes, right, but i'm stuck. Help would be greatly appreciated and i've attached my js, html, and css file.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>ScrollMagic #1 Setup</title>
<script>
window.jQuery || document.write('<script src="js/vendor/jquery-1.11.0.min.js"><\/script>')
</script>
<link rel="stylesheet" href="style.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="js/lib/greensock/TweenMax.min.js"></script>
<script src="js/uncompressed/plugins/animation.gsap.min.js"> </script>
<script src="main.js"></script>
<script src="js/uncompressed/ScrollMagic.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/debug.addIndicators.min.js"></script>
</head>
<body>
<main class="full-screen" role="main">
<section class="full-screen blue">
<div>
<h1>Basic Tweening</h1>
</div>
</section>
<section id="scale-trigger" class="full-screen orange">
<div id="scale-animation">
<p>This element will scale down using the scale value of the CSS transform property.</p>
</div>
</section>
<section id="bg-trigger" class="full-screen red">
<div id="bg-animation">
<p>This element will have the background color change</p>
</div>
</section>
<section id="yoyo-trigger" class="full-screen blue">
<div>
<p id="yoyo-animation">Section Four yoyo Text!</p>
</div>
</section>
</main>
</body>
</html>
JS FILE
(function($) {
// Scale Animation Setup
// .to('#target', #length, {#object})
var scale_tween = TweenMax.to('#scale-animation', 1, {
transform: 'scale(.75)',
ease: Linear.easeNone
});
// BG Animation Setup
// .to('#target', #length, {#object})
var bg_tween = TweenMax.to('#bg-trigger', 1, {
backgroundColor: '#FFA500',
ease: Linear.easeNone
});
// YoYo Animation Setup
// .to(#target, #length, #object)
var yoyo_tween = TweenMax.to('#yoyo-animation', 1, {
transform: 'scale(2)',
ease: Cubic.easeOut,
repeat: -1, // this negative value repeats the animation
yoyo: true // make it bounce…yo!
});
// init ScrollMagic Controller
var controller = new ScrollMagic.Controller();
// Scale Scene
var scale_scene = new ScrollMagic.Scene({
triggerElement: '#scale-trigger'
})
.setTween(scale_tween);
// Background Scene
var bg_scene = new ScrollMagic.Scene({
triggerElement: '#bg-trigger'
})
.setTween(bg_tween);
// YoYo Scene
var yoyo_scene = new ScrollMagic.Scene({
triggerElement: '#yoyo-trigger'
})
.setTween(yoyo_tween);
controller.addScene([
scale_scene,
bg_scene,
yoyo_scene
]);
})(jQuery);
CSS FILE
html,
body {
margin: 0;
height: 100%
}
h1,
p {
margin: 0;
padding: 0;
}
header {
position: fixed;
top: 10px;
left: 10px;
}
section {
display: flex;
justify-content: center;
align-items: center;
text-align: center;
color: #EFEFEF;
}
.full-screen {
height: 100%; /* makes panels the entire window height */
}
.blue {
background-color: #3883d8;
}
.red {
background-color: #cf3535;
}
.orange {
background-color: #ea6300;
}