Repository
https://github.com/Vishalsingh4997/tutorials-and-fun
https://editor.p5js.org/vishalsingh4997/present/PtzmrQTw0
What will I learn?
Okay so today I tried to put that DVD logo hype in the steem style. I am using P5.js - an online editor to recreate a small javascript similar to the functioning of the DVD LOGO. Okay so what is this DVD logo hype? DVD logo went viral back in December 2018 where a small DVD logo goes around the edges of the TV screen and the possibility of the logo hitTing the exact corner of the TV screen is what one looks for. If you want to see how this looks then here is a youtube video for the same ==> 
So in this tutorial we will recreating a similar thing but with steem style. You will learn some basic functions of P5.js and how we can achieve the same thing as shown in the video.
Requirements
- Computer with an Internet connection
- Any web browser
- P5.JS editor (https://editor.p5js.org)
Difficulty
- Basics
Tutorial Contents
So let's start with the main course! So first thing what we need to initialize or declare is the variables. We are using "let" here as it sets the scope of variables globally throughout the program components or methods. You can declare them on new lines but I prefer to put similar things in a single line. X, Y are the positions where our image object will spawn on the screen. xspeed and yspeed are the next positions for the object so this goes from one position to next with a difference of 2. Don't worry you will get more clear as we go ahead.
let x,y,xspeed,yspeed;
let steem;
let counter = 0;
function setup() {
createCanvas(620, 400);
x=320;
y=200;
xspeed=2;
yspeed=2;
steem = loadImage("steem1.png");
}
The setup() holds the initial state and that is the starting point where we declare the size of the canvas. createCanvas takes two parameters one is the "x" for horizontal and "y" for the vertical scale. So the screen size will be 620x400. It draws a canvas, that black background is actually the canvas where we are putting things. Intialize X and Y are the points of the object in this context remember that steem logo on the screen.
X, Y defines the position of the steem logo on the canvas. Set the speed by which the object will move so we have given the value 2 to both x and y scale speed. If the steem logo is on position (320,200) the next position will be on position (322,202).
Steem holds the image itself so upload any image you want, I used steem logo here.
function draw() {
background(1);
fill(256);
text("VishalSingh / Steem Hits :- "+counter, 10, 20);
image(steem,x,y);
x = x + xspeed;
y = y + yspeed;
if(x + steem.width == width || x == 0){
xspeed = - xspeed;
counter=counter+1;
}
if(y + steem.height == height || y == 0){
yspeed = -yspeed;
counter=counter+1;
}
}
The draw() function draws the objects and handles the update of every object like the counter, next position of steem logo.
background():- It sets the color of the canvas 1 - for black. Play with it you can set 256 if you want a white background.
fill():- It is generally used here to set the color of the text.
text():- It takes 3 parameters. 1- word, 2- X position, 3- y position. That + is used to link the counter object so it receives the updates when logo hits any edges of the screen.
image():- It is used to draw the image. "steem" holds the image path so it takes image along with x, y position to draw it on the screen. we already declared x, y values above. You can give direct values.
x = x + xspeed;
y = y + yspeed;
This expression stores the next position value.
X is 320 by default so now it becomes x = 320 + 2;
Y is 200 by default it becomes y = 200 + 2;
The next is IF-ELSE conditional statement that checks the steem.width and the edge to calculate the hit and reverse the direction of the logo. x + xteem.width is actually the value of x and the width of steem logo image. Here size of steem logo is 50x50. so it becomes x + 50 and when it touches width of canvas i.e.620 right edge or 0 left edge of the screen then it updates the counter and reverse the direction of the logo. So if the image touches edge for say (620,400) then logo will no more go ahead of that value and reverse it by difference of 2. So xspeed = - xspeed actually reversing the direction of the logo when it touches the border of the canvas.
Counter increments the value when logo hits or touches the edge.
Similar thing happens with yspeed = -yspeed when it touches upper and bottom edges of the screen. It reverse the yspeed and send the logo in the valid canvas range.
Have a look on how it looks here ==> https://editor.p5js.org/vishalsingh4997/full/PtzmrQTw0
Download the file from git and give it a go!
Proof of Work Done
https://editor.p5js.org/vishalsingh4997/present/PtzmrQTw0
https://github.com/Vishalsingh4997/tutorials-and-fun