@angie12: wiesz co, jak otworzysz zapisany plik svg w edytorze tekstowym i przejdziesz do ścieżek (węzłów o nazwie path) to tam są współżędne dla każdej ścieżki, np taki plik (jak na załączonym obrazku) ma ścieżkę:



W atrybucie "d", masz znacznik "m", który najprawdopodobniej jest początkiem ścieżki (tak by wynikało ze współrzędnych pierwszego punktu, którym jest punkt na górze). Potem następuje znacznik "c" po którym parami są wymienione poszczególne punkty kontrolne
horus666 - @angie12: wiesz co, jak otworzysz zapisany plik svg w edytorze tekstowym i...

źródło: comment_1595945485BVK3WLsUzn8g23GicKwP7O.jpg

Pobierz
  • Odpowiedz
Szukam do płatnej współpracy gamedeva, który potrafi stworzyć grę a'la "Małysz" z klimatyczną grafiką 8/16 bit.
Więcej informacji o projekcie: https://forum.gamedev.pl/t/szukam-gamedeva-ktory-podejmie-sie-stworzenia-gry-online-w-klimacie-kultowego-malysza-deluxe-ski-jump/9242

#gamedev #javascript #canvas #gryonline
deliryc - Szukam do płatnej współpracy gamedeva, który potrafi stworzyć grę a'la "Mał...

źródło: comment_bob6wXZ2dZF7wnERb6CVqwhrOxllu8as.jpg

Pobierz
  • 4
  • Odpowiedz
  • Otrzymuj powiadomienia
    o nowych komentarzach

@kasztan70: Kiedyś widziałem interaktywną historię w html5. Była tam dziewczyna z facetem, który bronił jej przed wchodzącymi zombie, trzeba było używać broni i podejmować decyzję. Poszukaj po słowach kluczowych, może akurat ;)
  • Odpowiedz
Jaki algorytm wykorzystalibyście do stworzenia symulacji mandatów w parlamencie?
Chciałbym to zrobić w #canvas, musi być możliwość automatycznego generowania odpowiedniej ilości miejsc na podstawie danych wejściowych (user podaje wielkość parlamentu). Chodzi mi właśnie o to, jak zautomatyzować generowanie miejsc w ten sposób, żeby zawsze była odpowiednia struktura tego parlamentu (kolejne rzędy, kolorowanie miejsc po kolei wg partii etc.)

#frontend #javascript #programowanie #algorytmy
Trustm3 - Jaki algorytm wykorzystalibyście do stworzenia symulacji mandatów w parlame...

źródło: comment_rkKoIAQNivxRx6nRJFrispC52IfjV4Uq.jpg

Pobierz
  • 3
  • Odpowiedz
  • Otrzymuj powiadomienia
    o nowych komentarzach

@Trustm3: jeśli już to:
1. user podaje ilość tych kropek (miejsc) i ilość rzędów
2. wyliczyć ile kropek umieścić w każdym rzędzie żeby były umieszczone mniej więcej w takich samych odstępach (każdy rząd ma inną długość)
3. narysować kropki - wyliczyć promień dla każdego rzędu a w każdej pętli rzędu wyliczyć x,y każdej kropki za pomocą funkcji trygonometrycznych
4. kolorować można na różne sposoby, najlepiej chyba trzymać kąt odchylenia każdej kropki od 0 i według tego uzupełniać po kolei każdą
  • Odpowiedz
Jest tu jakiś spec od canvas?( ͡° ͜ʖ ͡°) Mam jeden obiekt który porusza się gdy poruszamy myszką i obiekty które generują się losowo na canvie no i tutaj jest mój problem. Gdy poruszam myszką czyszczę całą canvas dzięki temu poruszam się obiektem ale wtedy, te losowo generowane obiekty też się czyszczą, wiecie o co mi chodzi?
#javascript #canvas
  • 2
  • Odpowiedz
  • Otrzymuj powiadomienia
    o nowych komentarzach

Cześć Mirki/Mirabelki,

mam problem, chciałem zrobić coś takiego:
1. Mam divy o class np. "foo1", "foo2", "foo3"
2. Chciałbym aby zliczyło mi każdego diva który zaczyna się od "foo" i wkleiło do niego canvas o id=myCanvas1 (gdzie w miejscu "1" byłby kolejny
  • 5
  • Odpowiedz
  • Otrzymuj powiadomienia
    o nowych komentarzach

Mam takie nietypowe pytanie. Tworzę ofertę na stronę w dla małego dewelopera. Chodzi o pomysł ze stworzeniem klikalnej mapy budynku z mieszkaniami lub inwestycji z budynkami czy to w #svg czy #canvas. Właśnie o to chodzi, że z racji tego, że nie znam się na tym kompletnie, nawet nie wiem od czego tam zacząć, nie mam czasu na poznanie akurat tego tematu, chciałem to komuś zlecić, ale
  • 2
  • Odpowiedz
  • Otrzymuj powiadomienia
    o nowych komentarzach

#programowanie #webdev #angular #html #canvas
Mirki tworzę aplikację webową z planem lekcji. Plan mam już w bazie danych i chcę to "narysować" z możliwością edycji. Myślałem żeby użyć do tego tabeli, ale mój program daje możliwość wstawiania zajęć (np. basen) o różnych godzinach nie tylko wtedy gdy są lekcje. Tabela (raczej) odpada z powodu takiego, że mogę mieć nakładające się zajęcia na
Patres - #programowanie #webdev #angular #html #canvas
Mirki tworzę aplikację webową...

źródło: comment_m82eWfWzboYE6659dM9t6C6V5RO9Vf7C.jpg

Pobierz
  • 6
  • Odpowiedz
  • Otrzymuj powiadomienia
    o nowych komentarzach

@Patres aaa czyli nie wyświetlasz całego dnia, tylko plan zajęć ;)
Pewnie używasz bootstrap albo innego frameworka GUI, więc użyj klas i zrób to w kolumnach i wierszach (bez tabeli) w jakiś blokach i po prostu zajęcia dodatkowe dodawaj w blokach do tego co już masz ;) czy to po czasie czy w trakcie trwania
  • Odpowiedz
