Zespół Szkół Ogólnokształcących w Bobowej

Zespół Szkół Ogólnokształcących w Bobowej

Zespół Szkół Ogólnokształcących w Bobowej

Zespół Szkół Ogólnokształcących w Bobowej

Zespół Szkół Ogólnokształcących w Bobowej

Zespół Szkół Ogólnokształcących w Bobowej

Zespół Szkół Ogólnokształcących w Bobowej

Zespół Szkół Ogólnokształcących w Bobowej

Zespół Szkół Ogólnokształcących w Bobowej

Zespół Szkół Ogólnokształcących w Bobowej

Zespół Szkół Ogólnokształcących w Bobowej

Zespół Szkół Ogólnokształcących w Bobowej

Zespół Szkół Ogólnokształcących w Bobowej

Zespół Szkół Ogólnokształcących w Bobowej

Zespół Szkół Ogólnokształcących w Bobowej

Zespół Szkół Ogólnokształcących w Bobowej

Zespół Szkół Ogólnokształcących w Bobowej

Zespół Szkół Ogólnokształcących w Bobowej

Zespół Szkół Ogólnokształcących w Bobowej

Zespół Szkół Ogólnokształcących w Bobowej

Zespół Szkół Ogólnokształcących w Bobowej

Zespół Szkół Ogólnokształcących w Bobowej

Zespół Szkół Ogólnokształcących w Bobowej

Czytaj więcej: JavaScript 20 - Animacja i zderzeniaObiektami SVG można zarządzać za pomocą JavaScript, co pozwala na zmianę rozmiaru, kształtu i położenia. Obliczając odległości pomiędzy nimi można także określać oddziaływania, co przydaje się do tworzenia interaktywnych prezentacji, czy gier. Napiszemy prostą grę, w której za pomocą odbijającej się kulki sterowanej klawiaturą będziemy zbijać przeszkody (cała lekcja do pobrania).

Multithumb found errors on this page:

There was a problem loading image 'pliki/js/js19usmiech.svg'
There was a problem loading image 'pliki/js/js19usmiech.svg'
There was a problem loading image 'pliki/js/tarcza.svg'
There was a problem loading image 'pliki/js/tarcza.svg'

Czytaj więcej: JavaScript 19 - SVG a CSS Czytaj więcej: JavaScript 19 - SVG a CSSObiekty SVG można poddać kontroli Kaskadowych Arkuszy Stylów CSS. Ma to duże znaczenie między innymi w tworzeniu map i diagramów, gdzie wymagana jest skalowalność obiektów bez utraty jakości Możemy też kontrolować zachowanie obiektów, na przykład po wskazaniu myszką. Tworzenie skomplikowanych kształtów może być jednak trudne, jeśli posługujemy się „pokratkowaną kartką papieru” i próbujemy ręcznie wyliczać położenie punktów. Każdy program do obróbki grafiki wektorowej, w tym też darmowy Inkscape ma możliwość wyeksportowania rysunku w postaci pliku svg. Najwygodniej jednak kopiować poszczególne krzywe i uzupełniać je o niezbędne informacje już w notatniku.

Grafika SVG na stronach internetowych jest tworzona wektorowo, a to oznacza że może być skalowana bez utraty jakości, jak to ma miejsce w grafice rastrowej, czyli w typowych fotkach. Umiejętność rysowania podstawowych figur połączymy z możliwościami, które daje animacja (pierwsze lekcje tego kursu) i stworzymy wskazówkowy zegar, pokazujący aktualny czas. Tarcza, to tylko kwadraty i koła, animacja, to zaledwie 2 znane już instrukcje. Nowością są metody, za pomocą których można "dostać się" w głąb elementu SVG. Czy uwierzycie, że to tylko 60 linijek kodu!? A więc do dzieła! (cała lekcja do pobrania)

Multithumb found errors on this page:

There was a problem loading image 'pliki/js/wiatry.svg'
There was a problem loading image 'pliki/js/wiatry.svg'

Czytaj więcej: JavaScript 17 - SVG TransformacjePodobnie jak w canvas, obiekty svg można również transformować, tzn. przesuwać, skalować i obracać (cała lekcja).

Multithumb found errors on this page:

There was a problem loading image 'pliki/js/znak.svg'
There was a problem loading image 'pliki/js/znak.svg'

