Kirjautuminen
Tehtävät
Kilpailu
4. kierros:
7.11. klo 18 – 9.11. klo 23
Mitä sitä selittelemään - tollanen: https://petke.info/artomatic/
<!DOCTYPE html>
<html>
<head>
<title>Papart</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Arvo:ital@1&display=swap" rel="stylesheet">
<style>
#lause {
font-family: Arvo;
font-size: 20px;
}
#canvas-container {
position: relative;
}
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
canvas {
border: 1px solid black;
}
#button-container {
position: absolute;
bottom: 100;
left: 100;
}
#my-button {
padding: 10px 20px;
background-color: gray;
color: white;
border: none;
cursor: pointer;
font-family: Arvo;
font-size: 20px;
}
</style>
</head>
<body>
<div id="canvas-container">
<div id="lause"></div>
<canvas id="canvas" width="600" height="300"></canvas>
<div id="button-container">
<button id="my-button" onclick="drawAndSpeak()">Click me! :)</button>
</div>
</div>
<script src="script.js"></script>
</body>
</html>function teelause() {
const tekijä =["I" ,"You" ,"He" ,"She" ,"We" ,"You" ,"They" ,"It","Vincent Van Gogh", "Salvador Dali", "Pablo Picasso"];
const verbit = ["ask" ,"be" ,"become" ,"begin" ,"call" ,"can" ,"come" ,"could" ,"do" ,"feel" ,"find" ,"get" ,"give" ,"go" ,"have","hear" ,"help" ,"keep" ,"know" ,"leave" ,"let" ,"like" ,"live" ,"look" ,"make" ,"may" ,"mean" ,"might" ,"move" ,"need","play" ,"put" ,"run" ,"say" ,"see" ,"seem" ,"should" ,"show" ,"start" ,"take" ,"talk" ,"tell" ,"think" ,"try" ,"turn","use" ,"want" ,"will" ,"work" ,"would"];
const prepositiot = ["above" ,"across" ,"against" ,"along" ,"among" ,"around" ,"at" ,"before" ,"behind" ,"below" ,"beneath" ,"beside","between", "by", "down" ,"from" ,"in" ,"into" ,"near" ,"of" ,"off" ,"on" ,"to" ,"toward" ,"under" ,"upon" ,"with " ,"within"]
const etusanat= ["a" ,"an" ,"the" ,"with" ,"at" ,"this" ,"his" ,"her" ,"my" ,"your" ,"our"];
const adjektiivit = ["beatiful" ,"lovely" ,"pretty" ,"nice" ,"handsome" ,"fine" ,"funky" ,"elegant" ,"classy" ,"fair" ,"jubilant" ,"creative" ,"excellent"];
const substantiivit = ["art" ,"painting" ,"exhibition" ,"pencil" ,"paintbrush" ,"paint" ,"emotion" ,"senses" ,"imagination" ,"oil paint", "color"];
let sana1= tekijä[Math.floor(Math.random()*tekijä.length)];
let sana2= verbit[Math.floor(Math.random()*verbit.length)];
let sana3= prepositiot[Math.floor(Math.random()*prepositiot.length)];
let sana4= etusanat[Math.floor(Math.random()*etusanat.length)];
let sana5= adjektiivit[Math.floor(Math.random()*adjektiivit.length)];
let sana6= substantiivit[Math.floor(Math.random()*substantiivit.length)];
let lause= sana1 + " " + sana2 + " " + sana3 + " " + sana4 + " " + sana5 + " " + sana6;
console.log(tekijä.length*verbit.length*prepositiot.length*etusanat.length*adjektiivit.length*substantiivit.length);
return lause;
}
function getRandomWord() {
return words[Math.floor(Math.random() * words.length)]; // Arpoo satunnaisen sanan taulukosta
}
function drawAndSpeak() {
//************************************************************************************
const canvas = document.getElementById('canvas');
const context = canvas.getContext('2d');
function drawPoint(px, py, vari) {
context.fillStyle = vari;
context.fillRect(px, py, 1, 1);
}
let lause=teelause();
let x0=Math.floor(Math.random() * canvas.width);
let y0=Math.floor(Math.random() * canvas.height);
let x1=Math.floor(Math.random() * canvas.width);
let y1=Math.floor(Math.random() * canvas.height);
let x2=Math.floor(Math.random() * canvas.width);
let y2=Math.floor(Math.random() * canvas.height);
let x3=Math.floor(Math.random() * canvas.width);
let y3=Math.floor(Math.random() * canvas.height);
let x4=Math.floor(Math.random() * canvas.width);
let y4=Math.floor(Math.random() * canvas.height);
let x5=Math.floor(Math.random() * canvas.width);
let y5=Math.floor(Math.random() * canvas.height);
let x6=Math.floor(Math.random() * canvas.width);
let y6=Math.floor(Math.random() * canvas.height);
let x7=Math.floor(Math.random() * canvas.width);
let y7=Math.floor(Math.random() * canvas.height);
let x8=Math.floor(Math.random() * canvas.width);
let y8=Math.floor(Math.random() * canvas.height);
let x9=Math.floor(Math.random() * canvas.width);
let y9=Math.floor(Math.random() * canvas.height);
c0 = 0;
c1 = 0;
c2 = 0;
const kerroinx = 0.0025;
const kerroiny = 0.0025;
let et0,et1;
context.clearRect(0, 0, canvas.width, canvas.height); // Tyhjentää kanvaasin
// Täyttää alueen
for (let x = 0; x < canvas.width; x++) {
for (let y = 0; y < canvas.height; y++) {
xp=x0+kerroinx*x;
yp=y0+kerroiny*y;
et1=Math.sqrt((xp-x1)*(xp-x1)+(yp-y1)*(yp-y1));
et2=Math.sqrt((xp-x2)*(xp-x2)+(yp-y2)*(yp-y2));
et3=Math.sqrt((xp-x3)*(xp-x3)+(yp-y3)*(yp-y3));
et4=Math.sqrt((xp-x4)*(xp-x4)+(yp-y4)*(yp-y4));
et5=Math.sqrt((xp-x5)*(xp-x5)+(yp-y5)*(yp-y5));
et6=Math.sqrt((xp-x6)*(xp-x6)+(yp-y6)*(yp-y6));
et7=Math.sqrt((xp-x7)*(xp-x7)+(yp-y7)*(yp-y7));
et8=Math.sqrt((xp-x8)*(xp-x8)+(yp-y8)*(yp-y8));
et9=Math.sqrt((xp-x9)*(xp-x9)+(yp-y9)*(yp-y9));
let Ri=(xp+yp)*et1;
let Gi=xp*yp+et2;
let Bi=yp+et3;
let c0apu = Math.floor(255*Math.cos(Math.sin(Ri)));
let c1apu = Math.floor(255*Math.sin(Math.cos(Gi))+et4);
let c2apu = Math.floor(255*Math.sin(Math.sin(Bi)));
c0apu=(Gi+Bi)%255;
c1apu=(Gi+Ri)%255;
c2apu=(Bi+Ri)%255;
//console.log(c0apu, c1apu, c2apu);
let color = `rgba(${c0apu}, ${c1apu}, ${c2apu}, 1.0)`;
if ((Ri*Gi*Bi)<(3*128*128*128)) {
let Ri=(xp+yp)*et4;
let Gi=(xp*yp)+et5*et2;
let Bi=xp+yp+et6*et9;
let c0apu = Math.floor(255*Math.cos(Math.sin(Bi)));
let c1apu = Math.floor(255*Math.sin(Math.cos(Ri)));
let c2apu = Math.floor(255*Math.sin(Math.sin(Gi)));
c0apu=(Gi+Bi+(x*y))%255;
c1apu=(Gi+Ri)%255;
c2apu=(Bi+Ri)%255;
let color = `rgba(${c0apu}, ${c1apu}, ${c2apu}, 1.0)`;
}
drawPoint(x, y, color);
}
}
const utterance = new SpeechSynthesisUtterance(lause);
utterance.lang = 'en-US';
utterance.rate = 0.8;
speechSynthesis.speak(utterance);
const lauseElementti = document.getElementById('lause');
lauseElementti.textContent = lause;
//console.log(availableVoices);
}Aihe on jo aika vanha, joten et voi enää vastata siihen.