I am new to programming but have completed most of the practice on the drawing and animation section on Khan Academy. Simply based on what I understand, I can place javascript code within a script tag placed between a body tag. However, when I opened my webpage, all I got was the style and the headings.
How can I animate or add shapes using the Atom text editor? I tried looking at Khan Academy and noticed that they also use processing.js, is that a reason my code won't run on my webpage? The code I will provide below will be my attempt to draw a sun growing larger and larger. The code inside the script tag is the exact and only code I needed to make the program run perfectly. I am not fully understanding if I am missing something. If not, can you help show the code for drawing a simple circle or rectangle(PS khan academy simply uses the rect and ellipse functions)?
Please note that I searched the stack for this and was unable to find a satisfying solution. Also, I used type=javascript in the script tags but the end result was the same when I clicked my webpage.
Thanks
MY code:
<!DOCTYPE html>
<html>
<head>
<title>Hello User</title>
<h1 class="text_color">I am blue text on a screen</h1>
</head>
<style>
body{
background-color:rgb(5,113,176);
font-family:arial;
font-size:20px;
}
.text_color{
color:blue;
font-family:arial;
}
</style>
<body>
<script>
noStroke();
// the beautiful blue sky
background(82, 222, 240);
// the starting size for the sun
var sunSize = 30;
//Animation part
draw = function() {
// The sun, a little circle on the horizon
fill(255, 204, 0);
ellipse(200, 298, sunSize, sunSize);
// The land, blocking half of the sun
fill(76, 168, 67);
rect(0, 300, 400, 100);
sunSize = sunSize+1;
};
</script>
</body>
</html>
First of all you have to link p5.js into your HTML Document, because you use function's that are declared in p5.js.
Try:
At the bottom of
<body>then put your noStroke(); and Background(); into the funtion setup() because p5 variable and function names are not available outside setup(), draw(), mousePressed(), etc.
Hope this will work for you.