Czytaj więcej: JavaScript 16 - SVG Grafika wektorowaGrafika tworzona za pomocą składni SVG jest grafiką wektorową – oznacza to, że utworzone w ten sposób obiekty można powiększać bez utraty jakości obrazu. Kiedy stosować CANVAS, a kiedy SVG? SVG, to matematyczny opis tego co znajdzie się na stronie. Canvas, to obraz składający się z pojedynczych pikseli. SVG nie powinien być wykorzystywany, gdy obraz jest skomplikowany i dynamiczny (np. gry) – procesor jest zbyt zajęty analizą obrazu (cała lekcja).

Czytaj więcej: JavaScript 15 - PikselePiksele w w obszarze canvas rezprezentowane są przez obiekt ImageData. Jest to jednowymiarowa tablica, w której każde kolejne 4 komórki reprezentują składowe [R,G,B,A]. Operacji na tym obiekcie możemy dokonywać trzema metodami: createImageData – tworzymy pusty obiekt, getImageData - pobieramy obiekt z canvas, putImageData - utworzony lub pobrany obiekt możemy ponownie umieścić w canvas. Niestety tablica pikseli jest jednowymiarowa i musimy posługiwać się dodatkowymi obliczeniami, aby „dostać się” do każdego piksela i jego składowych kolorów (cała lekcja, islandia).

var kwa=c.createImageData(256,256);
for (var y=0;y<256;y++){
for (var x=0;x<256;x++){
  var i=(x+y*256)*4;
  kwa.data[i+0]=y;
  kwa.data[i+1]=x;
  kwa.data[i+2]=y-x;
  kwa.data[i+3]=255;
}}
c.putImageData(kwa,0,0);

Za pomocą HTML i znacznika <img> potrafimy wyświetlać grafiki na stronie WWW. Wykorzystując JavaScript będziemy mogli podmieniać grafiki na inne i dokonywać wielu różnorodnych przekształceń. Służy do tego instrukcja DrawImage (cała lekcja, obrazki do lekcji). 

Potrafimy rysować geometryczne obiekty w obszarze canvas za pomocą linii, prostokątów, łuków i przeprowadzać na nich skomplikowane obliczenia niezbędne do ich animowania. Do obszaru canvas można również wczytać dowolne grafiki bitmapowe. Na początku zajmiemy się tzw efektem rollover, czyli zamianą jednego obrazka na inny po najechaniu (kliknięciu) na niego myszką (cała lekcja, obrazki), zsologo).

 

var Tnaz = new Array( 'cd','dr','fd','hd','gr','mu','kl','md','mo','my','pa','pl','po','pr','sk');
var Tobr=new Array();
for (i=0; i<Tnaz.length; i++) {
  Tobr[i] = new Array(); 
  Tobr[i][0] = new Image();
  Tobr[i][0].src='obrazki/'+Tnaz[i]+'.gif';
  Tobr[i][1] = new Image();
  Tobr[i][1].src='obrazki/'+Tnaz[i]+'_.gif'
}

Do rysowania odcinków pok kątem przygotowana została na poprzedniej lekcji funkcja ODCINEK. Wykorzystamy ją do rysowania obrotowych kwadratów, rombów i gwiazdek. (cała lekcja)

 
// KWADRAT z AKTYWNYM ŚRODKIEM
function KWAS(xs,ys,bok,kat,kol){
  var k=kat+135;
  var b=bok*Math.sqrt(2)/2;
  var x1=xs+b*Math.cos(k*Math.PI/180);
  var y1=ys-b*Math.sin(k*Math.PI/180);
  c.moveTo(x1,y1);
  var p=ODCINEK(x1,y1,bok,kat-90,kol);
  p= ODCINEK(p.x1,p.y1,bok,kat,kol);
  p= ODCINEK(p.x1,p.y1,bok,kat+90,kol);
  ODCINEK(p.x1,p.y1,bok,kat+180,kol);
}

Zestaw przykładowych zadań maturalnych zawierających rozwiązania problemów dotyczących głównie wyszukiwania i przekształcania liczb i tekstów zapisanych w plikach tekstowych.

//PALINDROMY 2010
cout << "PALINDROMY" << endl;
ifstream odczytB("palindromy2010.txt");
string napisB;
while (!odczytB.eof()){
	odczytB >> napisB;
	int dl=napisB.length();
	int dl2=dl/2;
	bool palindrom=true;
	for (int i=0;i<dl2;i++)
		if (napisB[i]!=napisB[dl-1-i]) 
			palindrom=false;
	if (palindrom) 
		cout << napisB << endl;
}
odczytB.close();

Cała lekcja

Zobacz tutaj