First you need to sign in into your account and use button : Create a Sketches .
This will open your open the editor. Now you need to add this source code:
void setup() {
size(200, 200);
stroke(10);
smooth();
}
void draw() {
background(255);
fill(0);
noStroke();
// Angles for sin() and cos() start at 3 o'clock;
// subtract HALF_PI to make them start at the top
ellipse(100, 100, 160, 160);
float s = map(second(), 0, 60, 0, TWO_PI) - HALF_PI;
float m = map(minute(), 0, 60, 0, TWO_PI) - HALF_PI;
float h = map(hour() % 12, 0, 12, 0, TWO_PI) - HALF_PI;
stroke(255);
strokeWeight(1);
line(100, 100, cos(s) * 72 + 100, sin(s) * 72 + 100);
strokeWeight(2);
line(100, 100, cos(m) * 60 + 100, sin(m) * 60 + 100);
strokeWeight(4);
line(100, 100, cos(h) * 50 + 100, sin(h) * 50 + 100);
}- one first function setup will set size area and some line settings;
- the draw function loops continuously to draw your work.
Into the draw function I create a clock design and the movement is follow by time.
Because this is analog clock , I used sin functions to move the line to show the analog clock hands for time.
Take a look into the right area and will see three vertical dots.
Use mouse and a side panel will show you. In this panel you can set Settings and upload Files.
The Settings will come with the Mode to set the javascript - P5js/Processingjs and Tabs to show/hide your work.
Let's see how is working:
