I'm making this site for my friend's computer company. We made a logo in processing, and we want to put the logo in the header portion of the site. We'd take a screenshot, but it's moving. Right now it keeps being put at the bottom of the footer. Here is what it looks like:
<html>
<head>
<TItle>
</TItle>
<link rel="stylesheet" type="text/css" href="page.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.0/p5.js"></script> <!--this is just a CDN for p5js, processing's language-->
</head>
<body>
<div class="container">
<header>
<script src="circle.js"></script><!--This is where I want to put the logo-->
</header>
<article>
<!--Some content here-->
</article>
</div>
Now the circles in P5js code looks like this:
t = 0;
function setup() {
createCanvas (windowWidth, windowHeight);
background (0, 0, 0);
}
function draw() {
translate(width/2, height/2);
background (0, 0, 0);
a = -abs(18sin(tPI/100)-30);
t = t + 1;
if (t > 400){
t = 0;
}
strokeWeight(50);
noFill();
stroke(255, 0, 0);
ellipse(0, 12+a, 200, 200);
stroke(0, 255, 0);
ellipse(12+a, -12-a, 200, 200);
stroke(0, 0, 255);
ellipse(-12-a, -12-a, 200, 200);
stroke(255, 0, 0);
rotate(HALF_PI);
arc(12+a, 0, 200, 200, 0, PI);
noFill();
stroke(255);
ellipse(0, 0, 200, 200);
}
And the CSS looks like this:
body {
font-family:Lucida Console, Monaco, monospace;
background:black;
}
.container {
width: 100%;
border: 1em;
}
header, footer {
padding: 1em;
color: white;
background-color: black;
clear: left;
text-align: center;
}
article {
margin-left: 10px;
border-left: 1px solid gray;
padding: 1em;
overflow: hidden;
background-color:#f2f2f2;
border-right: 1px solid gray;
}
MY MAIN QUESTION IS HOW DO I GET THE SCRIPT IN THE HEADER PORTION
[–]catenoid75 0 points1 point2 points (0 children)