@Patres: Tak, jak @ManamanaTuriruriru napisał, użyj bootstrapa i działaj na siatce. Tzn. grid system, masz podział elementu na 12 części i różne klasy, odpowiadające różnej rozdzielczości ekranu. np.

123
4

- stworzy 3 kolumny obok siebie i czwartą pod spodem (4+4+4=12, kolejna czwóka się nie mieści, więc przechodzi do następnej linii).
  • Odpowiedz
Wklejacie do notatnika, zapisujecie jako html, otwieracie na pełnym ekranie i ewentualnie odświeżacie stronę. (ʘʘ)


body{overflow:none;background:linear-gradient(145deg,rgba(137,231,255,.8) 0,rgba(236,135,192,.8) 100%);position:relative;width:100%;margin:0 auto;z-index:-1}body:active:before{position:absolute;color:#fff;font-size:100px;content:"Proxima_Centauri";z-index:100}#centre{z-index:1;right:50%;top:50%;background-color:#000;position:absolute;margin:-50px -50px 0 100px;border-radius:40%;opacity:1;animation-name:centres;animation-duration:8s;animation-iteration-count:infinite}#centre:hover{opacity:0}@keyframes centres{0%{height:90px;width:95px;margin:-50px -50px 0 100px;transform:matrix(1,-.4,0,1,0,0);transform:rotate(0)}25%{height:80px;width:85px;margin:-45px -57px 0 100px;transform:matrix(1,-.2,-.2,1,0,.2);transform:rotate(90deg)}50%{height:85px;width:90px;margin:-40px -50px 0 100px;transform:matrix(1,0,0,1,-.2,.2);transform:rotate(180deg)}75%{height:80px;width:85px;margin:-45px -47px 0 100px;transform:matrix(1,0-.4,-.4,1,-.2,0);transform:rotate(270deg)}100%{height:90px;width:95px;margin:-50px -50px 0 100px;transform:matrix(1,0,-.2,1,0,0);transform:rotate(360deg)}}#canvas{opacity:1;background-color:rgba(0,0,0,1);cursor:wait;display:block;z-index:-100} Canvas is not supported in your browser.window.requestAnimFrame=function(){return window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||function(b){window.setTimeout(b,1E3/60)}}();var canvas=document.getElementById("canvas"),ctx=canvas.getContext("2d"),cw=window.innerWidth,ch=window.innerHeight,f=[],hue=180,a=1;canvas.width=cw;canvas.height=ch;function random(b,c){return Math.random()*(c-b)+b+Math.PI*Math.random()}function calculateDistance(b,c,d,e){return Math.sqrt(Math.pow(b-d,2)+Math.pow(c-e,2))}function E(b,c,d,e){this.x=b;this.y=c;this.sx=b;this.sy=c;this.tx=d;this.ty=e;this.distanceToTarget=calculateDistance(b,c,d,e);this.distanceTraveled=0;this.coordinates=[];for(this.coordinateCount=4;this.coordinateCount--;)this.coordinates.push([this.x,this.y]);this.angle=Math.atan2(e-c,d-b);this.speed=2;this.acceleration=1.04;this.brightness=random(50,70);this.hue=random(hue-15,hue+15)}E.prototype.update=function(b){this.coordinates.pop();this.coordinates.unshift([this.x,this.y]);this.speed*=this.acceleration;var c=Math.cos(this.angle)*this.speed,d=Math.sin(this.angle)*this.speed;this.distanceTraveled=calculateDistance(this.sx,this.sy,this.x+c,this.y+d);this.distanceTraveled>=this.distanceToTarget+cw/35?f.splice(b,1):(this.x+=c,this.y+=d)};E.prototype.draw=function(){ctx.beginPath();ctx.moveTo(this.coordinates[this.coordinates.length-1][0],this.coordinates[this.coordinates.length-1][1]);ctx.lineTo(this.x,this.y);ctx.strokeStyle="hsl("+this.hue+", 80%, "+this.brightness+"%)";ctx.stroke()};function loop(){requestAnimFrame(loop);hue+=a;if(170==hue||332==hue)a=-a;console.log(hue);ctx.globalCompositeOperation="destination-out";ctx.fillStyle="rgba(0, 0, 0, 0.5)";ctx.fillRect(0,0,cw,ch);ctx.globalCompositeOperation="lighter";for(var b=f.length;b--;)f[b].draw(),f[b].update(b);f.push(new E(cw/2+random(0,cw/160),ch/2+random(-ch/160,ch/80),cw,random(0,ch)));f.push(new
  • 4
  • Odpowiedz
  • Otrzymuj powiadomienia
    o nowych komentarzach

Mam pewien problem z pluginem html2canvas.
Output dostaję zawsze ucięty, czasami o kilka px czasami zupełnie inaczej wygląda.
Skąd to się bierze i jak temu zaradzić? #webdev #canvas

Jakiś kod będe mógł podrzucić dopiero za kilka h kiedy wyczyszczę go z identyfikującymi go elementami.
  • 2
  • Odpowiedz
  • Otrzymuj powiadomienia
    o nowych komentarzach