I'm a beginner at using p5.js but I'm currently currently attempting to create a brush sketch like this
ellipse brush
though using computer vision & posenet nose tracking (essentially a nose brush)
The problem is, while it doesn't state any errors, it doesn't work.
This is my code for the ellipse brush without posenet & camera vision
let mousePosition = [];
function setup() {
createCanvas(400, 400);
}
function draw() {
background(0);
//Every frame of animation
//storing the mouse position in an array
mousePosition.push({x: mouseX, y: mouseY});
//shift the array so that the older ones deletes itself
if(mousePosition.length > 100) mousePosition.shift();
//loop
for(let i = 0; i < mousePosition.length; i++) {
//if the variable is less than 50, loop function
let x = mousePosition[i].x;
let y = mousePosition[i].y;
ellipse(x, y, r,r);
var r = 20
}
}
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.11/p5.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.11/addons/p5.dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.11/addons/p5.sound.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<script src="sketch.js"></script>
</body>
</html>
and this is the one with computer vision & nose tracking w/ posenet
let capture;
let poseNet;
let pose;
let text;
let pg;
let nosePosition = []
function setup() {
createCanvas(700, 700);
capture = createCapture(VIDEO);
capture.hide();
pg = createGraphics(width, height);
poseNet = ml5.poseNet(capture, modelLoaded);
poseNet.on('pose', gotPoses);
// background(255)
// color picker
}
function gotPoses(poses) {
//console.log(poses);
if (poses.length > 0) {
pose = poses[0].pose;
}
}
function modelLoaded() {
console.log('poseNet.ready');
}
function draw() {
translate(width, 0); // move to far corner
scale(-1.0, 1.0); // flip x-axis backwards
image(capture, 0, 0, width, width * capture.height /
capture.width);
image(pg, 0, 0, width, height);
if (pose) {
nosePosition.push({x:pose.nose.x ,y: pose.nose.y});
if(nosePosition.length > 100) nosePosition.shift(); {
}
for(let i = 0; i < nosePosition.length; i++) {
//if the variable is less than 50, loop function
let x = nosePosition[i].x;
let y = nosePosition[i].y;
pg.ellipse(x, y, i/5,i/5);
var r = 20 //how big the ellipse is
pg.fill(255)
pg.noStroke();
}
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.1.9/p5.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.1.9/addons/p5.sound.min.js"></script>
<script src="https://unpkg.com/ml5#latest/dist/ml5.min.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="style.css">
<meta charset="utf-8" />
</head>
<body>
<script src="sketch.js"></script>
</body>
</html>
The second is essentially very similar to the first, as I've only changed the mouseX/Ys into the posenet Nose keypoint.
Any insight/solution would be highly appreciated!
Thank you :)
You're shifting properly, but you forgot to clear the pg graphic, which is kind of like forgetting to put background(0) in your original sketch. So instead of drawing all the ellipses on a blank background, you're drawing them on top of the previous frame.
Adding pg.clear() anywhere in draw() after you display pg on the canvas (image(pg, ...)) and before you draw the ellipses (for (...) {... ellipse(nosePosition[i].x...)}) should do the trick. Here's where I put it:
image(pg, 0, 0, width, height);
pg.clear();//HERE
if (pose) {//...
Related
The below code is doing the animation from 2 points , Point (0,0) to Point (100,50) , which is working fine . But i need a function that takes an array of x,y coordinates and keep on running the same below script to draw path one by one . How can this be achieved .
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Chain</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/paper.js/0.12.15/paper-full.js" integrity="sha512-XV5MGZ7Tv+G60rzU8P7tPUlaf0yz7SJ/ uI9CLAwyLcZKl9kzxJQFs3nsBNZVNVAwNOkBLqrzMvjGMEycDccqiA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> <script type="text/paperscript" canvas="canvas">
var path = new Path();
path.strokeColor = 'white';
path.add(new Point(0, 0));
path.add(new Point(100, 50));
var time = 0;
// On each frame...
function onFrame() {
console.log('Running frame ');
if (time <= 1) {
time += 0.01;
drawTmpPath(time);
}
}
var tmpPath;
function drawTmpPath(t) {
// Make sure that t is never over 1.
t = Math.min(t, 1);
// Remove the previously drawn temporary path.
if (tmpPath) {
tmpPath.remove();
}
// Draw the new temporary path from the reference one.
tmpPath = path.clone().set({
selected: false,
strokeColor: 'orange',
strokeWidth: 5
});
// Split it at the appropriate location.
var remainingPath = tmpPath.splitAt(tmpPath.length * t);
// Remove the eventual remaining part.
if (remainingPath) {
remainingPath.remove();
}
}
</script>
</head>
<body>
<canvas id="canvas" resize></canvas>
</body>
</html>
I wanted to develop object detection system using ml5 & p5.js,where I can upload an image and system can provide me an output image with Rectangle around objects in image. Yolo and Cocossd datasets are working fine for recognition an object in image.
Like this image object is being identified:
But these datasets are not giving me results for detection where there is text or object with text. As I am expecting system to identify each word of text as different object, like for below image :
Result should be like this:
Rectangle around K
Rectangle around F
Rectangle around C
and one Rectangle around logo of KFC
Please help regarding this or suggest any other system which i can use in PHP/Js to detect objects in image.
let img;
let detector;
function preload(){
img = loadImage('e.jpeg');
detector = ml5.objectDetector('yolo');
}
function setup() {
createCanvas(800, 800);
image(img,0,0);
detector.detect(img,gotDetections);
}
function gotDetections(error, result){
if(error){
console.log(error)
}
console.log(result)
drawResults(result);
// for (let i = 0 ; i< result.length; i++){
// let object = result[i];
// stroke(0,255,255);
// strokeWeight(4);
// noFill();
// rect(object.x ,object.y,object.width,object.height);
// }
}
function drawResults(results) {
results.forEach((result) => {
// Generates a random color for each object
const r = Math.random()*256|0;
const g = Math.random()*256|0;
const b = Math.random()*256|0;
// Draw the text
stroke(0, 0, 0);
strokeWeight(2);
textSize(16);
fill(r, g, b);
text(`${result.label} (${result.confidence.toFixed(2)}%)`, result.x, result.y - 10);
// Draw the rectangle stroke
noFill();
strokeWeight(3);
stroke(r, g, b);
rect(result.x, result.y, result.width, result.height);
});
};
html, body {
margin: 0;
padding: 0;
}
canvas {
display: block;
}
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/addons/p5.sound.min.js"></script>
<script src="https://unpkg.com/ml5#latest/dist/ml5.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
<meta charset="utf-8" />
</head>
<body>
<main>
</main>
<script src="sketch.js"></script>
</body>
</html>
I want to basically make it that when the record button is pressed and the recording is taking place, that the audio that is being recorded is visualized as per the code in the draw function and then once that is done, the user would be able to save/playback the recording. I think I need to move the content of the draw function somewhere within the if statements of the canvasPressed function but I have no idea how. I'd appreciate any guidance. I am experimenting and adding different bits from different sources so my entire code might be jumbled up and wrong to begin with though the recording, playback, saving part of the code works fine on its own, it's just the drawing bit that doesn't. Thank you in advance.
let mic;
let volHistory = [];
var angle = 0;
let recorder, soundFile;
let state = 0;
function setup() {
let cnv = createCanvas(100, 100);
cnv.mousePressed(canvasPressed);
background(220);
textAlign(CENTER, CENTER);
// create an audio in
mic = new p5.AudioIn();
// prompts user to enable their browser mic
mic.start();
// create a sound recorder
recorder = new p5.SoundRecorder();
// connect the mic to the recorder
recorder.setInput(mic);
// this sound file will be used to
// playback & save the recording
soundFile = new p5.SoundFile();
text('tap to record', width/2, height/2);
}function canvasPressed() {
// ensure audio is enabled
userStartAudio();
// make sure user enabled the mic
if (state === 0 && mic.enabled) {
// record to our p5.SoundFile
recorder.record(soundFile);
background(255,0,0);
text('Recording!', width/2, height/2);
state++;
}
else if (state === 1) {
background(0,255,0);
// stop recorder and
// send result to soundFile
recorder.stop();
text('Done! Tap to play and download', width/2, height/2, width - 20);
state++;
}
else if (state === 2) {
soundFile.play(); // play the result!
save(soundFile, 'mySound.wav');
state++;
}
}
function draw() {
background(51);
let vol = mic.getLevel();
volHistory.push(vol);
translate(width/2, height/2)
noFill();
beginShape();
for (let i = 0; i < 360; i++) {
stroke(255);
let r = map(volHistory[i], 0, 1, 10, 300);
let x = r * cos(i);
let y = r * sin(i);
vertex(x, y);
}
endShape();
if(volHistory.length > 360) {
volHistory.splice(0,1);
}
// ellipse(300, 300, vol*300, vol*300);
// console.log(vol)
}
html, body {
margin: 0;
padding: 0;
}
canvas {
display: block;
}
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/addons/p5.sound.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
<meta charset="utf-8" />
</head>
<body>
<script src="sketch.js"></script>
</body>
</html>
I am trying to rotate a picture according the direction in which the cursor is moved.
Here is some code, I wrote for trying:
<html>
<head>
<meta charset="UTF-8">
<script language="javascript" type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.3/p5.min.js"></script>
<!-- uncomment lines below to include extra p5 libraries -->
<!--<script language="javascript" src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.3/addons/p5.dom.min.js"></script>-->
<!--<script language="javascript" src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.3/addons/p5.sound.min.js"></script>-->
<script language="javascript" type="text/javascript" src="asd.js"></script>
</head>
<body>
</body>
</html>
My JavaScript file is as follows:
function preload() {
arrowImg = loadImage("fish.png");
}
// Creating canvas
function setup() {
createCanvas(600, 300);
background(255);
noCursor();
}
// Displaying the functions above
function draw() {
background(255);
imageMode(CENTER);
image(arrowImg, mouseX, mouseY, arrowImg.width / 10, arrowImg.height / 10);
}
How is it possible to get the attributes in what direction the cursor or mouse is moving in processing/p5js and how is it possible to rotate a picture 180 degrees?
The idea was: the image is following the cursor. If the cursor moves right, the image is staying as it is. the cursor moves left, the image rotates 180 degree
I’m not quite sure i,ve understood your problem but i think that you can add rotate() function from p5js before you draw the image.
About the rotation relatively with your mouse position you can save the coordonates of the mouse and make some simple math with cartesian coordonates to calculate the angle you need.
I have same questions.
after a fews hours researched, I found this way:
let fish;
function preload() {
fish = loadImage('images/fish.png');
}
function setup() {
createCanvas(600, 600);
}
function draw() {
background(0);
var imgx = 300;
var imgy = 300;
var angle = atan2(mouseY - imgy, mouseX - imgx);
push();
translate(imgx, imgy);
rotate(angle);
imageMode(CENTER);
image(fish, 0, 0, 80, 50)
pop();
}
The key point here are imageMode(CENTER);:
translate(imgx, imgy);
rotate(angle);
imageMode(CENTER);
Hope it help. Thanks
Hey guys I've been trying to wrap my head around the HTML5 Canvas animation but failed miserably I wanted to achieve the below figure by animating this custom shape in an interval of 10 seconds.
I've pretty much screwed the math of it so I ended up just writing every lineTo statement manually, tried Paul Irish's requestAnimationFrame at the end to animate the line but no luck.
Any help would be highly appreciated, here is
thelive demo
Thanks guys
It's not moving cause you are basically not moving anything - the same shape is drawn to the same position each iteration.
Here is a modified version which animates the pulse to the left (adjust dlt to change speed):
Modified fiddle here
var segX = canvas.width / 6;
var segY = canvas.height / 2;
function draw() {
ctx.clearRect(0,0,canvas.width, canvas.height);
ctx.beginPath();
ctx.moveTo(0, segY);
for(var i = dlt, h = true; i < canvas.width + segX; i += segX) {
if (h) {
ctx.lineTo(i, segY);
ctx.lineTo(i, segY + segX);
} else {
ctx.lineTo(i, segY + segX);
ctx.lineTo(i, segY);
}
h = !h;
}
ctx.stroke();
dlt--;
if (dlt < -segX * 2) dlt = 0;
requestAnimFrame(draw);
}
You're basically needing a function that returns only 2 values--high and low.
Here's a function that returns only low/high values based on a period and oscillation values:
// squared wave
// p = period (how long it takes the wave to fully complete and begin a new cycle)
// o = oscillation (change in wave height)
function squareY(x) {
return( (x%p)<o?o:0 );
}
Demo: http://jsfiddle.net/m1erickson/A69ZV/
Example code:
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" />
<script src="http://code.jquery.com/jquery.min.js"></script>
<style>
body{ background-color: ivory; }
canvas{border:1px solid red;}
</style>
<script>
$(function(){
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
ctx.lineWidth=3;
var p=30; // period
var o=15; // oscillation
var fps = 60;
var n=0;
animate();
function animate() {
setTimeout(function() {
requestAnimationFrame(animate);
// Drawing code goes here
n+=1.5;
if(n>300){
n=0;
}
ctx.clearRect(0,0,canvas.width,canvas.height);
ctx.beginPath();
for(var x=0;x<n;x++){
var y=squareY(x);
ctx.lineTo(x,y+50);
}
ctx.stroke();
}, 1000 / fps);
}
// squared sine
function squareY(x) {
return( (x%p)<o?o:0 );
}
}); // end $(function(){});
</script>
</head>
<body>
<canvas id="canvas" width=350 height=350></canvas>
</body>
</html>