FACE MESH
Framework API provides realtime facial landmark data to a single fragment shader. Face detection uses TensorFlow.js Facemesh.
Reference: MaxBittker/shaderbooth: github
Demo Video
P5.JS Pose Detection
ML5: Webcam Body Tracking using Posenet - p5.js Webcam
Pose Estimation with PoseNet
Dropped shoulder syndrome, is caused by uneven shoulders occur when one shoulder is higher than the other. This can be a slight or significant difference and may be due to several causes like scoliosis in the future.
I’m suffering from Dropped shoulder syndrome for a long time. The reason for this, was carrying bag in one shoulder with lots of books in it in my early ages, but there are other reasons why it may occur like always using one hand or side of your body for writing or drawing. If you have uneven shoulders you may experience neck, shoulder, and lower back pain like me.
This application could help people like me to engage in regular exercise and participate in sports as much as possible. I will make it a practice to check in with their posture continually throughout the exercice process and make people to become aware of their posture wether the exercises improve their process. It’s not only while they are standing or sitting, but as a tool to participate in exercise as much as possible.
I will use, real medical exercise to healing techniques promote symmetrical alignment and balance in your body for people who suffers from dropped shoulder syndrome like me.
I used ml5 and poseNet are the platforms that I can use as a tool for this project.
Public Code BELOW
let video;
let poseNet;
let poses = [];
function setup() {
createCanvas(640, 480);
video = createCapture(VIDEO);
video.size(width, height);
// Create a new poseNet method with a single detection
poseNet = ml5.poseNet(video, modelReady);
// This sets up an event that fills the global variable "poses"
// with an array every time new poses are detected
poseNet.on('pose', function(results) {
poses = results;
});
// Hide the video element, and just show the canvas
video.hide();
}
function modelReady() {
select('#status').html('Model Loaded');
}
function draw() {
image(video, 0, 0, width, height);
// We can call both functions to draw all keypoints and the skeletons
drawKeypoints();
drawSkeleton();
}
// A function to draw ellipses over the detected keypoints
function drawKeypoints() {
// Loop through all the poses detected
for (let i = 0; i < poses.length; i++) {
// For each pose detected, loop through all the keypoints
let pose = poses[i].pose;
for (let j = 0; j < pose.keypoints.length; j++) {
// A keypoint is an object describing a body part (like rightArm or leftShoulder)
let keypoint = pose.keypoints[j];
// Only draw an ellipse is the pose probability is bigger than 0.2
if (keypoint.score > 0.2) {
fill(255, 0, 0);
noStroke();
ellipse(keypoint.position.x, keypoint.position.y, 10, 10);
}
}
}
}
// A function to draw the skeletons
function drawSkeleton() {
// Loop through all the skeletons detected
for (let i = 0; i < poses.length; i++) {
let skeleton = poses[i].skeleton;
// For every skeleton, loop through all body connections
for (let j = 0; j < skeleton.length; j++) {
let partA = skeleton[j][0];
let partB = skeleton[j][1];
stroke(255, 0, 0);
line(partA.position.x, partA.position.y, partB.position.x, partB.position.y);
}
}ICM FINAL
For my final project, I wanted to make the game that I played a lot in my childhood. The Rock paper scissors game!
This is a hand played game usually played between two people, in which each player simultaneously forms one of three shapes with an outstretched hand. These shapes are rock (a closed fist), paper(a flat hand), and scissors.
Rules are like this;
Rock beats scissors
Scissors beats paper
Paper beats rock
This game is created by teachable machine, which is a web-based tool that makes creating machine learning models. First of all I’ve gathered and group my examples into classes that I want the computer to learn, in this case these were; rock, scissors and paper classes. Then I trained my model, then instantly test it out to see whether it can correctly classify new examples. Lately, after exporting my model for my project I downloaded it and added to my code in p5.js. My models runs well %70, but sometimes it can be confused with the hand gesture of rock and scissors.
You can reach the code below;
https://editor.p5js.org/bestesaylar/sketches/rjZRp_WNa
https://editor.p5js.org/bestesaylar/full/rjZRp_WNa
SOUND COMPOSITION
For this assignment we’ve created a beatbox that has been inspired from beatboxing which is a form of vocal percussion primarily involving the art of mimicking drum machines. So, the code allows you to play music that sounds made by your mouth by pressing keys 1 to 0 while the keys a,s,z,x,q controls the background music.
The rhythms are selected predominantly through traditional beatboxing sounds like bass, snare drums, claps, chicks, ha’s and hi-hats’s.
You can reach sketch from below link,
Week 9_assignment
For this assignment, I worked with Tianjun Wang.
We’ve made a sketch that we capture Video from cam and change the rgb color when the mouse is positioned in different position of the canvas. We also add a function of particles which make some particles on the canvas and their colors are determined by the camera.
You can see sketch from below link,
After watching the Brightness Mirror tutorial of Daniel Shiffman, I’ve decided to modify this example into a pixelated motion detection camera, so that if there is any change in any pixel values, fill that particular pixel to red color. I approached this by adding a new variable pbright at the end of the nested for loop, hoping to save the brightness value of each pixel from the previous frame, and compare with the current frame. However, it turned out that the camera have turned the pixels with brightness values into red, and filled the darker pixels with brightness.
Than I’ve learned that it seemed like inside the nested for loop, I was comparing the brightness value of the current pixel with the brightness value of the previous pixel in the array instead of the same pixel of the previous frame. So, instead of comparing individual pixels, I saved all the pixels from the last frame as preFrame and compare the pixels in that array with pixels in current frame to detect pixel change.
You can see sketch from below link,
Working with Pixels
This week I’ve played with pixels.
MIDTERM PROJECT-ICM
You can reach the code from below link
Breaking code out of setup() and draw() into functions
I’ve build a single-player pong game with the JavaScript library p5.js. It’s a simple game with a rectangle, an ellipse, and a little animation.
The draw function runs over and over again, animating the screen. By continuously updating the x- and y-coordinates of an object in the draw function. The 400x400 canvas was a little limiting, so I’ve updated the setup function to span over the whole window.
The ball is an ellipse whose coordinate points we update over and over again, so that it moves and I had to constantly changing the x- and y-coordinates of the ball to animate it, so it would be better to store those in variables. I’ve also did some calculations with the width and height (=diameter) of the ball.
xBall starts off the ball with a random x-coordinate between 50 and 350. yBall starts off the ball with a default y-coordinate of 50. The diameter is also set to 30. The ball moves to a random location near the top, but everything else should be the same.
First, I needed to track the speed at which the ball changes x- and y-coordinates. After I set the background in the draw function. After, I’ve changed the ball’s location, incrementing its x- and y-coordinates by the xBallChange and yBallChange values. So that the ball can move. Than I needed to make the ball detect when it is hitting the walls.
if ((xBall > xPaddle && xBall < xPaddle + paddleWidth) && (yBall + (diameter/2) >= yPaddle)) { xBallChange *= -1; yBallChange *= -1;}This code on the side checks to see if the ball’s x-coordinate is between 0 and windowWidth, and if the ball’s y-coordinate is between 0 and windowHeight. If the coordinates are outside those ranges, the ball has hit a wall. When the ball collides with the wall, it can go in the opposite direction if you make the coordinate change go from positive to negative, or vice versa. You can see in the code that xBallChange and yBallChange are multiplied by -1 to achieve this effect.
Later, I’ve added a paddle by defining some variables to it. Then, I’ve added an if statement that “If the game has not yet started, the paddle is placed at the middle of the window about 100px above the bottom of the screen. Since started is then declared true, this code never runs again”.
Lastly, to make the paddle controlled by the right and left arrow keys, we simply I’ve add ed a third function called keyPressed() which allows to adjust the paddle’s x-coordinates by incrementing or decrementing the xPaddle variable.
I’ve also added a score. Every time the ball collides with the paddle, it increase the score by one. (score++). But, the game has still have a bug in collision. I couldn’t figured it yet.
You can reach the code from;
MAKING A GALAXY WITH LOOPS
I made a galaxy sketch with a lot of repetition of stars. I’ve also used a loop for blue planet, that the statements in draw() are executed until the program is stopped. Each statement is executed in sequence and after the last line is read, the first line is executed again. I’ve created a in invisible background filled with no overlap circles and placed en embedded loop(x,y) circle grid in front of them with random colors of grey scale. They change color separately depending on mouseX and mouseY. I’ve created some star forms, for mouseClicked() function and add them sounds from p5.js library.
Question: The distance between circles are i+=40 and j+=50 in loop functions, how can i determine the exact point of circles while hovering them.
You can reach the sketch from the below link;
Working on rule-based animation in pairs_week3
SKETCH1
This week, we have worked in pairs for a rule-based animation, motion and interaction. We have made two separate sketches and swapped them. The main idea of this project was to understand someone else’s code and trying build in on it. Given variable names can be unsteady, also if else statements can be confusing after come point in coding, in order to understand which behavior controls what. So, in this assignment it was crucial to use single line comments <//> which specify the purpose of a statement or logic in the program.
Luckily, my teammate didn’t avoid to use them excessively enough to understand. The sketch I’ve worked on was mostly depending on input behaviors. So, first of all in the global variables they are declared to create a "sentence" object with a subject, verb, adjective and noun. Each part of the sentence has a list of possible choices that the buttons will select from. The goal of the sketch as it is right now is to generate a random sentence, composed of subject, verb, adjective and noun. Than it is initialized the state of each button to true, and set the initial value of each part of the sentence, which will start the program with a sentence instead of a blank screen. Than in the draw() function, calling "subject", "verb", etc, gets the word from the "mousePressed" function at the bottom of this code.
I’ve builded the layout of the sketch. In the setup() function, I’ve initialized the variables to use for buttons. In draw() function, I’ve declared the starting locations and directions of the rectangular sections behind the subject, verb, adjective and noun words. Than I’ve build the rollover statements which allows changing the color of the sections when the mouse is pressed on the buttons. In the input behaviors, while choosing random words the mouse Clicked() function was used but in this case, the if/else statements are used within the mouseIsPressed() function which is called once after every time a mouse button is pressed. So, this interactive behavior doesn’t effect the button of itself but manipulates the color of the sections behind the words.
Lastly, I’ve builded a randomly colorful flashing screen in the beginning of the sketch each time it is opened. This screen is made of nested loops which embedded inside another, the repetitions is multiplied. Preferably, I’ve commented separate adjacent loops for a randomly colored frame inside the window.
Animation of sketch1
You can reach the sketch from the below link;
https://editor.p5js.org/bestesaylar/sketches/dvxpZVtKm
SKETCH 2
The other sketch’s background is formed by nested loops embed one for loop in another, which allow to draw circles for every x, fills in all y’s. There’s three separate circle buttons on the background. They can be manipulated for two other motions. One of them is rollover which allows buttons to change color separately when the mouse is on them. Secondly they can function as buttons. By using if/else statements, the background color changes according to the button pressed.
Sketch2
Animation of sketch2 P5.js
You can reach the sketch from the below link;
https://editor.p5js.org/bestesaylar/sketches/-ptmR_5PV
Animating Sketch with P5.Js
Castor is ready to play!!
In this sketch, I’ve tried to add some move.
There is, three elements controlled by mouse. One of them is with mouseIsPressed() function, while others are mouseDragged() function. The toy is controlled by mouse and the eyes are following the toy. The cat (Castor) closes his eyes when mouse clicked. While cats paying attention to something, their tail generally stops moving. So I wanted to show that movement by stopping his tail movement when the toy is just in front of him. If you move the toy around him, he gets excited.
When the sketch fist played, the movement if the tail is the element that changes over time, independently of the mouse. The collet of Castor is shining, I tried to show this effect by giving random colors to the element.
You can reach to code from the following link;
COMPUTING
We live in a time when technology has never been more important than ever, and in the future this level of importance will increase.
It has changed the pattern of life today. Everything, processing, gathering information, or any aspects of the various areas that has previously done manually, which gives a lot of risk, can be made more effective, faster, and more practical now with computing. So It affects our quality of life in every aspect. The fact that technology is so intertwined with our lives and computers have became a part of our lives it makes it vital to produce this technology.
Computing benefits me in a lot of aspects. It improves my critical thinking. I’m learning being more patient because it allows me to continue when I encounter an obstacle or difficulty while coding. It improves my problem solving ability. For example, when there is a deadlock in coding, there is always a way to ensure return and retry. It teaches dare to try new things. While drawing shapes and images in P5.js, I’m discovering my interests.
Coding is literally a new and universal language that supports process skills. Wherever you are in the world, you can communicate when you talk about coding.
INTERACTIVITY . SPEED . AUTOMATION . SCALE . PRECISION . RESUSE . RECOMBINATION
Creating a screen drawing with P5.js
FINAL
This is my friend’s cat, Castor. He’s living in LA now and I miss him a lot!
PROCESS
First of all, I’ve sketched the ideal image. Then I’ve categorized the parts of the body. I’ve made attention to the order of of each shape. Final image is polychrome so It helped me a lot when giving color to the shapes.
During the process of making it, I referred to P5,js reference page. Several 2D Primitives and attributes are used.
PROBLEMS
Settings like fill and stoke must be typed before the shape.
Misspelled function names cause error.
Commas should always be checked.